Surfaces
Base, raised, inset, and pressed surfaces.
Base
Raised
Inset
Pressed
Industrial system UI board
Foundations
Elevation
The same accent behavior across multiple depth levels.
Iconography
Neutral system icons with accent treatment for active states.
Borders, Radii & Spacing
Borders, radii, and spacing as one coherent system.
10
14
18
24
pill
4
8
12
16
20
24
32
Token Notes
Themes switch through tokens, not component markup.
bg.canvas
bg.surface
text.primary
accent
shadow.panel
Full interactive state coverage
Controls
Buttons
Primary, secondary, ghost, and disabled states.
Text Fields
Default, focus, and error states.
Helper text for system content fields.
Selection & Slider
Switch, radio, and slider using the same visual language.
Dropdown & Date Picker
Status filters, periods, and dense schedule inputs.
Status
In review
▾
April 2026
◂ ▸
Mo
Tu
We
Th
Fr
Sa
Su
Entry points and navigation patterns
Navigation
Tabs
Local navigation for the current context.
Breadcrumbs & Pagination
Context and movement through long lists.
Process
Stepper for processes, onboarding, and flows.
Step 1
Step 2
Step 3
Step 4
A real product surface built from the same system
Workspace Layout
Sidebar + Main Canvas
A production-like layout showing navigation, KPIs, search, and charting.
Open tasks
48
Velocity
+12%
Health score
92
Weekly flow
Output trend by operating segment
Inspector
Secondary context for the selected object and quiet actions.
Selected report
Revenue summary · Updated 5m ago
Draft
Synced
Cards, lists, tables, and statuses
Data Display
Cards
Cards for entities and summary blocks.
Project Alpha
Progress 48%
List Items
List items for tasks and objects.
A
Item 1 · Description
B
Item 2 · Description
Badges, Table Head & Tooltip
Statuses and compact system elements.
In review
Done
Warning
Risk
Name
Status
Date
More info
Table Rows
Operational rows for reports, jobs, and review queues.
Q2 Revenue
Ready
Churn Watch
Review
Pipeline Sync
Risk
Charts
Compact chart widgets for dashboard and analytics panels.
Conversion
Capacity
78%
System feedback and loading states
Feedback
Modal
Critical confirmation or blocking decision.
Confirm Action
Are you sure you want to continue?
Toast Stack & Progress
Non-blocking notifications and long-running operations.
Success: file saved.
Info: new update available.
Warning: connection unstable.
45%
Alert, Skeleton & Empty
Messages, loading, and empty states.
No results found