# How do you design CSS tokens that scale across themes?

**URL:** <https://forum.kirupa.com/t/how-do-you-design-css-tokens-that-scale-across-themes/679832>\
**Category:** web dev\
**Created:** [April 1, 2026, 9:00pm UTC](https://forum.kirupa.com/t/how-do-you-design-css-tokens-that-scale-across-themes/679832 "2026-04-01T21:00:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 1, 2026, 9:00pm UTC](https://forum.kirupa.com/t/how-do-you-design-css-tokens-that-scale-across-themes/679832/1 "2026-04-01T21:00:07Z")

</div>

Design tokens often start clean and then become messy. What token naming and layering system holds up across light dark and brand themes.

WaffleFries

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 1, 2026, 9:14pm UTC](https://forum.kirupa.com/t/how-do-you-design-css-tokens-that-scale-across-themes/679832/2 "2026-04-01T21:14:08Z")

</div>

Use three layers: raw palette, semantic aliases like `surface` and `text-muted`, and component tokens, because dark mode usually breaks when brand names leak into semantics.

```css
:root { --color-gray-900:#111; --color-gray-50:#fafafa; --surface:var(--color-gray-50); --text:var(--color-gray-900); }
[data-theme="dark"] { --surface:var(--color-gray-900); --text:var(--color-gray-50); }
.button { --button-bg:var(--surface); color:var(--text); }

```

Hari 😀