Patterns & states
Reference for the KHS design system — every component, color, status state, empty/loading/error pattern in one place. Copy markup straight into a new screen. Engineers: tokens live in
khs-clean.css, states in khs-states.css.Color tokens
All colors come from CSS custom properties so the dark theme can override them. Status is communicated by a 6×6 dot on a neutral surface — never a full color fill on text or backgrounds.
Typography
Inter for everything UI. JetBrains Mono for codes (T2021), IDs, dates in tables, and uppercase labels. No display serif in production.
Page H122-26px / 600 / -0.018em
Aloha, Lehua — 3 things need your attention
Section H214-15px / 600 / -0.005em
Top participants by April utilization
Body13.5px / 400 / 1.45
Phillip Aguilar logged 252 units this April, exceeding the monthly cap by 12u.
Meta11.5-12.5px / 400 / --ink-3
Updated 2 minutes ago · synced from data.khs-hawaii.org
Mono code10.5-12px / JetBrains Mono
T2021 · 0000947344 · G809 · $12.78/u
Uppercase label10-11px / .12em / --ink-3
active participants
Buttons
Three flavors. Sage-deep is the primary action color (no coral CTAs — coral is reserved for status).
Pills · chips · status
Status pills are neutral background with a single 6×6 dot. Code chips are always outlined. Filter chips are single-select within a group.
neutral
over cap
renewal due
on track
upcoming
active filter
T2021
H2021
S5125
G809
F840
paid
submitted
draft
denied
Cards & KPI strip
Cards: 6px radius, 1px rule border, no shadow. KPI strip: flush row of borderless cells (not floating tiles).
Card title
Optional subtitle in muted tone.
Card body content — tables, rows, or freeform.
Active participants
87
▲ 4 · vs last month
Units logged · Apr
42,310
▲ 6.8% · vs March
Cap risk
3
requires review
EVV match
96.2%
▲ 1.8%
Inline banners
Non-blocking notices. Use sparingly — one per page max.
Empty state
When a list has zero items by design (not because of a filter or error).
⊕
No participants in your caseload yet
Once Marion assigns participants to you, they'll appear here. You'll get a notification when that happens.
Loading skeleton
Shimmer animation while real data fetches. Use for first-load and after pagination/sort.
Error state
Use for full-page or major-section failures. Always include a recovery action and a request-ID for support.
!
Couldn't reach the Med-Quest auth service
We're getting a 503 from mqd.hawaii.gov when fetching your authorizations. Your local data is still safe — just temporarily out of sync.
Toast
Live feedback after an action. Auto-dismisses in 5s. Use sparingly.
Modal / confirm
For destructive or irreversible actions. Always have an explicit cancel and a primary action with a clear verb.
Submit April batch?
93 claims will be sent to Availity for processing. This action can't be undone — claims will be in "submitted" state until the payer responds.
93 claims · $18,591 total
routed: F840 (52) + G809 (41) · via Availity v5010
Form fields
Text inputs, selects, switches. Focus ring uses the sage-deep token at 18% alpha.
Participant name
Service code
For engineers
All design tokens, components, and patterns are in CSS / JS files at project root. No build step.
// Required on every screen <link rel="stylesheet" href="khs-shell.css" /> <link rel="stylesheet" href="khs-clean.css" /> <link rel="stylesheet" href="khs-states.css" /> <script src="khs-shell.js"></script> // auto-builds sidebar <script src="khs-theme.js"></script> // dark mode + toggle <script src="khs-governance.js"></script> // role chip + scope footer + $ masking <script src="khs-wiring.js"></script> // dead-link rewriter + click-through rows <script src="khs-interactive.js"></script> // search, filters, sort, modals, shortcuts // Page <body> conventions data-active="dashboard" // highlights matching sidebar item data-khs-role="bm" // optional override (else ?role= from URL)