Guidelines
How the LUSTER design system is structured — the three-tier token architecture, the switchable theme axes, and the mode-by-mode export that turns them into ready-to-use CSS.
Three-Tier Model
Every value flows through three layers — a raw primitive is given meaning, then applied to a component. Using border-radius as an example:
Tier 1 · Foundation (Option)
Raw primitive values with no semantic meaning — the building blocks, held in the Option / Options collections.
e.g. border/radius/8 · Spacing/16 · shadows/4
Tier 2 · Semantic
Named tokens that reference a foundation value and add intent — what it is for. Held in the Semantic collections (and theme layers).
e.g. --borderRadiusSm · Spacing/5xl · shadow/lg
Tier 3 · Component
Component-specific tokens that bind a semantic value to a real component, often with switchable modes. Held in the Component collections.
e.g. Component Radius / button · Component Shadow / section
Token Collections
Six token families, each implemented as three Figma variable collections — one per tier. Counts are the live variable totals in the LUSTER file.
| Family | Foundation inputs | Tier 1 · Foundation | Tier 2 · Semantic | Tier 3 · Component |
|---|---|---|---|---|
| Color | Bg · Text · Border · Shadow colors | Options Color · 200 | Color Theme · 342 | Component Brand · 210 |
| Effects | Shadow-x · Shadow-y · Blur | Option Effects · 8 | Semantic Effects · 8 | Component Shadow · 3 |
| Density | Margin · Gap · Padding | Option Density · 17 | Semantic Density · 16 | Component Density · 65 |
| Radius | Border Radius | Option Radius · 8 | Semantic Radius · 8 | Component Radius · 18 |
| Global | Border Width | Options Global · 14 | Semantic Global · 14 | Component Global · 15 |
| Typography | Font family · size · weight · lineHeight | Options Typography · 20 | Typography Theme · 30 | Language Theme · 64 |
Theme Axes
LUSTER themes on seven independent axes. Each is a switchable mode in a Figma collection — flip one and every bound component updates at once.
| Axis | Modes | What Changes | Collection |
|---|---|---|---|
| Brand | Amber · Diamond · Opal | Brand colour identity | Component Brand |
| Appearance | Light · Dark | Surface & text colours | Color Theme |
| Language | EN · AR | Direction (LTR/RTL) | Language Theme |
| Typography | Serif · Sans Serif | Font family pairing | Typography Theme |
| Radius | Square · Round · Pills | Corner personality | Component Radius |
| Elevation | Flat · Subtle · Default · Raised | Shadow depth | Component Shadow |
| Density | Comfortable · Compact | Spacing tightness | Component Density |
Brand & Appearance
Three brand identities (see Colors) — and each brand ships in both Light and Dark appearance modes via the Color Theme collection.
Language & Typography
Two independent axes: the Language Theme switches script and direction (EN/LTR ↔ AR/RTL), and the Typography Theme switches the font pairing (Sans Serif ↔ Serif). English pairs Inter / Domine; Arabic pairs Cairo / IBM Plex Sans Arabic.
Radius Modes
Square (0), Round (per-component) and Pills (up to 40px). Full map on Border Radius & Width.
Density Modes
The Component Density collection tightens or relaxes component padding and spacing. Comfortable suits spacious desktop layouts; Compact suits data-dense views.
Elevation Modes
The Component Shadow collection composes offset + blur from the shadow scale into four elevation modes. See Elevation & Shadows for the full scale.
Export is driven by the theme structure: each axis bundles its Foundation → Semantic → Component tiers and exports one CSS file per mode. Twenty files cover every combination.