Theme Lab
Instructions: Adjust guarded tokens, inspect the component gallery, validate focus contrast, and save or export a draft. Changes preview across this page immediately. Apply a validated draft to retain it across MyKMHub in this browser.
Theme controls
Presets and guarded tokens
Select a foundation, then modify it. Changes remain a preview until applied.
Use six-digit hexadecimal colors. Both light and dark appearances are validated.
A subtle viewport-edge treatment; it does not alter content surfaces.Persistent focus preview
Remains visible while focus controls change; it does not move keyboard focus.
Focus contrast check
Light surface: 4.54:1 · Dark surface: 3.71:1
Passes the 3:1 preview guardrail.
Text contrast check
Light: 16.86:1 · Dark: 15.46:1
Passes the 4.5:1 normal-text guardrail.
Accent contrast check
Primary: 6.70:1 light · 8.00:1 dark
Secondary: 7.69:1 light · 9.07:1 dark
Passes the 4.5:1 text and link guardrail.
Site theme: Loading browser theme
Preview foundation: spectrum
Preview status: Preview only
Theme Lab is using the balanced preview preset.
Component and state gallery
Preview hierarchy without changing the site
This canvas consolidates representative content, interaction states, and application patterns so proposed tokens can be evaluated together.
Typography
Readable hierarchy
H1 · Page title
H2 · Major section
H3 · Subsection
H4 · Group heading
H5 · Supporting heading
H6 · Minor heading
Body copy should remain comfortable at 200% zoom, avoid overly long lines, and preserve clear separation between headings and supporting text.
Example inline link with visible focus treatment.
Components
Common controls
Patterns
Disclosure and data
| Token | Current preview | Status |
|---|---|---|
| Type scale | 17px / major-third | Draft |
| Preset | spectrum | Draft |
| Focus width | 3px | Validated |