Edit Design Token

Name

Also known as (comma separated)

Brief definition Named reusable design value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Token name", "default": "space-4" }, { "id": "value", "type": "number", "label": "Token value (px)", "default": 16, "min": 0, "max": 64, "step": 2 }, { "id": "appliesTo", "type": "select", "label": "Applies to", "default": "spacing", "options": [ "spacing", "radius", "font-size" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dtok dtok--{{appliesTo}}\">\n <code class=\"dtok__code\">--{{name}}: {{value}}px;</code>\n <div class=\"dtok__preview dtok__preview--spacing\"><span class=\"dtok__bar\" style=\"width:{{value}}px;background:{{accent}};\"></span></div>\n <div class=\"dtok__preview dtok__preview--radius\"><span class=\"dtok__box\" style=\"border-radius:{{value}}px;background:{{accent}};\"></span></div>\n <div class=\"dtok__preview dtok__preview--font-size\"><span style=\"font-size:{{value}}px;color:{{accent}};\">Aa</span></div>\n</div>\n<style>\n.dtok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; }\n.dtok__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }\n.dtok__preview { display: none; height: 72px; align-items: center; }\n.dtok--spacing .dtok__preview--spacing, .dtok--radius .dtok__preview--radius, .dtok--font-size .dtok__preview--font-size { display: flex; }\n.dtok__bar { display: block; height: 18px; border-radius: 4px; max-width: 100%; }\n.dtok__box { display: block; width: 64px; height: 64px; }\n</style>", "tailwind": "<div class=\"dtoktw dtoktw--{{appliesTo}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border\">\n <code class=\"block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono\">--{{name}}: {{value}}px;</code>\n <div class=\"dtoktw__preview dtoktw__preview--spacing hidden h-[72px] items-center\"><span class=\"block h-[18px] rounded max-w-full\" style=\"width:{{value}}px;background:{{accent}};\"></span></div>\n <div class=\"dtoktw__preview dtoktw__preview--radius hidden h-[72px] items-center\"><span class=\"block w-16 h-16\" style=\"border-radius:{{value}}px;background:{{accent}};\"></span></div>\n <div class=\"dtoktw__preview dtoktw__preview--font-size hidden h-[72px] items-center\"><span style=\"font-size:{{value}}px;color:{{accent}};\">Aa</span></div>\n</div>\n<style>\n.dtoktw--spacing .dtoktw__preview--spacing, .dtoktw--radius .dtoktw__preview--radius, .dtoktw--font-size .dtoktw__preview--font-size { display: flex; }\n</style>", "react": "export function DesignToken({\n name = \"{{name}}\",\n value = {{value}},\n appliesTo = \"{{appliesTo}}\",\n accent = \"{{accent}}\",\n}) {\n let preview;\n if (appliesTo === \"spacing\") preview = <span style={{ display: \"block\", height: 18, width: value, maxWidth: \"100%\", borderRadius: 4, background: accent }} />;\n else if (appliesTo === \"radius\") preview = <span style={{ display: \"block\", width: 64, height: 64, borderRadius: value, background: accent }} />;\n else preview = <span style={{ fontSize: value, color: accent }}>Aa</span>;\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\" }}>\n <code style={{ display: \"block\", marginBottom: 14, padding: \"8px 10px\", background: \"#24143012\", borderRadius: 6, font: \"12px/1.4 ui-monospace, monospace\" }}>--{name}: {value}px;</code>\n <div style={{ height: 72, display: \"flex\", alignItems: \"center\" }}>{preview}</div>\n </div>\n );\n}" }