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.

// ❌ 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:

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

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

// 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<DesignIntention, keyof typeof CHROMATIC_PALETTE> = {
  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

// 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

// 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

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)

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:

// ✅ CORRECT - Gradual progression
<div className="bg-blueGray-900 text-blueGray-100">
  <div className="bg-blueGray-800" /> {/* one step lighter */}
</div>

// ❌ WRONG - Jarring leap
<div className="bg-blueGray-900 text-blueGray-100">
  <div className="bg-blueGray-200" /> {/* too much contrast */}
</div>

The Harmony Law

Adjacent colors in your palette must share undertones:

// ✅ 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:

// Bridging two different chromatic palettes
<div className="bg-blueGray-900">
  <div className="bg-achromatic-800" /> {/* neutral transition */}
  <div className="bg-orangeGray-800" /> {/* now feels harmonious */}
</div>

Part 9: Usage Examples

Example 1: Trust-Focused SaaS Dashboard

// 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

// Intention: harmony (balanced, natural, healing)
const tokens = generateChromaticTokens("harmony", "light")

Produces teal-gray palette that feels natural and calming.

Example 3: Creative Portfolio

// 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)

// 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

// 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)