# Chromatic Design System > A universal vibrational design system for Next.js applications based on Edwin Babbitt's *Principles of Light and Color* (1878) and Besant/Leadbeater's *Thought-Forms* (1901). **Use this to generate design tokens, Tailwind configs, and component themes for ANY application.** --- ## The Three Laws of Thought-Forms Every design element is a "thought-form" - a visible manifestation of intention. Three principles govern their creation: | Law | Determines | Application | |-----|-----------|-------------| | **Quality of thought** | COLOR | User's emotional/intentional state → chromatic palette | | **Nature of thought** | FORM | Type of action/content → shape language | | **Definiteness of thought** | CLARITY | Confidence/certainty → outline sharpness, contrast | --- ## Part 1: Chromatic Color Science ### CRITICAL: What "Chromatic" Actually Means **CHROMATIC ≠ Bright saturated colors** **CHROMATIC = Gradation with hue-tinted grays (8-20% saturation)** The scientific color system uses **subtle gray-tinted colors**, not vivid saturated ones. This creates visual harmony and psychological calm. ```typescript // ❌ WRONG - This is NOT chromatic (too saturated) const wrongBlue = "hsl(210, 80%, 50%)" // ✅ CORRECT - This IS chromatic (gray-tinted) const chromaticBlue = "hsl(210, 12%, 50%)" ``` ### Achromatic vs Chromatic | Type | Definition | Saturation | Use Case | |------|------------|------------|----------| | **Achromatic** | No hue (black, white, gray) | 0% | Neutral UI, text, borders | | **Chromatic Gray** | Gray tinted with a hue | 8-20% | Themed surfaces, accents | --- ## Part 2: The Three Forces From Babbitt's spectrum analysis, all colors carry one of three fundamental forces: ### Force Classification | Force | Hue Range | Quality | Physiological | Mental | Use In UI | |-------|-----------|---------|---------------|--------|-----------| | **THERMAL** | Red (0-30°) | Heat, expansion, action | Blood-animating, warming | Passion, will, urgency | CTAs, alerts, energy | | **LUMINOUS** | Yellow (40-60°) | Light, clarity, balance | Nerve-animating | Intellect, perception | Highlights, focus states | | **ELECTRICAL** | Blue-Violet (200-280°) | Cold, contraction, calm | Nerve-soothing, cooling | Intuition, spirituality | Backgrounds, trust, calm | | **NEUTRAL** | Green (90-150°) | Balance, synthesis | Harmonizing | Adaptability, growth | Success, nature, health | --- ## Part 3: Intention → Color Mapping ### Primary Intentions Map your app's purpose or user's emotional state to a chromatic palette: ```typescript export type DesignIntention = // THERMAL (action-oriented) | "urgency" // Red-gray: alerts, errors, critical actions | "energy" // Orange-gray: activation, enthusiasm, CTAs | "warmth" // Amber-gray: comfort, hospitality, welcome // LUMINOUS (clarity-oriented) | "clarity" // Yellow-gray: understanding, learning, focus | "optimism" // Gold-gray: positivity, success, achievement // NEUTRAL (balance-oriented) | "growth" // Green-gray: progress, health, nature | "harmony" // Teal-gray: balance, wellness, equilibrium // ELECTRICAL (calm-oriented) | "trust" // Blue-gray: reliability, professionalism, calm | "calm" // Indigo-gray: peace, meditation, depth | "spirit" // Violet-gray: creativity, luxury, transcendence // ACHROMATIC (neutral) | "neutral" // Pure grays: minimal, professional, universal ``` ### Thought-Form Color Meanings From Besant/Leadbeater's observations of actual thought emanations: | Color | Positive Expression | Shadow Expression | |-------|---------------------|-------------------| | **Rose/Pink** | Affection, love, care | Selfish attachment | | **Crimson** | Strong love, passion | Sensuality without love | | **Orange** | Ambition, pride, achievement | Arrogance, conceit | | **Yellow** | Intellect, understanding, wisdom | Cunning without wisdom | | **Green** | Sympathy, adaptability, healing | Jealousy (brownish-green) | | **Blue** | Devotion, loyalty, trust | Fanaticism (dark muddy blue) | | **Violet** | Spiritual aspiration, nobility | Spiritual pride | | **Gray** | Depression, fear | Melancholy | | **Brown** | Selfishness, greed | Avarice | | **Black** | Hatred, malice | — | ### Avoiding Shadow Colors Certain color combinations create "muddy" thought-forms. Avoid: | Avoid | Why | Instead Use | |-------|-----|-------------| | Brownish-green | Jealousy, deceit | Pure sage green-gray | | Muddy red-brown | Anger + selfishness | Clear rose or crimson | | Gray-green | Depression + jealousy | Either pure gray or pure green | | Murky orange | Pride corrupted by selfishness | Clear amber-gray | --- ## Part 4: The Complete Chromatic Palette ### HSL Values for All Chromatic Grays ```typescript export const CHROMATIC_PALETTE = { // ═══════════════════════════════════════════════════════════ // ACHROMATIC (No hue - 0% saturation) // ═══════════════════════════════════════════════════════════ achromatic: { 50: "hsl(0, 0%, 98%)", // near-white 100: "hsl(0, 0%, 96%)", 200: "hsl(0, 0%, 90%)", 300: "hsl(0, 0%, 80%)", 400: "hsl(0, 0%, 65%)", 500: "hsl(0, 0%, 50%)", // normal gray - harmonizes with everything 600: "hsl(0, 0%, 40%)", 700: "hsl(0, 0%, 30%)", 800: "hsl(0, 0%, 20%)", 900: "hsl(0, 0%, 12%)", 950: "hsl(0, 0%, 6%)", // near-black }, // ═══════════════════════════════════════════════════════════ // THERMAL FORCE - Red/Orange (0-40°) // ═══════════════════════════════════════════════════════════ // Red-Gray (Russet) - Urgency, passion, grounding redGray: { 50: "hsl(10, 12%, 97%)", 100: "hsl(10, 12%, 93%)", 200: "hsl(10, 12%, 85%)", 300: "hsl(10, 14%, 72%)", 400: "hsl(10, 14%, 58%)", 500: "hsl(10, 16%, 48%)", // primary 600: "hsl(10, 16%, 40%)", 700: "hsl(10, 18%, 32%)", 800: "hsl(10, 18%, 24%)", 900: "hsl(10, 20%, 16%)", 950: "hsl(10, 20%, 10%)", }, // Orange-Gray (Amber/Brown) - Energy, warmth, enthusiasm orangeGray: { 50: "hsl(30, 14%, 97%)", 100: "hsl(30, 14%, 92%)", 200: "hsl(30, 14%, 84%)", 300: "hsl(30, 16%, 70%)", 400: "hsl(30, 16%, 56%)", 500: "hsl(30, 18%, 46%)", // primary 600: "hsl(30, 18%, 38%)", 700: "hsl(30, 20%, 30%)", 800: "hsl(30, 20%, 22%)", 900: "hsl(30, 22%, 15%)", 950: "hsl(30, 22%, 9%)", }, // ═══════════════════════════════════════════════════════════ // LUMINOUS FORCE - Yellow (45-60°) // ═══════════════════════════════════════════════════════════ // Yellow-Gray (Citrine) - Clarity, intellect, optimism yellowGray: { 50: "hsl(50, 14%, 97%)", 100: "hsl(50, 14%, 93%)", 200: "hsl(50, 14%, 86%)", 300: "hsl(50, 16%, 74%)", 400: "hsl(50, 16%, 60%)", 500: "hsl(50, 18%, 50%)", // primary 600: "hsl(50, 18%, 42%)", 700: "hsl(50, 20%, 34%)", 800: "hsl(50, 20%, 26%)", 900: "hsl(50, 22%, 18%)", 950: "hsl(50, 22%, 10%)", }, // ═══════════════════════════════════════════════════════════ // NEUTRAL FORCE - Green (90-160°) // ═══════════════════════════════════════════════════════════ // Green-Gray (Sage) - Growth, balance, harmony greenGray: { 50: "hsl(120, 8%, 97%)", 100: "hsl(120, 8%, 93%)", 200: "hsl(120, 8%, 85%)", 300: "hsl(120, 10%, 72%)", 400: "hsl(120, 10%, 58%)", 500: "hsl(120, 12%, 48%)", // primary 600: "hsl(120, 12%, 40%)", 700: "hsl(120, 14%, 32%)", 800: "hsl(120, 14%, 24%)", 900: "hsl(120, 16%, 16%)", 950: "hsl(120, 16%, 9%)", }, // Teal-Gray - Balance, wellness, equilibrium tealGray: { 50: "hsl(170, 10%, 97%)", 100: "hsl(170, 10%, 93%)", 200: "hsl(170, 10%, 85%)", 300: "hsl(170, 12%, 72%)", 400: "hsl(170, 12%, 58%)", 500: "hsl(170, 14%, 48%)", // primary 600: "hsl(170, 14%, 40%)", 700: "hsl(170, 16%, 32%)", 800: "hsl(170, 16%, 24%)", 900: "hsl(170, 18%, 16%)", 950: "hsl(170, 18%, 9%)", }, // ═══════════════════════════════════════════════════════════ // ELECTRICAL FORCE - Blue/Violet (200-280°) // ═══════════════════════════════════════════════════════════ // Blue-Gray (Cool) - Trust, calm, professionalism blueGray: { 50: "hsl(210, 12%, 97%)", 100: "hsl(210, 12%, 93%)", 200: "hsl(210, 12%, 86%)", 300: "hsl(210, 14%, 72%)", 400: "hsl(210, 14%, 58%)", 500: "hsl(210, 16%, 48%)", // primary 600: "hsl(210, 16%, 40%)", 700: "hsl(210, 18%, 32%)", 800: "hsl(210, 18%, 24%)", 900: "hsl(210, 20%, 16%)", 950: "hsl(210, 20%, 10%)", }, // Indigo-Gray - Depth, meditation, intuition indigoGray: { 50: "hsl(240, 10%, 97%)", 100: "hsl(240, 10%, 93%)", 200: "hsl(240, 10%, 86%)", 300: "hsl(240, 12%, 72%)", 400: "hsl(240, 12%, 58%)", 500: "hsl(240, 14%, 48%)", // primary 600: "hsl(240, 14%, 40%)", 700: "hsl(240, 16%, 32%)", 800: "hsl(240, 16%, 24%)", 900: "hsl(240, 18%, 16%)", 950: "hsl(240, 18%, 9%)", }, // Violet-Gray (Mauve) - Creativity, spirit, luxury violetGray: { 50: "hsl(270, 10%, 97%)", 100: "hsl(270, 10%, 93%)", 200: "hsl(270, 10%, 86%)", 300: "hsl(270, 12%, 72%)", 400: "hsl(270, 12%, 58%)", 500: "hsl(270, 14%, 50%)", // primary 600: "hsl(270, 14%, 42%)", 700: "hsl(270, 16%, 34%)", 800: "hsl(270, 16%, 26%)", 900: "hsl(270, 18%, 18%)", 950: "hsl(270, 18%, 10%)", }, // ═══════════════════════════════════════════════════════════ // THOUGHT-FORM SPECIAL COLORS // ═══════════════════════════════════════════════════════════ // Rose-Gray - Affection, care, love (not romantic red) roseGray: { 50: "hsl(340, 12%, 97%)", 100: "hsl(340, 12%, 93%)", 200: "hsl(340, 12%, 86%)", 300: "hsl(340, 14%, 74%)", 400: "hsl(340, 14%, 60%)", 500: "hsl(340, 16%, 52%)", // primary 600: "hsl(340, 16%, 44%)", 700: "hsl(340, 18%, 36%)", 800: "hsl(340, 18%, 28%)", 900: "hsl(340, 20%, 20%)", 950: "hsl(340, 20%, 12%)", }, } ``` --- ## Part 5: Generating Design Tokens ### The Generator Function ```typescript // lib/chromatic-generator.ts import { CHROMATIC_PALETTE } from "./chromatic-palette" export type DesignIntention = | "urgency" | "energy" | "warmth" // thermal | "clarity" | "optimism" // luminous | "growth" | "harmony" // neutral | "trust" | "calm" | "spirit" // electrical | "affection" // rose | "neutral" // achromatic export type DesignMode = "light" | "dark" export interface ChromaticTokens { // Semantic colors background: string foreground: string card: string cardForeground: string primary: string primaryForeground: string secondary: string secondaryForeground: string muted: string mutedForeground: string accent: string accentForeground: string border: string input: string ring: string // State colors (always consistent) destructive: string destructiveForeground: string success: string successForeground: string warning: string warningForeground: string } const INTENTION_TO_PALETTE: Record = { urgency: "redGray", energy: "orangeGray", warmth: "orangeGray", clarity: "yellowGray", optimism: "yellowGray", growth: "greenGray", harmony: "tealGray", trust: "blueGray", calm: "indigoGray", spirit: "violetGray", affection: "roseGray", neutral: "achromatic", } export function generateChromaticTokens( intention: DesignIntention, mode: DesignMode = "dark" ): ChromaticTokens { const paletteName = INTENTION_TO_PALETTE[intention] const palette = CHROMATIC_PALETTE[paletteName] const achromatic = CHROMATIC_PALETTE.achromatic if (mode === "dark") { return { background: palette[950], foreground: palette[50], card: palette[900], cardForeground: palette[100], primary: palette[400], primaryForeground: palette[950], secondary: palette[800], secondaryForeground: palette[200], muted: palette[800], mutedForeground: palette[400], accent: palette[700], accentForeground: palette[100], border: palette[700], input: palette[800], ring: palette[400], // Semantic states use achromatic + slight tint destructive: CHROMATIC_PALETTE.redGray[500], destructiveForeground: achromatic[50], success: CHROMATIC_PALETTE.greenGray[500], successForeground: achromatic[50], warning: CHROMATIC_PALETTE.yellowGray[500], warningForeground: achromatic[950], } } else { return { background: palette[50], foreground: palette[950], card: achromatic[50], cardForeground: palette[900], primary: palette[600], primaryForeground: palette[50], secondary: palette[100], secondaryForeground: palette[800], muted: palette[100], mutedForeground: palette[600], accent: palette[200], accentForeground: palette[800], border: palette[300], input: palette[200], ring: palette[500], destructive: CHROMATIC_PALETTE.redGray[600], destructiveForeground: achromatic[50], success: CHROMATIC_PALETTE.greenGray[600], successForeground: achromatic[50], warning: CHROMATIC_PALETTE.yellowGray[500], warningForeground: achromatic[950], } } } ``` --- ## Part 6: Tailwind CSS Integration ### Generated CSS Variables ```typescript // lib/generate-css.ts export function generateCSSVariables( intention: DesignIntention, mode: DesignMode = "dark" ): string { const tokens = generateChromaticTokens(intention, mode) return ` :root { --background: ${tokens.background}; --foreground: ${tokens.foreground}; --card: ${tokens.card}; --card-foreground: ${tokens.cardForeground}; --primary: ${tokens.primary}; --primary-foreground: ${tokens.primaryForeground}; --secondary: ${tokens.secondary}; --secondary-foreground: ${tokens.secondaryForeground}; --muted: ${tokens.muted}; --muted-foreground: ${tokens.mutedForeground}; --accent: ${tokens.accent}; --accent-foreground: ${tokens.accentForeground}; --border: ${tokens.border}; --input: ${tokens.input}; --ring: ${tokens.ring}; --destructive: ${tokens.destructive}; --destructive-foreground: ${tokens.destructiveForeground}; --success: ${tokens.success}; --success-foreground: ${tokens.successForeground}; --warning: ${tokens.warning}; --warning-foreground: ${tokens.warningForeground}; } `.trim() } ``` ### Tailwind Config ```typescript // tailwind.config.ts import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)", }, primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)", }, secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)", }, muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)", }, accent: { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)", }, destructive: { DEFAULT: "var(--destructive)", foreground: "var(--destructive-foreground)", }, success: { DEFAULT: "var(--success)", foreground: "var(--success-foreground)", }, warning: { DEFAULT: "var(--warning)", foreground: "var(--warning-foreground)", }, border: "var(--border)", input: "var(--input)", ring: "var(--ring)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config ``` --- ## Part 7: Form Language (Nature of Thought → Shape) ### Shape Principles from Thought-Forms The **nature** of a thought determines its form: | Nature | Form Characteristic | CSS/Design Application | |--------|---------------------|------------------------| | **Directed intention** | Pointed, projectile-like | Arrow icons, pointed buttons, chevrons | | **Radiating love** | Star-like, outward rays | Starburst patterns, radial gradients | | **Protective care** | Enclosing, shell-like | Cards with rounded corners, containers | | **Intellectual focus** | Sharp, crystalline | Geometric shapes, crisp borders | | **Spiritual aspiration** | Upward-reaching, spire-like | Tall containers, upward arrows | | **Vague emotion** | Cloud-like, undefined | Blur effects, soft shadows, gradients | | **Strong emotion** | Dense, saturated core | Solid fills, high contrast | | **Weak/uncertain** | Thin, fragmented | Dotted lines, low opacity, outlines | ### Border Radius Scale ```typescript export const FORM_RADII = { // Definite, intellectual, precise sharp: "0px", // Slightly softened, professional subtle: "2px", // Balanced, approachable balanced: "6px", // Friendly, warm soft: "12px", // Nurturing, protective rounded: "20px", // Spiritual, ethereal full: "9999px", } ``` ### Clarity Scale (Definiteness → Outline) ```typescript export const CLARITY_LEVELS = { // Crystal clear intention - sharp borders, high contrast definite: { borderWidth: "1px", borderOpacity: 1, shadowBlur: "0px", contrast: "high", }, // Mostly clear - slight softness clear: { borderWidth: "1px", borderOpacity: 0.8, shadowBlur: "4px", contrast: "medium-high", }, // Balanced - natural softness balanced: { borderWidth: "1px", borderOpacity: 0.6, shadowBlur: "8px", contrast: "medium", }, // Contemplative - dreamlike quality soft: { borderWidth: "0px", borderOpacity: 0.4, shadowBlur: "16px", contrast: "low", }, // Meditative - ethereal, undefined ethereal: { borderWidth: "0px", borderOpacity: 0.2, shadowBlur: "32px", contrast: "very-low", }, } ``` --- ## Part 8: Laws of Chromatic Harmony ### The Gradation Law > "A beautiful Gradation of Chromatic Grays... are so exquisitely blended, like the gradations of nature, that it is impossible to perceive the degrees of progression." **Never make jarring leaps** in lightness or saturation. Always use adjacent steps: ```typescript // ✅ CORRECT - Gradual progression
{/* one step lighter */}
// ❌ WRONG - Jarring leap
{/* too much contrast */}
``` ### The Harmony Law Adjacent colors in your palette must share undertones: ```typescript // ✅ HARMONIOUS - Same hue family primary: "blueGray" accent: "indigoGray" // adjacent on color wheel // ❌ DISCORDANT - Clashing undertones primary: "blueGray" accent: "orangeGray" // opposite, creates tension ``` ### The Normal Gray Principle **Normal gray (50% lightness, 0% saturation) harmonizes with everything.** Use achromatic gray as a bridge between different chromatic families: ```typescript // Bridging two different chromatic palettes
{/* neutral transition */}
{/* now feels harmonious */}
``` --- ## Part 9: Usage Examples ### Example 1: Trust-Focused SaaS Dashboard ```typescript // Intention: trust (professional, reliable, calm) const tokens = generateChromaticTokens("trust", "dark") ``` Produces blue-gray palette with subtle undertones that convey professionalism without being cold. ### Example 2: Wellness App ```typescript // Intention: harmony (balanced, natural, healing) const tokens = generateChromaticTokens("harmony", "light") ``` Produces teal-gray palette that feels natural and calming. ### Example 3: Creative Portfolio ```typescript // Intention: spirit (creative, unique, aspirational) const tokens = generateChromaticTokens("spirit", "dark") ``` Produces violet-gray palette that feels luxurious and creative. ### Example 4: E-commerce (Energy + Warmth) ```typescript // Intention: energy (activating, encouraging action) const tokens = generateChromaticTokens("energy", "light") ``` Produces orange-gray palette that's warm and action-oriented without being aggressive. --- ## Part 10: Quick Reference ### Intention → Palette Mapping | Intention | Palette | Force | Hue | Best For | |-----------|---------|-------|-----|----------| | `urgency` | redGray | Thermal | 10° | Alerts, errors, critical | | `energy` | orangeGray | Thermal | 30° | CTAs, activation, enthusiasm | | `warmth` | orangeGray | Thermal | 30° | Hospitality, welcome, comfort | | `clarity` | yellowGray | Luminous | 50° | Learning, documentation, focus | | `optimism` | yellowGray | Luminous | 50° | Success states, achievements | | `growth` | greenGray | Neutral | 120° | Progress, health, nature | | `harmony` | tealGray | Neutral | 170° | Wellness, balance, equilibrium | | `trust` | blueGray | Electrical | 210° | Professional, reliable, calm | | `calm` | indigoGray | Electrical | 240° | Meditation, depth, intuition | | `spirit` | violetGray | Electrical | 270° | Creativity, luxury, transcendence | | `affection` | roseGray | Special | 340° | Care, love, nurturing | | `neutral` | achromatic | — | 0° | Minimal, universal, professional | ### Saturation Guidelines | Element Type | Saturation Range | |--------------|------------------| | Backgrounds | 8-12% | | Cards/Surfaces | 10-14% | | Text (on dark) | 0% (pure white/gray) | | Borders | 12-16% | | Interactive elements | 14-18% | | Focus states | 16-20% | ### Never Use - Saturation above 25% for any surface - Pure black (`hsl(0, 0%, 0%)`) - use 950 shades instead - Pure white (`hsl(0, 0%, 100%)`) - use 50 shades instead - Brownish-green combinations (jealousy/deceit) - Gray-green without clear separation (depression) --- ## TypeScript Package ### Full Type Definitions ```typescript // types/chromatic.ts export type ChromaticHue = | "redGray" | "orangeGray" | "yellowGray" | "greenGray" | "tealGray" | "blueGray" | "indigoGray" | "violetGray" | "roseGray" | "achromatic" export type ChromaticShade = | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 export type Force = "thermal" | "luminous" | "neutral" | "electrical" export interface ChromaticColor { hue: ChromaticHue shade: ChromaticShade hsl: string force: Force } export interface ThoughtFormProperties { quality: DesignIntention // → determines color nature: FormNature // → determines shape definiteness: ClarityLevel // → determines outline } export type FormNature = | "directed" // pointed, projectile | "radiating" // star-like, outward | "protective" // enclosing, shell | "intellectual" // crystalline, sharp | "aspirational" // upward, spire | "emotional" // cloud-like, soft export type ClarityLevel = | "definite" | "clear" | "balanced" | "soft" | "ethereal" ``` --- *"Quality of thought determines colour. Nature of thought determines form. Definiteness of thought determines clearness of outline."* — Besant & Leadbeater, *Thought-Forms* (1901)