> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Syntax Spectrum > How each file type's seed color generates a complete syntax highlighting palette ## 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. ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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. ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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." ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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. ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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 ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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 ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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. ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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 ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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. ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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 ```css theme={null} /* 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 ```ascii theme={null} ┌────────────────────────────────────────────────────────────────────────────────┐ │ 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 ``` This approach makes language identity visible through color, reducing the cognitive load of context switching between files. *** OKLAB interpolation for merge line visualization