Foundations
Tokens
How a Figma variable becomes a CSS variable and a Tailwind utility with the same name, and why modes switch variables, not classes.
Every color, size, radius, space, type style, shadow and duration in Ritla UI comes from a token. Components never hard-code a value, which is what lets a theme change the look without changing a line of layout, and what keeps the Figma file and the code from drifting apart.
One name from Figma to code#
The theme's Figma variables are the source. A build turns them into CSS variables and Tailwind utilities, and a utility's name is the Figma variable's path without its top-level group, so a designer and a developer say the same word.
| Figma variable | CSS variable | Tailwind utility |
|---|---|---|
background/surface/lowest | --kanz-background-surface-lowest | bg-surface-lowest |
text/gray/txt-primary | --kanz-text-gray-txt-primary | text-gray-txt-primary |
border/gray/soft | --kanz-border-gray-soft | border-gray-soft |
space-16 | --kanz-space-16 | p-16, gap-16, ms-16 |
radius/8 | --kanz-radius-8 | rounded-8, rounded-s-8 |
body-14 (text style) | size, line height and tracking | text-body-14 |
Spacing utilities are named in pixels (p-16 is 16px of padding), and only the steps the theme defines exist. Tailwind's default palette and scale are removed, so a class like bg-red-500 or text-sm produces nothing rather than a value off the system.
Light, dark and Arabic switch variables, not classes#
Light and dark modes, and English and Arabic, are modes of the same variables. Switching one changes what the variables resolve to; the classes on a component stay the same. That is why no component carries a dark: variant, and why Arabic text gets its own font family, taller line heights and zero letter-spacing without a single rtl: class.
Logical by construction#
Every direction-sensitive utility is logical: ms-16 and me-16 for margins, ps-16 and pe-16 for padding, start-0 and end-0 for position, border-s and rounded-s-8 for edges. There is no physical ml-* or pl-* to reach for. See RTL principles for why.
Where the tokens come from#
The Kanz theme's variables live in its Figma file. A snapshot of them becomes a W3C design tokens file, and Style Dictionary builds the CSS variables and the Tailwind theme from it. The Kanz theme page shows the color ramps and type as the build produced them.