Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
DigitalRust spec.html
89 kB · 2731 lines
HTML
at commit 1c8d2c10
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731<!DOCTYPE html><html lang="en-US">
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <script defer src="https://ichnaea.eris.host/ichnaea.js" data-website-id="887fbb32-f566-4362-9666-860bf6cf8c93"></script> <script defer src="https://ichnaea.eris.host/recorder.js" data-website-id="887fbb32-f566-4362-9666-860bf6cf8c93"></script> <link href="normalize.css" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.bunny.net"> <link href="https://fonts.bunny.net/css?family=rajdhani:400,500,600,700|zilla-slab:400,400i,500,600,700|ibm-plex-mono:400,500,600,700&display=swap" rel="stylesheet" /> <link href="tokens.css" rel="stylesheet" /> <link href="specstyle.css" rel="stylesheet" /> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <meta name="apple-mobile-web-app-title" content="Digital Rust" /> <link rel="manifest" href="/site.webmanifest" /> <title>Digital Rust Specification</title></head>
<body> <div class="noise-overlay" aria-hidden="true"></div> <div class="scanline-overlay" aria-hidden="true"></div> <button class="toc-toggle" data-toc-toggle aria-expanded="false">[ Spec Map ]</button> <div class="site-shell"> <aside class="toc-panel" data-toc-panel> <div class="toc-panel__inner"> <p class="toc-eyebrow">[ Spec Map ]</p> <p class="toc-panel__hint">Jump to any section instantly.</p> <nav id="TOC" role="doc-toc"> <ul> <li> <a href="#digital-rust-syntax-highlighting-specification" id="toc-digital-rust-syntax-highlighting-specification">Digital Rust Syntax Highlighting Specification</a> <ul> <li><a href="#overview" id="toc-overview">Overview</a></li> <li> <a href="#color-palette" id="toc-color-palette">Color Palette</a> <ul> <li> <a href="#main-colours" id="toc-main-colours">Main Colours</a> </li> <li> <a href="#ansi-colours" id="toc-ansi-colours">ANSI Colours</a> </li> </ul> </li> <li> <a href="#syntax-highlighting-rules" id="toc-syntax-highlighting-rules">Syntax Highlighting Rules</a> <ul> <li> <a href="#token-classification" id="toc-token-classification">Token Classification</a> </li> <li> <a href="#styling-modifiers" id="toc-styling-modifiers">Styling Modifiers</a> </li> <li> <a href="#special-rules" id="toc-special-rules">Special Rules</a> </li> </ul> </li> <li> <a href="#language-specific-rules" id="toc-language-specific-rules">Language-Specific Rules</a> <ul> <li> <a href="#configuration-languages-jsonyamltoml" id="toc-configuration-languages-jsonyamltoml">Configuration Languages (JSON/YAML/TOML)</a> </li> <li> <a href="#markdown-rich-text" id="toc-markdown-rich-text">Markdown & Rich Text</a> </li> <li> <a href="#html-xml-templates" id="toc-html-xml-templates">HTML / XML / Templates</a> </li> <li> <a href="#css-stylesheets" id="toc-css-stylesheets">CSS & Stylesheets</a> </li> <li> <a href="#string-interpolation" id="toc-string-interpolation">String Interpolation</a> </li> <li> <a href="#git-diff-views" id="toc-git-diff-views">Git & Diff Views</a> </li> <li> <a href="#shell-cli-scripts-bash-zsh-fish-powershell" id="toc-shell-cli-scripts-bash-zsh-fish-powershell">Shell & CLI Scripts (Bash, Zsh, Fish, PowerShell)</a> </li> <li><a href="#sql" id="toc-sql">SQL</a></li> <li> <a href="#cc-preprocessor-directives" id="toc-cc-preprocessor-directives">C/C++ Preprocessor Directives</a> </li> <li> <a href="#rust-specific" id="toc-rust-specific">Rust-Specific</a> </li> <li> <a href="#haskell-ml-functional-languages" id="toc-haskell-ml-functional-languages">Haskell / ML / Functional Languages</a> </li> </ul> </li> <li> <a href="#editor-ui-definitions" id="toc-editor-ui-definitions">Editor UI Definitions</a> <ul> <li> <a href="#editor-core" id="toc-editor-core">Editor Core</a> </li> <li> <a href="#selection-guides" id="toc-selection-guides">Selection & Guides</a> </li> <li> <a href="#search-navigation" id="toc-search-navigation">Search & Navigation</a> </li> <li> <a href="#disabled-placeholder-states" id="toc-disabled-placeholder-states">Disabled & Placeholder States</a> </li> <li><a href="#tabs" id="toc-tabs">Tabs</a></li> <li><a href="#sidebar" id="toc-sidebar">Sidebar</a></li> <li> <a href="#status-bar" id="toc-status-bar">Status Bar</a> </li> <li> <a href="#gutter-indicators" id="toc-gutter-indicators">Gutter Indicators</a> </li> <li> <a href="#inlay-hints-code-lens" id="toc-inlay-hints-code-lens">Inlay Hints & Code Lens</a> </li> <li> <a href="#minimap-overview-ruler" id="toc-minimap-overview-ruler">Minimap & Overview Ruler</a> </li> <li> <a href="#panels-popups" id="toc-panels-popups">Panels & Popups</a> </li> </ul> </li> <li> <a href="#terminal-configuration" id="toc-terminal-configuration">Terminal Configuration</a> <ul> <li> <a href="#ansi-color-mapping" id="toc-ansi-color-mapping">ANSI Color Mapping</a> </li> <li> <a href="#terminal-defaults" id="toc-terminal-defaults">Terminal Defaults</a> </li> <li> <a href="#color-truecolor-guidance" id="toc-color-truecolor-guidance">256-Color & Truecolor Guidance</a> </li> </ul> </li> <li> <a href="#implementation-guidelines" id="toc-implementation-guidelines">Implementation Guidelines</a> <ul> <li> <a href="#accessibility-standards" id="toc-accessibility-standards">Accessibility Standards</a> </li> <li> <a href="#consistency-requirements" id="toc-consistency-requirements">Consistency Requirements</a> </li> </ul> </li> <li> <a href="#ui-design-guidelines" id="toc-ui-design-guidelines">UI Design Guidelines</a> <ul> <li> <a href="#visual-hierarchy" id="toc-visual-hierarchy">Visual Hierarchy</a> </li> <li> <a href="#component-colour-guidelines" id="toc-component-colour-guidelines">Component Colour Guidelines</a> </li> <li> <a href="#theme-philosophy" id="toc-theme-philosophy">Theme Philosophy</a> </li> <li> <a href="ui.html" id="toc-ui-spec">UI Specification (ui.html)</a> </li> </ul> </li> <li> <a href="#testing-requirements" id="toc-testing-requirements">Testing Requirements</a> <ul> <li> <a href="#required-testing-scenarios" id="toc-required-testing-scenarios">Required Testing Scenarios</a> </li> <li> <a href="#performance-considerations" id="toc-performance-considerations">Performance Considerations</a> </li> </ul> </li> <li> <a href="#implementation-notes" id="toc-implementation-notes">Implementation Notes</a> <ul> <li> <a href="#canonical-source" id="toc-canonical-source">Canonical Source</a> </li> <li> <a href="#handling-coarse-tokenization" id="toc-handling-coarse-tokenization">Handling Coarse Tokenization</a> </li> </ul> </li> <li> <a href="#version-history" id="toc-version-history">Version History</a> </li> </ul> </li> </ul> </nav> </div> </aside> <main class="spec-main" id="spec-main"> <article class="spec-document" id="spec-document"> <h1 id="digital-rust-syntax-highlighting-specification"> Digital Rust Syntax Highlighting Specification </h1> <p class="spec-lede"> Official syntax highlighting and design specification for the Digital Rust theme. </p> <div class="spec-meta"> <div class="spec-meta__item"> <span class="spec-meta__label">Status</span> <span class="spec-meta__value status-chip">Living Specification</span> </div> <div class="spec-meta__item"> <span class="spec-meta__label">Last Updated</span> <span class="spec-meta__value" data-current-date>--</span> </div> <div class="spec-meta__item"> <span class="spec-meta__label">Format</span> <span class="spec-meta__value">HTML · Markdown</span> </div> <div class="hero-actions"> <a class="btn btn-primary" href="Digital Rust Syntax Highlighting Specification.md" download>Download Markdown</a> <a class="btn btn-secondary" href="ui.html">UI Guidelines</a> <a class="btn btn-secondary" href="index.html">Preview Theme</a> </div> </div> <h2 id="overview">Overview</h2> <p> Digital Rust is a warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. Built around deep rust-copper tones with strategic pops of color named after system failures, the theme delivers a unique visual experience that embraces the beauty of digital decay while maintaining excellent readability and productivity. </p> <div class="live-demo" aria-label="Digital Rust live preview"> <div> <div class="demo-heading"> <span>Live Snippet</span> <span class="demo-status">Spec OK</span> </div> <pre aria-label="Sample code styled with Digital Rust"><code><span class="token-comment">// signal: digital rust boot sequence</span><span class="token-keyword">fn</span> <span class="token-function">boot_sequence</span>() -> <span class="token-type">Result</span><<span class="token-type">SystemState</span>, <span class="token-type">KernelPanic</span>> { <span class="token-keyword">let</span> checksum = <span class="token-function">hash</span>(<span class="token-string">"ghost-pixel"</span>)?; <span class="token-keyword">if</span> checksum < <span class="token-number">0xAF2E1A</span> { <span class="token-keyword">return</span> <span class="token-constant">Err</span>(<span class="token-type">KernelPanic</span>::<span class="token-constant">CorruptedCache</span>); } <span class="token-keyword">Ok</span>(<span class="token-type">SystemState</span>::<span class="token-constant">Operational</span>)}</code></pre> </div> <div class="demo-legend" aria-label="Token legend"> <div class="legend-item"> <span>Keywords & control</span> <span class="legend-chip" style="background: var(--fatal-error);"></span> </div> <div class="legend-item"> <span>Functions</span> <span class="legend-chip" style="background: var(--stack-overglow);"></span> </div> <div class="legend-item"> <span>Types</span> <span class="legend-chip" style="background: var(--dead-thread);"></span> </div> <div class="legend-item"> <span>Strings</span> <span class="legend-chip" style="background: var(--memory-leek);"></span> </div> <div class="legend-item"> <span>Signals & numbers</span> <span class="legend-chip" style="background: var(--thermal-throttle);"></span> </div> </div> </div> <h2 id="color-palette">Color Palette</h2> <h3 id="main-colours">Main Colours</h3> <div class="color-lab" data-lab="main"> <div class="color-grid" data-source-table="main-palette-table" aria-live="polite"></div> <div class="table-scroll"> <table id="main-palette-table" data-color-table="main"> <thead> <tr> <th style="text-align: center">Hex Code</th> <th style="text-align: center">Name</th> <th style="text-align: center">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align: center">#f7eae8</td> <td style="text-align: center">Ghost Pixel</td> <td style="text-align: center">Lightest / White Point (text)</td> </tr> <tr> <td style="text-align: center">#efd5d1</td> <td style="text-align: center">Phosphor Smoke</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#e7c0ba</td> <td style="text-align: center">Phantom Current</td> <td style="text-align: center">Link Colour/Footer Text</td> </tr> <tr> <td style="text-align: center">#dfaba3</td> <td style="text-align: center">Corrupted Cache</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#d7968c</td> <td style="text-align: center">Copper Trace</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#cf8175</td> <td style="text-align: center">Fatal Error</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#c76c5e</td> <td style="text-align: center">Rouge Signal</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#bf5747</td> <td style="text-align: center">Amber Alert</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#b74230</td> <td style="text-align: center">Firewall Breach</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#af2e1a</td> <td style="text-align: center"><strong>Digital Rust</strong></td> <td style="text-align: center"> <strong>Primary Colour/Primary Accent</strong> </td> </tr> <tr> <td style="text-align: center">#9d2917</td> <td style="text-align: center">Kernel Panic</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#8c2414</td> <td style="text-align: center">Data Rot</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#7a2012</td> <td style="text-align: center">Bricked Board</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#691b0f</td> <td style="text-align: center">Dark Packet</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#57170d</td> <td style="text-align: center">Daemon Blood</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#46120a</td> <td style="text-align: center">Bad Sector</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#340d07</td> <td style="text-align: center">Core Meltdown</td> <td style="text-align: center">Secondary Background Colour</td> </tr> <tr> <td style="text-align: center">#230905</td> <td style="text-align: center">Null Pointer</td> <td style="text-align: center"></td> </tr> <tr> <td style="text-align: center">#110402</td> <td style="text-align: center">Event Horizon</td> <td style="text-align: center">Darkest/Black Point (background)</td> </tr> </tbody> </table> </div> </div> <h3 id="ansi-colours">ANSI Colours</h3> <div class="color-lab" data-lab="ansi"> <div class="ansi-grid" data-source-table="ansi-palette-table" aria-live="polite"></div> <div class="table-scroll"> <table id="ansi-palette-table" data-color-table="ansi"> <thead> <tr> <th style="text-align: center">Hex Code</th> <th style="text-align: center">ANSI Colour</th> <th style="text-align: center">Name</th> </tr> </thead> <tbody> <tr> <td style="text-align: center">#8fa667</td> <td style="text-align: center">Green</td> <td style="text-align: center">Memory Leek</td> </tr> <tr> <td style="text-align: center">#627247</td> <td style="text-align: center">DimGreen</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#94a577</td> <td style="text-align: center">BrightGreen</td> <td style="text-align: center">Bright 〃</td> </tr> <tr> <td style="text-align: center">#d4a759</td> <td style="text-align: center">Yellow</td> <td style="text-align: center">Stack Overglow</td> </tr> <tr> <td style="text-align: center">#a07e43</td> <td style="text-align: center">DimYellow</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#d3ae6e</td> <td style="text-align: center">BrightYellow</td> <td style="text-align: center">Bright 〃</td> </tr> <tr> <td style="text-align: center">#8791b0</td> <td style="text-align: center">Blue</td> <td style="text-align: center">Blue Screen</td> </tr> <tr> <td style="text-align: center">#60677c</td> <td style="text-align: center">DimBlue</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#999eaf</td> <td style="text-align: center">BrightBlue</td> <td style="text-align: center">Bright 〃</td> </tr> <tr> <td style="text-align: center">#ba5a7d</td> <td style="text-align: center">Magenta</td> <td style="text-align: center">Fractured Shell</td> </tr> <tr> <td style="text-align: center">#87405a</td> <td style="text-align: center">DimMagenta</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#ba6b88</td> <td style="text-align: center">BrightMagenta</td> <td style="text-align: center">Bright 〃</td> </tr> <tr> <td style="text-align: center">#6fa5a0</td> <td style="text-align: center">Cyan</td> <td style="text-align: center">Dead Thread</td> </tr> <tr> <td style="text-align: center">#4c726e</td> <td style="text-align: center">DimCyan</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#7fa5a1</td> <td style="text-align: center">BrightCyan</td> <td style="text-align: center">Bright 〃</td> </tr> <tr> <td style="text-align: center">#d78556</td> <td style="text-align: center">Orange</td> <td style="text-align: center">Thermal Throttle</td> </tr> <tr> <td style="text-align: center">#ac6d4a</td> <td style="text-align: center">DimOrange</td> <td style="text-align: center">Dim 〃</td> </tr> <tr> <td style="text-align: center">#d6926b</td> <td style="text-align: center">BrightOrange</td> <td style="text-align: center">Bright 〃</td> </tr> </tbody> </table> </div> </div> <h2 id="syntax-highlighting-rules">Syntax Highlighting Rules</h2> <h3 id="token-classification">Token Classification</h3> <p> Following <em>TextMate</em> scoping conventions for consistent highlighting across editors. </p> <h4 id="primary-tokens">Primary Tokens</h4> <p> <strong>Keywords & Storage</strong> → <code>Fatal Error (#cf8175)</code> </p> <ul> <li> Language Keywords: <code>if</code>, <code>else</code>, <code>return</code>, <code>function</code>, <code>class</code> </li> <li> Storage Modifiers: <code>static</code>, <code>public</code>, <code>private</code>, <code>const</code>, <code>let</code>, <code>var</code> </li> <li> Control Flow: <code>try</code>, <code>catch</code>, <code>throw</code>, <code>break</code>, <code>continue</code> </li> </ul> <p> <strong>Functions & Methods</strong> → <code>Stack Overglow (#d4a759)</code> </p> <ul> <li>Function Declarations and Calls</li> <li>Method Invocations</li> <li>User-defined Functions</li> </ul> <p> <strong>Classes & Types</strong> → <code>Dead Thread (#6fa5a0)</code> </p> <ul> <li>Class Names and Constructors</li> <li> Type Annotations: <code>int</code>, <code>string</code>, <code>boolean</code> </li> <li>Interfaces and Enums</li> <li>Generic Type Parameters</li> </ul> <p> <strong>Strings & Text</strong> → <code>Memory Leek (#8fa667)</code> </p> <ul> <li> String Literals: <code>"corrupted"</code>, <code>'failed'</code>, <code>`template`</code> </li> <li>Escape Sequences (e.g., <code>\n</code>, <code>\t</code>)</li> </ul> <p><strong>Numbers</strong> → <code>Thermal Throttle (#d78556)</code></p> <ul> <li> Numeric Literals: <code>42</code>, <code>3.14</code>, <code>0xFF</code>, <code>1e5</code> </li> </ul> <p> <strong>Constants & Special Values</strong> → <code>Bright Stack Overglow (#d3ae6e)</code> </p> <ul> <li>Boolean Values: <code>true</code>, <code>false</code></li> <li> Null-like Constants: <code>null</code>, <code>undefined</code>, <code>nil</code>, <code>None</code> </li> <li> Special Language Values: <code>NaN</code>, <code>Infinity</code>, <code>this</code>, <code>self</code>, <code>super</code> </li> <li> Named Constants: <code>SOME_CONST</code>, <code>MAX_SIZE</code>, <code>DEFAULT_TIMEOUT</code> </li> <li> Enum Values: <code>Status.OK</code>, <code>Color.RED</code>, <code>HttpStatus.NOT_FOUND</code> </li> <li> Language-level Constants: <code>__name__</code>, <code>__FILE__</code>, <code>M_PI</code>, <code>E</code> </li> </ul> <blockquote> <p> <strong>Design Note</strong>: Booleans and null-like values use a distinct color from numbers. The distinct color marks their semantic role as special language constants, not numeric data. </p> </blockquote> <p> <strong>Comments</strong> → <code>Dim Thermal Throttle (#ac6d4a)</code> <em>italic</em> </p> <ul> <li>Single-Line: <code>//</code>, <code>#</code>, <code>--</code></li> <li>Multi-Line: <code>/* */</code>, <code><!-- --></code></li> <li>Documentation Blocks (JSDoc, Javadoc, docstrings)</li> </ul> <p> <strong>Attributes & Decorators</strong> → <code>Dead Thread (#6fa5a0)</code> <em>italic</em> </p> <ul> <li> Java/Kotlin Annotations: <code>@Override</code>, <code>@Component</code>, <code>@Deprecated</code> </li> <li> Python Decorators: <code>@dataclass</code>, <code>@property</code>, <code>@staticmethod</code> </li> <li> Rust Attributes: <code>#[derive(Debug)]</code>, <code>#[cfg(test)]</code> </li> <li> C# Attributes: <code>[Serializable]</code>, <code>[HttpGet]</code> </li> <li> TypeScript Decorators: <code>@Injectable</code>, <code>@Component</code> </li> </ul> <blockquote> <p> <strong>Sigil Handling</strong>: The <code>@</code> or <code>#</code> sigil inherits the decorator color. Style the sigil as part of the attribute token. </p> </blockquote> <h4 id="support-built-ins">Support & Built-ins</h4> <p> <strong>Built-ins & Standard Library</strong> → <code>Dim Stack Overglow (#a07e43)</code> </p> <ul> <li> Built-in Functions: <code>print</code>, <code>len</code>, <code>typeof</code>, <code>console.log</code> </li> <li> Standard Library Classes: <code>Array</code>, <code>String</code>, <code>Object</code>, <code>Map</code> </li> <li> TextMate scopes: <code>support.function</code>, <code>support.class</code>, <code>support.type</code> </li> </ul> <p> <strong>Markup Tags (HTML/XML)</strong> → <code>Dead Thread (#6fa5a0)</code> </p> <ul> <li> Tag Names: <code><div></code>, <code><span></code>, <code><svg></code> </li> <li> Self-closing Tags: <code><br/></code>, <code><img/></code> </li> <li>TextMate scope: <code>entity.name.tag</code></li> </ul> <p> <strong>Markup Attributes</strong> → <code>Dim Stack Overglow (#a07e43)</code> </p> <ul> <li> Attribute Names: <code>class</code>, <code>id</code>, <code>href</code>, <code>src</code> </li> <li>TextMate scope: <code>entity.other.attribute-name</code></li> </ul> <p> <strong>Markup Attribute Values</strong> → <code>Memory Leek (#8fa667)</code> </p> <ul> <li> Quoted Values: <code>"container"</code>, <code>'primary'</code> </li> <li>TextMate scope: <code>string.quoted</code> within markup</li> </ul> <p><strong>Regular Expressions</strong></p> <ul> <li> Regex Literals & Character Classes → <code>Memory Leek (#8fa667)</code> </li> <li> Regex Operators & Metacharacters (<code>+</code>, <code>*</code>, <code>?</code>, <code>|</code>, <code>^</code>, <code>$</code>) → <code>Copper Trace (#d7968c)</code> </li> <li>Regex Groups & Brackets → <code>Copper Trace (#d7968c)</code></li> </ul> <p> <strong>Variables & Identifiers</strong> → <code>Ghost Pixel (#f7eae8)</code> </p> <ul> <li>Variable Names and Parameters</li> <li>Object Properties</li> <li>Default Text Content</li> <li> TextMate scope: <code>variable</code>, <code>variable.parameter</code> </li> </ul> <p> <strong>Errors & Warnings</strong> → <code>Amber Alert (#bf5747)</code> (note: rendered text on dark backgrounds uses <code>--amber-alert-text</code> (#cb6353) for guaranteed WCAG AA compliance) </p> <ul> <li>Syntax Errors</li> <li>Deprecated Code (with strikethrough where supported)</li> <li>Invalid Tokens</li> </ul> <h4 id="operators-punctuation">Operators & Punctuation</h4> <p><strong>Operators</strong> → <code>Copper Trace (#d7968c)</code></p> <ul> <li> Arithmetic: <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>**</code> </li> <li> Comparison: <code>==</code>, <code>!=</code>, <code><</code>, <code>></code>, <code><=</code>, <code>>=</code>, <code>===</code>, <code>!==</code> </li> <li> Logical: <code>&&</code>, <code>||</code>, <code>!</code>, <code>and</code>, <code>or</code>, <code>not</code> </li> <li> Assignment: <code>=</code>, <code>+=</code>, <code>-=</code>, <code>*=</code>, <code>/=</code> </li> <li> Bitwise: <code>&</code>, <code>|</code>, <code>^</code>, <code>~</code>, <code><<</code>, <code>>></code> </li> </ul> <p> <strong>Punctuation & Delimiters</strong> → <code>Copper Trace (#d7968c)</code> </p> <ul> <li>Separators: <code>,</code>, <code>;</code>, <code>:</code></li> <li>Accessors: <code>.</code>, <code>::</code></li> <li> Brackets: <code>(</code>, <code>)</code>, <code>[</code>, <code>]</code>, <code>{</code>, <code>}</code> </li> <li>Angle Brackets (generics): <code><</code>, <code>></code></li> </ul> <p><strong>Sigils & Prefix Symbols</strong></p> <ul> <li> Sigils inherit the color of the token they modify: <ul> <li> <code>$variable</code> → Variable color (<code>Ghost Pixel</code>) </li> <li> <code>@decorator</code> → Decorator color (<code>Dead Thread</code>) </li> <li> <code>&reference</code> → Context-dependent (variable or type) </li> <li><code>*pointer</code> → Context-dependent</li> </ul> </li> </ul> <h3 id="styling-modifiers">Styling Modifiers</h3> <p><strong>Bold</strong></p> <ul> <li>Markdown headings (H1–H6)</li> <li>Strong emphasis in Markdown (<code>**text**</code>)</li> <li>Active tab labels in UI</li> <li>Critical warnings or alerts</li> </ul> <p><strong>Italic</strong></p> <ul> <li>Comments and documentation blocks</li> <li>Type parameters and generics</li> <li>Decorators and attributes</li> <li>Markdown emphasis (<code>*text*</code>)</li> <li>Quoted text in documentation</li> </ul> <p><strong>Underline</strong></p> <ul> <li> Links: Solid underline using <code>Phantom Current (#e7c0ba)</code> </li> <li> Spelling errors: Dotted underline using <code>Amber Alert (#bf5747)</code> </li> <li> Potential errors/warnings: Wavy underline using <code>Stack Overglow (#d4a759)</code> </li> </ul> <blockquote> <p> <strong>Accessibility Note</strong>: Distinguish links and spelling errors by underline style (solid vs. dotted), not by color alone. </p> </blockquote> <p><strong>Strikethrough</strong></p> <ul> <li>Deprecated code or APIs</li> <li>Completed tasks in TODO comments</li> </ul> <h3 id="special-rules">Special Rules</h3> <p><strong>Scope Prioritization</strong></p> <p> If multiple scopes apply to one token, apply styles in this precedence order: </p> <ol type="1"> <li> <strong>Error scopes</strong> (highest priority): always override other styles </li> <li><strong>Warning scopes</strong>: override non-error styles</li> <li> <strong>Language-specific overrides</strong>: per-language customizations </li> <li> <strong>Semantic token colors</strong>: LSP/semantic highlighting </li> <li> <strong>Base syntax colors</strong> (lowest priority): TextMate grammar defaults </li> </ol> <blockquote> <p> <strong>Rule</strong>: If a token is both an error and another role (e.g., a misspelled keyword), the error style takes full precedence. The token shows the error styling, not a blend. </p> </blockquote> <p><strong>Bracket Matching</strong></p> <ul> <li> Matching Brackets: Subtle highlight with <code>Bad Sector (#46120a)</code> background </li> <li> Unmatched Brackets: <code>Amber Alert (#bf5747)</code> with wavy underline </li> <li> Rainbow Brackets: Optional. If enabled, cycle through: <code>Dead Thread</code>, <code>Stack Overglow</code>, <code>Fractured Shell</code>, <code>Blue Screen</code>, <code>Thermal Throttle</code>, <code>Memory Leek</code> </li> </ul> <hr /> <h2 id="language-specific-rules">Language-Specific Rules</h2> <h3 id="configuration-languages-jsonyamltoml"> Configuration Languages (JSON/YAML/TOML) </h3> <p>Configuration files use a distinct key/value visual hierarchy:</p> <p><strong>Keys</strong> → <code>Dead Thread (#6fa5a0)</code></p> <ul> <li>Object keys and property names</li> <li>YAML mapping keys</li> <li>TOML table headers and keys</li> </ul> <p><strong>Values</strong> → Standard token rules apply:</p> <ul> <li>Strings → <code>Memory Leek (#8fa667)</code></li> <li>Numbers → <code>Thermal Throttle (#d78556)</code></li> <li>Booleans/null → <code>Bright Stack Overglow (#d3ae6e)</code></li> </ul> <p> <strong>Structural Elements</strong> → <code>Copper Trace (#d7968c)</code> </p> <ul> <li>Colons, commas, brackets</li> <li>YAML dashes for list items</li> </ul> <blockquote> <p> <strong>Design Note</strong>: Keys and values use intentionally different colors. The difference makes the hierarchical structure immediately visible. </p> </blockquote> <h3 id="markdown-rich-text">Markdown & Rich Text</h3> <p> <strong>Headings (H1–H6)</strong> → <code>Fatal Error (#cf8175)</code> <strong>bold</strong> </p> <ul> <li> Heading markers (<code>#</code>, <code>##</code>, etc.) → <code>Copper Trace (#d7968c)</code> </li> </ul> <p><strong>Emphasis</strong></p> <ul> <li> Bold (<code>**text**</code>) → <code>Ghost Pixel (#f7eae8)</code> <strong>bold</strong> </li> <li> Italic (<code>*text*</code>) → <code>Ghost Pixel (#f7eae8)</code> <em>italic</em> </li> <li> Bold Italic (<code>***text***</code>) → <code>Ghost Pixel (#f7eae8)</code> <strong><em>bold italic</em></strong> </li> </ul> <p><strong>Code</strong></p> <ul> <li> Inline code (<code>`code`</code>) → <code>Memory Leek (#8fa667)</code> on <code>Bad Sector (#46120a)</code> background </li> <li>Fenced code blocks → Normal syntax highlighting inside</li> <li> Code fence markers (<code>```</code>) → <code>Copper Trace (#d7968c)</code> </li> </ul> <p> <strong>Blockquotes</strong> → <code>Phosphor Smoke (#efd5d1)</code> <em>italic</em> </p> <ul> <li> Quote markers (<code>></code>) → <code>Copper Trace (#d7968c)</code> </li> </ul> <p><strong>Links</strong></p> <ul> <li>Link text → <code>Phantom Current (#e7c0ba)</code> underlined</li> <li>Link URL → <code>Dim Stack Overglow (#a07e43)</code></li> </ul> <p><strong>Lists</strong></p> <ul> <li> List markers (<code>-</code>, <code>*</code>, <code>1.</code>) → <code>Copper Trace (#d7968c)</code> </li> <li>List content → <code>Ghost Pixel (#f7eae8)</code></li> </ul> <p> <strong>Horizontal Rules</strong> → <code>Dark Packet (#691b0f)</code> </p> <h3 id="html-xml-templates">HTML / XML / Templates</h3> <p><strong>Core Markup</strong></p> <ul> <li>Tag Names → <code>Dead Thread (#6fa5a0)</code></li> <li>Attribute Names → <code>Dim Stack Overglow (#a07e43)</code></li> <li>Attribute Values → <code>Memory Leek (#8fa667)</code></li> <li>Text Nodes → <code>Ghost Pixel (#f7eae8)</code></li> <li> Comments → <code>Dim Thermal Throttle (#ac6d4a)</code> <em>italic</em> </li> </ul> <p> <strong>Angle Brackets & Delimiters</strong> → <code>Copper Trace (#d7968c)</code> </p> <ul> <li> <code><</code>, <code>></code>, <code></</code>, <code>/></code> </li> </ul> <p><strong>Template Languages (JSX, Vue, Handlebars, EJS)</strong></p> <ul> <li> Template Delimiters (<code>{}</code>, <code>{{}}</code>, <code><%</code>, <code>%></code>) → <code>Copper Trace (#d7968c)</code> </li> <li>Embedded Expressions → Follow host language syntax rules</li> <li> Component Names (PascalCase) → <code>Dead Thread (#6fa5a0)</code> (treat as custom tags) </li> </ul> <h3 id="css-stylesheets">CSS & Stylesheets</h3> <p><strong>Selectors</strong></p> <ul> <li>Element Selectors → <code>Ghost Pixel (#f7eae8)</code></li> <li> Class Selectors (<code>.class</code>) → <code>Dead Thread (#6fa5a0)</code> </li> <li> ID Selectors (<code>#id</code>) → <code>Dead Thread (#6fa5a0)</code> </li> <li> Pseudo-classes/elements (<code>:hover</code>, <code>::before</code>) → <code>Dim Stack Overglow (#a07e43)</code> </li> <li>Attribute Selectors → <code>Dim Stack Overglow (#a07e43)</code></li> </ul> <p><strong>Properties & Values</strong></p> <ul> <li>Property Names → <code>Dim Stack Overglow (#a07e43)</code></li> <li>String Values → <code>Memory Leek (#8fa667)</code></li> <li>Numeric Values → <code>Thermal Throttle (#d78556)</code></li> <li> Units (<code>px</code>, <code>em</code>, <code>%</code>, <code>rem</code>) → <code>Dim Stack Overglow (#a07e43)</code> </li> <li> Color Values (hex, rgb, hsl) → <code>Thermal Throttle (#d78556)</code> </li> <li> Keywords (<code>auto</code>, <code>inherit</code>, <code>flex</code>) → <code>Bright Stack Overglow (#d3ae6e)</code> </li> </ul> <p><strong>At-Rules</strong></p> <ul> <li> <code>@media</code>, <code>@import</code>, <code>@keyframes</code> → <code>Fatal Error (#cf8175)</code> </li> </ul> <p><strong>Utility-First (Tailwind and similar frameworks)</strong></p> <ul> <li> Class Names in HTML → <code>Dead Thread (#6fa5a0)</code> (treat as structural labels) </li> </ul> <h3 id="string-interpolation">String Interpolation</h3> <p> <strong>String Containers</strong> → <code>Memory Leek (#8fa667)</code> </p> <ul> <li>Quote characters and literal text portions</li> </ul> <p><strong>Interpolated Expressions</strong> → Full syntax highlighting</p> <ul> <li> JavaScript: <code>${expression}</code>: expression follows JS rules </li> <li> Python f-strings: <code>{expression}</code>: expression follows Python rules </li> <li>Ruby: <code>#{expression}</code>: expression follows Ruby rules</li> <li> Shell: <code>${variable}</code> or <code>$(command)</code>: follows shell rules </li> </ul> <p> <strong>Interpolation Delimiters</strong> → <code>Copper Trace (#d7968c)</code> </p> <ul> <li> <code>${</code>, <code>}</code>, <code>#{</code>, <code>{</code>, <code>}</code> </li> </ul> <blockquote> <p> <strong>Implementation Note</strong>: Tokenize interpolated segments as full expressions. Do not render them as plain string content. </p> </blockquote> <h3 id="git-diff-views">Git & Diff Views</h3> <p><strong>Diff Additions</strong></p> <ul> <li>Text Color: <code>Ghost Pixel (#f7eae8)</code></li> <li>Background: <code>Memory Leek (#8fa667)</code> at 15% opacity</li> <li>Line Marker (<code>+</code>): <code>Memory Leek (#8fa667)</code></li> </ul> <p><strong>Diff Deletions</strong></p> <ul> <li>Text Color: <code>Phantom Current (#e7c0ba)</code></li> <li>Background: <code>Amber Alert (#bf5747)</code> at 15% opacity</li> <li>Line Marker (<code>-</code>): <code>Amber Alert (#bf5747)</code></li> </ul> <p><strong>Diff Modifications</strong></p> <ul> <li>Background: <code>Dead Thread (#6fa5a0)</code> at 10% opacity</li> <li>Line Marker (<code>~</code>): <code>Dead Thread (#6fa5a0)</code></li> </ul> <p><strong>Diff Headers & Metadata</strong></p> <ul> <li>File paths: <code>Stack Overglow (#d4a759)</code></li> <li> Hunk headers (<code>@@</code>): <code>Blue Screen (#8791b0)</code> </li> <li>Commit hashes: <code>Dim Stack Overglow (#a07e43)</code></li> </ul> <p><strong>Inline Diff (word-level)</strong></p> <ul> <li>Added words: <code>Memory Leek (#8fa667)</code> background at 25%</li> <li> Removed words: <code>Amber Alert (#bf5747)</code> background at 25% </li> </ul> <h3 id="shell-cli-scripts-bash-zsh-fish-powershell"> Shell & CLI Scripts (Bash, Zsh, Fish, PowerShell) </h3> <p> <strong>Commands & Executables</strong> → <code>Stack Overglow (#d4a759)</code> </p> <ul> <li>First word on a line (command name)</li> <li> Built-in commands: <code>echo</code>, <code>cd</code>, <code>export</code> </li> <li> External commands: <code>grep</code>, <code>awk</code>, <code>curl</code> </li> </ul> <p> <strong>Flags & Options</strong> → <code>Fatal Error (#cf8175)</code> </p> <ul> <li>Short flags: <code>-a</code>, <code>-v</code>, <code>-rf</code></li> <li> Long flags: <code>--help</code>, <code>--verbose</code>, <code>--output</code> </li> </ul> <p><strong>Variables</strong> → <code>Ghost Pixel (#f7eae8)</code></p> <ul> <li> Environment variables: <code>$PATH</code>, <code>$HOME</code>, <code>${VAR}</code> </li> <li> Positional parameters: <code>$1</code>, <code>$@</code>, <code>$#</code> </li> <li>Sigil (<code>$</code>) inherits variable color per sigil rules</li> </ul> <p><strong>Here-Documents</strong> → <code>Memory Leek (#8fa667)</code></p> <ul> <li>Here-doc body content follows string rules</li> <li> Delimiter tokens (<code><<EOF</code>, <code>EOF</code>) → <code>Copper Trace (#d7968c)</code> </li> </ul> <p> <strong>Shebang Line</strong> → <code>Dim Thermal Throttle (#ac6d4a)</code> <em>italic</em> </p> <ul> <li><code>#!/bin/bash</code>, <code>#!/usr/bin/env python</code></li> <li>Treat as a special comment</li> </ul> <h3 id="sql">SQL</h3> <p><strong>Keywords</strong> → <code>Fatal Error (#cf8175)</code></p> <ul> <li> DML: <code>SELECT</code>, <code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code> </li> <li> DDL: <code>CREATE</code>, <code>ALTER</code>, <code>DROP</code>, <code>TRUNCATE</code> </li> <li> Clauses: <code>FROM</code>, <code>WHERE</code>, <code>JOIN</code>, <code>ON</code>, <code>GROUP BY</code>, <code>ORDER BY</code>, <code>HAVING</code> </li> <li> Operators: <code>AND</code>, <code>OR</code>, <code>NOT</code>, <code>IN</code>, <code>BETWEEN</code>, <code>LIKE</code>, <code>IS NULL</code> </li> </ul> <p><strong>Functions</strong> → <code>Stack Overglow (#d4a759)</code></p> <ul> <li> Aggregate: <code>COUNT</code>, <code>SUM</code>, <code>AVG</code>, <code>MIN</code>, <code>MAX</code> </li> <li> Scalar: <code>COALESCE</code>, <code>NULLIF</code>, <code>CAST</code>, <code>CONVERT</code> </li> <li> Date/Time: <code>NOW</code>, <code>DATEADD</code>, <code>DATEDIFF</code> </li> </ul> <p><strong>Types</strong> → <code>Dead Thread (#6fa5a0)</code></p> <ul> <li> <code>VARCHAR</code>, <code>INT</code>, <code>BIGINT</code>, <code>BOOLEAN</code>, <code>TIMESTAMP</code>, <code>TEXT</code>, <code>DECIMAL</code> </li> </ul> <p><strong>Identifiers</strong> → <code>Ghost Pixel (#f7eae8)</code></p> <ul> <li>Table names, column names</li> <li>Aliases (<code>AS name</code>): treat as variables</li> </ul> <p><strong>Strings & Numbers</strong> → Standard token rules</p> <ul> <li>String & char literals → <code>Memory Leek (#8fa667)</code></li> <li>Numeric literals → <code>Thermal Throttle (#d78556)</code></li> </ul> <h3 id="cc-preprocessor-directives">C/C++ Preprocessor Directives</h3> <p> <strong>Preprocessor Keywords</strong> → <code>Fatal Error (#cf8175)</code> </p> <ul> <li><code>#include</code>, <code>#define</code>, <code>#undef</code></li> <li> <code>#if</code>, <code>#ifdef</code>, <code>#ifndef</code>, <code>#else</code>, <code>#elif</code>, <code>#endif</code> </li> <li><code>#pragma</code>, <code>#error</code>, <code>#warning</code></li> </ul> <p> <strong>Macro Names</strong> → <code>Bright Stack Overglow (#d3ae6e)</code> </p> <ul> <li>Defined constants: <code>MAX_SIZE</code>, <code>DEBUG_MODE</code></li> <li>Treat as named constants</li> </ul> <p> <strong>Macro Parameters</strong> → <code>Ghost Pixel (#f7eae8)</code> </p> <ul> <li> Parameters in macro definitions follow <code>variable.parameter</code> rules </li> </ul> <p><strong>Include Paths</strong> → <code>Memory Leek (#8fa667)</code></p> <ul> <li> <code><stdio.h></code>, <code>"myheader.h"</code>: treat as strings </li> </ul> <blockquote> <p> <strong>Note</strong>: The <code>#</code> sigil is part of the directive keyword, not a separate punctuation token. </p> </blockquote> <h3 id="rust-specific">Rust-Specific</h3> <p> <strong>Lifetimes</strong> → <code>Dead Thread (#6fa5a0)</code> <em>italic</em> </p> <ul> <li> <code>'a</code>, <code>'static</code>, <code>'_</code> </li> <li>The tick (<code>'</code>) is part of the lifetime token</li> </ul> <p><strong>Traits</strong> → <code>Dead Thread (#6fa5a0)</code></p> <ul> <li> Trait names: <code>Clone</code>, <code>Debug</code>, <code>Iterator</code>, <code>Send</code>, <code>Sync</code> </li> <li>Trait bounds follow type coloring</li> </ul> <p><strong>Macros</strong> → <code>Stack Overglow (#d4a759)</code></p> <ul> <li> Macro invocations: <code>println!</code>, <code>vec!</code>, <code>format!</code> </li> <li>The <code>!</code> is part of the macro name</li> </ul> <blockquote> <p> <strong>Note</strong>: Rust attributes (<code>#[derive]</code>, <code>#[cfg]</code>) are covered under Attributes & Decorators. </p> </blockquote> <h3 id="haskell-ml-functional-languages"> Haskell / ML / Functional Languages </h3> <p> <strong>Type Constructors</strong> → <code>Dead Thread (#6fa5a0)</code> </p> <ul> <li> <code>Maybe</code>, <code>Either</code>, <code>List</code>, <code>IO</code> </li> <li>Type-level names starting with uppercase</li> </ul> <p> <strong>Data Constructors</strong> → <code>Bright Stack Overglow (#d3ae6e)</code> </p> <ul> <li> <code>Just</code>, <code>Nothing</code>, <code>Left</code>, <code>Right</code>, <code>True</code>, <code>False</code> </li> <li>Treat as constants (they are value-level names for types)</li> </ul> <p> <strong>Type Signatures</strong> → Standard rules with explicit operators </p> <ul> <li> <code>::</code> (type annotation) → <code>Copper Trace (#d7968c)</code> </li> <li> <code>=></code> (constraint arrow) → <code>Copper Trace (#d7968c)</code> </li> <li> <code>-></code> (function arrow) → <code>Copper Trace (#d7968c)</code> </li> </ul> <p> <strong>Type Variables</strong> → <code>Dead Thread (#6fa5a0)</code> <em>italic</em> </p> <ul> <li> Lowercase type parameters: <code>a</code>, <code>b</code>, <code>m</code> </li> <li>Distinguish them from term-level variables with italic</li> </ul> <hr /> <h2 id="editor-ui-definitions">Editor UI Definitions</h2> <h3 id="editor-core">Editor Core</h3> <table> <colgroup> <col style="width: 27%" /> <col style="width: 38%" /> <col style="width: 33%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Editor Background</td> <td><code>Event Horizon (#110402)</code></td> <td>Primary editing surface</td> </tr> <tr> <td>Gutter Background</td> <td><code>Null Pointer (#230905)</code></td> <td>Line number area</td> </tr> <tr> <td>Default Text</td> <td><code>Ghost Pixel (#f7eae8)</code></td> <td>Unrecognized tokens fallback</td> </tr> <tr> <td>Line Numbers (inactive)</td> <td><code>Bad Sector (#46120a)</code></td> <td>Non-current lines</td> </tr> <tr> <td>Line Numbers (active)</td> <td><code>Phantom Current (#e7c0ba)</code></td> <td>Current line</td> </tr> <tr> <td>Cursor</td> <td><code>Stack Overglow (#d4a759)</code></td> <td>Block or line cursor</td> </tr> <tr> <td>Current Line Highlight</td> <td><code>Core Meltdown (#340d07)</code> at 50%</td> <td>Subtle emphasis</td> </tr> </tbody> </table> <h3 id="selection-guides">Selection & Guides</h3> <table> <colgroup> <col style="width: 27%" /> <col style="width: 39%" /> <col style="width: 32%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Selection Background</td> <td><code>Dark Packet (#691b0f)</code> at 70%</td> <td>Active selection</td> </tr> <tr> <td>Inactive Selection</td> <td><code>Dark Packet (#691b0f)</code> at 40%</td> <td>Unfocused window</td> </tr> <tr> <td>Indent Guides</td> <td><code>Bad Sector (#46120a)</code></td> <td>Scope visualization</td> </tr> <tr> <td>Active Indent Guide</td> <td><code>Dark Packet (#691b0f)</code></td> <td>Current scope</td> </tr> <tr> <td>Whitespace Characters</td> <td><code>Bad Sector (#46120a)</code> at 50%</td> <td>Spaces, tabs when visible</td> </tr> <tr> <td>Matching Bracket BG</td> <td><code>Bad Sector (#46120a)</code></td> <td>Bracket pair highlight</td> </tr> </tbody> </table> <h3 id="search-navigation">Search & Navigation</h3> <table> <colgroup> <col style="width: 17%" /> <col style="width: 57%" /> <col style="width: 24%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Search Match BG</td> <td><code>Stack Overglow (#d4a759)</code> at 30%</td> <td>All matches</td> </tr> <tr> <td>Active Search Match</td> <td> <code>Digital Rust (#af2e1a)</code> border + <code>Stack Overglow (#d4a759)</code> at 50% fill </td> <td>Currently selected match</td> </tr> <tr> <td>Find/Replace Error</td> <td><code>Amber Alert (#bf5747)</code> underline</td> <td>Invalid regex/pattern</td> </tr> <tr> <td>Highlight on Scroll</td> <td><code>Stack Overglow (#d4a759)</code> at 20%</td> <td>Scrollbar match indicators</td> </tr> </tbody> </table> <h3 id="disabled-placeholder-states">Disabled & Placeholder States</h3> <table> <colgroup> <col style="width: 25%" /> <col style="width: 44%" /> <col style="width: 29%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Disabled Text</td> <td><code>Bad Sector (#46120a)</code></td> <td>On dark backgrounds</td> </tr> <tr> <td>Disabled Text (alt)</td> <td><code>Null Pointer (#230905)</code></td> <td>On lighter backgrounds</td> </tr> <tr> <td>Placeholder Text</td> <td><code>Phosphor Smoke (#efd5d1)</code> at 50%</td> <td>Input hints</td> </tr> </tbody> </table> <blockquote> <p> <strong>Accessibility Note</strong>: Disabled UI elements must meet minimum contrast where practical. If full contrast is not possible, add other visual cues (for example, reduced opacity or a different font weight). </p> </blockquote> <h3 id="tabs">Tabs</h3> <table> <thead> <tr> <th>Element</th> <th>Color</th> </tr> </thead> <tbody> <tr> <td>Active Tab Background</td> <td><code>Core Meltdown (#340d07)</code></td> </tr> <tr> <td>Inactive Tab Background</td> <td><code>Event Horizon (#110402)</code></td> </tr> <tr> <td>Active Tab Text</td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Inactive Tab Text</td> <td><code>Phosphor Smoke (#efd5d1)</code></td> </tr> <tr> <td>Tab Border</td> <td><code>Dark Packet (#691b0f)</code></td> </tr> <tr> <td>Modified Indicator</td> <td><code>Stack Overglow (#d4a759)</code></td> </tr> </tbody> </table> <h3 id="sidebar">Sidebar</h3> <table> <thead> <tr> <th>Element</th> <th>Color</th> </tr> </thead> <tbody> <tr> <td>Background</td> <td><code>Null Pointer (#230905)</code></td> </tr> <tr> <td>Active Item Text</td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Inactive Item Text</td> <td><code>Phosphor Smoke (#efd5d1)</code></td> </tr> <tr> <td>Selected Item BG</td> <td><code>Bad Sector (#46120a)</code></td> </tr> <tr> <td>Hover State BG</td> <td><code>Dark Packet (#691b0f)</code> at 50%</td> </tr> <tr> <td>Section Headers</td> <td><code>Phantom Current (#e7c0ba)</code></td> </tr> </tbody> </table> <h3 id="status-bar">Status Bar</h3> <table> <thead> <tr> <th>State</th> <th>Background</th> <th>Text</th> </tr> </thead> <tbody> <tr> <td>Normal</td> <td><code>Bricked Board (#7a2012)</code></td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Error</td> <td><code>Digital Rust (#af2e1a)</code></td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Warning</td> <td><code>Amber Alert (#bf5747)</code></td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Debug Mode</td> <td><code>Blue Screen (#8791b0)</code></td> <td><code>Event Horizon (#110402)</code></td> </tr> </tbody> </table> <h3 id="gutter-indicators">Gutter Indicators</h3> <table> <colgroup> <col style="width: 22%" /> <col style="width: 53%" /> <col style="width: 23%" /> </colgroup> <thead> <tr> <th>Indicator</th> <th>Color</th> <th>Shape / Style</th> </tr> </thead> <tbody> <tr> <td>Breakpoint</td> <td> <code>Amber Alert (#bf5747)</code> fill, <code>Event Horizon</code> border </td> <td>Circle</td> </tr> <tr> <td>Breakpoint (disabled)</td> <td><code>Amber Alert (#bf5747)</code> at 40%</td> <td>Circle outline</td> </tr> <tr> <td>Current Execution Line</td> <td><code>Stack Overglow (#d4a759)</code> outline</td> <td>Arrow or ring</td> </tr> <tr> <td>Error Marker</td> <td><code>Amber Alert (#bf5747)</code></td> <td>Circle</td> </tr> <tr> <td>Warning Marker</td> <td><code>Stack Overglow (#d4a759)</code></td> <td>Diamond</td> </tr> <tr> <td>Info Marker</td> <td><code>Dead Thread (#6fa5a0)</code></td> <td>Square</td> </tr> <tr> <td>Hint Marker</td> <td><code>Phosphor Smoke (#efd5d1)</code> at 50%</td> <td>Dot</td> </tr> <tr> <td>Git Added</td> <td><code>Memory Leek (#8fa667)</code></td> <td>Vertical bar</td> </tr> <tr> <td>Git Modified</td> <td><code>Dead Thread (#6fa5a0)</code></td> <td>Vertical bar</td> </tr> <tr> <td>Git Deleted</td> <td><code>Amber Alert (#bf5747)</code></td> <td>Triangle pointing right</td> </tr> </tbody> </table> <blockquote> <p> <strong>Note</strong>: Gutter markers reuse the diagnostic and diff palettes for semantic consistency. </p> </blockquote> <h3 id="inlay-hints-code-lens">Inlay Hints & Code Lens</h3> <p><strong>Inlay Hints</strong> (parameter names, inferred types)</p> <table> <colgroup> <col style="width: 26%" /> <col style="width: 46%" /> <col style="width: 27%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Style</th> </tr> </thead> <tbody> <tr> <td>Hint Text</td> <td><code>Phosphor Smoke (#efd5d1)</code> at 50%</td> <td><em>italic</em> recommended</td> </tr> <tr> <td>Hint Background</td> <td>Transparent or <code>Bad Sector</code> at 20%</td> <td>Subtle only</td> </tr> <tr> <td>Hint Border/Padding</td> <td>None or minimal</td> <td></td> </tr> </tbody> </table> <p><strong>Code Lens</strong> (references, test runners, action links)</p> <table> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Code Lens Text</td> <td><code>Phosphor Smoke (#efd5d1)</code> at 70%</td> <td>Above function/class</td> </tr> <tr> <td>Code Lens Hover</td> <td><code>Phantom Current (#e7c0ba)</code></td> <td>On mouse hover</td> </tr> </tbody> </table> <blockquote> <p> <strong>Note</strong>: Inlay hints and code lens must never have higher contrast than primary code tokens. They are supplementary information. They must fade into the background when not focused. </p> </blockquote> <h3 id="minimap-overview-ruler">Minimap & Overview Ruler</h3> <table> <colgroup> <col style="width: 28%" /> <col style="width: 38%" /> <col style="width: 32%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Minimap Background</td> <td><code>Event Horizon (#110402)</code></td> <td>Match editor background</td> </tr> <tr> <td>Minimap Code</td> <td><code>Bad Sector (#46120a)</code></td> <td>Low-contrast code silhouette</td> </tr> <tr> <td>Minimap Selection</td> <td><code>Dark Packet (#691b0f)</code> at 50%</td> <td>Visible but subtle</td> </tr> <tr> <td>Minimap Search Match</td> <td><code>Stack Overglow (#d4a759)</code> at 40%</td> <td>Highlight find results</td> </tr> <tr> <td>Minimap Error</td> <td><code>Amber Alert (#bf5747)</code> at 60%</td> <td>Error locations</td> </tr> <tr> <td>Minimap Warning</td> <td><code>Stack Overglow (#d4a759)</code> at 40%</td> <td>Warning locations</td> </tr> <tr> <td>Overview Ruler BG</td> <td><code>Core Meltdown (#340d07)</code></td> <td>Scrollbar track area</td> </tr> <tr> <td>Overview Ruler Selection</td> <td><code>Dark Packet (#691b0f)</code></td> <td>Current view indicator</td> </tr> </tbody> </table> <h3 id="panels-popups">Panels & Popups</h3> <p><strong>Panel Backgrounds</strong></p> <table style="width: 100%"> <colgroup> <col style="width: 23%" /> <col style="width: 35%" /> <col style="width: 41%" /> </colgroup> <thead> <tr> <th>Panel</th> <th>Background</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Terminal</td> <td><code>Event Horizon (#110402)</code></td> <td>Match editor for seamless feel</td> </tr> <tr> <td>Problems Panel</td> <td><code>Core Meltdown (#340d07)</code></td> <td>Subtle separation from editor</td> </tr> <tr> <td>Output Panel</td> <td><code>Copper Trace (#d7968c)</code></td> <td></td> </tr> <tr> <td>Debug Console</td> <td><code>Copper Trace (#d7968c)</code></td> <td></td> </tr> <tr> <td>Search Panel</td> <td><code>Copper Trace (#d7968c)</code></td> <td></td> </tr> <tr> <td>Panel Headers</td> <td><code>Bad Sector (#46120a)</code></td> <td>Title bar of panels</td> </tr> <tr> <td>Panel Header Text</td> <td><code>Phosphor Smoke (#efd5d1)</code></td> <td></td> </tr> </tbody> </table> <p><strong>Tooltips & Hover Cards</strong></p> <table> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Background</td> <td><code>Core Meltdown (#340d07)</code></td> <td></td> </tr> <tr> <td>Text</td> <td><code>Ghost Pixel (#f7eae8)</code></td> <td></td> </tr> <tr> <td>Border</td> <td><code>Dark Packet (#691b0f)</code></td> <td>1px solid</td> </tr> <tr> <td>Code in Tooltip</td> <td><code>Memory Leek (#8fa667)</code></td> <td>Inline code snippets</td> </tr> <tr> <td>Link in Tooltip</td> <td><code>Phantom Current (#e7c0ba)</code></td> <td>Underlined</td> </tr> </tbody> </table> <p><strong>Autocomplete & IntelliSense</strong></p> <table style="width: 100%"> <colgroup> <col style="width: 25%" /> <col style="width: 33%" /> <col style="width: 41%" /> </colgroup> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Popup Background</td> <td><code>Core Meltdown (#340d07)</code></td> <td></td> </tr> <tr> <td>Popup Border</td> <td><code>Dark Packet (#691b0f)</code></td> <td>1px solid</td> </tr> <tr> <td>Item Text</td> <td><code>Ghost Pixel (#f7eae8)</code></td> <td></td> </tr> <tr> <td>Item Text (dimmed)</td> <td><code>Phosphor Smoke (#efd5d1)</code></td> <td>Type signatures, paths</td> </tr> <tr> <td>Selected Item BG</td> <td><code>Bad Sector (#46120a)</code></td> <td></td> </tr> <tr> <td>Selected Item Border</td> <td><code>Dark Packet (#691b0f)</code></td> <td>Optional left accent</td> </tr> <tr> <td>Match Highlight</td> <td><code>Stack Overglow (#d4a759)</code></td> <td>Matched characters in fuzzy find</td> </tr> <tr> <td>Icon: Function</td> <td><code>Stack Overglow (#d4a759)</code></td> <td></td> </tr> <tr> <td>Icon: Variable</td> <td><code>Ghost Pixel (#f7eae8)</code></td> <td></td> </tr> <tr> <td>Icon: Class/Type</td> <td><code>Dead Thread (#6fa5a0)</code></td> <td></td> </tr> <tr> <td>Icon: Keyword</td> <td><code>Fatal Error (#cf8175)</code></td> <td></td> </tr> <tr> <td>Icon: Constant</td> <td><code>Bright Stack Overglow (#d3ae6e)</code></td> <td></td> </tr> <tr> <td>Icon: String</td> <td><code>Memory Leek (#8fa667)</code></td> <td></td> </tr> </tbody> </table> <p><strong>Parameter Hints</strong> (signature help popups)</p> <table> <thead> <tr> <th>Element</th> <th>Color</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Background</td> <td><code>Core Meltdown (#340d07)</code></td> <td></td> </tr> <tr> <td>Active Parameter</td> <td><code>Stack Overglow (#d4a759)</code></td> <td>Currently typed parameter</td> </tr> <tr> <td>Inactive Parameters</td> <td><code>Phosphor Smoke (#efd5d1)</code></td> <td></td> </tr> <tr> <td>Separator</td> <td><code>Copper Trace (#d7968c)</code></td> <td>Commas between params</td> </tr> </tbody> </table> <hr /> <h2 id="terminal-configuration">Terminal Configuration</h2> <h3 id="ansi-color-mapping">ANSI Color Mapping</h3> <table> <thead> <tr> <th>ANSI Slot</th> <th>Color Name</th> <th>Hex Code</th> </tr> </thead> <tbody> <tr> <td>Black</td> <td>Event Horizon</td> <td><code>#110402</code></td> </tr> <tr> <td>Red</td> <td>Digital Rust</td> <td><code>#af2e1a</code></td> </tr> <tr> <td>Green</td> <td>Memory Leek</td> <td><code>#8fa667</code></td> </tr> <tr> <td>Yellow</td> <td>Stack Overglow</td> <td><code>#d4a759</code></td> </tr> <tr> <td>Blue</td> <td>Blue Screen</td> <td><code>#8791b0</code></td> </tr> <tr> <td>Magenta</td> <td>Fractured Shell</td> <td><code>#ba5a7d</code></td> </tr> <tr> <td>Cyan</td> <td>Dead Thread</td> <td><code>#6fa5a0</code></td> </tr> <tr> <td>White</td> <td>Phosphor Smoke</td> <td><code>#efd5d1</code></td> </tr> <tr> <td>Bright Black</td> <td>Bad Sector</td> <td><code>#46120a</code></td> </tr> <tr> <td>Bright Red</td> <td>Fatal Error</td> <td><code>#cf8175</code></td> </tr> <tr> <td>Bright Green</td> <td>Bright Memory Leek</td> <td><code>#94a577</code></td> </tr> <tr> <td>Bright Yellow</td> <td>Bright Stack Overglow</td> <td><code>#d3ae6e</code></td> </tr> <tr> <td>Bright Blue</td> <td>Bright Blue Screen</td> <td><code>#999eaf</code></td> </tr> <tr> <td>Bright Magenta</td> <td>Bright Fractured Shell</td> <td><code>#ba6b88</code></td> </tr> <tr> <td>Bright Cyan</td> <td>Bright Dead Thread</td> <td><code>#7fa5a1</code></td> </tr> <tr> <td>Bright White</td> <td>Ghost Pixel</td> <td><code>#f7eae8</code></td> </tr> </tbody> </table> <h3 id="terminal-defaults">Terminal Defaults</h3> <table> <thead> <tr> <th>Element</th> <th>Color</th> </tr> </thead> <tbody> <tr> <td>Default Foreground</td> <td><code>Ghost Pixel (#f7eae8)</code></td> </tr> <tr> <td>Default Background</td> <td><code>Event Horizon (#110402)</code></td> </tr> <tr> <td>Cursor</td> <td><code>Stack Overglow (#d4a759)</code></td> </tr> <tr> <td>Cursor Text</td> <td><code>Event Horizon (#110402)</code></td> </tr> <tr> <td>Selection Background</td> <td><code>Dark Packet (#691b0f)</code> at 70%</td> </tr> <tr> <td>Bold Text</td> <td>Use Bright variant of current color</td> </tr> </tbody> </table> <h3 id="color-truecolor-guidance">256-Color & Truecolor Guidance</h3> <ul> <li> The 16 ANSI colors above are the canonical core for 256-color terminals </li> <li> Interpolate colors 16–255 between palette colors where possible </li> <li> Truecolor-capable terminals (24-bit) use the exact hex values from the palette </li> <li> If truecolor is available, prefer it over approximated 256-color values </li> </ul> <hr /> <h2 id="implementation-guidelines">Implementation Guidelines</h2> <h3 id="accessibility-standards">Accessibility Standards</h3> <h4 id="minimum-contrast-requirements">Minimum Contrast Requirements</h4> <p> Maintain <strong>4.5:1 minimum contrast ratio</strong> (WCAG 2.1 Level AA) for all text. These canonical pairs are verified: </p> <table> <colgroup> <col style="width: 35%" /> <col style="width: 27%" /> <col style="width: 16%" /> <col style="width: 20%" /> </colgroup> <thead> <tr> <th>Foreground</th> <th>Background</th> <th>Contrast Ratio</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Ghost Pixel (#f7eae8)</td> <td>Event Horizon (#110402)</td> <td>~17.17:1</td> <td>✓ Pass</td> </tr> <tr> <td>Dim Thermal Throttle (#ac6d4a)</td> <td>Event Horizon (#110402)</td> <td>~4.84:1</td> <td>✓ Pass</td> </tr> <tr> <td>Amber Alert (#bf5747)</td> <td>Event Horizon (#110402)</td> <td>~4.5:1</td> <td>⚠ Borderline: use <code>--amber-alert-text</code> (#cb6353, ~5.23:1) for guaranteed AA</td> </tr> <tr> <td>Phosphor Smoke (#efd5d1)</td> <td>Core Meltdown (#340d07)</td> <td>~12.5:1</td> <td>✓ Pass</td> </tr> <tr> <td>Ghost Pixel (#f7eae8)</td> <td>Bricked Board (#7a2012)</td> <td>~8.76:1</td> <td>✓ Pass</td> </tr> <tr> <td>Bad Sector (#46120a)</td> <td>Core Meltdown (#340d07)</td> <td>~1.12:1</td> <td>⚠ Decorative only</td> </tr> </tbody> </table> <blockquote> <p> <strong>Note</strong>: Low-contrast pairs like disabled text on backgrounds are permitted only for decorative or non-essential elements. Critical information must always meet 4.5:1. </p> </blockquote> <h4 id="non-color-cues">Non-Color Cues</h4> <p> Errors, warnings, and critical states must not rely on color alone. Use these secondary cues: </p> <ul> <li> <strong>Errors</strong>: Red color + wavy underline + error icon (⚠ or ✗) </li> <li> <strong>Warnings</strong>: Yellow color + wavy underline + warning icon </li> <li> <strong>Info/Hints</strong>: Blue color + dotted underline or icon </li> <li><strong>Success</strong>: Green color + checkmark icon</li> <li> <strong>Links</strong>: Color + solid underline (hover reveals additional state) </li> <li> <strong>Spelling Errors</strong>: Dotted underline (distinct style from error underlines) </li> </ul> <h4 id="color-vision-deficiency-considerations"> Color Vision Deficiency Considerations </h4> <ul> <li>Test with protanopia, deuteranopia, and tritanopia simulations</li> <li> Give red/green distinctions (diff views, success/error) non-color differentiators </li> <li>Document an alternative high-contrast mode</li> </ul> <h3 id="consistency-requirements">Consistency Requirements</h3> <ol type="1"> <li> <strong>Priority Order</strong>: Follow token classification hierarchy strictly </li> <li> <strong>Fallback Handling</strong>: Use <code>Ghost Pixel</code> for unrecognized tokens </li> <li> <strong>Semantic Consistency</strong>: Same meaning = same color across all languages </li> <li> <strong>Warmth Balance</strong>: Maintain the warm rust-copper tone throughout </li> </ol> <h2 id="ui-design-guidelines">UI Design Guidelines</h2> <p> User-interface theming (surfaces, elevation, interaction physics, and component-level definitions for buttons, inputs, menus, modals, and the rest) is specified separately in the <strong>Digital Rust UI Specification</strong>, demonstrated live on the <a href="ui.html">UI Guidelines page</a> and canonical in <code>Digital Rust UI Specification.md</code> (<a href="Digital Rust UI Specification.md" download>download</a>). This document owns the palette, syntax token classification, editor chrome, and terminal configuration; the UI Specification owns everything a full application theme needs beyond the editor. The summaries below cover the colour-usage rules that ports most commonly need when extending Digital Rust past the editor. </p> <h3 id="visual-hierarchy">Visual Hierarchy</h3> <p> Apply colors based on functional importance and user interaction patterns: </p> <ul> <li> <strong>High Priority</strong>: Interactive elements, CTAs, error states → <code>Digital Rust (#af2e1a)</code>, <code>Amber Alert (#bf5747)</code> </li> <li> <strong>Medium Priority</strong>: Headers, navigation, secondary actions → <code>Fatal Error (#cf8175)</code>, <code>Stack Overglow (#d4a759)</code> </li> <li> <strong>Low Priority</strong>: Body text, supporting information → <code>Ghost Pixel (#f7eae8)</code>, <code>Phosphor Smoke (#efd5d1)</code> </li> </ul> <h3 id="component-colour-guidelines">Component Colour Guidelines</h3> <p><strong>Borders and Separators</strong></p> <ul> <li> Primary Borders: <code>Dark Packet (#691b0f)</code> at 2-4px width </li> <li>Subtle Dividers: <code>Bad Sector (#46120a)</code> at 1px width</li> <li>Focus Rings: <code>Stack Overglow (#d4a759)</code> at 2px width</li> <li> Container Edges: <code>Core Meltdown (#340d07)</code> for nested depth </li> </ul> <p><strong>Shadows and Depth</strong></p> <ul> <li><strong>NEVER use pure black (#000) shadows</strong>. They are cold and dead; always use warm shadow tones</li> <li> Use <code>Bad Sector (#46120a)</code> / <code>--dr-surface-highlight</code> for offset shadows </li> <li> Use <code>Event Horizon (#110402)</code> only for legacy blunt shadows that need maximum depth </li> <li> No gradients, no blur, no transparency: solid colors only (atmospheric noise/scanline overlays excepted) </li> <li> Interactive and elevated elements add the inner highlight, <code>inset 0 1px 0 rgba(255, 255, 255, 0.1)</code>, stacked under the offset shadow — the bevel of the panel </li> </ul> <p><strong>State Indicators</strong></p> <ul> <li>Success: <code>Memory Leek (#8fa667)</code></li> <li>Warning: <code>Stack Overglow (#d4a759)</code></li> <li> Error: <code>Amber Alert (#bf5747)</code> or <code>Digital Rust (#af2e1a)</code> for critical </li> <li>Info: <code>Dead Thread (#6fa5a0)</code></li> <li>Processing: <code>Stack Overglow (#d4a759)</code> with animation</li> </ul> <p><strong>Link Styling</strong></p> <ul> <li> Default: <code>Phantom Current (#e7c0ba)</code> as specified in palette </li> <li>Hover: <code>Fatal Error (#cf8175)</code> with optional underline</li> <li>Visited: <code>Corrupted Cache (#dfaba3)</code></li> <li>Active: <code>Digital Rust (#af2e1a)</code></li> </ul> <h3 id="theme-philosophy">Theme Philosophy</h3> <p> Digital Rust embraces the aesthetic of system degradation and hardware failure while maintaining professional usability. The theme should evoke: </p> <ul> <li> <strong>Warmth</strong>: Through rust and copper tones rather than cold blues </li> <li> <strong>Nostalgia</strong>: Terminal aesthetics meet modern requirements </li> <li> <strong>Clarity</strong>: Despite the "corrupted" naming, readability is paramount </li> <li> <strong>Character</strong>: Each color name tells a story of digital decay </li> <li> <strong>Semantic Consistency</strong>: Identical semantic roles are rendered consistently across languages, even when their surface syntax differs </li> <li> <strong>Tactility</strong>: Interactive elements behave like chunky old hardware — pressable, beveled, and physically responsive (defined in the <a href="ui.html">UI Specification</a>) </li> </ul> <h2 id="testing-requirements">Testing Requirements</h2> <h3 id="required-testing-scenarios">Required Testing Scenarios</h3> <ol type="1"> <li> <strong>Language Coverage</strong>: Test with at least 5 different programming languages </li> <li> <strong>File Types</strong>: Verify Markdown, JSON, XML, and configuration files </li> <li> <strong>Diff Views</strong>: Make sure that additions and deletions are clearly distinguishable </li> <li> <strong>Terminal Emulation</strong>: Validate the ANSI color representation </li> <li> <strong>Light Sensitivity</strong>: Provide documentation for users sensitive to warm tones </li> </ol> <h3 id="performance-considerations">Performance Considerations</h3> <ul> <li>Colors must render consistently across sRGB and P3 color spaces</li> <li>Test on both high-contrast and standard displays</li> <li>Verify legibility at zoom levels from 50% to 200%</li> </ul> <h2 id="implementation-notes">Implementation Notes</h2> <h3 id="canonical-source">Canonical Source</h3> <p> This specification is the <strong>canonical source of truth</strong> for Digital Rust. All editor-specific theme implementations (VS Code, JetBrains, Neovim, Sublime Text, terminals, web applications, and others) are projections of this specification. </p> <p> If a conflict arises between an implementation and this spec, this document takes precedence. Document any intentional deviations in the implementation. </p> <h3 id="handling-coarse-tokenization">Handling Coarse Tokenization</h3> <p> Some editors or language grammars provide limited token granularity. If fine-grained semantic distinctions are not possible: </p> <ol type="1"> <li> <p> <strong>Built-ins vs. User Definitions</strong>: If built-in functions cannot be distinguished from user-defined functions, use <code>Stack Overglow (#d4a759)</code> for all functions. </p> </li> <li> <p> <strong>Types vs. Variables</strong>: If types cannot be distinguished from variables, prefer <code>Ghost Pixel (#f7eae8)</code> as the neutral fallback. </p> </li> <li> <p> <strong>Ambiguous Tokens</strong>: Favor readability and contrast over a semantic color that does not map cleanly. </p> </li> <li> <p> <strong>Missing Scopes</strong>: For tokens not covered by the grammar, fall back to <code>Ghost Pixel (#f7eae8)</code>. </p> </li> </ol> <blockquote> <p> <strong>Guiding Principle</strong>: If in doubt, prioritize readability and visual comfort over strict semantic accuracy. </p> </blockquote> <hr /> <h2 id="version-history">Version History</h2> <ul> <li> <strong>v1.2.2</strong>: Technical prose rewritten in Simplified Technical English <ul> <li>Rules, notes, guidelines, and implementation text rewritten for short sentences, condition-first instructions, and consistent verbs</li> <li>No palette, token, or hex value changes</li> <li>Brand-voice passages (overview, theme philosophy, design principles) unchanged</li> </ul> </li> <li> <strong>v1.2.1</strong>: UI specification accessibility and token fixes <ul> <li>Primary button hover fill changed to Firewall Breach: Ghost Pixel on raw Amber Alert failed WCAG AA (3.83:1); Firewall Breach passes at 4.66:1</li> <li>Semantic action/feedback/border-colour token layer added to <code>tokens.css</code>; component code now references semantic tokens, not raw palette values</li> <li>Ambient texture (scanline/noise overlay) implementation documented; overlays now suppress under <code>prefers-reduced-motion</code></li> <li>Loading/skeleton state specified; unused decorative tokens removed</li> </ul> </li> <li> <strong>v1.2.0</strong>: UI specification added <ul> <li>New sibling document: the <a href="ui.html">Digital Rust UI Specification</a>, covering surfaces, elevation, interaction physics, and component definitions</li> <li>This document retains the palette, syntax tokens, editor chrome, terminal configuration, and colour-usage summaries</li> <li>Component colour guidance updated to include the inner-highlight bevel rule</li> </ul> </li> <li> <strong>v1.1.1</strong>: Showcase and spec alignment fixes <ul> <li>Fixed <code>this</code> token color: keyword → constant (Bright Stack Overglow)</li> <li>Fixed <code>ErrorKind::Other</code> enum variant: variable → constant (Bright Stack Overglow)</li> <li>Fixed HTML tag names in code sample: selector → Dead Thread</li> <li>Fixed diff modification line text color to Ghost Pixel (spec default)</li> <li>Clarified Amber Alert text rendering: spec token uses #bf5747 but text rendering on dark backgrounds uses WCAG-AA <code>--amber-alert-text</code> (#cb6353)</li> <li>Aligned copyright year across all spec documents</li> </ul> </li> <li> <strong>v1.1.0</strong>: Spec corrections and normalizations <ul> <li>Corrected contrast ratios to measured WCAG 2.1 values</li> <li>Spelling errors changed to dotted underline for distinguishability from error wavy underlines</li> <li>Primary borders clarified as 2–4px per design system</li> <li>Shadow guidance: use Bad Sector / --dr-surface-highlight, not Event Horizon</li> <li>Gradients/blur/transparency explicitly prohibited (noise/scanline overlays excepted)</li> </ul> </li> <li> <strong>v1.0.0</strong>: Initial specification release <ul> <li> Theme inspired by system failures, kernel panics, and the beauty of digital entropy </li> <li>Color names honor the poetry of corrupted systems</li> </ul> </li> </ul> <hr /> <p><a href="https://digitalrust.katsuricata.com/">Digital Rust</a> © 2025–2026 by <a href="https://KatSuricata.com/">Kat Suricata</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p> <p><em>Chaos reigns.</em></p> </article> </main> </div> <script> (function () { const tocToggle = document.querySelector('[data-toc-toggle]'); const tocPanel = document.querySelector('[data-toc-panel]');
if (tocToggle && tocPanel) { const togglePanel = () => { const isOpen = tocPanel.classList.toggle('is-open'); tocToggle.setAttribute('aria-expanded', String(isOpen)); };
tocToggle.addEventListener('click', togglePanel); document.addEventListener('click', (event) => { if (!tocPanel.classList.contains('is-open')) return; if (event.target === tocToggle || tocPanel.contains(event.target)) return; tocPanel.classList.remove('is-open'); tocToggle.setAttribute('aria-expanded', 'false'); }); }
const paletteTables = document.querySelectorAll('table[data-color-table]'); paletteTables.forEach((table) => { const wrapper = table.closest('.table-scroll'); if (!wrapper) return; const gridTarget = wrapper.previousElementSibling; if (!gridTarget) return; const paletteType = table.dataset.colorTable; const rows = Array.from(table.querySelectorAll('tbody tr')); const fragment = document.createDocumentFragment();
rows.forEach((row) => { const cells = row.querySelectorAll('td'); if (!cells.length) return; const hex = cells[0].textContent.trim(); const label = cells[1]?.textContent.trim(); const note = cells[2]?.textContent.trim(); if (!hex) return;
if (paletteType === 'ansi') { const chip = document.createElement('div'); chip.className = 'ansi-chip'; const swatch = document.createElement('span'); swatch.className = 'legend-chip'; swatch.style.background = hex; chip.appendChild(swatch); const textWrapper = document.createElement('span'); textWrapper.innerHTML = `<strong>${label || ''}</strong><br /><small>${note || ''}</small>`; chip.appendChild(textWrapper); fragment.appendChild(chip); } else { const card = document.createElement('div'); card.className = 'color-card'; const swatch = document.createElement('div'); swatch.className = 'color-card__swatch'; swatch.style.background = hex; card.appendChild(swatch); const nameEl = document.createElement('strong'); nameEl.textContent = label || '—'; card.appendChild(nameEl); const codeEl = document.createElement('span'); codeEl.className = 'color-card__code'; codeEl.textContent = hex.toUpperCase(); card.appendChild(codeEl); if (note) { const noteEl = document.createElement('span'); noteEl.style.opacity = '0.7'; noteEl.textContent = note; card.appendChild(noteEl); } fragment.appendChild(card); } });
gridTarget.appendChild(fragment); });
const stamp = document.querySelector('[data-current-date]'); if (stamp) { stamp.textContent = new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date()); }
const headings = document.querySelectorAll('.spec-document h2[id], .spec-document h3[id]'); const navLinks = document.querySelectorAll('#TOC a'); if (headings.length && navLinks.length) { const linkIndex = new Map(); navLinks.forEach((link) => { const id = link.getAttribute('href')?.replace('#', ''); if (id) linkIndex.set(id, link); }); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; const link = linkIndex.get(entry.target.id); if (!link) return; navLinks.forEach((item) => item.classList.toggle('is-active', item === link)); }); }, { rootMargin: '-45% 0px -45% 0px' } ); headings.forEach((heading) => observer.observe(heading)); } })(); </script></body>
</html>