data-theme="uteke"
Field notes, week 43
The document reads on green paper with ink text. Its toolbar switches the accent to blue without leaving the theme.
The face of Neutral (colour-blind safe)
What a theme may change: fonts, corners, label shape, icon stroke and focus ring. Structure and accessibility stay the same in every theme.
The Plain Workbench, colour-blind safe
Remember that Dana's birthday is 12 March. Any later conversation, on any device, finds it.
01a19474 · 2026-11-01 · 4.92:1
- Display
- System sans
- Text
- System sans
- Data
- System mono
-
sm 4px -
md 8px -
lg 12px
Draft New Synced Failed
Icon stroke 2 · focus ring 2px · light scheme
Use this theme
<script>
import '@codecora/tokens/tokens.css';
</script>
<!-- the whole app, or any element -->
<html data-theme="neutral-cvd">Colour roles
Surfaces and lines
-
--cc-surfacePage -
--cc-surface-raisedCards, inputs, popovers -
--cc-surface-sunkenWells, sidebars -
--cc-surface-hoverHover tint -
--cc-borderDecorative hairline -
--cc-border-strongControl boundary, 3:1
Text and accent
-
--cc-textBody text -
--cc-text-mutedSecondary text -
--cc-accentAction, link, selection -
--cc-accent-hoverAction on hover -
--cc-accent-softSelected row -
--cc-focusFocus ring
Status
-
--cc-dangerErrors, destructive -
--cc-danger-softBehind danger text -
--cc-successDone, healthy -
--cc-success-softBehind success text -
--cc-warningNeeds attention -
--cc-warning-softBehind warning text
Controls and states
Plain HTML on tokens, to show density, focus, error, disabled and selected states. The real components are on the Components page.
Matches titles, tags and full text.
Use lowercase letters, digits and dashes.
Synced Quota at 90% Failed Selected
Type, radius and spacing
Type scale
- Memories, kept
- Memories, kept
- Memories, kept
- Memories, kept
- Memories, kept
- Memories, kept
- Memories, kept
Mono, tabular: 0123456789 · 2026-10-29 · 4.92:1
Radius
-
sm -
md -
lg -
pill
Spacing
10.25rem20.5rem30.75rem41rem51.25rem61.5rem82rem102.5rem123rem164rem
Utilities
Every @codecora/ui component is on the Components page. This one has no look of its own, so it is
shown here.
VisuallyHidden- Hides text visually and keeps it for screen readers. This close button announces “Close dialog”.
Themes nest per element
Contrast pairs
31 pairs checked for Neutral (colour-blind safe) with the violet accent: all meet WCAG 2.2 AA.
| Sample | Foreground | Background | Ratio | Minimum |
|---|---|---|---|---|
| Aa | text | surface | 16.58:1 | 4.5:1 |
| Aa | text | surface-raised | 17.11:1 | 4.5:1 |
| Aa | text | surface-sunken | 15.50:1 | 4.5:1 |
| Aa | text | surface-hover | 14.35:1 | 4.5:1 |
| Aa | text | accent-soft | 13.52:1 | 4.5:1 |
| Aa | text-muted | surface | 7.12:1 | 4.5:1 |
border-strong | surface | 4.65:1 | 3:1 | |
| Aa | text-muted | surface-raised | 7.35:1 | 4.5:1 |
border-strong | surface-raised | 4.80:1 | 3:1 | |
| Aa | text-muted | surface-sunken | 6.66:1 | 4.5:1 |
border-strong | surface-sunken | 4.34:1 | 3:1 | |
| Aa | accent | surface | 6.20:1 | 4.5:1 |
focus | surface | 6.20:1 | 3:1 | |
| Aa | accent | surface-raised | 6.40:1 | 4.5:1 |
focus | surface-raised | 6.40:1 | 3:1 | |
| Aa | accent | accent-soft | 5.06:1 | 4.5:1 |
| Aa | accent | surface-sunken | 5.80:1 | 4.5:1 |
| Aa | accent-text | accent | 6.29:1 | 4.5:1 |
| Aa | accent-text | accent-hover | 8.17:1 | 4.5:1 |
| Aa | danger | surface | 6.18:1 | 4.5:1 |
| Aa | danger | surface-raised | 6.38:1 | 4.5:1 |
| Aa | danger | danger-soft | 4.97:1 | 4.5:1 |
| Aa | danger-text | danger | 6.26:1 | 4.5:1 |
| Aa | success | surface | 6.16:1 | 4.5:1 |
| Aa | success | surface-raised | 6.36:1 | 4.5:1 |
| Aa | success | success-soft | 4.99:1 | 4.5:1 |
| Aa | success-text | success | 6.26:1 | 4.5:1 |
| Aa | warning | surface | 6.69:1 | 4.5:1 |
| Aa | warning | surface-raised | 6.90:1 | 4.5:1 |
| Aa | warning | warning-soft | 5.43:1 | 4.5:1 |
| Aa | warning-text | warning | 6.78:1 | 4.5:1 |