# Color Type System > Select color palettes with hex codes and mood mapping, choose future-proof typefaces from premium foundries, apply 60-30-10 color distribution, and check AA/AAA contrast ratios. Use when making upstream color and typography SELECTION decisions before implementation. Use when this capability is needed. - Skill: `tomevault-io/color-type-system` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/color-type-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/color-type-system/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/color-type-system --- # 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 1. **Accept project context:** Industry, mood, target audience 2. **Select color pair** from 6 master palettes or derive custom pair using mood mapping 3. **Apply 60-30-10 rule:** Primary (60%) + Secondary (30%) + Accent (10%) 4. **Check contrast** at realtimecolors.com — verify AAA for body text, AA minimum for large text 5. **Select typeface** from premium foundry options based on project character 6. **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](https://tomevault.io/claim/sheshiyer) — claim your Tome and manage your conversions.