The Core Message
The essential tagline for all communications.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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