Edit Design Primitive

Name

Also known as (comma separated)

Brief definition Fundamental visual/interaction building block.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "primitive", "type": "select", "label": "Primitive", "default": "box", "options": [ "box", "text", "icon" ] }, { "id": "size", "type": "number", "label": "Size (px)", "default": 48, "min": 24, "max": 96, "step": 4 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showComposedInto", "type": "toggle", "label": "Show what it composes into", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"prim prim--{{primitive}}\">\n <div class=\"prim__shape prim__shape--box\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}};\"></div>\n <div class=\"prim__shape prim__shape--text\" style=\"font-size:{{size}}px;color:{{accent}};\">Aa</div>\n <div class=\"prim__shape prim__shape--icon\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}};\"></div>\n {{#if showComposedInto}}\n <p class=\"prim__composed prim__composed--box\">Box &rarr; composes into Card, Panel, Avatar frame</p>\n <p class=\"prim__composed prim__composed--text\">Text &rarr; composes into Label, Heading, Caption</p>\n <p class=\"prim__composed prim__composed--icon\">Icon &rarr; composes into Button icon, Status dot</p>\n {{/if}}\n</div>\n<style>\n.prim { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; text-align: center; }\n.prim__shape { display: none; margin: 0 auto 14px; }\n.prim__shape--box { border-radius: 10px; }\n.prim__shape--icon { border-radius: 50%; }\n.prim__shape--text { font-weight: 700; }\n.prim--box .prim__shape--box, .prim--text .prim__shape--text, .prim--icon .prim__shape--icon { display: block; }\n.prim__composed { display: none; margin: 0; font-size: 12px; color: #24143099; }\n.prim--box .prim__composed--box, .prim--text .prim__composed--text, .prim--icon .prim__composed--icon { display: block; }\n</style>", "tailwind": "<div class=\"primtw primtw--{{primitive}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border text-center\">\n <div class=\"primtw__shape primtw__shape--box hidden mx-auto mb-3.5 rounded-[10px]\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}};\"></div>\n <div class=\"primtw__shape primtw__shape--text hidden mx-auto mb-3.5 font-bold\" style=\"font-size:{{size}}px;color:{{accent}};\">Aa</div>\n <div class=\"primtw__shape primtw__shape--icon hidden mx-auto mb-3.5 rounded-full\" style=\"width:{{size}}px;height:{{size}}px;background:{{accent}};\"></div>\n {{#if showComposedInto}}\n <p class=\"primtw__composed primtw__composed--box hidden m-0 text-xs text-[#24143099]\">Box &rarr; composes into Card, Panel, Avatar frame</p>\n <p class=\"primtw__composed primtw__composed--text hidden m-0 text-xs text-[#24143099]\">Text &rarr; composes into Label, Heading, Caption</p>\n <p class=\"primtw__composed primtw__composed--icon hidden m-0 text-xs text-[#24143099]\">Icon &rarr; composes into Button icon, Status dot</p>\n {{/if}}\n</div>\n<style>\n.primtw--box .primtw__shape--box, .primtw--text .primtw__shape--text, .primtw--icon .primtw__shape--icon { display: block; }\n.primtw--box .primtw__composed--box, .primtw--text .primtw__composed--text, .primtw--icon .primtw__composed--icon { display: block; }\n</style>", "react": "export function DesignPrimitive({\n primitive = \"{{primitive}}\",\n size = {{size}},\n accent = \"{{accent}}\",\n showComposedInto = {{showComposedInto}},\n}) {\n const composed = {\n box: \"Box \\u2192 composes into Card, Panel, Avatar frame\",\n text: \"Text \\u2192 composes into Label, Heading, Caption\",\n icon: \"Icon \\u2192 composes into Button icon, Status dot\",\n }[primitive];\n const shape = primitive === \"text\"\n ? <div style={{ fontSize: size, color: accent, fontWeight: 700, margin: \"0 auto 14px\" }}>Aa</div>\n : <div style={{ width: size, height: size, background: accent, margin: \"0 auto 14px\", borderRadius: primitive === \"icon\" ? \"50%\" : 10 }} />;\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 260, boxSizing: \"border-box\", textAlign: \"center\" }}>\n {shape}\n {showComposedInto && <p style={{ margin: 0, fontSize: 12, color: \"#24143099\" }}>{composed}</p>}\n </div>\n );\n}" }