Simple, by design.
A calm foundation for every Page and every workspace.
Explore the colors, controls and small details that hold it together.
01
Color & type
Warm surfaces. Clear hierarchy. One considered accent.
Canvas
--background
Surface
--card
Accent
--primary
Soft accent
--accent
Geist Sans · Self-hosted · System fallback
A little clarity goes a long way.
Useful information deserves room to breathe. Comfortable spacing and familiar controls make the next step feel natural.
02
Actions
A clear primary action, with quieter supporting choices.
Choose a button to preview its feedback.
03
Form controls
Visible labels, helpful context and errors you can act on.
Validation and disabled states
Add a name to continue.
Choose an option.
04
Status & feedback
State is expressed in words and icons, never color alone.
Changes saved
A detail needs attention
We couldn’t save this example
You’re in control
05
Dialog & tabs
Focused decisions and familiar keyboard navigation.
Confirmation dialog
Escape closes the dialog. Focus returns to the button.
Everything in its place.
Tabs group related information while keeping the current view focused.
06
Tables
Comfortable rows on larger screens. Clear cards on smaller ones.
| Name | Status | Details |
|---|---|---|
| Welcome guide | Ready | Example content |
| Contact details | Draft | Example content |
| Resource list | Needs attention | Example content |
Sample content · Demonstration data
Welcome guide
Example content
Contact details
Example content
Resource list
Example content
07
Quiet moments
Useful empty states and gentle loading feedback.
A place for your first idea.
When there’s nothing here yet, explain what belongs here and give people a useful next step.
Loading example content
08
Theme foundation
Semantic colors keep the same components ready for a future dark theme.
Dark token preview · No product theme toggle yet
The same calm, after hours.
Surfaces, labels and accents adapt together.