Theming
Components never hardcode colors, fonts, or easing — only var(--moco-*). Override any token to retheme the whole library.
Color tokens
| Token | Light value | Role |
|---|---|---|
--moco-bg | #fcfbf9 | Page ground — warm paper |
--moco-panel | #f4f2ee | Raised panels and code blocks |
--moco-ink | rgba(0,0,0,0.88) | Headings, strongest text |
--moco-body | rgba(0,0,0,0.76) | Body text |
--moco-muted | rgba(0,0,0,0.6) | Secondary text |
--moco-faint | rgba(0,0,0,0.48) | Captions, tertiary text |
--moco-line | rgba(0,0,0,0.12) | Hairline borders |
--moco-accent | #c6f24e | Lime accent — fills only on paper |
--moco-accent-dk | #5b770c | Accent for text and strokes (4.9:1) |
--moco-on-accent | #14180a | Text on top of accent fills |
--moco-warn | #b8437a | Warning / highlight color |
--moco-accent-wash | rgba(198,242,78,0.34) | Translucent accent wash |
--moco-warn-wash | rgba(184,67,122,0.1) | Translucent warn wash |
--moco-hover-wash | rgba(0,0,0,0.04) | Hover backgrounds |
Fonts and motion
| Token | Role |
|---|---|
--moco-serif | Long-form prose |
--moco-mono | Code, numbers, technical labels |
--moco-sans | UI text |
--moco-display | Display headings and the wordmark |
--moco-ease | The single easing curve used for all motion |
The font slots default to system stacks. Point them at your loaded webfonts (this site wires next/font variables into them in one CSS rule).
Dark mode
The library ships a full dark palette that activates via prefers-color-scheme: dark. To force a theme regardless of system preference, set data-theme on <html>:
<html data-theme="dark">— always dark<html data-theme="light">— always light (the dark media query is guarded with:root:not([data-theme="light"]), so this wins)
This docs site pins itself light exactly this way.
Overriding tokens
Declare your overrides after tokens.css. For example, swapping the accent:
/* your globals.css, after tokens.css */
:root {
--moco-accent: #ffd166; /* lime → amber */
--moco-accent-dk: #8a6a00; /* keep ~4.5:1 on --moco-bg for text duty */
}The one rule worth keeping: on light backgrounds the bright accent is a fill color — text and strokes use --moco-accent-dk, which should hold roughly 4.5:1 contrast against --moco-bg. See the tokens item for the full source.