Complete color palette, contrast rules, type scale, and syntax highlighting — every variable, every value
Every CSS variable in the design system with its hex value. Grouped by function — from primary colors through backgrounds to semantic colors and chart colors.
Primary (3)
Backgrounds (3)
Text (3)
Borders & Surfaces (4)
Accent (4)
Semantic (8)
Actor Colors (6)
Chart Colors (6)
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Here are the forbidden combinations and their corrected values.
Critical Fix: --color-text-muted
This text uses #9995A0 on white
Ratio: 2.8:1 — FAIL AAThis text uses #6B6778 on white
Ratio: 5.1:1 — PASS AAForbidden Combinations
| Combination | Ratio | Status |
|---|---|---|
| #FFFFFF on #F3EFEB | 1.1:1 | FORBIDDEN |
| #FFFFFF on #F8F5F2 | 1.1:1 | FORBIDDEN |
| #E4DAD4 on #FFFFFF | 1.5:1 | FORBIDDEN (as text) |
| #FEB85C on #FFFFFF | 2.1:1 | FORBIDDEN (as text) |
| #84C041 on #FFFFFF | 2.7:1 | FORBIDDEN (as text) |
Rule of thumb: For body text, always use --color-text (#1A1A2E) or --color-text-secondary (#5C5A6B). Light colors like orange or green only for accents (badges, icons, borders) — never as text color on light backgrounds.
The complete type scale from --text-xs (.75rem) to --text-6xl (3.75rem). Each step with its use case.
Font Weight Assignments
| Context | Font | Weight | Line-Height |
|---|---|---|---|
| Hero Title | --font-display | 800 | --leading-tight (1.15) |
| Module Title | --font-display | 700 | --leading-tight (1.15) |
| Card Title | --font-display | 600 | --leading-normal (1.6) |
| Body Text | --font-body | 400 | --leading-normal (1.6) |
| Code / Mono | --font-mono | 400–600 | 1.8 (code blocks) |
Code blocks use --color-bg-code (#000066) as background. Not black, not charcoal — Deep Navy Blue. Here are all highlight classes.
Example with all classes
// Example: File Agent configuration const createFileAgent = (config) => { const agent = { filename: "colorspace-typography_dev_en.html", audience: "dev", level: 2, hs_score: 7, // no L3 deep dive sections: 4, }; // Validation: check WCAG AA if (contrastRatio(agent.textColor, agent.bgColor) < 4.5) { throw new Error("WCAG AA contrast not met"); } return agent; };
What is the background color for code blocks?