Edit Design System

Name

Also known as (comma separated)

Brief definition Reusable components, patterns, rules and tokens.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "colorToken", "type": "color", "label": "Colour token", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radiusToken", "type": "number", "label": "Radius token (px)", "default": 12, "min": 0, "max": 24, "step": 2 }, { "id": "spacingToken", "type": "number", "label": "Spacing token (px)", "default": 16, "min": 8, "max": 32, "step": 4 }, { "id": "preview", "type": "select", "label": "Component preview", "default": "button", "options": [ "button", "card" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dsys\" role=\"img\" aria-label=\"Design system tokens feeding a {{preview}} component\">\n <div class=\"dsys__tokens\">\n <div class=\"dsys__token\"><span class=\"dsys__swatch\" style=\"background:{{colorToken}};\"></span>colour</div>\n <div class=\"dsys__token\"><span class=\"dsys__swatch\" style=\"border-radius:{{radiusToken}}px;\"></span>radius</div>\n <div class=\"dsys__token\"><span class=\"dsys__swatch\" style=\"width:{{spacingToken}}px;\"></span>spacing</div>\n </div>\n <span class=\"dsys__arrow\" aria-hidden=\"true\">&rarr;</span>\n <div class=\"dsys__preview dsys__preview--button\" style=\"background:{{colorToken}};border-radius:{{radiusToken}}px;padding:{{spacingToken}}px;\">Button</div>\n <div class=\"dsys__preview dsys__preview--card\" style=\"border-radius:{{radiusToken}}px;padding:{{spacingToken}}px;border-top:6px solid {{colorToken}};\">Card</div>\n</div>\n<style>\n.dsys { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; }\n.dsys__tokens { display: flex; flex-direction: column; gap: 6px; }\n.dsys__token { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #24143099; }\n.dsys__swatch { display: inline-block; width: 18px; height: 18px; background: #24143018; flex-shrink: 0; }\n.dsys__arrow { font-size: 18px; color: #24143060; }\n.dsys__preview { display: none; font-weight: 600; text-align: center; background: #ffffff; box-sizing: border-box; flex: 1; }\n.dsys__preview--button { color: #241430; }\n.dsys--x { }\n.dsys__preview--button { display: none; }\n.dsys__preview--card { display: none; }\n.dsys.dsys--button .dsys__preview--button, .dsys.dsys--card .dsys__preview--card { display: block; }\n</style>", "tailwind": "<div class=\"dsystw dsystw--{{preview}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border flex items-center gap-3\" role=\"img\" aria-label=\"Design system tokens feeding a {{preview}} component\">\n <div class=\"flex flex-col gap-1.5\">\n <div class=\"flex items-center gap-1.5 text-[11px] text-[#24143099]\"><span class=\"inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0\" style=\"background:{{colorToken}};\"></span>colour</div>\n <div class=\"flex items-center gap-1.5 text-[11px] text-[#24143099]\"><span class=\"inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0\" style=\"border-radius:{{radiusToken}}px;\"></span>radius</div>\n <div class=\"flex items-center gap-1.5 text-[11px] text-[#24143099]\"><span class=\"inline-block w-[18px] h-[18px] bg-[#24143018] shrink-0\" style=\"width:{{spacingToken}}px;\"></span>spacing</div>\n </div>\n <span class=\"text-lg text-[#24143060]\" aria-hidden=\"true\">&rarr;</span>\n <div class=\"dsystw__preview dsystw__preview--button hidden flex-1 text-center font-semibold bg-white box-border\" style=\"background:{{colorToken}};border-radius:{{radiusToken}}px;padding:{{spacingToken}}px;\">Button</div>\n <div class=\"dsystw__preview dsystw__preview--card hidden flex-1 text-center font-semibold bg-white box-border\" style=\"border-radius:{{radiusToken}}px;padding:{{spacingToken}}px;border-top:6px solid {{colorToken}};\">Card</div>\n</div>\n<style>\n.dsystw--button .dsystw__preview--button, .dsystw--card .dsystw__preview--card { display: block; }\n</style>", "react": "export function DesignSystem({\n colorToken = \"{{colorToken}}\",\n radiusToken = {{radiusToken}},\n spacingToken = {{spacingToken}},\n preview = \"{{preview}}\",\n}) {\n return (\n <div role=\"img\" aria-label={`Design system tokens feeding a ${preview} component`} style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 12 }}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 11, color: \"#24143099\" }}><span style={{ display: \"inline-block\", width: 18, height: 18, background: colorToken, flexShrink: 0 }} />colour</div>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 11, color: \"#24143099\" }}><span style={{ display: \"inline-block\", width: 18, height: 18, background: \"#24143018\", borderRadius: radiusToken, flexShrink: 0 }} />radius</div>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 11, color: \"#24143099\" }}><span style={{ display: \"inline-block\", width: spacingToken, height: 18, background: \"#24143018\", flexShrink: 0 }} />spacing</div>\n </div>\n <span style={{ fontSize: 18, color: \"#24143060\" }} aria-hidden=\"true\">&rarr;</span>\n {preview === \"button\"\n ? <div style={{ flex: 1, textAlign: \"center\", fontWeight: 600, boxSizing: \"border-box\", background: colorToken, borderRadius: radiusToken, padding: spacingToken }}>Button</div>\n : <div style={{ flex: 1, textAlign: \"center\", fontWeight: 600, boxSizing: \"border-box\", background: \"#ffffff\", borderRadius: radiusToken, padding: spacingToken, borderTop: `6px solid ${colorToken}` }}>Card</div>}\n </div>\n );\n}" }