Component language
Components showcase
A living inventory of reusable blocks: charts, tables, feedback states, cards and responsive composition.
Actions and status
Buttons and badges encode hierarchy and state.
Form language
Visible labels and helper text are mandatory.
Used in navigation, invites and notifications.
Revenue and activation
A responsive chart block with visible context, units and accessible color pairing.
Customer risk table
Desktop table with mobile-friendly cards and visible row actions.
Executive view
Lifecycle, risk and owner for leadership review. Sorted by customer ascending.
| Actions | ||||||
|---|---|---|---|---|---|---|
| Atlas Cloud | Scale | Pending | Medium | Mateo Silva | ||
| Faro Retail | Team | Suspended | High | Iris Vega | ||
| Kinetic Finance | Enterprise | Active | Low | Nora Chen | ||
| Northwind Labs | Enterprise | Active | Low | Ana Lopez | ||
| Orbit Ops | Scale | Active | Medium | Theo Ruiz |
Scale · Mateo Silva
Risk level: Medium
Team · Iris Vega
Risk level: High
Enterprise · Nora Chen
Risk level: Low
Enterprise · Ana Lopez
Risk level: Low
Scale · Theo Ruiz
Risk level: Medium
Loading state
Use skeleton rows or a contained spinner when data is refreshing without hiding table structure.
Empty state
Explain what creates the first record and keep the primary Add action nearby.
No results
Keep filters visible and offer a clear path back to the saved view.
Recoverable error
State what failed, preserve current data if safe, and provide retry instead of a blank table.
Toast and alert vocabulary
Every action gets one consistent feedback pattern: toast, banner, dialog or inline message.
Success
successTeam member invited successfully.
Warning
warningBilling quota reaches 82% today.
Permission denied
dangerYou need Admin access to revoke keys.
Loading
infoExporting workbook...
Undo
neutralCustomer archived. Undo available for 30 seconds.
Notification center
Grouped, actionable, readable.
Invitation accepted
2m agoLucia joined Design Ops with editor access.
Quota nearing limit
18m agoAPI usage reached 82% of this cycle.
Permission denied
42m agoA billing export was blocked for a viewer role.
Report ready
1h agoJune retention workbook is ready to review.
Destructive confirmation dialog
Dangerous actions use explicit copy, separated secondary actions and visible consequences.
Delete API key?
This will immediately revoke access for every integration using this key. This action cannot be undone.
Banner and inline state rules
Use the smallest pattern that gives the user enough context and recovery.
System banner
Maintenance, incidents, trial and quota notices belong above page content.
Recoverable error
State what failed, what data is safe, and the retry path.
Inline denied
Keep the blocked module visible and explain the role or permission required.