Edit Typography Token

Name

Also known as (comma separated)

Brief definition Named typography value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Token name", "default": "heading-lg" }, { "id": "sizeValue", "type": "number", "label": "Font size (px)", "default": 24, "min": 12, "max": 40, "step": 2 }, { "id": "weight", "type": "select", "label": "Weight", "default": "bold", "options": [ "regular", "medium", "bold" ] }, { "id": "accent", "type": "color", "label": "Text colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"typok\">\n <code class=\"typok__code\">--{{name}}: {{weight}} {{sizeValue}}px;</code>\n <p class=\"typok__sample typok__sample--regular\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n <p class=\"typok__sample typok__sample--medium\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n <p class=\"typok__sample typok__sample--bold\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n</div>\n<style>\n.typok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.typok__code { display: block; margin-bottom: 16px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 11px/1.4 ui-monospace, monospace; }\n.typok__sample { display: none; margin: 0; }\n.typok--x{}\n.typok .typok__sample--regular { font-weight: 400; }\n.typok .typok__sample--medium { font-weight: 600; }\n.typok .typok__sample--bold { font-weight: 800; }\n.typok--regular .typok__sample--regular, .typok--medium .typok__sample--medium, .typok--bold .typok__sample--bold { display: block; }\n</style>", "tailwind": "<div class=\"typoktw typoktw--{{weight}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\">\n <code class=\"block mb-4 px-2.5 py-2 bg-[#24143012] rounded-md text-[11px] font-mono\">--{{name}}: {{weight}} {{sizeValue}}px;</code>\n <p class=\"typoktw__sample typoktw__sample--regular hidden m-0 font-normal\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n <p class=\"typoktw__sample typoktw__sample--medium hidden m-0 font-semibold\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n <p class=\"typoktw__sample typoktw__sample--bold hidden m-0 font-extrabold\" style=\"font-size:{{sizeValue}}px;color:{{accent}};\">Sample text</p>\n</div>\n<style>\n.typoktw--regular .typoktw__sample--regular, .typoktw--medium .typoktw__sample--medium, .typoktw--bold .typoktw__sample--bold { display: block; }\n</style>", "react": "export function TypographyToken({\n name = \"{{name}}\",\n sizeValue = {{sizeValue}},\n weight = \"{{weight}}\",\n accent = \"{{accent}}\",\n}) {\n const fontWeight = { regular: 400, medium: 600, bold: 800 }[weight];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <code style={{ display: \"block\", marginBottom: 16, padding: \"8px 10px\", background: \"#24143012\", borderRadius: 6, font: \"11px/1.4 ui-monospace, monospace\" }}>--{name}: {weight} {sizeValue}px;</code>\n <p style={{ margin: 0, fontSize: sizeValue, color: accent, fontWeight }}>Sample text</p>\n </div>\n );\n}" }