Getting Started

Overview

65 entries

Browse the complete design system in one place—from Color and Typography through production Components and composed Patterns.

View all

65 entries across 4 sections

FoundationsPermalink to this section

The visual and behavioral decisions every token and component inherits.

Color

Brand, neutral, status, surface, text, and interaction colour roles.

Foundations

Typography

Font families, hierarchy, weights, line heights, and tracking.

Foundations

Spacing

The spacing scale, layout rhythm, control padding, and density rules.

Foundations

Grid and layout

Containers, responsive breakpoints, grids, and page composition.

Foundations

Radius

Corner hierarchy and the rules for default, soft, and pill shapes.

Foundations

Borders

Structural strokes, dividers, control borders, and focus outlines.

Foundations

Elevation

Shadow levels and the surfaces allowed to visually float.

Foundations

Icons

Lucide sizing, stroke treatment, alignment, and accessible naming.

Foundations

Motion

Duration, easing, choreography, and reduced-motion behavior.

Foundations

Accessibility

Keyboard, focus, contrast, semantics, touch targets, and WCAG guidance.

Foundations

TokensPermalink to this section

The named contracts that turn foundation decisions into reusable code.

Token architecture

How primitive, semantic, and component tokens depend on one another.

Tokens

Primitive tokens

Raw palette, spacing, radius, typography, elevation, and motion scales.

Tokens

Semantic tokens

Intent-based aliases for surfaces, content, actions, and status roles.

Tokens

Component tokens

Stable per-component contracts that inherit from semantic intent.

Tokens

CSS variables

Generated CSS custom properties and their Tailwind theme mappings.

Tokens

ComponentsPermalink to this section

Production primitives with typed APIs, states, and accessibility behavior.

Button

Triggers an action with six semantic variants and optional token-driven material depth.

Actions

Icon Button

A button whose whole label is an icon, always carrying an accessible name.

Actions

Link

Navigates. Three variants for running text, navigation lists and utility links.

Actions

Toggle Group

Coordinates single or multiple pressed options with roving keyboard focus.

Actionsnew

Label

A visible, programmatically-associated name for a form control.

Forms

Input

A single-line text field, and the states every other form control follows.

Forms

Textarea

A multi-line text field for longer answers, with optional character counting.

Forms

Select

Choose one option from a known list, with typeahead and full keyboard support.

Forms

Combobox

Search and select one option from a long static or asynchronous dataset.

Formsnew

Checkbox

Selects zero or more options, including the mixed state for partial groups.

Forms

Radio Group

Choose exactly one option from a small set shown at the same time.

Formsnew

Switch

Turns something on or off, committing the change immediately.

Forms

Rating

Captures or displays an ordered score with accessible star controls.

Formsnew

Badge

A short, non-interactive label reporting status or category.

Display

Kbd

A semantic key cap for keyboard shortcuts and interaction guidance.

Display

Badge Notification

A compact count or dot announcing unread activity on a control or destination.

Displaynew

Avatar

Identifies a person, team or project, falling back to initials.

Display

Card

A bordered container grouping related content into one unit.

Display

Alert

A contextual message communicating status, consequence or a next step.

Displaynew

Toast

A brief non-blocking notification for success, error, warning or information.

Displaynew

Skeleton

Preserves predictable content geometry while nearby data is loading.

Displaynew

Progress

Communicates determinate or indeterminate completion in a horizontal track.

Displaynew

Spinner

A compact standalone indicator for an indeterminate loading state.

Displaynew

Table

Semantic primitives for structured rows, columns and selected data.

Displaynew

Separator

A horizontal or vertical boundary between adjacent content groups.

Displaynew

Tabs

Switches between sibling views inside one page, without navigating.

Navigation

Breadcrumb

Shows hierarchical location and links back to parent destinations.

Navigationnew

Pagination

Moves through a known number of result pages with compact boundaries.

Navigationnew

Accordion

A stacked disclosure group for revealing secondary content in place.

Navigationnew

Disclosure

Expands one independent region of optional secondary information.

Navigationnew

Dropdown Menu

A list of commands opened from a button, with submenus and shortcuts.

Overlays

Popover

A focus-managed contextual surface anchored to an interactive trigger.

Overlaysnew

Tooltip

A short supplementary label revealed on hover or focus.

Overlays

Dialog

A modal surface that interrupts the task to ask for a decision.

Overlays

Drawer

A focus-trapped overlay panel entering from a viewport edge.

Overlaysnew

PatternsPermalink to this section

Repeatable product sections and workflows composed from shared primitives.

CTA

A focused conversion section composed from shared content and controls.

Patternsnew

Bento Cards

A responsive feature-card grid with deliberate visual hierarchy.

Patternsnew

FAQ

A question-and-answer composition built from Accordion.

Patternsnew

Option with Avatar

An identity-rich selection row combining Avatar and selection state.

Patternsnew

Docks

Compact persistent navigation for high-frequency destinations.

Patternsnew

Animated Tags

A motion-aware workflow for available and selected tags.

Patternsnew

Action Search Bar

Search input, clear action, and explicit submit action in one workflow.

Patternsnew

Customize Design System

Choose a product's design-system surface while preserving shared contracts.

Patternsnew

Form field

Label, description, control, and message as one accessible unit.

Patterns

Search and filter

Narrow a collection while keeping filters visible and reversible.

Patterns

Empty state

Explain why content is absent and provide the most useful next action.

Patterns

Confirmation dialog

Confirm consequential actions while preferring undo when possible.

Patterns

Settings panel

Sectioned configuration for immediate and explicitly saved changes.

Patterns

Table toolbar

Search, filter, sort, and bulk actions above tabular data.

Patterns