Tokens and components, as code
Every color, size, radius, type style, shadow and duration on this page comes from one token object. The components below are rendered by JavaScript from that object, in five states each, and the theme toggle swaps only the token values.
Color
Accent fills are identical in both themes. Neutrals, soft tints and the text variants swap. Text in an accent color uses coralText, greenText or yellowText (AA on bg, card and the soft tints). Text on an accent fill uses the on-color tokens, ink in both themes. borderStrong outlines inputs at 3:1.
Light
Dark
Spacing and radii
Spacing runs on a 4 px base. Radii: sm for inputs and chips, md for cards inside cards, lg for top-level cards and sheets, pill for buttons and badges.
Spacing
Radius
Typography
Space Grotesk for display and headlines, Inter for body and labels. Nine named text styles map onto the size and line-height scales.
Shadows and motion
Two elevations, cards and sheets. Buttons are flat. Shadow objects carry React Native fields (color, opacity, offset, blur, elevation) and are converted to CSS here. Durations and easings are the same ones used by the stylescape's motion motif.