tomevault-io Color Type System
The upstream selection process for color palettes and typefaces. Provides 6 curated high-resonance color pairs with hex codes, 10+ premium foundry typefaces, the 60-30-10 distribution rule, and AA/AAA contrast checking via Realtime Colors.
When to Use
- Selecting a color palette for a new project or brand
- Choosing typefaces from premium foundries (not free Google Fonts)
- Applying the 60-30-10 color distribution rule
- Checking AA/AAA contrast ratios between color pairs
- Matching color mood to project context (technical, luxurious, organic, clinical)
Workflow
- Accept project context: Industry, mood, target audience
- Select color pair from 6 master palettes or derive custom pair using mood mapping
- Apply 60-30-10 rule: Primary (60%) + Secondary (30%) + Accent (10%)
- Check contrast at realtimecolors.com — verify AAA for body text, AA minimum for large text
- Select typeface from premium foundry options based on project character
- Output color spec (hex codes + distribution) and typeface recommendation with rationale
Color Pairs (Quick Reference)
| Pair | Light | Dark | Mood |
|---|---|---|---|
| Chartreuse & Gun Metal | #E0FF4F | #00272B | High-contrast, electric, technical |
| Desert Sand & Dark Blue | #F87060 | #102542 | Modern, warm vs cold, sophisticated |
| Twilight & Berry | #EAF2EF | #912F56 | Elegant, soft, luxurious |
| Ecru & Bistre | #E1BB80 | #352208 | Organic, earthy, premium |
| Mint Green & Russian Violet | #D6FFF6 | #231651 | Cyber-clinical, clean, high-density |
| Cream & Hunter Green | #FFFCDC | #14281D | Natural, classic, grounded |
Typeface Categories
| Category | Typefaces | Best For |
|---|---|---|
| Geometric Sans | Euclid, Rund, Cosmica | Tech, SaaS, modern brands |
| Neo-Grotesque | Nouvelle Grotesk, Basis Grotesque, Formale Grotesque | Neutral, editorial, corporate |
| Precision Sans | LL Akkurat, Sprig Sans | Swiss design, multi-language, reliability |
| Display Serif | Roslindale, GT Alpina | Editorial, luxury, expressive headlines |
Contrast Rules
| Level | Ratio | Use For |
|---|---|---|
| AAA | 7:1+ | Body text, critical UI text |
| AA | 4.5:1+ | Large text (18px+), headings |
| AA Large | 3:1+ | Decorative text, non-critical elements |
Tools
- Realtime Colors (realtimecolors.com): Visualize color + font choices on a real site layout. Supports 60-30-10 distribution preview, contrast checking, and export to CSS/SCSS/PNG.
See references/color-type-details.md for full color pair details and typeface descriptions.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.