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 index.html
43 kB · 878 lines
HTML
at commit 1c8d2c10
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879<!DOCTYPE html><html lang="en-US">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Digital Rust / Demonstration</title> <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 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="normalize.css" rel="stylesheet" /> <link href="tokens.css" rel="stylesheet" /> <link href="style.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" /></head>
<body> <main class="container"> <header> <h1>DIGITAL RUST</h1> <span class="version-badge">Spec v1.2.2</span> <div class="subtitle">Syntax · UI · Terminal</div> <div class="tagline">A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. </div> <nav class="lead-links" aria-label="Site links"> <div class="link-group"> <span class="link-group-label">The Theme</span> <ul> <li><a href="/playground/">Try it out!</a></li> <li><a href="ui.html">UI Guidelines</a></li> <li><a href="spec.html">Full Spec</a></li> <li><a href="https://tangled.org/katsuricata.com/DigitalRust/tree/main/wallpaper">Wallpaper</a></li> <li><a href="https://tangled.org/katsuricata.com/DigitalRust">Tangled</a></li> </ul> </div> <div class="link-group"> <span class="link-group-label">Ports</span> <ul> <li><a href="https://marketplace.visualstudio.com/items?itemName=KatSuricata.digital-rust">VSCode</a></li> <li><a href="https://addons.mozilla.org/firefox/addon/digital-rust-theme/">Firefox</a></li> <li><a href="ports/DigitalRustKDE.colors">KDE Plasma</a></li> <li><a href="ports/DigitalRustKate.theme">Kate</a></li> <li><a href="https://community.obsidian.md/themes/digital-rust">Obsidian</a></li> <li><a href="ports/DigitalRustfish.theme">fish</a></li> <li><a href="ports/digital-rust-ghostty">Ghostty</a></li> <li><a href="ports/DigitalRustKonsole.colorscheme">Konsole</a></li> <li><a href="ports/DigitalRustPtyxis.palette">Ptyxis</a></li> <li><a href="ports/agentskill.zip">Agent Skill</a></li> <li><a href="https://tangled.org/katsuricata.com/DigitalRust/tree/main/ports/digitalrustpi">Pi</a></li> </ul> </div> </nav> </header>
<section class="terminal" aria-label="Spec validation terminal"> <div class="terminal-content" role="log"> <div class="terminal-line"> <span class="prompt">digitalrust@entropy:~$</span> <span class="command">cat DIGITAL_RUST_SPEC.md | verify --strict</span> </div> <div class="terminal-line output"> fingerprint: <span class="string">0xDR-1.2.2</span><br /> updated: <span class="number">2025-11-29</span><br /> priority-order: <span class="support">errors > warnings > semantic > textmate</span> </div>
<div class="terminal-line"> <span class="prompt">digitalrust@entropy:~$</span> <span class="command">theme audit --sections syntax ui terminal accessibility</span> </div> <div class="terminal-line output"> Syntax Coverage ........ <span class="status-pass">PASS</span><br /> UI Surfaces ............ <span class="status-pass">PASS</span><br /> ANSI Map ............... <span class="status-pass">PASS</span><br /> Non-color cues ......... <span class="status-pass">PASS</span> </div>
<div class="terminal-line"> <span class="prompt">digitalrust@entropy:~$</span> <span class="command">tail -n4 /var/log/digital-rust</span> </div> <div class="terminal-line output"> [OK] WCAG contrast ≥ <span class="number">4.5</span>:1 enforced<br /> [OK] Markdown + JSON + Diff snapshots loaded<br /> [OK] Terminal ANSI pairs bound to palette<br /> [!] Remember: <span class="literal">errors outrank keywords</span> </div>
<div class="terminal-line"> <span class="prompt">digitalrust@entropy:~$</span> <span class="cursor"></span> </div> </div> </section>
<section aria-labelledby="spec-heading" class="spec-section"> <h2 id="spec-heading" class="section-title">Spec Guarantees</h2> <div class="spec-grid"> <article class="spec-card"> <h3>Priority Stack</h3> <ul> <li>Error scopes override everything with <span class="error-inline">Amber Alert</span></li> <li>Warnings inherit <span class="warning-inline">Stack Overglow</span> with wavy underline</li> <li>Semantic tokens fall back to TextMate colors when absent</li> </ul> </article> <article class="spec-card"> <h3>Language Coverage</h3> <ul> <li>TypeScript · Python · Rust · Markdown · JSON/TOML</li> <li>HTML/CSS · SQL · Shell · Diff/SCM views</li> <li>Template + decorator scopes, regex, interpolation</li> </ul> </article> <article class="spec-card"> <h3>Editor & UI</h3> <ul> <li>Tabs, gutter, minimap, status bar, panels</li> <li>Diagnostics + git markers reuse ANSI cues</li> <li>Focus rings + disabled states meet contrast rules</li> </ul> </article> <article class="spec-card"> <h3>Accessibility</h3> <ul> <li>Solid vs. wavy underline separates links/errors</li> <li>Color-blind safe via redundant icons + patterns</li> <li>Documented contrast pairs for auditing</li> </ul> </article> </div> </section>
<section aria-labelledby="preview-heading" class="preview-section"> <h2 id="preview-heading" class="section-title">Theme Preview</h2> <div class="preview-grid"> <img src="digitalrustt.webp" data-lightbox="digitalrust.webp" alt="VS Code window using Digital Rust theme with Rust sample code open" class="preview-img" loading="lazy" decoding="async" /> <img src="digitalrust2t.webp" data-lightbox="digitalrust2.webp" alt="Linux desktop with Digital Rust wallpaper and terminal window running theme audit" class="preview-img" loading="lazy" decoding="async" /> <img src="digitalrust3t.webp" data-lightbox="digitalrust3.webp" alt="KDE color scheme editor window displaying the Digital Rust theme palette with preview swatches for UI elements" class="preview-img" loading="lazy" decoding="async" /> <img src="digitalrust4t.webp" data-lightbox="digitalrust4.webp" alt="Linux desktop terminal using the Digital Rust, showing a fastfetch system overview with hardware specs and ASCII logo" class="preview-img" loading="lazy" decoding="async" /> </div> </section>
<dialog id="lightbox" class="lightbox" aria-label="Image lightbox"> <button class="lightbox-close" aria-label="Close lightbox">CLOSE</button> <button class="lightbox-nav lightbox-prev" aria-label="Previous image">PREV</button> <button class="lightbox-nav lightbox-next" aria-label="Next image">NEXT</button> <img src="" alt="" class="lightbox-img" data-placeholder /> </dialog>
<section aria-labelledby="token-map" class="token-map"> <h2 id="token-map" class="section-title">Token Classification Map</h2> <p class="section-copy"> Each card renders the canonical color, name, and example scopes. Sigils inherit their parent token color per spec. </p> <div class="token-grid"> <article class="token-card"> <header> <span>Keywords & Storage</span> <span class="token-swatch" style="--swatch: var(--fatal-error)">Fatal Error · #cf8175</span> </header> <p>Control flow, modifiers, `try/catch`, storage types.</p> <div class="token-examples"> <span class="keyword">class</span> <span class="keyword">return</span> <span class="keyword">await</span> </div> </article> <article class="token-card"> <header> <span>Functions & Macros</span> <span class="token-swatch" style="--swatch: var(--stack-overglow)">Stack Overglow · #d4a759</span> </header> <p>User functions, built macros, shell commands.</p> <div class="token-examples"> <span class="function">renderTheme()</span> <span class="function">println!</span> <span class="function">COUNT</span> </div> </article> <article class="token-card"> <header> <span>Classes & Types</span> <span class="token-swatch" style="--swatch: var(--dead-thread)">Dead Thread · #6fa5a0</span> </header> <p>Types, interfaces, trait names, lifetimes.</p> <div class="token-examples"> <span class="class-name">SystemState</span> <span class="type">bool</span> <span class="decorator">'static</span> </div> </article> <article class="token-card"> <header> <span>Strings & Regex</span> <span class="token-swatch" style="--swatch: var(--memory-leek)">Memory Leek · #8fa667</span> </header> <p>Literal text, heredocs, regex bodies & groups.</p> <div class="token-examples"> <span class="string">"corrupted"</span> <span class="string">/kernel.+panic/</span> </div> </article> <article class="token-card"> <header> <span>Numbers & Units</span> <span class="token-swatch" style="--swatch: var(--thermal-throttle)">Thermal Throttle · #d78556</span> </header> <p>Integers, floats, hex, CSS units, rgb values.</p> <div class="token-examples"> <span class="number">0xDEADBEEF</span> <span class="number">42</span> <span class="number">85.5°C</span> </div> </article> <article class="token-card"> <header> <span>Constants & Specials</span> <span class="token-swatch" style="--swatch: var(--bright-stack-overglow)">Bright Stack Overglow · #d3ae6e</span> </header> <p>Booleans, null-like, enum values, magic names.</p> <div class="token-examples"> <span class="literal">true</span> <span class="literal">None</span> <span class="constant">Status::OK</span> </div> </article> <article class="token-card"> <header> <span>Comments & Docs</span> <span class="token-swatch" style="--swatch: var(--dim-thermal-throttle)">Dim Thermal · #ac6d4a</span> </header> <p>Inline comments, docstrings, shebangs (italic).</p> <div class="token-examples"> <span class="comment">// note</span> <span class="comment">#!/bin/bash</span> </div> </article> <article class="token-card"> <header> <span>Decorators & Attributes</span> <span class="token-swatch" style="--swatch: var(--dead-thread)">Dead Thread · #6fa5a0</span> </header> <p>Python decorators, Rust attributes, JSX props.</p> <div class="token-examples"> <span class="decorator">@dataclass</span> <span class="decorator">#[cfg(test)]</span> </div> </article> <article class="token-card"> <header> <span>Support & Built-ins</span> <span class="token-swatch" style="--swatch: var(--dim-stack-overglow)">Dim Stack Overglow · #a07e43</span> </header> <p>Standard library functions, DOM globals, HTML attributes.</p> <div class="token-examples"> <span class="support">console</span> <span class="support">print</span> <span class="support">class</span> </div> </article> <article class="token-card"> <header> <span>Variables & Identifiers</span> <span class="token-swatch" style="--swatch: var(--ghost-pixel)">Ghost Pixel · #f7eae8</span> </header> <p>Parameters, locals, properties, fallback text.</p> <div class="token-examples"> <span class="variable">entropyLevel</span> <span class="parameter">error</span> <span class="variable">$PATH</span> </div> </article> <article class="token-card"> <header> <span>Operators & Punctuation</span> <span class="token-swatch" style="--swatch: var(--copper-trace)">Copper Trace · #d7968c</span> </header> <p>Brackets, sigils, punctuation, interpolation braces.</p> <div class="token-examples"> <span class="operator">===</span> <span class="punctuation">{ }</span> <span class="operator">::</span> </div> </article> <article class="token-card"> <header> <span>Diagnostics & Errors</span> <span class="token-swatch" style="--swatch: var(--amber-alert)">Amber Alert · #bf5747</span> </header> <p>Wavy underline + icon ensures non-color cues.</p> <div class="token-examples"> <span class="error-inline">panic()</span> <span class="warning-inline">deprecated()</span> </div> </article> </div> </section>
<section aria-labelledby="language-showcase" class="code-showcase"> <h2 id="language-showcase" class="section-title">Language Snapshots</h2> <p class="section-copy">Nine grammars render simultaneously, satisfying the spec requirement for multi-language verification.</p> <div class="code-grid"> <div class="code-block"> <div class="code-block-header"> <span class="code-block-title">TypeScript</span> <span class="code-block-lang">ES2024</span> </div> <pre class="code" lang="typescript"><span class="comment">// Scoped diagnostic enforcing semantic priority</span><span class="keyword">export</span> <span class="keyword">class</span> <span class="class-name">KernelProbe</span> <span class="punctuation">{</span> <span class="keyword">readonly</span> <span class="variable">threshold</span><span class="punctuation">:</span> <span class="type">number</span> <span class="operator">=</span> <span class="number">85.5</span> <span class="keyword">async</span> <span class="function">ping</span><span class="punctuation">(</span><span class="parameter">bus</span><span class="punctuation">:</span> <span class="class-name">SystemBus</span><span class="punctuation">)</span><span class="punctuation">:</span> <span class="type">Promise</span><span class="punctuation"><</span><span class="type">void</span><span class="punctuation">></span> <span class="punctuation">{</span> <span class="keyword">const</span> <span class="variable">reading</span> <span class="operator">=</span> <span class="keyword">await</span> <span class="variable">bus</span><span class="punctuation">.</span><span class="function">read</span><span class="punctuation">(</span><span class="string">"temp"</span><span class="punctuation">)</span> <span class="keyword">if</span> <span class="punctuation">(</span><span class="variable">reading</span> <span class="operator">></span> <span class="literal">this</span><span class="punctuation">.</span><span class="variable">threshold</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="class-name">Error</span><span class="punctuation">(</span><span class="string">`🔥 kernel panic: </span><span class="punctuation">${</span><span class="variable">reading</span><span class="punctuation">}</span><span class="string">°C`</span><span class="punctuation">)</span> <span class="punctuation">}</span> <span class="punctuation">}</span><span class="punctuation">}</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">Python</span> <span class="code-block-lang">3.12</span> </div> <pre class="code" lang="python"><span class="comment">#!/usr/bin/env python3</span><span class="comment">"""Digital Rust semantic sample"""</span>
<span class="decorator">@dataclass</span><span class="keyword">class</span> <span class="class-name">Snapshot</span>: <span class="variable">name</span>: <span class="type">str</span> <span class="variable">ok</span>: <span class="type">bool</span> <span class="operator">=</span> <span class="literal">True</span>
<span class="keyword">def</span> <span class="function">emit</span><span class="punctuation">(</span><span class="keyword">self</span><span class="punctuation">,</span> <span class="parameter">metric</span>: <span class="type">float</span><span class="punctuation">)</span> <span class="operator">-></span> <span class="type">None</span>: <span class="support">print</span><span class="punctuation">(</span><span class="string">f"{self.name}: {metric:.2f}"</span><span class="punctuation">)</span>
<span class="variable">RUN</span> <span class="operator">=</span> <span class="class-name">Snapshot</span><span class="punctuation">(</span><span class="string">"ansi-map"</span><span class="punctuation">,</span> <span class="literal">True</span><span class="punctuation">)</span><span class="keyword">if</span> <span class="variable">__name__</span> <span class="operator">==</span> <span class="string">"__main__"</span>: <span class="variable">RUN</span><span class="punctuation">.</span><span class="function">emit</span><span class="punctuation">(</span><span class="number">4.50</span><span class="punctuation">)</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">Rust</span> <span class="code-block-lang">1.76</span> </div> <pre class="code" lang="rust"><span class="comment">// Attributes + lifetimes share Dead Thread</span><span class="decorator">#[derive(Debug, Clone)]</span><span class="keyword">pub</span> <span class="keyword">struct</span> <span class="class-name">Telemetry<'a></span> <span class="punctuation">{</span> <span class="variable">buffer</span>: <span class="class-name">&'a</span> <span class="class-name">[u8]</span>, <span class="variable">heat</span>: <span class="type">f32</span>,<span class="punctuation">}</span>
<span class="keyword">impl</span> <span class="class-name">Telemetry</span><'_> { <span class="keyword">pub</span> <span class="keyword">fn</span> <span class="function">check_integrity</span><span class="punctuation">(&</span><span class="keyword">self</span><span class="punctuation">)</span> <span class="operator">-></span> <span class="class-name">Result</span><<span class="type">bool</span>, <span class="class-name">Error</span>> { <span class="keyword">if</span> <span class="keyword">self</span><span class="punctuation">.</span><span class="variable">heat</span> <span class="operator">></span> <span class="number">95.0</span> { <span class="keyword">return</span> <span class="class-name">Err</span><span class="punctuation">(</span><span class="class-name">Error</span>::<span class="function">new</span><span class="punctuation">(</span><span class="class-name">ErrorKind</span>::<span class="constant">Other</span>, <span class="string">"KERNEL PANIC"</span><span class="punctuation">))</span> } <span class="class-name">Ok</span><span class="punctuation">(</span><span class="literal">true</span><span class="punctuation">)</span> }}</pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">Markdown</span> <span class="code-block-lang">Spec prose</span> </div> <pre class="code markdown-code" lang="markdown"><span class="md-marker">##</span> <span class="md-heading">Digital Rust Guarantees</span><span class="md-list">-</span> Tokens inherit <span class="md-code">`Ghost Pixel`</span> when undefined<span class="md-list">-</span> <span class="md-bold">Links</span> stay underlined <span class="md-link">[even offline]</span><span class="md-url">(spec.md)</span><span class="md-marker">></span> <span class="md-quote">Errors outrank keywords every time.</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">JSON / TOML</span> <span class="code-block-lang">Config</span> </div> <pre class="code" lang="json"><span class="punctuation">{</span> <span class="json-key">"editor"</span><span class="punctuation">:</span> <span class="punctuation">{</span> <span class="json-key">"background"</span><span class="punctuation">:</span> <span class="string">"#110402"</span>, <span class="json-key">"cursor"</span><span class="punctuation">:</span> <span class="string">"#D4A759"</span>, <span class="json-key">"useRainbowBrackets"</span><span class="punctuation">:</span> <span class="literal">true</span> <span class="punctuation">}</span>, <span class="json-key">"diagnostics"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"error:wavy"</span>, <span class="string">"warning:stack"</span><span class="punctuation">]</span><span class="punctuation">}</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">HTML + CSS</span> <span class="code-block-lang">Markup</span> </div> <pre class="code" lang="html"><span class="punctuation"><</span><span class="class-name">section</span> <span class="support">class</span><span class="punctuation">=</span><span class="string">"panel"</span><span class="punctuation">></span> <span class="punctuation"><</span><span class="class-name">h3</span><span class="punctuation">></span><span class="keyword">@keyframes</span> glitch<span class="punctuation"></</span><span class="class-name">h3</span><span class="punctuation">></span><span class="punctuation"></</span><span class="class-name">section</span><span class="punctuation">></span>
<span class="selector">.panel</span> <span class="punctuation">{</span> <span class="support">border</span><span class="punctuation">:</span> <span class="number">1px</span> <span class="keyword">solid</span> <span class="string">var(--dark-packet)</span>; <span class="support">color</span><span class="punctuation">:</span> <span class="string">var(--ghost-pixel)</span>;<span class="punctuation">}</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">Diff / Git</span> <span class="code-block-lang">Unified</span> </div> <pre class="code" lang="diff"><span class="diff-meta">@@ -12,6 +12,7 @@</span><span class="diff-remove">- panic!("kernel meltdown")</span><span class="diff-add">+ log::warn!("stack overglow engaged")</span><span class="diff-context"> return Ok(())</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">Shell / CLI</span> <span class="code-block-lang">Bash</span> </div> <pre class="code" lang="bash"><span class="prompt">rust@host</span><span class="punctuation">$</span> <span class="shell-command">digitalrust</span> <span class="shell-flag">--apply</span> <span class="shell-flag">--profile</span><span class="punctuation">=</span><span class="string">"dark"</span><span class="prompt">rust@host</span><span class="punctuation">$</span> <span class="shell-command">export</span> <span class="shell-variable">THEME</span><span class="operator">=</span><span class="string">"digital-rust"</span><span class="prompt">rust@host</span><span class="punctuation">$</span> <span class="shell-command">printf</span> <span class="string">"%s\n"</span> <span class="shell-variable">$THEME</span></pre> </div>
<div class="code-block"> <div class="code-block-header"> <span class="code-block-title">SQL</span> <span class="code-block-lang">ANSI</span> </div> <pre class="code" lang="sql"><span class="keyword">SELECT</span> <span class="function">COUNT</span><span class="punctuation">(</span><span class="operator">*</span><span class="punctuation">)</span> <span class="keyword">AS</span> <span class="constant">total_panics</span><span class="keyword">FROM</span> <span class="variable">errors</span><span class="keyword">WHERE</span> <span class="variable">palette</span> <span class="operator">=</span> <span class="string">'digital-rust'</span> <span class="keyword">AND</span> <span class="variable">severity</span> <span class="operator">IN</span> <span class="punctuation">(</span><span class="string">'fatal'</span><span class="punctuation">,</span> <span class="string">'critical'</span><span class="punctuation">)</span>;</pre> </div> </div> </section>
<section class="palette-section"> <h3 class="palette-header">Main Color Palette</h3> <p class="section-copy">Warm rust-to-void gradient used across editor, UI, and docs.</p> <div class="color-grid"> <div class="color-chip" style="--chip-bg: var(--ghost-pixel); --chip-fg: var(--event-horizon)"> <span class="color-name">Ghost Pixel</span> <span class="color-hex">#F7EAE8</span> </div> <div class="color-chip" style="--chip-bg: var(--phosphor-smoke); --chip-fg: var(--event-horizon)"> <span class="color-name">Phosphor Smoke</span> <span class="color-hex">#EFD5D1</span> </div> <div class="color-chip" style="--chip-bg: var(--phantom-current); --chip-fg: var(--event-horizon)"> <span class="color-name">Phantom Current</span> <span class="color-hex">#E7C0BA</span> </div> <div class="color-chip" style="--chip-bg: var(--corrupted-cache); --chip-fg: var(--event-horizon)"> <span class="color-name">Corrupted Cache</span> <span class="color-hex">#DFABA3</span> </div> <div class="color-chip" style="--chip-bg: var(--copper-trace); --chip-fg: var(--event-horizon)"> <span class="color-name">Copper Trace</span> <span class="color-hex">#D7968C</span> </div> <div class="color-chip" style="--chip-bg: var(--fatal-error); --chip-fg: var(--event-horizon)"> <span class="color-name">Fatal Error</span> <span class="color-hex">#CF8175</span> </div> <div class="color-chip" style="--chip-bg: var(--rouge-signal); --chip-fg: var(--event-horizon)"> <span class="color-name">Rouge Signal</span> <span class="color-hex">#C76C5E</span> </div> <div class="color-chip" style="--chip-bg: var(--amber-alert); --chip-fg: var(--event-horizon)"> <span class="color-name">Amber Alert</span> <span class="color-hex">#BF5747</span> </div> <div class="color-chip" style="--chip-bg: var(--firewall-breach); --chip-fg: var(--event-horizon)"> <span class="color-name">Firewall Breach</span> <span class="color-hex">#B74230</span> </div> <div class="color-chip" style="--chip-bg: var(--digital-rust); --chip-fg: var(--ghost-pixel); border: 2px solid var(--fatal-error)"> <span class="color-name"><strong>Digital Rust</strong></span> <span class="color-hex">#AF2E1A</span> </div> <div class="color-chip" style="--chip-bg: var(--kernel-panic); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Kernel Panic</span> <span class="color-hex">#9D2917</span> </div> <div class="color-chip" style="--chip-bg: var(--data-rot); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Data Rot</span> <span class="color-hex">#8C2414</span> </div> <div class="color-chip" style="--chip-bg: var(--bricked-board); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Bricked Board</span> <span class="color-hex">#7A2012</span> </div> <div class="color-chip" style="--chip-bg: var(--dark-packet); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Dark Packet</span> <span class="color-hex">#691B0F</span> </div> <div class="color-chip" style="--chip-bg: var(--daemon-blood); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Daemon Blood</span> <span class="color-hex">#57170D</span> </div> <div class="color-chip" style="--chip-bg: var(--bad-sector); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Bad Sector</span> <span class="color-hex">#46120A</span> </div> <div class="color-chip" style="--chip-bg: var(--core-meltdown); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Core Meltdown</span> <span class="color-hex">#340D07</span> </div> <div class="color-chip" style="--chip-bg: var(--null-pointer); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Null Pointer</span> <span class="color-hex">#230905</span> </div> <div class="color-chip" style="--chip-bg: var(--event-horizon); --chip-fg: var(--ghost-pixel)"> <span class="color-name">Event Horizon</span> <span class="color-hex">#110402</span> </div> </div> </section>
<section class="palette-section ansi"> <h3 class="palette-header">ANSI 16-Color Map</h3> <div class="ansi-grid"> <div class="ansi-chip" style="--chip-bg: var(--event-horizon); --chip-fg: var(--ghost-pixel);"> <span class="ansi-label">Black</span> <span class="ansi-name">Event Horizon</span> <span class="ansi-hex">#110402</span> </div> <div class="ansi-chip" style="--chip-bg: var(--digital-rust); --chip-fg: var(--ghost-pixel);"> <span class="ansi-label">Red</span> <span class="ansi-name">Digital Rust</span> <span class="ansi-hex">#AF2E1A</span> </div> <div class="ansi-chip" style="--chip-bg: var(--memory-leek); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Green</span> <span class="ansi-name">Memory Leek</span> <span class="ansi-hex">#8FA667</span> </div> <div class="ansi-chip" style="--chip-bg: var(--stack-overglow); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Yellow</span> <span class="ansi-name">Stack Overglow</span> <span class="ansi-hex">#D4A759</span> </div> <div class="ansi-chip" style="--chip-bg: var(--blue-screen); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Blue</span> <span class="ansi-name">Blue Screen</span> <span class="ansi-hex">#8791B0</span> </div> <div class="ansi-chip" style="--chip-bg: var(--fractured-shell); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Magenta</span> <span class="ansi-name">Fractured Shell</span> <span class="ansi-hex">#BA5A7D</span> </div> <div class="ansi-chip" style="--chip-bg: var(--dead-thread); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Cyan</span> <span class="ansi-name">Dead Thread</span> <span class="ansi-hex">#6FA5A0</span> </div> <div class="ansi-chip" style="--chip-bg: var(--phosphor-smoke); --chip-fg: var(--event-horizon);"> <span class="ansi-label">White</span> <span class="ansi-name">Phosphor Smoke</span> <span class="ansi-hex">#EFD5D1</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bad-sector); --chip-fg: var(--ghost-pixel);"> <span class="ansi-label">Bright Black</span> <span class="ansi-name">Bad Sector</span> <span class="ansi-hex">#46120A</span> </div> <div class="ansi-chip" style="--chip-bg: var(--fatal-error); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Red</span> <span class="ansi-name">Fatal Error</span> <span class="ansi-hex">#CF8175</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bright-memory-leek); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Green</span> <span class="ansi-name">Bright Memory Leek</span> <span class="ansi-hex">#94A577</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bright-stack-overglow); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Yellow</span> <span class="ansi-name">Bright Stack Overglow</span> <span class="ansi-hex">#D3AE6E</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bright-blue-screen); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Blue</span> <span class="ansi-name">Bright Blue Screen</span> <span class="ansi-hex">#999EAF</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bright-fractured-shell); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Magenta</span> <span class="ansi-name">Bright Fractured Shell</span> <span class="ansi-hex">#BA6B88</span> </div> <div class="ansi-chip" style="--chip-bg: var(--bright-dead-thread); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright Cyan</span> <span class="ansi-name">Bright Dead Thread</span> <span class="ansi-hex">#7FA5A1</span> </div> <div class="ansi-chip" style="--chip-bg: var(--ghost-pixel); --chip-fg: var(--event-horizon);"> <span class="ansi-label">Bright White</span> <span class="ansi-name">Ghost Pixel</span> <span class="ansi-hex">#F7EAE8</span> </div> </div> </section>
<section class="ui-lab" aria-labelledby="ui-heading"> <h2 id="ui-heading" class="section-title">Editor & UI Surfaces</h2> <div class="ui-grid advanced"> <div class="mini-editor" aria-label="Editor chrome demo"> <div class="editor-header"> <div class="tabs"> <span class="tab active">main.rs</span> <span class="tab">diagnostics.ts</span> <span class="tab">README.md</span> </div> <span class="tab-indicator">● MOD</span> </div> <div class="editor-body"> <div class="gutter"> <span class="line-number active">42</span> <span class="line-number">43</span> <span class="line-number">44</span> <span class="line-number">45</span> </div> <div class="code-lines"> <div class="code-line"><span class="decorator">#[cfg(test)]</span></div> <div class="code-line"><span class="keyword">fn</span> <span class="function">assert_entropy</span><span class="punctuation">()</span> <span class="punctuation">{</span></div> <div class="code-line"><span class="operator">··</span><span class="support">assert_eq</span><span class="punctuation">(</span><span class="literal">true</span><span class="punctuation">,</span> <span class="literal">true</span><span class="punctuation">);</span></div> <div class="code-line"><span class="punctuation">}</span></div> </div> </div> <div class="status-bar"> <span class="status-item">Rust Analyzer</span> <span class="status-item warning">CPU 42%</span> <span class="status-item success">Git✓</span> </div> </div>
<div class="panel demo-panel" aria-label="Diff view"> <h3>Diff Indicators</h3> <div class="diff-legend"> <span class="badge add">Git Added</span> <span class="badge mod">Git Modified</span> <span class="badge del">Git Deleted</span> </div> <div class="diff-block"> <div class="diff-line add">+ Memory Leek · bg 15%</div> <div class="diff-line mod">~ Dead Thread · bg 10%</div> <div class="diff-line del">- Amber Alert · bg 15%</div> </div> </div>
<div class="panel demo-panel" aria-label="Diagnostics"> <h3>Diagnostics</h3> <ul class="diagnostic-list"> <li class="diagnostic error">✗ Kernel panic detected: wavy Amber Alert underline</li> <li class="diagnostic warning">⚠ Deprecated API: Stack Overglow underline</li> <li class="diagnostic info">ℹ Hint bubbles use Dead Thread</li> </ul> <div class="hint-row"> <span class="hint">Inlay hint</span> <span class="hint">parameter: rust</span> </div> </div> </div> </section>
<section class="ui-components" aria-labelledby="ui-components-heading"> <h2 id="ui-components-heading" class="section-title">UI Components</h2> <p class="section-copy"> The Digital Rust UI Specification: chunky hardware panel switches, recessed input wells, and the press-and-release cycle. Rest carries an offset shadow and inner-highlight bevel; hover lifts toward the light; active drives the element into the rack. <a href="ui.html">Full component gallery →</a> </p> <div class="ui-components-grid"> <div class="component-panel" aria-label="Buttons"> <h3>Buttons</h3> <div class="component-row"> <button class="btn btn-primary" type="button">Save Changes</button> <button class="btn" type="button">Discard</button> </div> <div class="component-row"> <button class="btn btn-success" type="button">Apply Patch</button> <button class="btn btn-warning" type="button">Force Push</button> <button class="btn btn-error" type="button">Kill Process</button> </div> <div class="component-row"> <button class="btn" type="button" disabled>Offline</button> </div> <p class="component-note">rest: offset-sm + bevel · hover: lift(-2px,-2px) + offset grows · active: press(2px,2px) + collapse</p> </div>
<div class="component-panel" aria-label="Inputs"> <h3>Inputs — Recessed Wells</h3> <div class="dr-field"> <label for="demo-hostname">Hostname</label> <input class="dr-input" id="demo-hostname" type="text" placeholder="mainframe.local" /> </div> <div class="dr-field"> <label for="demo-port">Port</label> <input class="dr-input" id="demo-port" type="text" value="22" aria-invalid="true" /> <p class="field-error">✗ Connection refused on port 22</p> </div> <p class="component-note">Event Horizon well · no offset shadow · hover: Dark Packet border · focus: Digital Rust border + Stack Overglow ring</p> </div>
<div class="component-panel" aria-label="Switches"> <h3>Checkbox & Toggle</h3> <div class="component-row"> <label class="dr-checkbox"><input type="checkbox" checked /> Enable telemetry scrubbing</label> </div> <div class="component-row"> <label class="dr-checkbox"><input type="checkbox" /> Mount /dev/rust</label> </div> <div class="component-row"> <label class="dr-toggle"><input type="checkbox" checked /> Thermal limiter</label> </div> <div class="component-row"> <label class="dr-toggle"><input type="checkbox" /> Overclock bus</label> </div> <p class="component-note">checkbox runs the full press cycle · toggle thumb slides on a railed track</p> </div>
<div class="component-panel" aria-label="Tabs"> <h3>Tabs</h3> <div class="dr-tabs"> <div class="dr-tab-bar" role="tablist"> <button class="dr-tab active" role="tab" aria-selected="true" type="button">main.rs</button> <button class="dr-tab" role="tab" aria-selected="false" type="button">spec.toml</button> <button class="dr-tab" role="tab" aria-selected="false" type="button">DRIFT.log</button> </div> <div class="dr-tab-body">active tab: Null Pointer bg + Digital Rust power rail · hover: Bad Sector fill</div> </div> <div class="dr-statusbar" style="margin-top: var(--dr-space-md); border-radius: var(--dr-radius); border: var(--dr-border);"> <span>digitalrust@entropy</span> <span class="status-warning">CPU 42%</span> <span class="status-success">Git✓</span> </div> </div> </div> </section>
<section class="accessibility-panel" aria-labelledby="access-heading"> <h2 id="access-heading" class="section-title">Accessibility & Testing</h2> <div class="access-grid"> <div> <h3>Contrast Benchmarks</h3> <table class="contrast-table"> <thead> <tr> <th>Pair</th> <th>Ratio</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Ghost Pixel on Event Horizon</td> <td>17.17:1</td> <td>Pass</td> </tr> <tr> <td>Dim Thermal Throttle on Event Horizon</td> <td>4.84:1</td> <td>Pass</td> </tr> <tr> <td>Bad Sector on Core Meltdown</td> <td>Decorative only</td> <td>⚠</td> </tr> </tbody> </table> </div> <div> <h3>Non-Color Cues</h3> <ul class="cue-list"> <li><span class="badge add">Links</span> Solid underline + Phantom Current</li> <li><span class="badge del">Errors</span> Amber Alert + wavy underline + icon</li> <li><span class="badge warning">Warnings</span> Stack Overglow wavy underline</li> <li><span class="badge del">Spelling</span> Amber Alert dotted underline variant</li> </ul> </div> <div> <h3>Test Checklist</h3> <ul class="cue-list"> <li>☑ Five programming languages rendered</li> <li>☑ Markdown, JSON, diff, terminal verified</li> <li>☑ ANSI 16 + UI chrome demonstrated</li> <li>☑ Motion honors user <code>prefers-reduced-motion</code></li> </ul> </div> </div> </section>
<footer> <p class="license-note"> <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 class="footer-tagline">Chaos reigns.</p> </footer> </main> <script> (function () { const lightbox = document.getElementById('lightbox'); const lightboxImg = lightbox.querySelector('.lightbox-img'); const images = Array.from(document.querySelectorAll('.preview-img')); let currentIndex = 0;
function showImage(index) { currentIndex = (index + images.length) % images.length; const src = images[currentIndex].dataset.lightbox; lightboxImg.src = src; lightboxImg.alt = images[currentIndex].alt; }
images.forEach((img, i) => { img.addEventListener('click', () => { currentIndex = i; showImage(currentIndex); lightbox.showModal(); }); img.style.cursor = 'zoom-in'; });
lightbox.querySelector('.lightbox-close').addEventListener('click', () => lightbox.close()); lightbox.querySelector('.lightbox-prev').addEventListener('click', () => showImage(currentIndex - 1)); lightbox.querySelector('.lightbox-next').addEventListener('click', () => showImage(currentIndex + 1));
lightbox.addEventListener('click', (e) => { if (e.target === lightbox) lightbox.close(); });
lightbox.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') showImage(currentIndex - 1); if (e.key === 'ArrowRight') showImage(currentIndex + 1); }); })(); </script></body>
</html>