The Problem with Traditional Syntax Highlighting
Traditional syntax highlighting assigns fixed colors to token types globally. A TypeScript file and a Python file look essentially the same, differentiated only by the keywords themselves.┌────────────────────────────────────────────────────────────────────────────────┐
│ TRADITIONAL SYNTAX HIGHLIGHTING │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ All files share the same color palette: │
│ │
│ .ts file: .py file: │
│ ┌──────────────────────────┐ ┌──────────────────────────┐ │
│ │ const x = "hello"; │ │ x = "hello" │ │
│ │ ^^^^^ ^^^^^^^^ │ │ ^ ^^^^^^^^ │ │
│ │ BLUE GREEN │ │ BLUE GREEN │ │
│ └──────────────────────────┘ └──────────────────────────┘ │
│ │
│ Result: Files feel the SAME despite being different languages │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
The Syntax Spectrum Solution
Each file type has a SEED color that generates its entire syntax palette using Golden Angle rotation.┌────────────────────────────────────────────────────────────────────────────────┐
│ SYNTAX SPECTRUM CONCEPT │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Each file type has a SEED color that generates its syntax palette: │
│ │
│ .ts file (SEED: Blue H=230): .py file (SEED: Green H=130): │
│ ┌──────────────────────────┐ ┌──────────────────────────┐ │
│ │ const x = "hello"; │ │ x = "hello" │ │
│ │ ^^^^^ ^^^^^^^^ │ │ ^ ^^^^^^^^ │ │
│ │ 230deg 257.5deg │ │ 130deg 157.5deg │ │
│ │ (blue) (blue-purple) │ │ (green) (teal) │ │
│ └──────────────────────────┘ └──────────────────────────┘ │
│ │
│ Result: Files have DISTINCT "moods" based on their language │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
The Blue World and Green World Effect
When you open a TypeScript file, you enter a “blue world.” When you switch to Python, you enter a “green world.”┌────────────────────────────────────────────────────────────────────────────────┐
│ TYPESCRIPT FILE: "BLUE WORLD" │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ SEED = oklch(55% 0.15 230) -- Blue │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 1 │ const greeting: string = "Hello"; │ │
│ │ 2 │ function sayHello(): void { │ │
│ │ 3 │ console.log(greeting); // output │ │
│ │ 4 │ return 42; │ │
│ │ 5 │ } │ │
│ │ │ ^ ^ ^ ^ │ │
│ │ │ keyword type string comment │ │
│ │ │ (230deg) (340deg) (257deg) (gray-blue) │ │
│ │ │ │ │
│ │ │ All colors derive from 230deg (Blue) │ │
│ │ │ Opening this file feels like entering a "blue world" │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ PYTHON FILE: "GREEN WORLD" │
│ │
│ SEED = oklch(55% 0.15 130) -- Green │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 1 │ greeting: str = "Hello" │ │
│ │ 2 │ def say_hello() -> None: │ │
│ │ 3 │ print(greeting) # output │ │
│ │ 4 │ return 42 │ │
│ │ 5 │ │ │
│ │ │ ^ ^ ^ ^ │ │
│ │ │ keyword type string comment │ │
│ │ │ (130deg) (240deg) (157deg) (gray-green) │ │
│ │ │ │ │
│ │ │ All colors derive from 130deg (Green) │ │
│ │ │ Opening this file feels like entering a "green world" │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Golden Angle Token Distribution
Tokens within a file use a smaller Golden Angle (27.5 degrees) for related but distinct colors.┌────────────────────────────────────────────────────────────────────────────────┐
│ GOLDEN ANGLE DISTRIBUTION │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Full Golden Angle: 137.5 degrees │
│ ═════════════════════════════════ │
│ │
│ Based on the golden ratio (phi = 1.618...) │
│ 360 / phi^2 = 137.5077... │
│ │
│ This angle maximizes visual separation when generating N colors. │
│ No matter how many colors, they never cluster on one side. │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Smaller Angle: 27.5 degrees (for syntax) │
│ ═════════════════════════════════════════ │
│ │
│ Used for tokens WITHIN a file's spectrum. │
│ Creates a smooth progression of related hues. │
│ │
│ From SEED (e.g., 230 for .ts): │
│ Token 0 (keyword): 230deg │
│ Token 1 (function): 257.5deg (+27.5) │
│ Token 2 (number): 285deg (+55) │
│ Token 3 (builtin): 312.5deg (+82.5) │
│ │
│ All tokens are "neighbors" on the color wheel. │
│ They feel related but distinguishable. │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Token Color Derivation Process
┌────────────────────────────────────────────────────────────────────────────────┐
│ SYNTAX SPECTRUM DERIVATION │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Given SEED: oklch(55% 0.15 230) for TypeScript (.ts) │
│ │
│ Step 1: Apply hue offset (-50) │
│ ══════════════════════════════ │
│ Base hue = 230 + (-50) = 180 (Cyan) │
│ │
│ Step 2: Generate token hues via Golden Angle (27.5) │
│ ════════════════════════════════════════════════════ │
│ │
│ Token Index Hue Calculation Result │
│ ─────── ───── ─────────────── ────── │
│ keyword 0 180 + 0*27.5 = 180 180deg (Cyan) │
│ function 1 180 + 1*27.5 = 207.5 207.5deg (Cyan-Blue) │
│ number 2 180 + 2*27.5 = 235 235deg (Blue) │
│ builtin 3 180 + 3*27.5 = 262.5 262.5deg (Blue-Purple) │
│ meta 4 180 + 4*27.5 = 290 290deg (Purple) │
│ tag 5 180 + 5*27.5 = 317.5 317.5deg (Purple-Magenta) │
│ tag-name 6 180 + 6*27.5 = 345 345deg (Magenta-Red) │
│ attribute 7 180 + 7*27.5 = 12.5 12.5deg (Red-Orange) │
│ │
│ Step 3: Apply saturation variation within groups (HSL mode) │
│ ══════════════════════════════════════════════════════════ │
│ │
│ Group size: 4 tokens │
│ Saturation range: 70% (max) to 25% (min) │
│ │
│ Token Position Saturation │
│ ─────── ──────── ────────── │
│ keyword 0 70% │
│ function 1 55% (70 - 15) │
│ number 2 40% (70 - 30) │
│ builtin 3 25% (70 - 45) │
│ meta 0 (new) 70% │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Token Color Wheel
┌────────────────────────────────────────────────────────────────────────────────┐
│ TOKEN COLOR WHEEL │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 0deg (Red) │
│ │ │
│ 7 │ │
│ (attribute)│ 6 (tag-name) │
│ \ │ / │
│ \ │ / │
│ \ │/ 5 (tag) │
│ 270deg (Blue) ─────────┼───────── 90deg (Green) │
│ 4 (meta) │ \ │
│ / │ \ │
│ / │ \ │
│ 3 (builtin) / │ \ 0 (keyword) │
│ / │ \ │
│ / │ \ │
│ 2 (number) / │ \ 1 (function) │
│ │ │
│ 180deg (Cyan) │
│ │
│ Starting from 180deg (cyan), tokens progress clockwise │
│ by 27.5 degrees each, covering about 195 degrees total │
│ (7 * 27.5 = 192.5) │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
Comment Color Derivation
Comments are handled differently - they use OKLAB mixing with gray to create a desaturated version of the seed color.┌────────────────────────────────────────────────────────────────────────────────┐
│ COMMENT COLOR DERIVATION │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Standard tokens: Hue rotation (stays vibrant) │
│ Comment: Saturation reduction via OKLAB mixing │
│ │
│ SEED: oklch(55% 0.15 230) -- Blue │
│ │
│ Comment = color-mix(in oklab, SEED, gray 60%) │
│ │
│ Process: │
│ 1. SEED in OKLAB: L=0.55, a=-0.10, b=-0.11 │
│ 2. Gray in OKLAB: L=0.50, a=0, b=0 │
│ 3. Mix at 40%/60%: │
│ L = 0.55*0.4 + 0.50*0.6 = 0.52 │
│ a = -0.10*0.4 + 0*0.6 = -0.04 │
│ b = -0.11*0.4 + 0*0.6 = -0.044 │
│ │
│ Result: A grayish-blue that whispers "I'm from the blue family" │
│ but doesn't demand attention │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
File Type to Hue Mapping
┌────────────────────────────────────────────────────────────────────────────────┐
│ FILE TYPE COLOR ASSIGNMENTS │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Extension Hue Color Name Rationale │
│ ───────── ─── ────────── ───────── │
│ .ts 230 Blue TypeScript (Microsoft blue) │
│ .js 55 Yellow JavaScript (classic JS color) │
│ .py 130 Green Python (common association) │
│ .rs 35 Orange Rust (official orange) │
│ .go 195 Cyan Go (gopher blue-green) │
│ .rb 355 Red Ruby (gemstone color) │
│ .java 80 Yellow-Green Java (coffee-ish) │
│ .kt 270 Purple Kotlin (JetBrains purple) │
│ .swift 340 Orange-Red Swift (Apple swift bird) │
│ .c 200 Teal C (classic blue-green) │
│ .cpp 210 Blue-Teal C++ (similar to C) │
│ .cs 290 Violet C# (Microsoft purple) │
│ .html 20 Red-Orange HTML (web standard) │
│ .css 240 Blue-Violet CSS (cascade styling) │
│ .scss 300 Magenta SCSS (Sass pink) │
│ .json 50 Orange-Yellow JSON (data color) │
│ .yaml 180 Cyan YAML (config blue) │
│ .md 100 Lime Markdown (text green) │
│ .sh 140 Green Shell (terminal green) │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
UI Elements from SEED
Not just syntax tokens - UI elements also derive from the file’s SEED color.┌────────────────────────────────────────────────────────────────────────────────┐
│ UI ELEMENTS FROM SEED │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Given SEED = oklch(55% 0.15 230) for .ts file │
│ │
│ Element Derivation Formula │
│ ─────── ────────────────── │
│ selection color-mix(in oklab, SEED, transparent 85%) │
│ line-number color-mix(in oklab, SEED, gray 70%) │
│ scrollbar color-mix(in oklab, SEED, transparent 90%) │
│ cursor oklch(70% 0.20 230) <- Brighter, more saturated │
│ matching-bracket color-mix(in oklab, SEED, white 30%) │
│ indent-guide color-mix(in oklab, SEED, transparent 95%) │
│ │
│ These elements "belong" to the file's color world. │
│ When you open a .ts file, EVERYTHING has a blue tint. │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
CSS Implementation Pattern
/* File-specific UI elements */
[data-file-type="ts"] {
--seed: oklch(55% 0.15 230);
/* Syntax spectrum */
--syntax-keyword: var(--seed);
--syntax-string: oklch(55% 0.15 207.5);
--syntax-function: oklch(55% 0.15 235);
--syntax-type: oklch(55% 0.15 262.5);
--syntax-comment: color-mix(in oklab, var(--seed), gray 60%);
/* UI elements */
--ui-selection: color-mix(in oklab, var(--seed), transparent 85%);
--ui-line-number: color-mix(in oklab, var(--seed), gray 70%);
--ui-cursor: oklch(70% 0.20 230);
}
[data-file-type="py"] {
--seed: oklch(55% 0.15 130);
/* Same formula, different seed */
--syntax-keyword: var(--seed);
--syntax-string: oklch(55% 0.15 107.5);
--syntax-function: oklch(55% 0.15 135);
--syntax-type: oklch(55% 0.15 162.5);
--syntax-comment: color-mix(in oklab, var(--seed), gray 60%);
/* UI elements */
--ui-selection: color-mix(in oklab, var(--seed), transparent 85%);
--ui-line-number: color-mix(in oklab, var(--seed), gray 70%);
--ui-cursor: oklch(70% 0.20 130);
}
Comparison with Traditional Approach
┌────────────────────────────────────────────────────────────────────────────────┐
│ TRADITIONAL VS SYNTAX SPECTRUM │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Traditional Fixed Colors: │
│ ════════════════════════ │
│ │
│ Token Type Color (fixed) All Files │
│ ────────── ───────────── ───────── │
│ keyword #569CD6 .ts, .py, .rs, .go, etc. │
│ string #CE9178 all files │
│ function #DCDCAA all files │
│ number #B5CEA8 all files │
│ comment #6A9955 all files │
│ │
│ Pros: │
│ - Consistent across all languages │
│ - Easy to learn and predict │
│ - Less cognitive load when switching files │
│ │
│ Cons: │
│ - All files look the same │
│ - No visual context about file type │
│ - Language identity is lost in color │
│ │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Syntax Spectrum: │
│ ════════════════ │
│ │
│ .ts file (SEED 230): .py file (SEED 130): │
│ keyword oklch(55% 0.15 180) keyword oklch(55% 0.15 80) │
│ string oklch(55% 0.15 207.5) string oklch(55% 0.15 107.5) │
│ function oklch(55% 0.15 235) function oklch(55% 0.15 135) │
│ comment gray-blue comment gray-green │
│ │
│ Pros: │
│ - Each file type has unique visual identity │
│ - "Blue world" for TS, "Green world" for Python │
│ - Easier to identify file type at a glance │
│ - Perceptually uniform (OKLCH) │
│ │
│ Cons: │
│ - More variation to learn │
│ - "keyword" looks different in different files │
│ - May be confusing initially │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
THE CENTER
Color as Language Identity
The Syntax Spectrum transforms syntax highlighting from a utilitarian feature into an information architecture tool. By giving each language its own “color world,” the system provides instant visual context about what you are working with.Connection to Core-Flow:
├── File type defines Core (SEED hue)
├── Token colors Flow from SEED via Golden Angle
├── Comments Flow toward gray while preserving hue
└── UI elements Flow from SEED via transparency
Git Branch Colors
OKLAB interpolation for merge line visualization