Syntax Spectrum
Each programming language has its own visual identity.┌─────────────────────────────────────────────────────────────────┐
│ │
│ TRADITIONAL SYNTAX HIGHLIGHTING │
│ │
│ .ts file: .py file: │
│ ┌────────────────────────┐ ┌────────────────────────┐ │
│ │ const x = "hello"; │ │ x = "hello" │ │
│ │ ^^^^^ ^^^^^^^^ │ │ ^ ^^^^^^^^ │ │
│ │ BLUE GREEN │ │ BLUE GREEN │ │
│ └────────────────────────┘ └────────────────────────┘ │
│ │
│ Problem: ALL files use the SAME colors │
│ TypeScript looks just like Python │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ SYNTAX SPECTRUM │
│ │
│ .ts file (SEED: Blue): .py file (SEED: Green): │
│ ┌────────────────────────┐ ┌────────────────────────┐ │
│ │ const x = "hello"; │ │ x = "hello" │ │
│ │ ^^^^^ ^^^^^^^^ │ │ ^ ^^^^^^^^ │ │
│ │ 230 deg 257.5 deg │ │ 130 deg 157.5 deg │ │
│ │ (blue) (blue-purple)│ │ (green) (teal) │ │
│ └────────────────────────┘ └────────────────────────┘ │
│ │
│ Solution: Each file type has its OWN color world │
│ TypeScript = "Blue World" │
│ Python = "Green World" │
│ │
└─────────────────────────────────────────────────────────────────┘
The Blue World and Green World
┌─────────────────────────────────────────────────────────────────┐
│ │
│ TYPESCRIPT: THE 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 = entering a "blue world" │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ PYTHON: THE 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 = entering a "green world" │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
The Golden Angle for Tokens
┌─────────────────────────────────────────────────────────────────┐
│ │
│ FULL GOLDEN ANGLE: 137.5 degrees │
│ ═══════════════════════════════ │
│ │
│ Based on golden ratio (phi = 1.618...) │
│ 360 / phi^2 = 137.5077... │
│ │
│ Maximizes visual separation when generating N colors │
│ No matter how many, they never cluster │
│ │
│ Color 1: 0 deg │
│ Color 2: 137.5 deg │
│ Color 3: 275 deg │
│ Color 4: 52.5 deg │
│ ... │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ SMALLER ANGLE: 27.5 degrees (for syntax tokens) │
│ ═══════════════════════════════════════════════ │
│ │
│ Used for tokens WITHIN a file's spectrum │
│ Creates smooth progression of related hues │
│ │
│ From SEED (e.g., 230 for .ts): │
│ Token 0 (keyword): 230 deg │
│ Token 1 (function): 257.5 deg (+27.5) │
│ Token 2 (number): 285 deg (+55) │
│ Token 3 (builtin): 312.5 deg (+82.5) │
│ │
│ All tokens are "neighbors" on the color wheel │
│ Related but distinguishable │
│ │
└─────────────────────────────────────────────────────────────────┘
Token Color Wheel
┌─────────────────────────────────────────────────────────────────┐
│ │
│ TOKENS ON THE COLOR WHEEL (starting from 180 deg) │
│ │
│ 0 deg (Red) │
│ | │
│ 7 | │
│ (attribute)| 6 (tag-name) │
│ \ | / │
│ \ | / │
│ \ |/ 5 (tag) │
│ 270 deg (Blue) ────────+-─────── 90 deg (Green) │
│ 4 (meta) | \ │
│ / | \ │
│ / | \ │
│ 3 (builtin) / | \ 0 (keyword) │
│ / | \ │
│ / | \ │
│ 2 (number) / | \ 1 (function) │
│ | │
│ 180 deg (Cyan) │
│ │
│ Starting from 180 deg (cyan), tokens progress clockwise │
│ by 27.5 degrees each, covering about 195 degrees total │
│ │
└─────────────────────────────────────────────────────────────────┘
Comment Special Case
┌─────────────────────────────────────────────────────────────────┐
│ │
│ COMMENTS: BLEND WITH GRAY │
│ │
│ Comments should not demand attention │
│ They should "whisper" their file's color identity │
│ │
│ Formula: Mix SEED color with 60% gray │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ SEED (Blue): ████████████████████ oklch(55% 0.15 230) │
│ │ │ │
│ │ Gray: ░░░░░░░░░░░░░░░░░░░░ oklch(50% 0 0) │ │
│ │ │ │
│ │ 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: ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ Grayish-blue │ │
│ │ │ │
│ │ A subtle hint of blue that says "I'm from the blue │ │
│ │ family" without demanding attention │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
File Type Hue Assignments
┌─────────────────────────────────────────────────────────────────┐
│ │
│ FILE EXTENSION TO HUE MAPPING │
│ │
│ ┌──────────┬──────┬──────────────┬────────────────────────┐ │
│ │Extension │ Hue │ Color │ Rationale │ │
│ ├──────────┼──────┼──────────────┼────────────────────────┤ │
│ │ .ts │ 230 │ Blue │ TypeScript (Microsoft) │ │
│ │ .js │ 55 │ Yellow │ JavaScript (classic) │ │
│ │ .py │ 130 │ Green │ Python (common) │ │
│ │ .rs │ 35 │ Orange │ Rust (official) │ │
│ │ .go │ 195 │ Cyan │ Go (gopher color) │ │
│ │ .rb │ 355 │ Red │ Ruby (gemstone) │ │
│ │ .java │ 80 │ Yellow-Green │ Java (coffee) │ │
│ │ .kt │ 270 │ Purple │ Kotlin (JetBrains) │ │
│ │ .swift │ 340 │ Orange-Red │ Swift (bird) │ │
│ │ .c │ 200 │ Teal │ C (classic) │ │
│ │ .cpp │ 210 │ Blue-Teal │ C++ (similar to C) │ │
│ │ .cs │ 290 │ Violet │ C# (Microsoft) │ │
│ │ .html │ 20 │ Red-Orange │ HTML (web) │ │
│ │ .css │ 240 │ Blue-Violet │ CSS (styling) │ │
│ │ .scss │ 300 │ Magenta │ SCSS (Sass) │ │
│ │ .json │ 50 │ Orange-Yellow│ JSON (data) │ │
│ │ .yaml │ 180 │ Cyan │ YAML (config) │ │
│ │ .md │ 100 │ Lime │ Markdown (text) │ │
│ │ .sh │ 140 │ Green │ Shell (terminal) │ │
│ └──────────┴──────┴──────────────┴────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
UI Elements from SEED
┌─────────────────────────────────────────────────────────────────┐
│ │
│ THE ENTIRE EDITOR ADOPTS THE FILE'S COLOR │
│ │
│ Given SEED = oklch(55% 0.15 230) for .ts file │
│ │
│ ┌───────────────────┬───────────────────────────────────────┐ │
│ │ Element │ Derivation │ │
│ ├───────────────────┼───────────────────────────────────────┤ │
│ │ selection │ SEED + 85% transparent │ │
│ │ line-number │ SEED + 70% gray │ │
│ │ scrollbar │ SEED + 90% transparent │ │
│ │ cursor │ Brighter, more saturated │ │
│ │ matching-bracket │ SEED + 30% white │ │
│ │ indent-guide │ SEED + 95% transparent │ │
│ └───────────────────┴───────────────────────────────────────┘ │
│ │
│ These elements "belong" to the file's color world │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ .ts file: EVERYTHING has a blue tint │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ | 1 | const x = "hello"; | ▓▓▓ <- scrollbar │ │
│ │ | 2 | function foo() { | ▓▓▓ │ │
│ │ | 3 | return x; | ▓▓▓ │ │
│ │ | 4 | } | ▓▓▓ │ │
│ │ ^^^^^ │ │
│ │ line numbers (gray-blue) │ │
│ │ │ │
│ │ .py file: EVERYTHING has a green tint │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ | 1 | x = "hello" | ░░░ <- scrollbar │ │
│ │ | 2 | def foo(): | ░░░ │ │
│ │ | 3 | return x | ░░░ │ │
│ │ | 4 | | ░░░ │ │
│ │ ^^^^^ │ │
│ │ line numbers (gray-green) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Traditional vs Spectrum
┌─────────────────────────────────────────────────────────────────┐
│ │
│ COMPARISON │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ TRADITIONAL (Fixed Colors) │ │
│ │ │ │
│ │ Token Type Color Used In │ │
│ │ ────────── ───── ─────── │ │
│ │ keyword Blue .ts, .py, .rs, .go... │ │
│ │ string Green all files │ │
│ │ function Yellow all files │ │
│ │ number Orange all files │ │
│ │ comment Gray-Green all files │ │
│ │ │ │
│ │ Pros: Consistent, easy to learn │ │
│ │ Cons: All files look the same │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ SYNTAX SPECTRUM (Derived Colors) │ │
│ │ │ │
│ │ .ts file (SEED 230): .py file (SEED 130): │ │
│ │ keyword 180 deg (cyan) keyword 80 deg │ │
│ │ string 207.5 deg string 107.5 deg │ │
│ │ function 235 deg function 135 deg │ │
│ │ comment gray-blue comment gray-green │ │
│ │ │ │
│ │ Pros: Each file type has unique identity │ │
│ │ "Blue world" for TS, "Green world" for Python │ │
│ │ Easier to identify file type at a glance │ │
│ │ │ │
│ │ Cons: More variation to learn │ │
│ │ "keyword" looks different in different files │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Takeaways
┌─────────────────────────────────────────────────────────────────┐
│ │
│ SUMMARY │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. Each file extension has a unique SEED hue │ │
│ │ (.ts = 230, .py = 130, .rs = 35, etc.) │ │
│ │ │ │
│ │ 2. Token colors rotate by 27.5 degrees from SEED │ │
│ │ Creates related but distinguishable colors │ │
│ │ │ │
│ │ 3. Comments blend SEED with gray (60%) │ │
│ │ Subtle hint of file's color identity │ │
│ │ │ │
│ │ 4. UI elements also derive from SEED │ │
│ │ Selection, line numbers, scrollbar, cursor │ │
│ │ Entire editor adopts the file's world │ │
│ │ │ │
│ │ 5. Golden angle (27.5) ensures token distinction │ │
│ │ Close enough to feel related │ │
│ │ Far enough to be distinguishable │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ When you open a TypeScript file, you enter a blue world. │
│ When you switch to Python, you enter a green world. │
│ Language identity becomes visible through color. │
│ │
└─────────────────────────────────────────────────────────────────┘