Every building block in one place
Each component is built on the colour, spacing, and typography tokens from the foundations pages. They all share the same padding rules, focus styles, and sizing conventions so they feel consistent when combined. Click into any component to see its variants, states, and sizing options.
Section 1expand_more
Section 2expand_more
Accordion
Working
Agent status
AI button
Heads up
Alert
Confirm?
Cancel
OK
Alert dialog
App layout
dashboardDashboard
analyticsAnalytics
settingsSettings
App sidebar
Avatar
InfoSuccessError
Badge
Homechevron_rightSectionchevron_rightPage
Breadcrumb
Button
Button group
Card
chevron_left
chevron_right
Carousel
Chart
Chat header
Today
Conversation resumed
Chat marker
Chat message
Chat thread
Checkbox
LabelTag
Chip
Circular button
--radius-full: 999px;Code block
#118AB2
Colour picker
searchCan
CanadaCancún
Combobox
Command palette
Message the agent
addarrow_upward
Composer
mailEmailopen_in_new
personLinkedInopen_in_new
Contact card
open_in_newOpen
editRename
deleteDelete
Context menu
Contribution graph
dd/mm/yyyy
Date input
calendar_month
Date picker
Edit profileclose
Save
Dialog
or
Divider
brief.pdf
budget.xlsx
Document chip
Drawer
Selectexpand_more
Dropdown
personProfile
settingsSettings
logoutLog out
Dropdown menu
inboxNo messagesNothing to show yet
Empty state
homehome
starstar
Entity card
Email address *We only use this to contact you.
Field
Figure
upload_fileDrop a fileor click to browse
File input
Enter text...
Input
1First
2Second
Instructions
Allow file edit?
Waiting for your decisionInterrupt card
⌘⇧K
Kbd
Substackopen_in_new
GitHubopen_in_newLink list
Message actions
Message card
Nav list
robr0Navigation
Pagination
Popover
Popover
Progress bar
Prompt suggestions
Release notes
Rendered markdown picks up the token scale, down to inline code.
Prose
Systems are coordination problems.
Quote
Option A
Option B
Radio button
Converted both regions to USD at the invoice-date rate before summing.
Reasoning
Section
Section title
Segmented control
A
B
Selection card
Shader field
Skeleton
Slider
1Design tokens quarterly2Theming layered systems
Source chip
Spinner
~900%Successful generations+clash view
Stat
Swatch
Table
Tabs
Enter text...
Textarea
- Discover
- Design
- Ship
Timeline
check_circleSaved
Toast
Toggle group
check
Toggle switch
grepDone0.4s
Tool call
Tooltip