Designers
The Figma library and this site are built from the same tokens/tokens.json. A token has the same name in Figma, in code and on this site, so a designer and a developer can point at the same thing.
Variable collections
| Collection | Modes | Holds |
|---|---|---|
| Primitives | One mode | Every ramp and single color: neutral/950, lime/300, orange/500 |
| Semantic | SuperCoach, Coach | Color tokens that alias primitives: primary, muted-foreground, destructive-subtle |
| Scale | One mode | Spacing, radius, font sizes, weights, line heights, letter spacing |
Design with Semantic variables only. Switch a frame between products by changing its Semantic mode; nothing else changes. Primitives are for the library maintainers.
Naming
Names follow the path in tokens.json, which is also the "Figma name" shown on every token page:
primitives/lime-300→ Figmalime/300in Primitivessemantic/primary→primaryin Semantic, with a value per moderadius/lg,spacing/4,font-size/smin Scale
Styles
- Text styles pair a size with its weight, line height and tracking (see Typography). Make an Arabic variant of each in Lama Sans.
- Effect styles hold the six shadows (
shadow/xstoshadow/2xl). Figma variables can't hold shadows.
Design at 16px
Use the 16px values on this site. coach-admin currently renders everything 15% smaller; that is a code issue, not a design one.
Designing for RTL
- Build with auto layout, so a frame can be flipped to right-to-left.
- Check every new screen in Arabic: Arabic text runs about 20 to 30% shorter in width but taller in line height.
- Mark which icons mirror (see Iconography).
Before handoff
- Every color is a Semantic variable; no hex values, no primitives.
- Every spacing and radius is on the scale.
- The screen is checked in both modes (SuperCoach, Coach) and both directions.
- Text contrast passes; check new pairs against the contrast matrix.
Related: Developers, Tokens.