Theme Lab

Status: Experimental workspace

Scope: Live preview and optional site application

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.

Return to the Design System

Theme controls

Presets and guarded tokens

Select a foundation, then modify it. Changes remain a preview until applied.

Theme preset
Type scale preset
17
Type scale ratio
Eyebrow scale
1.65
Focus color

Use six-digit hexadecimal colors. Both light and dark appearances are validated.

Canvas edge treatment
A subtle viewport-edge treatment; it does not alter content surfaces.

3
3

Persistent focus preview

Remains visible while focus controls change; it does not move keyboard focus.

Focused controlLight canvas
Focused controlDark canvas
2px
3pxSelected
4px
12
Section spacing

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

Paste a MyKMHub theme draft. Review it in the preview, then apply it to the site when ready.

Theme Lab is using the balanced preview preset.

Component and state gallery

Preview hierarchy without changing the site

Choose a production context and inspect its relevant components, variants, content states, and accessibility behavior together.

Preview context
Emphasize interaction state
State emphasis: use the controls normally. Simulated states are labeled and do not replace keyboard or pointer testing.

Form context

Complete form gallery

Required, optional, populated, disabled, read-only, invalid, selection, range, action, and status patterns.

Entry and guidance

Required field with concise supporting guidance.
Optional fields are identified in their label or instructions.

Restricted and error states

Enter a distinctive theme name.
Status
Density
50

Semantic color and icons reinforce—but do not replace—the message text.

Alert presentation

Patterns

Disclosure and data

Approved themes should record intent, accessibility results, and the components reviewed before promotion.
Theme token examples
TokenCurrent previewStatus
Type scale17px / major-thirdDraft
PresetspectrumDraft
Focus width3pxValidated
Preview only0 changed tokens
Checks passSpectrum-managed component tokens remain read-only