Typography
Typography is part of the overall visual language you use to communicate with your users. In the typographic system, individual unique names have been specified as design tokens.
Geist
Grid System
Responsive layout definitions controlling margins, gutters, and columns for structural consistency.
| Token Name | Value | Figma Variable |
|---|
Corner Radius
Semantic corner rounding values applied to surfaces and components.
Spacing
Fixed primitive values used for padding, margins, and gap layouts. Measured strictly in pixels.
Color Primitives
Core palette and expressive tints configured seamlessly for Saturated and Muted palettes.
Semantic Tokens
Context-specific functional aliases defining surface, state, button, and text colours. Dynamic mapping based on brand, theme mode, and palette.
Effects & Shadows
Elevation, inner shadows, and blur effects mapped to the semantic token system to create structural depth and hierarchy.
Checkbox Components
Interactive selection components encompassing boolean states, indeterminate modes, and semantic focus rings matching the design system.
Checkbox
Radio Button
Interactive selection controls allowing a user to select one option from a set.
Radio Button
Toggle Switch
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Toggle Switch
File Components
Interactive file upload zones, status indicators, and file list items structurally matched to the provided React codebase.
File Uploader
Avatar Components
Visual representations of users, entities, status indicators, and stacked groups.