Visual Weight

Perceived prominence of an element.

html

<div class="vw-wrap" data-weight="heavy" style="--accent:#241430;">
  <button type="button" class="vw-chip" style="border-radius:10px;">Continue</button>
  <p class="vw-caption">visual weight: heavy</p>
</div>
<style>
.vw-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 260px; }
.vw-chip { border: 1.5px solid var(--accent); cursor: pointer; font-family: inherit; }
[data-weight="light"] .vw-chip { background: transparent; color: var(--accent); font-weight: 400; font-size: 12px; padding: 6px 12px; border-color: #24143033; }
[data-weight="regular"] .vw-chip { background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; padding: 9px 16px; }
[data-weight="heavy"] .vw-chip { background: var(--accent); color: #FAF7F2; font-weight: 800; font-size: 16px; padding: 13px 22px; box-shadow: 0 6px 16px rgba(36,20,48,.3); }
.vw-caption { margin: 14px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="vw-tw font-sans text-[#241430] w-[260px]" data-weight="heavy" style="--accent:#241430;">
  <button type="button" class="vw-tw-chip border-[1.5px] cursor-pointer" style="border-radius:10px;">Continue</button>
  <p class="mt-3.5 text-xs text-[#241430]/80">visual weight: heavy</p>
</div>
<style>
.vw-tw[data-weight="light"] .vw-tw-chip { background: transparent; color: var(--accent); font-weight: 400; font-size: 12px; padding: 6px 12px; border-color: #24143033; }
.vw-tw[data-weight="regular"] .vw-tw-chip { background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; padding: 9px 16px; border-color: var(--accent); }
.vw-tw[data-weight="heavy"] .vw-tw-chip { background: var(--accent); color: #FAF7F2; font-weight: 800; font-size: 16px; padding: 13px 22px; border-color: var(--accent); box-shadow: 0 6px 16px rgba(36,20,48,.3); }
</style>

react

export function VisualWeight({
  weight = "heavy",
  text = "Continue",
  accent = "#241430",
  radius = 10,
}) {
  const styles = {
    light: { background: "transparent", color: accent, fontWeight: 400, fontSize: 12, padding: "6px 12px", borderColor: "#24143033", boxShadow: "none" },
    regular: { background: "transparent", color: accent, fontWeight: 600, fontSize: 14, padding: "9px 16px", borderColor: accent, boxShadow: "none" },
    heavy: { background: accent, color: "#FAF7F2", fontWeight: 800, fontSize: 16, padding: "13px 22px", borderColor: accent, boxShadow: "0 6px 16px rgba(36,20,48,.3)" },
  }[weight];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", width: 260 }}>
      <button type="button" style={{ border: "1.5px solid", cursor: "pointer", fontFamily: "inherit", borderRadius: radius, ...styles }}>
        {text}
      </button>
      <p style={{ marginTop: 14, fontSize: 12, color: "#241430cc" }}>visual weight: {weight}</p>
    </div>
  );
}