Surfaces
Base, raised, inset, and pressed surfaces in one material.
Base
Raised
Inset
Pressed
Tactile surfaces, large radii, and soft shadows
Foundations
Elevation
The same shapes across depth levels without harsh borders.
Iconography
Quiet system icons with accent only where state needs it.
Borders, Radii, Spacing
Shape is created with radius and shadow, not hard borders.
14
18
22
28
pill
8
12
16
20
28
32
Inset search / command surface
Theme Notes
One component set works in both themes through tokens.
bg
surface
text
accent
shadow.card
Core interactive states
Controls
Buttons
Raised by default, softly pressed in active states.
Text Fields
Fields stay inset, while focus and error use accent treatment.
Helper text for search, forms, filters, and quiet system surfaces.
Selection & Slider
Check, radio, switch, and slider from the same tactile system.
✓
Dropdown & Date Picker
Status, period, and date selection inside the same inset logic.
Status
In review
▾
April 2026
◂ ▸
Mo
Tu
We
Th
Fr
Sa
Su
Navigation, context, and flow
Navigation
Tabs
Soft local navigation without extra visual noise.
Breadcrumbs & Pagination
Secondary navigation and quick page movement.
Process
Stepper for setup, onboarding, and sequential actions.
Assembled application workspace
Workspace Layout
Sidebar + Main Canvas
A production-like screen, not only an atom gallery.
Open tasks
48
Velocity
+12%
Health score
92
Weekly flow
Inspector
Quiet right-side panel for details, statuses, and secondary actions.
Selected report
Draft
Synced
Cards, tables, lists, statuses
Data Display
Cards
Raised cards for entities and summary blocks.
Project Alpha
List Items
Dense but soft list rows for apps and dashboard UI.
A
Item 1 - Description
B
Item 2 - Description
Badges, Table Head & Tooltip
Statuses and compact elements in the same material.
In review
Done
Warning
Risk
Name
Status
Date
More info
Table Rows
Table rows for operational lists, filters, and statuses.
Q2 Revenue
Ready
Churn Watch
Review
Pipeline Sync
Risk
Charts
Mini chart widgets for dashboard and analytics panels.
Conversion
Capacity
78%
Non-blocking and blocking feedback
Feedback
Modal
Action confirmation inside the same soft system.
Confirm Action
Are you sure you want to continue?
Toast Stack & Progress
Soft notifications and long-running operations.
Success: file saved.
Info: new update available.
Warning: connection unstable.
45%
Alert, Skeleton & Empty
Warnings, loading, and empty states.
No results found