The Core Message
The essential tagline for all communications.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ THE CANONICAL TAGLINE │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ ║│
│ ║ "Core Colors define identity. ║│
│ ║ ║│
│ ║ Flow Colors handle everything in between." ║│
│ ║ ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ Use this everywhere: │
│ - Headlines │
│ - Presentations │
│ - Documentation │
│ - Social media │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
The Three Canonical Phrases
Key messaging for different contexts.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ THREE CANONICAL PHRASES │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ PHRASE 1: Primary (English) ║│
│ ║ ═══════════════════════════ ║│
│ ║ ║│
│ ║ "Core Colors define identity. ║│
│ ║ Flow Colors handle everything in between." ║│
│ ║ ║│
│ ║ Use for: Headlines, taglines, social media, presentations ║│
│ ║ Audience: General, developers, designers ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ PHRASE 2: Technical (English) ║│
│ ║ ═════════════════════════════ ║│
│ ║ ║│
│ ║ "Flow between Cores uses OKLAB - no muddy transitions." ║│
│ ║ ║│
│ ║ Use for: Technical docs, README, API documentation ║│
│ ║ Audience: Developers implementing the system ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ PHRASE 3: Performance (English) ║│
│ ║ ════════════════════════════════ ║│
│ ║ ║│
│ ║ "Zero JavaScript. Pure CSS. 100x faster than Material Design." ║│
│ ║ ║│
│ ║ Use for: Performance claims, competitive positioning ║│
│ ║ Audience: Technical decision makers ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
└─────────────────────────────────────────────────────────────────────────────┘
The Hero Stats
Performance claims backed by measurements.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ PERFORMANCE COMPARISON │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ Zero JavaScript. Pure CSS. 100x faster than Material Design. ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ ┌───────────────────────┬───────────────────────┬─────────────────────────┐│
│ │ Metric │ Core & Flow │ Material Design HCT ││
│ ├───────────────────────┼───────────────────────┼─────────────────────────┤│
│ │ Bundle Size │ 0 KB (CSS native) │ 45 KB (JS library) ││
│ ├───────────────────────┼───────────────────────┼─────────────────────────┤│
│ │ Theme Switch │ < 0.1ms │ 5-10ms ││
│ ├───────────────────────┼───────────────────────┼─────────────────────────┤│
│ │ Browser Support │ 92%+ native │ Requires conversion ││
│ ├───────────────────────┼───────────────────────┼─────────────────────────┤│
│ │ Runtime Overhead │ None │ JavaScript execution ││
│ └───────────────────────┴───────────────────────┴─────────────────────────┘│
│ │
│ SUPPORTING STATS: │
│ ═════════════════ │
│ │
│ - 92%+ browser support - No polyfills. No libraries. Just CSS. │
│ - W3C standard - CSS Color Level 4/5 specification │
│ - WCAG AA compliant - L=55% difference meets 4.5:1 contrast │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Messaging by Audience
Tailored communication for each stakeholder group.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ FOR DEVELOPERS │
│ │
│ Pain Points Addressed: │
│ ══════════════════════ │
│ │
│ [X] Inconsistent color states across components │
│ [X] Theme switching performance issues │
│ [X] Managing large color palettes │
│ │
│ Key Messages: │
│ ═════════════ │
│ │
│ 1. Define once, derive everywhere │
│ Core Colors are single source of truth. │
│ Flow Colors auto-derive via CSS cascade. │
│ │
│ 2. Zero runtime │
│ No JavaScript color calculations. │
│ Browser handles all mixing natively. │
│ │
│ 3. Theme switch in < 0.1ms │
│ Change Core Colors, Flow Colors auto-update. │
│ No manual recalculation needed. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ FOR DESIGNERS │
│ │
│ Pain Points Addressed: │
│ ══════════════════════ │
│ │
│ [X] "My gradients look muddy" │
│ [X] "Colors don't look the same brightness" │
│ [X] "I have to manually create every color state" │
│ │
│ Key Messages: │
│ ═════════════ │
│ │
│ 1. Pick your Core Colors. We handle the variations. │
│ Choose brand colors. System generates all states automatically. │
│ │
│ 2. Perceptually uniform means what you see is what you get │
│ L=50% looks equally bright for all hues. │
│ No more "blue looks darker than yellow." │
│ │
│ 3. Gradients that don't go brown │
│ OKLAB straight-line interpolation keeps gradients vibrant. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ FOR STAKEHOLDERS │
│ │
│ Concerns Addressed: │
│ ═══════════════════ │
│ │
│ [X] "How does this affect performance?" │
│ [X] "Is this a standard approach?" │
│ [X] "How does this compare to Material Design?" │
│ │
│ Key Messages: │
│ ═════════════ │
│ │
│ 1. Zero bundle size impact. Zero runtime cost. │
│ CSS-native solution (OKLCH/OKLAB) │
│ No JavaScript library required │
│ Compare: Material Design HCT = 45KB library │
│ │
│ 2. W3C standard. 92%+ browser support. │
│ CSS Color Level 4/5 specification │
│ Not a proprietary solution │
│ Will only get better with time │
│ │
│ 3. 100x faster theme switching. │
│ Measurable performance improvement │
│ Better user experience │
│ Reduced complexity │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Competitive Positioning
How Core and Flow compares to alternatives.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ VS MATERIAL DESIGN HCT │
│ │
│ ┌───────────────────┬───────────────────────┬─────────────────────────────┐│
│ │ Aspect │ Core & Flow │ Material Design HCT ││
│ ├───────────────────┼───────────────────────┼─────────────────────────────┤│
│ │ Bundle Size │ 0 KB (CSS native) │ 45 KB (JS library) ││
│ │ Theme Switch │ < 0.1ms │ 5-10ms ││
│ │ Browser Support │ 92%+ native │ Requires conversion ││
│ │ Standard │ W3C CSS Color 4/5 │ Proprietary (Google) ││
│ │ Runtime Overhead │ None │ JavaScript execution ││
│ │ Learning Curve │ CSS variables only │ New color space + API ││
│ └───────────────────┴───────────────────────┴─────────────────────────────┘│
│ │
│ POSITIONING MESSAGE: │
│ ════════════════════ │
│ │
│ "We adopt HCT's best ideas (tertiary colors, contrast rules) │
│ while keeping everything in native CSS. │
│ The result? All the design rigor, none of the JavaScript overhead." │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ VS TRADITIONAL HSL/HEX │
│ │
│ ┌────────────────────────────────┬──────────────────┬──────────────────────┐│
│ │ Problem │ Traditional │ Core & Flow Solution ││
│ ├────────────────────────────────┼──────────────────┼──────────────────────┤│
│ │ "Yellow looks brighter │ HSL not │ OKLCH 55% looks ││
│ │ than blue at 50%" │ perceptually │ equal for all hues ││
│ │ │ uniform │ ││
│ ├────────────────────────────────┼──────────────────┼──────────────────────┤│
│ │ "47 color variables that │ Color explosion │ 5 Core Colors + ││
│ │ are all slightly different" │ │ automatic derivation ││
│ ├────────────────────────────────┼──────────────────┼──────────────────────┤│
│ │ "lighten() compiles to │ No runtime │ color-mix() evaluates││
│ │ fixed value" │ theming │ at runtime ││
│ └────────────────────────────────┴──────────────────┴──────────────────────┘│
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Visual Comparison
The gradient problem solved.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ THE GRADIENT PROBLEM │
│ │
│ sRGB Gradient (Old Way): │
│ ════════════════════════ │
│ │
│ Blue ═══════════════ Muddy Brown ═══════════════ Orange │
│ ^ │
│ UGLY MIDDLE │
│ (desaturated, gray) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Blue] ────┬────┬────┬────┬────[Brown]────┬────┬────┬────[Orange] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ OKLAB Gradient (Core & Flow): │
│ ═════════════════════════════ │
│ │
│ Blue ═══════════════ Vibrant Purple ═══════════════ Orange │
│ ^ │
│ STAYS CLEAN │
│ (saturated, vivid) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Blue] ────┬────┬────┬────[Purple]────┬────┬────┬────┬────[Orange] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ "Flow between Cores uses OKLAB - no muddy transitions." │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Concept Diagram
How Core and Flow relate.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ CORE & FLOW RELATIONSHIP │
│ │
│ │
│ FLOW: hover │
│ +15% │
│ ┌────────┐ │
│ │ │ │
│ v │ │
│ FLOW: bg ╔═════════╗ │ │
│ 80% ║ ║ │ │
│ transp. <────║ CORE ║───┴───> FLOW: active │
│ ║ ║ -20% │
│ ║ PRIMARY ║ │
│ ║ Blue ║ │
│ ║ ║───┬───> FLOW: muted │
│ ╚═════════╝ │ 20% opacity │
│ │ │ │
│ └────────┘ │
│ FLOW: disabled │
│ gray mix │
│ │
│ │
│ Every Flow color traces back to a Core color. │
│ Change the Core, and all Flows update automatically. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Performance Bar Chart
Visual comparison of speed.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ THEME SWITCH TIME COMPARISON │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ ││
│ │ Core & Flow ││
│ │ [═] < 0.1ms ││
│ │ ││
│ │ Material Design HCT ││
│ │ [═════════════════════════════════════════════════════] 10ms ││
│ │ ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
│ 100x faster │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ BUNDLE SIZE COMPARISON │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ ││
│ │ Core & Flow ││
│ │ [ ] 0 KB ││
│ │ ││
│ │ Material Design HCT ││
│ │ [═════════════════════════════════════════════] 45 KB ││
│ │ ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
│ Infinite improvement │
│ (can't divide by zero!) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Before and After
The transformation in color management.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ BEFORE: 47 Manually Calculated Colors │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ primary = #2380C7 ║│
│ ║ primary-hover = #268BD2 <── Manual ║│
│ ║ primary-active = #1D6CA8 <── Manual ║│
│ ║ primary-disabled = #8EBCDC <── Manual ║│
│ ║ primary-light = #4A9DD9 <── Manual ║│
│ ║ primary-lighter = #7AB8E6 <── Manual ║│
│ ║ primary-dark = #1A6091 <── Manual ║│
│ ║ primary-bg = rgba(...) <── Manual ║│
│ ║ ... 39 more variations ... ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ AFTER: 5 Core Colors + Automatic Derivation │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ CORE: Primary = oklch(55% 0.15 230) ║│
│ ║ │ ║│
│ ║ ├───> FLOW: hover (auto-derived) ║│
│ ║ ├───> FLOW: active (auto-derived) ║│
│ ║ ├───> FLOW: disabled (auto-derived) ║│
│ ║ ├───> FLOW: background (auto-derived) ║│
│ ║ └───> FLOW: ... all states (auto-derived) ║│
│ ║ ║│
│ ║ Change brand color ──> ALL states update automatically! ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Marketing Principles Summary
Guidelines for all communications.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ MARKETING PRINCIPLES │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ 1. Lead with the Tagline ║│
│ ║ "Core Colors define identity. ║│
│ ║ Flow Colors handle everything in between." ║│
│ ║ ║│
│ ║ 2. Emphasize Zero-JS ║│
│ ║ "Zero JavaScript. Pure CSS. 100x faster than Material Design." ║│
│ ║ ║│
│ ║ 3. Use Technical Credibility ║│
│ ║ "W3C standard. OKLCH for identity. OKLAB for mixing." ║│
│ ║ ║│
│ ║ 4. Address the Muddy Problem ║│
│ ║ "Flow between Cores uses OKLAB - no muddy transitions." ║│
│ ║ ║│
│ ║ 5. Show Before/After ║│
│ ║ 47 HEX values ──> 5 Core Colors + automatic derivation ║│
│ ║ ║│
│ ║ 6. Position Against Alternatives ║│
│ ║ - vs HCT: Performance and bundle size ║│
│ ║ - vs HSL: Perceptual uniformity ║│
│ ║ - vs HEX: Single source of truth ║│
│ ║ ║│
│ ║ 7. Adapt to Audience ║│
│ ║ - Developers: Code examples, performance metrics ║│
│ ║ - Designers: Visual comparisons, workflow benefits ║│
│ ║ - Stakeholders: ROI, standards compliance, risk reduction ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
└─────────────────────────────────────────────────────────────────────────────┘
“Core Colors define identity. Flow Colors handle everything in between.”
Implementation Guide
Ready to implement? Follow the step-by-step guide