Colors 149

Every token in 1. Colors, Light Mode. Semantic roles only — the 385 tokens in 7. _Primitive are excluded by the primitive gate and must never be referenced directly.

Text 20

Background 33

Border 17

Icon 19

Charts 12

Opacity 18

Alpha 30

Corrections applied to the export

These five depart from the raw export for a documented accessibility reason. The export value and the measurement are kept so the deviation is never silent.

Roles added on top of the export

The export leaves these undefined, and every one covers a need that would otherwise fall back to a raw value.

Spacing, radius and widths

2. Spacing & Size 50 · 3. Radius 11 · 4. Widths 12. Components bind to the component theme token, never to a raw radius.

Spacing & size 50

Radius 11

Widths 12

Typography

5. Typography 8 tokens. The export stores weights as words and carries no line heights — both are mapped in tokens.css and listed as added roles above.

Size ramp

Component radius themes

6. Themes 8 tokens × 4 modes. Switching the control above swaps the whole set at once.

Dark mode

Dark Mode is a mode in the export, so it is emitted verbatim — 126 tokens that differ from Light. No corrections are applied and no values are invented. Switch it in the top bar.

Input field

2 sizes × 13 types × 5 states — 130 variants. Radius binds to --input = 8px in the Full theme, not the button pill. Every field is Label / Field / Hint in a 4px column.

States — md

Sizes

All 13 types

Input properties

The component set exposes 19 properties. Three are variant axes; the rest are booleans, instance swaps and text slots that toggle optional parts of the anatomy. Optional parts are authored in the markup and hidden by default, so opting in is a class — nothing re-renders.

Playground

All 19 properties

Text area

One size, 5 states. min-height: 72px, content top-aligned. Its resting border is border-secondary, not the border-primary the input field uses — that inconsistency is in the source.

OTP input

6 layouts × 3 states — 18 variants. Cells are 48px squares. Connected shares one outer border; Split is two connected groups with a rule between; Split-Rounded keeps every cell individually rounded.

Layouts

States

Checkbox & radio

Checkbox 12 variants (2 types × 2 states × checked × disabled), radio 8. Both are a 16px control; only the silhouette and the marker differ. Figma calls the indeterminate state Immediate.

Checkbox

Radio

Toggle

12 variants — 2 types × checked × 2 sizes × disabled. Every dimension derives from the track height: width 1.8×, knob 0.8×, inset 0.1×, which is exactly how the two source sizes relate.

With text

Buttons

4 sizes × 5 types × 5 states, plus error and icon-only — 216 variants. Radius binds to --button.

Sizes

Types and states smmd lgxl

Error — hover and press

Figma exposes 🚨 Error=True only at State=Default, so these two rows are derived. Each type steps through its own error surface rather than taking one blanket overlay.

Button group

2 published variants — Size=sm (32px) and Size=md (44px). The group carries its own border, pill radius and overflow clip; each child also carries a full border, and the clip trims the outer edges.

Pagination & loader

Pagination 4 types. All four share one filled track and a 40px page cell; only the prev/next treatment changes. The active page is a white cell with a border, not an inverted chip, and the page cells sit flush — the group has no gap.

Loader

Badges & chips

2 sizes × 6 types × 3 styles × 6 colors — 216 variants. Radius binds to --button, so chips stay pills alongside the buttons. This is the one component that already ships Color=Info.

Colors × styles, plus every type

Types across all three styles

Sizes

Alerts & snackbar

3 colors × 2 sizes × 5 states, plus 5 snackbars — 35 variants. Large stacks the message over its actions with a dismiss button pinned top-right; Small is a single 48px row.

Color = Default

Color = Light

Color = Solid

Snackbar

A snackbar keeps only the status icon — the surface is always bg-dark, so a toast reads the same wherever it appears. It hugs its content rather than taking a fixed width.

Banners

3 colors × 5 states — 15 variants. Full-bleed, square corners, no shadow: a banner belongs to the page edge, not to a card.

Color = Default

Color = Light

Color = Solid

Tooltip

18 variants — 2 supporting-text × 9 arrow positions, at With Style=False. The bubble is bg-alt on --radius-lg; the tail is a 12px square rotated 45° that the bubble paints over, leaving a clean triangle.

With supporting text — 280px

Title only — hugs

Breadcrumbs

3 variants. Each crumb is a Button instance — the label sits in a 20px slot with the Button's own 4px inline padding. All crumbs are medium weight; non-current paths are text-disabled and only the current one steps up to text-brand. Separators are 14px chevrons.

Avatar

18 variants — 6 sizes × 3 content treatments. Size is the exact Figma value and drives the square dimension; Icon Only, Image / Memoji and Text Only are mutually exclusive.

Group

Calender

3 variants. Source spelling preserved — the Figma component is Calender. Header, calendar and footer stack vertically; the header is a pill-shaped selector on bg-secondary, day cells are 40px pills on --button, and the footer carries Cancel / Apply.

Content divider

5 types. The rule is drawn with pseudo-elements, so a divider with centre content needs no extra markup.