Fix your design with System.
A modern design system for tokens, components, icons, and effects. Browse the library, switch themes, and jump into any playground.
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.
Iconography
Our custom icon library containing 700+ icons across 4 distinct visual styles. Click any icon to copy its component code.
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
Segment Control
Used to toggle between closely related views or filter states. Features interactive hover rings and semantic token mapping.
Segment Control
File Components
Interactive file upload zones, status indicators, and file list items structurally matched to the provided React codebase.
File Uploader
Date Components
Interactive calendar cells and date indicators, mapped cleanly to the design system's theme and brand colors.
Calendar Cell
Input Components
Building blocks used to construct form inputs, dropdowns, and other data entry components.
Label Set
Avatar Components
Visual representations of users, entities, status indicators, and stacked groups.
Avatar
Badges
Status dot, pill, and badge variants synchronized from the Figma component properties, including palette, size, and content options.
Badge
Props
Usage
Core Components
Interactive component implementations based on Figma’s native variants, properties, spacing, and typography tokens.
Rating
Props
Usage
Overlays & Lists
Status, links, overlays, and list patterns implemented from their native Figma component variants.
Status Indicator
Props
Usage
Keyboard Shortcuts
Visual representations of keyboard commands, used extensively in menus, tooltips, and shortcut guides.