§ 02 — Components
Building blocks,
not just pieces.
Every component is composed from the tokens. Every state — rest, hover, focus, active, disabled — is defined.
Sections on this page
§ 02.02
Inputs
Text fields, with prefix/suffix slots, plus search, textarea, and select. All states share the same focus treatment.
Used as a URL slug. Letters, numbers, and dashes only.
USD
/ year
⌘K
Region cannot be changed after the workspace is provisioned.
Enter a valid email address.
§ 02.03
Selection controls
Checkbox
Radio
Switch
§ 02.04
Badges & chips
Mono-cased badges for system state; rounded chips for taggable user data.
Badges · state
NEUTRAL
HEALTHY
DEGRADED
OFFLINE
SYNCING
NEW
BETA
Numeric
v 1.0.0
id · 482
build · a3f9c1
us-east-1
Chips · user data
payments
infrastructure
api-platform
priority/high
featured
+ Add tag
Keyboard shortcuts
Save⌘S
·
Search⌘K
·
NewN
§ 02.05
Tabs
Segmented · pill
Overview
Members
Billing
Audit
Use for filter-style switches inside a single view.
Underline · page-level
All projects 128
Yours 12
Archived
Drafts
Use as the primary navigation on a resource page.
§ 02.06
Feedback
Inline alerts, banners, and toasts. One per intent.
Scheduled maintenance
The audit log will be read-only between 02:00–02:30 UTC on Saturday for index migration.
Deployment complete
Release 1.0.0-rc.4 is live across all production regions. Health checks are green.
Approaching seat limit
You're using 48 of 50 seats. Upgrade your plan before the next billing cycle.
Could not connect to data source
Authentication failed for db-prod-01. Check the credentials and retry.
Sync completed
2,318 records updated · 12 conflicts resolved
§ 02.07
Data table
The heart of every enterprise screen. Monospaced columns, semantic states, careful alignment.
128 records
| Record | Status | Owner | Region | Last sync | Throughput | ||
|---|---|---|---|---|---|---|---|
|
PX
payments-gateway
id · pg_482a
|
HEALTHY |
JL
Jamie Liu
|
us-east-1 | 2m ago | 12.4k /s | ||
|
ID
identity-svc
id · ids_91f3
|
DEGRADED |
RM
Rosa Mendes
|
eu-west-2 | 14m ago | 4.1k /s | ||
|
AU
audit-stream
id · aud_7c1e
|
HEALTHY |
TN
Theo Nakamura
|
us-west-2 | just now | 38.2k /s | ||
|
NT
notify-mailer
id · ntm_3a99
|
OFFLINE |
SK
Sara Khan
|
ap-south-1 | 1h ago | — | ||
|
BL
billing-ledger
id · bil_5e22
|
SYNCING |
JL
Jamie Liu
|
us-east-1 | syncing… | 9.7k /s |
Showing 1–5 of 128
…
§ 02.08
Avatars
Sizes
JL
28
JL
36
JL
48
JL
64
Tints (categorical)
JL
RM
TN
SK
AB
CD
Stack
JL
RM
TN
SK
+8
12 members on this workspace
Member row
JL
ONLINE
Jamie Liu
jamie@strata.co · Owner
RM
AWAY
Rosa Mendes
rosa@strata.co · Admin
§ 02.09
Progress
Migrating records
68%
21,440 of 31,528
~ 2m remaining
Seats used
48 / 50
2 seats remaining
Approaching limit
Quota
70%
of monthly compute
§ 02.10
Cards
Three flavors — paper (default), flat (hairline), and ink (signature surface).
HEALTHY
payments-gateway
Synchronous payment authorization and capture across all merchant accounts.
RPS
12.4k
P99
82ms
Recent activity
JL
Jamie
deployed
v1.0.0-rc.4
2m ago
RM
Rosa
invited
theo@strata.co
14m ago
TN
Theo
resolved an incident on
audit-stream
1h ago
v1.0 LIVE
Featured
STRATA Insights
A new analytics surface, built from the same tokens. Available to all enterprise workspaces today.
JL
RM
TN