This is the live style test page.
Switch themes up top — everything below must stay readable in every theme.
--bg
--panel
--panel2
--line
✓ ok · ⚠ warn · ✕ bad · muted · mono 1234
| Item | Status | Note |
|---|---|---|
| Sample row | Done | looks right in every theme? |
| Another row | Working | check contrast |
kz- component kit (v2)
Every component below is theme-aware and AA-contrast across all 7 themes. Switch themes up top.
kz-card
Standard card at 16px body. One look everywhere.
Another
Helper microcopy uses kz-hint.
kz-details disclosure
The "…plus N more" pattern, standardized.
v4 element grammar — status chips (kz-chip)
Tint + ink text + dot — never color-only, never clickable. Sentence-case adjectives.
Queued
Delivered
Pending
Failed
Scheduled
kz-timeline — event history
- Review received
Sarah signed off on 5 screens, requested changes on 1.
- Link opened
- Gallery sent
Link expires in 30 days.
kz-list / kz-row — list→detail rows
kz-table + kz-num — data table
| Job | Status | Hours | Amount |
|---|---|---|---|
| KL-2026-014 | Invoiced | 12.5 | 1,750.00 |
| KL-2026-015 | In progress | 4.0 | 560.00 |
| KL-2026-016 | Quoted | — | 2,100.00 |
Unbilled hours37.5+4.0 this week
Open galleries31 awaiting review
Needs you122 overdue
kz-empty + kz-skeleton
No trackers yet
Track a spreadsheet and changes show up here after each visit.
kz-field — form anatomy
Shown to the client at the top of the page.
kz-steps — setup wizard indicator
- Sign in
- Pick a sheet
- Done