Edit Visual Weight

Name

Also known as (comma separated)

Brief definition Perceived prominence of an element.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "weight", "type": "select", "label": "Visual weight", "default": "heavy", "options": [ "light", "regular", "heavy" ] }, { "id": "text", "type": "text", "label": "Label", "default": "Continue" }, { "id": "accent", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#E8A020", "#A8E6C1" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"vw-wrap\" data-weight=\"{{weight}}\" style=\"--accent:{{accent}};\">\n <button type=\"button\" class=\"vw-chip\" style=\"border-radius:{{radius}}px;\">{{text}}</button>\n <p class=\"vw-caption\">visual weight: {{weight}}</p>\n</div>\n<style>\n.vw-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 260px; }\n.vw-chip { border: 1.5px solid var(--accent); cursor: pointer; font-family: inherit; }\n[data-weight=\"light\"] .vw-chip { background: transparent; color: var(--accent); font-weight: 400; font-size: 12px; padding: 6px 12px; border-color: #24143033; }\n[data-weight=\"regular\"] .vw-chip { background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; padding: 9px 16px; }\n[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); }\n.vw-caption { margin: 14px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"vw-tw font-sans text-[#241430] w-[260px]\" data-weight=\"{{weight}}\" style=\"--accent:{{accent}};\">\n <button type=\"button\" class=\"vw-tw-chip border-[1.5px] cursor-pointer\" style=\"border-radius:{{radius}}px;\">{{text}}</button>\n <p class=\"mt-3.5 text-xs text-[#241430]/80\">visual weight: {{weight}}</p>\n</div>\n<style>\n.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; }\n.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); }\n.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); }\n</style>", "react": "export function VisualWeight({\n weight = \"{{weight}}\",\n text = \"{{text}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n}) {\n const styles = {\n light: { background: \"transparent\", color: accent, fontWeight: 400, fontSize: 12, padding: \"6px 12px\", borderColor: \"#24143033\", boxShadow: \"none\" },\n regular: { background: \"transparent\", color: accent, fontWeight: 600, fontSize: 14, padding: \"9px 16px\", borderColor: accent, boxShadow: \"none\" },\n heavy: { background: accent, color: \"#FAF7F2\", fontWeight: 800, fontSize: 16, padding: \"13px 22px\", borderColor: accent, boxShadow: \"0 6px 16px rgba(36,20,48,.3)\" },\n }[weight];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 260 }}>\n <button type=\"button\" style={{ border: \"1.5px solid\", cursor: \"pointer\", fontFamily: \"inherit\", borderRadius: radius, ...styles }}>\n {text}\n </button>\n <p style={{ marginTop: 14, fontSize: 12, color: \"#241430cc\" }}>visual weight: {weight}</p>\n </div>\n );\n}" }