II — VISUALS
Color
Default is near-black + off-white. Accent is a scalpel: one signal color, used sparingly.
Core
Ink (Background)
#0B0B0C
--cx-bg
Paper (Foreground)
#F2F2F2
--cx-fg
Muted
#B8B8B8
--cx-muted
Border
mix
--cx-border
Accent signals
Rule: if you add accent, remove something else. Never more than one accent per composition.
Pink Noise
#F525A3
--cx-accent-pink-noise
Ethernet Sky
#1D90BF
--cx-accent-ethernet-sky
Cherry Collapse
#FE4247
--cx-accent-cherry-collapse
Tangerine Tantrum
#FD7E01
--cx-accent-tangerine-tantrum
Slime Blessing
#08F22F
--cx-accent-slime-blessing
Flashbulb Memory
#E8E200
--cx-accent-flashbulb-memory
Dream Bruise
#9750CD
--cx-accent-dream-bruise
Coolant Crush
#05AEC6
--cx-accent-coolant-crush
Usage ratios
Default distribution: 80% Ink / 15% Paper / 5% Accent (optional).
80% Ink
15%
BackgroundTextAccent
Contrast guidance
All text must meet WCAG AA minimum. The core palette is designed for this out of the box.
Paper on InkAAA ✓
Ink on WhiteAAA ✓
Pink on InkAA ✓
Muted on InkAA ✓
Do / Don’t
Do
One accent.
Single accent color on ink background. Clean.
Don’t
Multipleaccentcolors.
Competing signals. Chaotic. Never.
Mode variations
The theme toggle shifts token values per mode. Core colors adjust subtly; accent shifts in intensity.
| Token | Book 1 | Book 2 | Book 3 |
|---|---|---|---|
| --cx-bg | #0B0B0C | #050505 | #000000 |
| --cx-pink | #F525A3 | #E040A0 | #FF00AA |
| --cx-radius | 10px | 12px | 6px |
| --cx-content-bg | #FFFFFF | #FAF8F5 | #0A0A0A |
| --cx-content-fg | #000000 | #1A1A18 | #F0F0F0 |
| --cx-content-muted | #6B7280 | #7A7568 | #888888 |
Side-by-side preview
Book 1
Headline
Book 2
Headline
Book 3
Headline
Use the mode toggle in the sidebar to preview each variation live.
Design tokens
Complete CSS custom properties block — copy and paste into any project.
:root {
--cx-bg: #0b0b0c;
--cx-fg: #f2f2f2;
--cx-muted: #b8b8b8;
--cx-border: color-mix(in oklab, var(--cx-fg), transparent 88%);
--cx-accent: #f2f2f2;
--cx-radius: 10px;
--cx-accent-pink-noise: #f525a3;
--cx-accent-ethernet-sky: #1d90bf;
--cx-accent-cherry-collapse: #fe4247;
--cx-accent-tangerine-tantrum: #fd7e01;
--cx-accent-slime-blessing: #08f22f;
--cx-accent-flashbulb-memory: #e8e200;
--cx-accent-dream-bruise: #9750cd;
--cx-accent-coolant-crush: #05aec6;
--cx-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--cx-font-display: "Libre Caslon Display", "Big Caslon", Georgia, serif;
--cx-font-mono: "Courier New", Courier, monospace;
--cx-page-pad: 48px;
}