From 2645f79662a3c40a22b31976e608ba0146b316a1 Mon Sep 17 00:00:00 2001 From: Kat Suricata Date: Mon, 17 Aug 2026 00:03:00 -0400 Subject: [PATCH] impeccable update, add Umami --- .impeccable/config.json | 154 ++++++ .impeccable/design.json | 885 +++++++++++++++++++++++++++---- Digital Rust UI Specification.md | 2 +- index.html | 2 + spec.html | 2 + specstyle.css | 3 +- style.css | 17 +- ui.html | 2 + 8 files changed, 967 insertions(+), 100 deletions(-) create mode 100644 .impeccable/config.json diff --git a/.impeccable/config.json b/.impeccable/config.json new file mode 100644 index 0000000..afa9284 --- /dev/null +++ b/.impeccable/config.json @@ -0,0 +1,154 @@ +{ + "detector": { + "ignoreRules": [], + "ignoreFiles": [], + "ignoreValues": [ + { + "rule": "cramped-padding", + "value": "*", + "files": [ + "index.html" + ], + "createdAt": "2026-08-17T03:39:35.263Z", + "reason": "Agent: color-chip palette swatches are intentional edge-to-edge color demos, not content containers" + }, + { + "rule": "undersized-ui-text", + "value": "*", + "files": [ + "index.html" + ], + "createdAt": "2026-08-17T03:39:35.352Z", + "reason": "Agent: color-chip hex labels are decorative swatch captions in a palette showcase, sized by design spec" + }, + { + "rule": "side-tab", + "value": "*", + "files": [ + "ui.html" + ], + "createdAt": "2026-08-17T03:39:45.534Z", + "reason": "Agent: left-accent callout/toast pattern is a spec'd Digital Rust component (Digital Rust UI Specification), demonstrated on ui.html" + }, + { + "rule": "design-system-color", + "value": "*", + "files": [ + "spec.html" + ], + "createdAt": "2026-08-17T03:39:45.630Z", + "reason": "Agent: spec.html renders palette demonstration diagrams; white/black swatch surfaces are the subject of the spec, not page chrome" + }, + { + "rule": "design-system-radius", + "value": "2px0", + "createdAt": "2026-08-17T03:39:45.704Z", + "reason": "Agent: detector parse artifact concatenating 2px radius with 0; no such value exists in source" + }, + { + "rule": "design-system-font-size", + "value": "0.7rem", + "createdAt": "2026-08-17T03:42:49.330Z", + "reason": "Agent: token-swatch inline chip label, intentionally below the 0.75rem label step for compact inline code chips" + }, + { + "rule": "design-system-font-size", + "value": "0.65rem", + "createdAt": "2026-08-17T03:42:49.407Z", + "reason": "Agent: color-hex caption under palette swatch chips, decorative metadata below the label step by design" + }, + { + "rule": "design-system-font-size", + "value": "0.6rem", + "createdAt": "2026-08-17T03:42:49.500Z", + "reason": "Agent: mobile (<480px) shrink of the color-hex swatch caption; pairs with the 0.65rem desktop value" + }, + { + "rule": "design-system-font-size", + "value": "2.5rem", + "createdAt": "2026-08-17T03:42:49.587Z", + "reason": "Agent: mobile h1 clamp ceiling (1.75rem-2.5rem) mirrors the desktop display clamp; intentional responsive step" + }, + { + "rule": "gray-on-color", + "value": "*", + "files": [ + "index.html", + "spec.html", + "ui.html" + ], + "createdAt": "2026-08-17T03:47:39.568Z", + "reason": "Agent: Ghost Pixel #f7eae8 is the spec'd near-white text of the Digital Rust palette (rust ramp IS the neutral scale, no grays exist); detector misclassifies it as gray-on-color" + }, + { + "rule": "dark-glow", + "value": "*", + "files": [ + "index.html", + "spec.html", + "ui.html" + ], + "createdAt": "2026-08-17T03:47:39.684Z", + "reason": "Agent: zero-offset brand glow and CRT glitch text-shadow are intentional, spec'd Digital Rust aesthetics (DESIGN.md typography + shadow tokens)" + }, + { + "rule": "broken-image", + "value": "*", + "files": [ + "index.html" + ], + "createdAt": "2026-08-17T03:47:39.818Z", + "reason": "Agent: lightbox dialog img src is populated by JS at runtime; the empty src is a deliberate placeholder" + }, + { + "rule": "repeating-stripes-gradient", + "value": "*", + "files": [ + "index.html", + "spec.html", + "ui.html" + ], + "createdAt": "2026-08-17T03:47:39.902Z", + "reason": "Agent: scanline overlay is the intentional CRT aesthetic of the Digital Rust design system" + }, + { + "rule": "image-hover-transform", + "value": "*", + "files": [ + "index.html", + "ui.html" + ], + "createdAt": "2026-08-17T03:47:40.009Z", + "reason": "Agent: lightbox preview zoom is the intended interaction on the showcase pages" + }, + { + "rule": "low-contrast", + "value": "*", + "files": [ + "spec.html" + ], + "createdAt": "2026-08-17T03:47:40.115Z", + "reason": "Agent: spec.html renders palette swatch diagrams; ramp-on-white and black-on-ramp pairings are the demonstration subject, not readable page copy" + }, + { + "rule": "nested-cards", + "value": "*", + "files": [ + "index.html", + "ui.html" + ], + "createdAt": "2026-08-17T03:51:36.176Z", + "reason": "Agent: intentional component demos — palette/ANSI swatch chips in a panelled showcase, and UI-spec demos (tabs/modal/menu inside demo panels) on the design-system documentation pages" + }, + { + "rule": "side-tab", + "value": "*", + "files": [ + "style.css" + ], + "createdAt": "2026-08-17T03:51:55.660Z", + "reason": "Agent: 3px left accent on toasts/callouts is a deliberate spec'd exception in the Digital Rust UI Specification (semantic blocks identifiable at scroll speed)" + } + ] + } +} diff --git a/.impeccable/design.json b/.impeccable/design.json index 9e210b2..60470f3 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -1,53 +1,706 @@ { "schemaVersion": 2, - "generatedAt": "2026-05-30T00:00:00Z", + "generatedAt": "2026-08-17T04:02:00.494Z", "title": "Design System: Digital Rust", "extensions": { "colorMeta": { - "ghost-pixel": { "role": "primary", "displayName": "Ghost Pixel", "canonical": "oklch(0.928 0.02 25)", "tonalRamp": ["#110402", "#230905", "#340d07", "#46120a", "#57170d", "#691b0f", "#7a2012", "#8c2414"] }, - "phosphor-smoke": { "role": "primary", "displayName": "Phosphor Smoke", "canonical": "oklch(0.898 0.02 25)", "tonalRamp": ["#110402", "#230905", "#340d07", "#46120a", "#57170d", "#691b0f", "#7a2012", "#8c2414"] }, - "phantom-current": { "role": "primary", "displayName": "Phantom Current", "canonical": "oklch(0.862 0.025 25)", "tonalRamp": ["#110402", "#230905", "#340d07", "#46120a", "#57170d", "#691b0f", "#7a2012", "#8c2414"] }, - "fatal-error": { "role": "primary", "displayName": "Fatal Error", "canonical": "oklch(0.703 0.06 25)", "tonalRamp": ["#110402", "#230905", "#340d07", "#46120a", "#57170d", "#721c11", "#9d2917", "#cf8175"] }, - "amber-alert": { "role": "primary", "displayName": "Amber Alert", "canonical": "oklch(0.557 0.1 22)", "tonalRamp": ["#110402", "#230905", "#340d07", "#46120a", "#691b0f", "#8c2414", "#b74230", "#bf5747"] }, - "digital-rust": { "role": "primary", "displayName": "Digital Rust", "canonical": "oklch(0.445 0.13 27)", "tonalRamp": ["#110402", "#230905", "#340d07", "#57170d", "#691b0f", "#8c2414", "#9d2917", "#af2e1a"] }, - "dark-packet": { "role": "primary", "displayName": "Dark Packet", "canonical": "oklch(0.285 0.09 27)", "tonalRamp": ["#110402", "#1d0804", "#2a0c06", "#361008", "#46120a", "#57170d", "#65200f", "#691b0f"] }, - "event-horizon": { "role": "primary", "displayName": "Event Horizon", "canonical": "oklch(0.105 0.04 27)", "tonalRamp": ["#080201", "#0d0302", "#110402", "#170603", "#1d0804", "#230905", "#2a0c06", "#340d07"] }, - "memory-leek": { "role": "secondary", "displayName": "Memory Leek", "canonical": "oklch(0.68 0.1 120)", "tonalRamp": ["#1a2a0f", "#2d4519", "#406023", "#537b2d", "#6a9440", "#8fa667", "#a0b580", "#b2c49a"] }, - "stack-overglow": { "role": "secondary", "displayName": "Stack Overglow", "canonical": "oklch(0.72 0.13 75)", "tonalRamp": ["#2a1f08", "#4a3810", "#6a5018", "#8a6820", "#a07e30", "#b89140", "#d4a759", "#e0bb70"] }, - "dead-thread": { "role": "secondary", "displayName": "Dead Thread", "canonical": "oklch(0.645 0.07 185)", "tonalRamp": ["#0d2624", "#1a4a46", "#276e68", "#34928a", "#4aaa9e", "#6fa5a0", "#8abbb6", "#a5d1cc"] }, - "thermal-throttle": { "role": "tertiary", "displayName": "Thermal Throttle", "canonical": "oklch(0.68 0.13 55)", "tonalRamp": ["#2a1508", "#4a2810", "#6a3b18", "#8a4e20", "#a56330", "#d78556", "#e09a72", "#e9af8e"] }, - "blue-screen": { "role": "tertiary", "displayName": "Blue Screen", "canonical": "oklch(0.60 0.06 270)", "tonalRamp": ["#0f1420", "#1e2840", "#2d3c60", "#4a5580", "#6a7098", "#8791b0", "#9ea6c0", "#b5bbd0"] }, - "fractured-shell": { "role": "tertiary", "displayName": "Fractured Shell", "canonical": "oklch(0.55 0.14 345)", "tonalRamp": ["#200a14", "#401428", "#601e3c", "#802850", "#a03868", "#ba5a7d", "#cc7a98", "#dd9ab3"] } + "ghost-pixel": { + "role": "primary", + "displayName": "Ghost Pixel", + "canonical": "#f7eae8", + "tonalRamp": [ + "#0e0a0a", + "#2a2322", + "#493f3e", + "#695e5d", + "#8b7f7e", + "#aca2a1", + "#cfc7c6", + "#f1eeed" + ] + }, + "phosphor-smoke": { + "role": "primary", + "displayName": "Phosphor Smoke", + "canonical": "#efd5d1", + "tonalRamp": [ + "#100908", + "#2f211f", + "#4f3d3a", + "#715b58", + "#937c79", + "#b4a09c", + "#d4c5c3", + "#f3edec" + ] + }, + "phantom-current": { + "role": "primary", + "displayName": "Phantom Current", + "canonical": "#e7c0ba", + "tonalRamp": [ + "#120807", + "#331f1c", + "#563a36", + "#795853", + "#9b7973", + "#bc9d98", + "#dac3bf", + "#f6ecea" + ] + }, + "corrupted-cache": { + "role": "neutral", + "displayName": "Corrupted Cache", + "canonical": "#dfaba3", + "tonalRamp": [ + "#140706", + "#381c18", + "#5d3631", + "#81544d", + "#a4756e", + "#c49993", + "#e0c1bc", + "#f8ebe9" + ] + }, + "copper-trace": { + "role": "neutral", + "displayName": "Copper Trace", + "canonical": "#d7968c", + "tonalRamp": [ + "#170604", + "#3c1914", + "#63322b", + "#894f47", + "#ac7067", + "#cc968d", + "#e7beb8", + "#fbeae7" + ] + }, + "fatal-error": { + "role": "primary", + "displayName": "Fatal Error", + "canonical": "#cf8175", + "tonalRamp": [ + "#190403", + "#41150f", + "#6a2c24", + "#91493f", + "#b56b60", + "#d49287", + "#edbcb3", + "#fee9e5" + ] + }, + "rouge-signal": { + "role": "neutral", + "displayName": "Rouge Signal", + "canonical": "#c76c5e", + "tonalRamp": [ + "#1b0302", + "#450f09", + "#70261d", + "#994337", + "#bd6658", + "#dc8d80", + "#f3b9af", + "#ffe8e4" + ] + }, + "amber-alert": { + "role": "primary", + "displayName": "Amber Alert", + "canonical": "#bf5747", + "tonalRamp": [ + "#1d0100", + "#4a0803", + "#761e13", + "#a03c2d", + "#c56050", + "#e48979", + "#f9b6aa", + "#ffe7e2" + ] + }, + "amber-alert-text": { + "role": "neutral", + "displayName": "Amber Alert Text", + "canonical": "#cb6353", + "tonalRamp": [ + "#1d0101", + "#490803", + "#761e14", + "#9f3c2f", + "#c56051", + "#e3897a", + "#f9b6aa", + "#ffe7e2" + ] + }, + "firewall-breach": { + "role": "neutral", + "displayName": "Firewall Breach", + "canonical": "#b74230", + "tonalRamp": [ + "#1f0000", + "#4e0000", + "#7c1305", + "#a73322", + "#cd5946", + "#eb8472", + "#ffb3a5", + "#ffe6e0" + ] + }, + "digital-rust": { + "role": "primary", + "displayName": "Digital Rust", + "canonical": "#af2e1a", + "tonalRamp": [ + "#210000", + "#500000", + "#800500", + "#ac2c18", + "#d2543f", + "#f0816c", + "#ffb1a1", + "#ffe5de" + ] + }, + "kernel-panic": { + "role": "neutral", + "displayName": "Kernel Panic", + "canonical": "#9d2917", + "tonalRamp": [ + "#1f0000", + "#4e0000", + "#7c1303", + "#a73421", + "#cc5946", + "#ea8471", + "#ffb3a4", + "#ffe6e0" + ] + }, + "data-rot": { + "role": "neutral", + "displayName": "Data Rot", + "canonical": "#8c2414", + "tonalRamp": [ + "#1e0100", + "#4b0600", + "#781c0d", + "#a23a29", + "#c75e4c", + "#e58876", + "#fbb5a7", + "#ffe7e1" + ] + }, + "bricked-board": { + "role": "neutral", + "displayName": "Bricked Board", + "canonical": "#7a2012", + "tonalRamp": [ + "#1c0201", + "#470d05", + "#732316", + "#9c4031", + "#c16352", + "#df8c7b", + "#f6b8ab", + "#ffe8e2" + ] + }, + "dark-packet": { + "role": "primary", + "displayName": "Dark Packet", + "canonical": "#691b0f", + "tonalRamp": [ + "#1b0302", + "#441109", + "#6e281d", + "#964537", + "#bb6858", + "#d98f80", + "#f1baaf", + "#ffe8e4" + ] + }, + "daemon-blood": { + "role": "neutral", + "displayName": "Daemon Blood", + "canonical": "#57170d", + "tonalRamp": [ + "#190503", + "#40160e", + "#692e23", + "#904b3e", + "#b36d5f", + "#d29386", + "#ecbcb3", + "#fde9e5" + ] + }, + "bad-sector": { + "role": "neutral", + "displayName": "Bad Sector", + "canonical": "#46120a", + "tonalRamp": [ + "#170604", + "#3d1913", + "#633229", + "#894f44", + "#ad7065", + "#cc968b", + "#e7beb6", + "#fbeae7" + ] + }, + "core-meltdown": { + "role": "neutral", + "displayName": "Core Meltdown", + "canonical": "#340d07", + "tonalRamp": [ + "#150705", + "#381c17", + "#5d362e", + "#82534a", + "#a4756b", + "#c49990", + "#e1c1ba", + "#f9ebe8" + ] + }, + "null-pointer": { + "role": "neutral", + "displayName": "Null Pointer", + "canonical": "#230905", + "tonalRamp": [ + "#120806", + "#331f1b", + "#563a34", + "#795851", + "#9b7971", + "#bc9d96", + "#dac3be", + "#f6ecea" + ] + }, + "event-horizon": { + "role": "primary", + "displayName": "Event Horizon", + "canonical": "#110402", + "tonalRamp": [ + "#100908", + "#2e221e", + "#4f3d38", + "#705c56", + "#927d77", + "#b3a09b", + "#d4c6c1", + "#f3edeb" + ] + }, + "memory-leek": { + "role": "secondary", + "displayName": "Memory Leek", + "canonical": "#8fa667", + "tonalRamp": [ + "#080e00", + "#1e2a02", + "#384911", + "#556a2d", + "#768c50", + "#9aae7a", + "#c1d0aa", + "#ebf1e2" + ] + }, + "dim-memory-leek": { + "role": "secondary", + "displayName": "Dim Memory Leek", + "canonical": "#627247", + "tonalRamp": [ + "#090d03", + "#20290e", + "#3a4823", + "#58683e", + "#79895f", + "#9dac86", + "#c3ceb3", + "#ecf0e5" + ] + }, + "bright-memory-leek": { + "role": "secondary", + "displayName": "Bright Memory Leek", + "canonical": "#94a577", + "tonalRamp": [ + "#090d02", + "#20290d", + "#3b4822", + "#59683d", + "#7a895e", + "#9dac85", + "#c3ceb2", + "#ecf0e5" + ] + }, + "stack-overglow": { + "role": "secondary", + "displayName": "Stack Overglow", + "canonical": "#d4a759", + "tonalRamp": [ + "#150800", + "#381f00", + "#5d3a00", + "#825800", + "#a47a2c", + "#c49f60", + "#e0c59a", + "#f8eddc" + ] + }, + "dim-stack-overglow": { + "role": "secondary", + "displayName": "Dim Stack Overglow", + "canonical": "#a07e43", + "tonalRamp": [ + "#130900", + "#352100", + "#583c00", + "#7b5b1e", + "#9d7c44", + "#bea070", + "#dbc6a4", + "#f6eddf" + ] + }, + "bright-stack-overglow": { + "role": "secondary", + "displayName": "Bright Stack Overglow", + "canonical": "#d3ae6e", + "tonalRamp": [ + "#130900", + "#352000", + "#593c00", + "#7c5b16", + "#9e7c3f", + "#bea06d", + "#dcc6a1", + "#f6edde" + ] + }, + "blue-screen": { + "role": "tertiary", + "displayName": "Blue Screen", + "canonical": "#8791b0", + "tonalRamp": [ + "#080b13", + "#1f2436", + "#394159", + "#57607d", + "#78819f", + "#9ca4bf", + "#c2c9dc", + "#ebeef6" + ] + }, + "dim-blue-screen": { + "role": "tertiary", + "displayName": "Dim Blue Screen", + "canonical": "#60677c", + "tonalRamp": [ + "#090b11", + "#202531", + "#3c4153", + "#5a6175", + "#7b8297", + "#9ea5b8", + "#c4c9d7", + "#eceef4" + ] + }, + "bright-blue-screen": { + "role": "tertiary", + "displayName": "Bright Blue Screen", + "canonical": "#999eaf", + "tonalRamp": [ + "#0a0b10", + "#22252e", + "#3e414f", + "#5c6170", + "#7d8292", + "#a0a4b3", + "#c6c9d3", + "#edeef3" + ] + }, + "fractured-shell": { + "role": "tertiary", + "displayName": "Fractured Shell", + "canonical": "#ba5a7d", + "tonalRamp": [ + "#1b020b", + "#450a24", + "#701f41", + "#983c60", + "#bd5f81", + "#dc88a4", + "#f3b5c8", + "#ffe7ee" + ] + }, + "dim-fractured-shell": { + "role": "tertiary", + "displayName": "Dim Fractured Shell", + "canonical": "#87405a", + "tonalRamp": [ + "#18040b", + "#3f1324", + "#672a41", + "#8e4760", + "#b26881", + "#d18fa4", + "#ebbac8", + "#fde8ee" + ] + }, + "bright-fractured-shell": { + "role": "tertiary", + "displayName": "Bright Fractured Shell", + "canonical": "#ba6b88", + "tonalRamp": [ + "#18030b", + "#401225", + "#682842", + "#8f4562", + "#b36783", + "#d28ea6", + "#ecb9c9", + "#fee8ef" + ] + }, + "dead-thread": { + "role": "secondary", + "displayName": "Dead Thread", + "canonical": "#6fa5a0", + "tonalRamp": [ + "#010e0d", + "#062b29", + "#1b4b47", + "#376c68", + "#5a8d89", + "#83afab", + "#b1d1cd", + "#e5f2f0" + ] + }, + "dim-dead-thread": { + "role": "secondary", + "displayName": "Dim Dead Thread", + "canonical": "#4c726e", + "tonalRamp": [ + "#030e0c", + "#122a28", + "#284946", + "#446966", + "#658b87", + "#8cada9", + "#b7cfcc", + "#e7f1f0" + ] + }, + "bright-dead-thread": { + "role": "secondary", + "displayName": "Bright Dead Thread", + "canonical": "#7fa5a1", + "tonalRamp": [ + "#040d0c", + "#122a28", + "#294946", + "#456966", + "#678b87", + "#8daca9", + "#b8cfcc", + "#e8f1f0" + ] + }, + "thermal-throttle": { + "role": "tertiary", + "displayName": "Thermal Throttle", + "canonical": "#d78556", + "tonalRamp": [ + "#1a0400", + "#431400", + "#6d2c00", + "#954916", + "#b96c3e", + "#d7926c", + "#f0bda1", + "#ffeade" + ] + }, + "dim-thermal-throttle": { + "role": "tertiary", + "displayName": "Dim Thermal Throttle", + "canonical": "#ac6d4a", + "tonalRamp": [ + "#170600", + "#3e1902", + "#653212", + "#8b502d", + "#af714f", + "#ce9779", + "#e8bfaa", + "#fcebe2" + ] + }, + "bright-thermal-throttle": { + "role": "tertiary", + "displayName": "Bright Thermal Throttle", + "canonical": "#d6926b", + "tonalRamp": [ + "#180600", + "#3f1900", + "#66310d", + "#8d4f29", + "#b0714c", + "#cf9676", + "#e9bfa8", + "#fceae1" + ] + } }, "typographyMeta": { - "display": { "displayName": "Display", "purpose": "The h1. Used once per page for the logo/title. Embossed server-label voice." }, - "headline": { "displayName": "Headline", "purpose": "Section titles (h2). Same family as Display, smaller and less tracked." }, - "title": { "displayName": "Title", "purpose": "Card headers, code-block titles, panel labels. Small, dense, tracked." }, - "body": { "displayName": "Body", "purpose": "Running text, descriptions, documentation. Warm and readable." }, - "label": { "displayName": "Label", "purpose": "Tags, badges, version indicators. The smallest tracked voice." }, - "mono": { "displayName": "Mono", "purpose": "Code blocks, terminal output, hex values. Aligned and precise." } + "display": { + "displayName": "Display", + "purpose": "The h1. Used once per page for the logo/title. Tracked wide to read like embossed lettering on a server panel." + }, + "headline": { + "displayName": "Headline", + "purpose": "Section titles (h2). Same family as Display, smaller and less tracked." + }, + "title": { + "displayName": "Title", + "purpose": "Card headers, code-block titles, panel labels. Small, dense, tracked. The workhorse label voice." + }, + "body": { + "displayName": "Body", + "purpose": "Running text, descriptions, documentation. Warm slab serif at 500 weight, comfortable over long sessions." + }, + "label": { + "displayName": "Label", + "purpose": "Tags, badges, version indicators. The smallest tracked voice." + }, + "mono": { + "displayName": "Mono", + "purpose": "Code blocks, terminal output, hex values. Tabular numerals, no hyphenation." + } }, "shadows": [ - { "name": "offset-sm", "value": "2px 2px 0 0 #46120a", "purpose": "Default elevation for cards and code blocks at rest." }, - { "name": "offset-md", "value": "3px 3px 0 0 #46120a", "purpose": "Elevated surfaces, terminals, palette sections." }, - { "name": "offset-lg", "value": "4px 4px 0 0 #46120a", "purpose": "Lightbox images and primary CTA emphasis." }, - { "name": "hover-md", "value": "4px 4px 0 0 #46120a", "purpose": "Hover state offset growth." }, - { "name": "active", "value": "0 0 0 0 #46120a", "purpose": "Pressed state: offset collapses to zero." }, - { "name": "glow-sm", "value": "0 0 10px rgba(175, 46, 26, 0.4)", "purpose": "Subtle brand-colour glow on hover and focus." }, - { "name": "glow-md", "value": "0 0 20px rgba(175, 46, 26, 0.4)", "purpose": "Stronger glow for lightbox and hero emphasis." }, - { "name": "inner-highlight", "value": "inset 0 1px 0 rgba(255, 255, 255, 0.1)", "purpose": "Faint light-line at top edge of raised surfaces." }, - { "name": "accent", "value": "5px 5px 0 0 #af2e1a", "purpose": "Offset in brand colour for primary buttons." } + { + "name": "offset-sm", + "value": "2px 2px 0 0 #46120a", + "purpose": "Default elevation for cards and code blocks at rest." + }, + { + "name": "offset-md", + "value": "3px 3px 0 0 #46120a", + "purpose": "Elevated surfaces, terminals, and palette sections." + }, + { + "name": "offset-lg", + "value": "4px 4px 0 0 #46120a", + "purpose": "Lightbox images and primary call-to-action emphasis." + }, + { + "name": "hover-md", + "value": "4px 4px 0 0 #46120a", + "purpose": "Hover state. Offset grows by 2px on both axes." + }, + { + "name": "active", + "value": "0 0 0 0 #46120a", + "purpose": "Pressed state. Offset collapses to zero; the element sits flush against the surface." + }, + { + "name": "glow-sm", + "value": "0 0 10px rgba(175, 46, 26, 0.4)", + "purpose": "Subtle brand-colour glow on hovered primary buttons and focused accent elements." + }, + { + "name": "glow-md", + "value": "0 0 20px rgba(175, 46, 26, 0.4)", + "purpose": "Stronger glow for lightbox images and hero-level emphasis." + }, + { + "name": "inner-highlight", + "value": "inset 0 1px 0 rgba(255, 255, 255, 0.1)", + "purpose": "Faint light-line at the top edge of raised surfaces; stacked under the offset shadow, the two travel together." + }, + { + "name": "inner-lowlight", + "value": "inset 0 -1px 0 rgba(17, 4, 2, 0.6)", + "purpose": "Inverse shade at the bottom edge of wells, toggle thumbs, and slider thumbs. Paired with the inner highlight on machined parts." + }, + { + "name": "accent", + "value": "5px 5px 0 0 #af2e1a", + "purpose": "Offset in the brand colour for primary buttons and brand-level emphasis." + } ], "motion": [ - { "name": "ease-default", "value": "cubic-bezier(0.4, 0, 0.2, 1)", "purpose": "Default easing for state transitions." }, - { "name": "ease-out-expo", "value": "cubic-bezier(0.22, 1, 0.36, 1)", "purpose": "Entrance animations (typeIn)." }, - { "name": "duration-fast", "value": "150ms", "purpose": "Hover, focus, and micro-feedback transitions." }, - { "name": "duration-normal", "value": "250ms", "purpose": "Standard state transitions." }, - { "name": "duration-slow", "value": "400ms", "purpose": "Entrance and reveal animations." } + { + "name": "ease-default", + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Default easing for state transitions." + }, + { + "name": "ease-out-expo", + "value": "cubic-bezier(0.22, 1, 0.36, 1)", + "purpose": "Entrance animations (typeIn)." + }, + { + "name": "duration-fast", + "value": "150ms", + "purpose": "Hover, focus, and micro-feedback transitions. The press cycle runs at this speed." + }, + { + "name": "duration-normal", + "value": "250ms", + "purpose": "Standard state transitions." + }, + { + "name": "duration-slow", + "value": "400ms", + "purpose": "Entrance and reveal animations." + }, + { + "name": "transition-fast", + "value": "150ms cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Composed fast transition used by the press cycle on interactive elements." + }, + { + "name": "transition-normal", + "value": "250ms cubic-bezier(0.4, 0, 0.2, 1)", + "purpose": "Composed standard transition." + } ], "breakpoints": [ - { "name": "sm", "value": "480px", "purpose": "Small mobile / narrow viewport." }, - { "name": "md", "value": "768px", "purpose": "Tablet / compact layout." } + { + "name": "sm", + "value": "480px", + "purpose": "Small mobile / narrow viewport." + }, + { + "name": "md", + "value": "768px", + "purpose": "Tablet / compact layout; code blocks drop to 0.75rem below this." + } ] }, "components": [ @@ -55,110 +708,160 @@ "name": "Primary Button", "kind": "button", "refersTo": "btn-primary", - "description": "The brand identity button. Digital Rust background, thick border, offset shadow, physical press response.", + "description": "The brand identity button. Digital Rust background, thick border, offset shadow with inner-highlight bevel, physical press response. One per view.", "html": "", - "css": ".ds-btn-primary { background: #af2e1a; color: #f7eae8; padding: 0.5rem 1.5rem; border: 2px solid #af2e1a; border-radius: 4px; font-family: \"Cairo Play\", system-ui, sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 3px 3px 0 0 #46120a; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-primary:hover { background: #bf5747; border-color: #bf5747; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, 0 0 10px rgba(175, 46, 26, 0.4); } .ds-btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-primary:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + "css": ".ds-btn-primary { background: #af2e1a; color: #f7eae8; padding: 0.5rem 1.5rem; border: 2px solid #af2e1a; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-primary:hover { background: #b74230; border-color: #b74230; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, 0 0 10px rgba(175, 46, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-primary:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" }, { "name": "Ghost Button", "kind": "button", "refersTo": "btn", - "description": "The default/secondary button. Transparent background, thick border, offset shadow.", + "description": "The default/secondary button. Transparent background, Dark Packet border, offset shadow with inner highlight; hover fills Core Meltdown with a Digital Rust edge.", "html": "", - "css": ".ds-btn-ghost { background: transparent; color: #efd5d1; padding: 0.5rem 1.5rem; border: 2px solid #691b0f; border-radius: 4px; font-family: \"Cairo Play\", system-ui, sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 2px 2px 0 0 #46120a; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-ghost:hover { background: #46120a; color: #f7eae8; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a; } .ds-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-ghost:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + "css": ".ds-btn-ghost { background: transparent; color: #efd5d1; padding: 0.5rem 1.5rem; border: 2px solid #691b0f; border-radius: 4px; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-btn-ghost:hover { background: #340d07; border-color: #af2e1a; color: #f7eae8; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-btn-ghost:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" }, { "name": "Card", "kind": "card", "refersTo": "spec-card", - "description": "Workhorse container with thick borders, offset shadow, and inner highlight. Presses in on active.", + "description": "Workhorse container with thick borders, offset shadow, and inner highlight. Presses in on active like a bolted rack module.", "html": "

PRIORITY STACK

Error scopes override everything with Amber Alert

", - "css": ".ds-card { background: #340d07; border: 2px solid #691b0f; border-radius: 4px; padding: 1.5rem; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a; } .ds-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-card-title { color: #cf8175; margin-bottom: 0.5rem; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: \"Cairo Play\", system-ui, sans-serif; font-weight: 700; } .ds-card-body { color: #f7eae8; font-size: 0.875rem; line-height: 1.5; }" + "css": ".ds-card { background: #340d07; border: 2px solid #691b0f; border-radius: 4px; padding: 1.5rem; box-shadow: 2px 2px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #46120a; } .ds-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #46120a; } .ds-card-title { color: #cf8175; margin-bottom: 0.5rem; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; font-weight: 700; } .ds-card-body { color: #f7eae8; font-size: 1rem; line-height: 1.6; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; }" }, { "name": "Badge - Success", "kind": "chip", "refersTo": "badge", - "description": "Semantic success indicator with Memory Leek tint.", + "description": "Semantic success indicator with Memory Leek tint. Static: no press cycle, no shadow.", "html": "GIT ADDED", - "css": ".ds-badge-success { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Cairo Play\", system-ui, sans-serif; border: 1px solid rgba(143, 166, 103, 0.3); background: rgba(143, 166, 103, 0.15); color: #8fa667; }" + "css": ".ds-badge-success { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(143, 166, 103, 0.3); background: rgba(143, 166, 103, 0.15); color: #8fa667; }" }, { - "name": "Badge - Error", + "name": "Badge - Info", "kind": "chip", "refersTo": "badge", - "description": "Semantic error indicator with Amber Alert tint.", - "html": "GIT DELETED", - "css": ".ds-badge-error { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Cairo Play\", system-ui, sans-serif; border: 1px solid rgba(191, 87, 71, 0.25); background: rgba(191, 87, 71, 0.1); color: #cb6353; }" + "description": "Semantic informational indicator with Dead Thread tint. Static: no press cycle, no shadow.", + "html": "MODIFIED", + "css": ".ds-badge-info { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(111, 165, 160, 0.3); background: rgba(111, 165, 160, 0.15); color: #6fa5a0; }" }, { "name": "Badge - Warning", "kind": "chip", "refersTo": "badge", - "description": "Semantic warning indicator with Stack Overglow tint.", + "description": "Semantic warning indicator with Stack Overglow tint. Static: no press cycle, no shadow.", "html": "DEPRECATED", - "css": ".ds-badge-warning { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Cairo Play\", system-ui, sans-serif; border: 1px solid rgba(212, 167, 89, 0.3); background: rgba(212, 167, 89, 0.15); color: #d4a759; }" + "css": ".ds-badge-warning { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(212, 167, 89, 0.3); background: rgba(212, 167, 89, 0.15); color: #d4a759; }" + }, + { + "name": "Badge - Error", + "kind": "chip", + "refersTo": "badge", + "description": "Semantic error indicator. Amber Alert Text on a 10% Amber Alert tint — the AA-compliant text variant, never the raw colour.", + "html": "GIT DELETED", + "css": ".ds-badge-error { border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: \"Rajdhani\", \"Saira SemiCondensed\", \"Trebuchet MS\", sans-serif; border: 1px solid rgba(191, 87, 71, 0.25); background: rgba(191, 87, 71, 0.1); color: #cb6353; }" + }, + { + "name": "Text Input (Well)", + "kind": "input", + "refersTo": null, + "description": "Recessed well: the darkest surface on the page, no offset shadow, no lift. Responds through border colour only (Bad Sector rest, Dark Packet hover, Digital Rust focus).", + "html": "", + "css": ".ds-input { background: #110402; border: 2px solid #46120a; border-radius: 4px; padding: 0.5rem 0.75rem; color: #f7eae8; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; font-size: 1rem; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-input:hover:not(:focus) { border-color: #691b0f; } .ds-input:focus { outline: 2px solid #d4a759; outline-offset: 2px; border-color: #af2e1a; } .ds-input::placeholder { color: rgba(239, 213, 209, 0.5); font-style: italic; }" + }, + { + "name": "Navigation Link", + "kind": "nav", + "refersTo": null, + "description": "Phantom Current with a 1px underline at 3px offset. Hover shifts to Fatal Error with a 2px underline; visited is Corrupted Cache.", + "html": "Read the specification", + "css": ".ds-link { color: #e7c0ba; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-family: \"Zilla Slab\", \"Bitter\", \"Source Serif 4\", Georgia, serif; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ds-link:hover { color: #cf8175; text-decoration-thickness: 2px; } .ds-link:visited { color: #dfaba3; } .ds-link:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" }, { "name": "Terminal", "kind": "custom", "refersTo": "terminal", - "description": "The brand's signature interactive metaphor. Fake terminal running spec validation commands.", + "description": "The brand's signature interactive metaphor. Fake terminal running spec validation commands, with a Stack Overglow block cursor.", "html": "
● ● ●
digitalrust@entropy:~$ theme audit --strict
Syntax Coverage ........ PASS
digitalrust@entropy:~$
", - "css": ".ds-terminal { background: #110402; border: 2px solid #691b0f; border-radius: 6px; padding: 1.5rem; position: relative; overflow: hidden; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-terminal-dots { position: absolute; top: 0; left: 0; right: 0; padding: 0.5rem 1rem; background: #340d07; color: #af2e1a; border-bottom: 1px solid #46120a; font-size: 0.75rem; letter-spacing: 0.5rem; } .ds-terminal-body { margin-top: 2rem; font-family: \"MonoLisa\", ui-monospace, monospace; font-size: 0.875rem; line-height: 1.6; } .ds-terminal-prompt { color: #e7c0ba; } .ds-terminal-cmd { color: #f7eae8; } .ds-terminal-output { color: #efd5d1; margin-left: 2rem; opacity: 0.95; } .ds-terminal-pass { color: #8fa667; font-weight: 700; } .ds-terminal-cursor { display: inline-block; width: 0.6em; height: 1.2em; background: #d4a759; vertical-align: text-bottom; }" - }, - { - "name": "Skip Link", - "kind": "custom", - "refersTo": null, - "description": "Accessibility skip navigation. Off-screen until focused.", - "html": "Skip to content", - "css": ".ds-skip-link { position: absolute; top: -100%; left: 0; z-index: 1001; padding: 0.5rem 2.5rem; background: #af2e1a; color: #f7eae8; font-family: \"Cairo Play\", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border: 2px solid #691b0f; border-radius: 0 0 4px 0; box-shadow: 2px 2px 0 0 #46120a; } .ds-skip-link:focus { top: 0; } .ds-skip-link:focus-visible { outline: 2px solid #d4a759; outline-offset: 2px; }" + "css": ".ds-terminal { background: #110402; border: 2px solid #691b0f; border-radius: 6px; padding: 1.5rem; position: relative; overflow: hidden; box-shadow: 3px 3px 0 0 #46120a, inset 0 1px 0 rgba(255, 255, 255, 0.1); } .ds-terminal-dots { position: absolute; top: 0; left: 0; right: 0; padding: 0.5rem 1rem; background: #340d07; color: #af2e1a; border-bottom: 1px solid #46120a; font-size: 0.75rem; letter-spacing: 0.5rem; } .ds-terminal-body { margin-top: 2rem; font-family: \"IBM Plex Mono\", \"Space Mono\", ui-monospace, \"Fira Code\", monospace; font-size: 0.875rem; line-height: 1.6; } .ds-terminal-prompt { color: #e7c0ba; } .ds-terminal-cmd { color: #f7eae8; } .ds-terminal-output { color: #efd5d1; margin-left: 2rem; opacity: 0.95; } .ds-terminal-pass { color: #8fa667; font-weight: 700; } .ds-terminal-cursor { display: inline-block; width: 0.6em; height: 1.2em; background: #d4a759; vertical-align: text-bottom; }" } ], "narrative": { "northStar": "The Corroded Mainframe", - "overview": "A server room where every surface has oxidized, but the machines still hum. The walls are rust; the screens still glow. Failure is the texture, not the state.\n\nDigital Rust is a dark-mode-only system built around a single rust-to-void gradient: warm copper tones that bleed from near-white to near-black through 19 named stops, each one a hardware failure metaphor. The accent colours (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle) are named after system crashes and injected surgically, never as a rainbow. Surfaces carry structural noise and scanline overlays; flat, noiseless backgrounds are a design failure. Borders are thick and heavy (2-4px Dark Packet), shadows are offset solids with no blur, corners never exceed 6px radius. Every component feels like a physical panel in a failing server rack: brutalist, tactile, press-and-release.\n\nThe system explicitly rejects the cold blue-purple dark theme family (Dracula, Nord, Tokyo Night, One Dark) and any sterile 'pro' aesthetic with gray surfaces and blue accents. Pure black (#000) is forbidden in shadows and backgrounds, replaced by the warm near-blacks of the rust ramp. The hostility is in the atmosphere, not the readability: Ghost Pixel on Event Horizon hits 17.17:1 contrast ratio.", + "overview": "A server room where every surface has oxidized, but the machines still hum. The walls are rust; the screens still glow. Failure is the texture, not the state.\n\nDigital Rust is a dark-mode-only system built around a single rust-to-void gradient: warm copper tones that bleed from near-white to near-black through 19 named stops, each one a hardware failure metaphor. The accent colours (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle) are named after system crashes and injected surgically, never as a rainbow. Surfaces carry structural noise and scanline overlays; flat, noiseless backgrounds are a design failure. Borders are thick and heavy (2-4px Dark Packet), shadows are offset solids with no blur, corners never exceed 6px radius. Every component feels like a physical panel in a failing server rack: brutalist, tactile, press-and-release.\n\nThe system explicitly rejects the cold blue-purple dark theme family (Dracula, Nord, Tokyo Night, One Dark) and any sterile \"pro\" aesthetic with gray surfaces and blue accents. Pure black (`#000`) is forbidden in shadows and backgrounds, replaced by the warm near-blacks of the rust ramp. The hostility is in the atmosphere, not the readability: Ghost Pixel on Event Horizon hits 17.17:1 contrast ratio.", "keyCharacteristics": [ "Single-hue warm ramp (copper/rust/bone) as the structural spine, not a multi-hue palette", "Offset solid shadows (no blur) that serve both interaction feedback and the corroded machine aesthetic", - "Structural noise and scanline overlays on every surface; silence them only for prefers-reduced-motion", + "Structural noise and scanline overlays on every surface; silence them only for `prefers-reduced-motion`", "Borders as heavy structural elements (2-4px Dark Packet), never decorative hairlines", "Accent colours named after system failures, used surgically for syntax and diagnostics", - "Radius ceiling of 6px; nothing rounds past 'gently chamfered'" + "Radius ceiling of 6px; nothing rounds past \"gently chamfered\"" ], "rules": [ - { "name": "The One Hue Rule", "body": "The 19-stop main ramp occupies a single warm hue family. Accents are admitted in six named failure families, but the surface itself never leaves the rust-to-void gradient.", "section": "colors" }, - { "name": "The Black Is Forbidden Rule", "body": "#000000 is prohibited in shadows, borders, and backgrounds. The nearest near-black is Event Horizon (#110402). Shadows, overlays, and vignettes use warm-tinted transparencies of the brand colour.", "section": "colors" }, - { "name": "The Flat Surface Failure Rule", "body": "A flat, noiseless dark surface with no texture overlay is a design defect. Every surface carries the SVG noise texture and scanline overlay. These are structural, not decorative.", "section": "colors" }, - { "name": "The One Heading Colour Rule", "body": "Fatal Error (#cf8175) is the only colour used for headings of any level. Not white, not Ghost Pixel, not the accent colours. Every heading speaks in the same warm-copper voice.", "section": "typography" }, - { "name": "The All-Caps Ceiling Rule", "body": "Cairo Play headings and labels are set in all-caps with wide tracking. Body copy is never all-caps. A sentence in all-caps at body size is unreadable and prohibited.", "section": "typography" }, - { "name": "The No Blur Rule", "body": "box-shadow blur radius is zero for all structural shadows. The only blur in the system is the glow shadow (which simulates light, not material depth).", "section": "elevation" }, - { "name": "The Press-And-Release Rule", "body": "Interactive elements with offset shadows must implement the full hover-then-press cycle: rest has offset, hover grows offset by 2px on both axes, active collapses offset to zero.", "section": "elevation" } + { + "name": "The One Hue Rule", + "body": "The 19-stop main ramp occupies a single warm hue family. Accents are admitted in six named failure families, but the surface itself never leaves the rust-to-void gradient. If a background or border colour is not one of the 19 ramp stops or one of the 6 accent families, it does not belong in the system.", + "section": "colors" + }, + { + "name": "The Black Is Forbidden Rule", + "body": "`#000000` is prohibited in shadows, borders, and backgrounds. The nearest near-black is Event Horizon (`#110402`). Shadows, overlays, and vignettes use warm-tinted transparencies of the brand colour: `rgba(175, 46, 26, ...)`. Pure black reads as a different material; this system has no cold materials.", + "section": "colors" + }, + { + "name": "The Flat Surface Failure Rule", + "body": "A flat, noiseless dark surface with no texture overlay is a design defect. Every ambient surface carries the SVG noise texture (opacity 0.02) and scanline overlay. These are structural, not decorative. The sole exemptions are interactive text surfaces (inputs, text areas, editable code regions), which stay clean for legibility, and `prefers-reduced-motion: reduce`, which silences all overlays.", + "section": "colors" + }, + { + "name": "The One Heading Colour Rule", + "body": "Fatal Error (`#cf8175`) is the only colour used for headings of any level. Not white, not Ghost Pixel, not the accent colours. Every heading speaks in the same warm-copper voice. If a heading is not Fatal Error, it is not a heading.", + "section": "typography" + }, + { + "name": "The All-Caps Ceiling Rule", + "body": "Rajdhani headings and labels are set in all-caps with wide tracking. This is an intentional, restricted choice for short strings (titles, labels, badges). Body copy is never all-caps. A sentence in all-caps at body size is unreadable and prohibited.", + "section": "typography" + }, + { + "name": "The No Blur Rule", + "body": "`box-shadow` blur radius is zero for all structural shadows. The only blur in the system is the glow shadow (which simulates light, not material depth). If a shadow has a non-zero blur and is not a glow, it does not belong.", + "section": "elevation" + }, + { + "name": "The Press-And-Release Rule", + "body": "Interactive elements with offset shadows must implement the full hover-then-press cycle: rest has offset, hover grows offset by 2px on both axes and lifts the element `translate(-2px, -2px)`, active collapses offset to zero and drives the element `translate(2px, 2px)` into the surface. The state transition must use `--dr-transition-fast` (150ms).", + "section": "elevation" + }, + { + "name": "The Recessed Well Rule", + "body": "Inputs, text areas, and editable code regions sit *below* the panel, not above it: Event Horizon background, 2px Bad Sector border, no offset shadow, no lift on hover. Wells respond through border colour (Bad Sector rest, Dark Packet hover, Digital Rust focus). They are exempt from noise and scanline texture; legibility outranks atmosphere inside a text field.", + "section": "elevation" + } ], "dos": [ - "Do use the 19-stop rust ramp as the only neutral scale. There is no separate gray ramp.", - "Do enforce WCAG 2.1 AA contrast on all text. Ghost Pixel on Event Horizon (17.17:1) is the baseline.", - "Do use noise and scanline overlays on every surface. They are structural, not decorative.", - "Do use offset solid shadows (no blur) in Bad Sector for material depth.", - "Do use thick borders (2-4px Dark Packet) as structural elements.", - "Do keep radius at 2-6px. Nothing rounds past 'gently chamfered'.", - "Do name accent colours after system failures. New accents get parallel naming.", - "Do implement the full hover-then-press cycle on all interactive elements.", - "Do suppress noise, scanlines, and all animations for prefers-reduced-motion: reduce.", - "Do keep surface-background tints for badges/diagnostics at 10-15% opacity." + "Do use the 19-stop rust ramp as the only neutral scale. There is no separate gray ramp; the warm stops from Ghost Pixel to Event Horizon are the neutrals.", + "Do enforce WCAG 2.1 AA contrast on all text. Ghost Pixel on Event Horizon (17.17:1) is the baseline; Dim Thermal Throttle on Event Horizon (4.84:1) is the darkest acceptable body text.", + "Do use noise and scanline overlays on every surface. They are structural, not decorative. A flat noiseless dark background is a defect.", + "Do use offset solid shadows (no blur) in Bad Sector for material depth. Grow offset on hover, collapse on active to simulate a physical press.", + "Do use thick borders (2-4px Dark Particle) as structural elements. Borders are walls, not decoration.", + "Do keep radius at 2-6px. Nothing rounds past \"gently chamfered\". A 16px+ radius on a card or panel is a different design system.", + "Do name accent colours after system failures (Memory Leek, Stack Overglow, Dead Thread, Blue Screen, Fractured Shell, Thermal Throttle). New accents get parallel naming.", + "Do use wavy underlines for diagnostics (Amber Alert wavy for errors, Stack Overglow wavy for warnings) and solid underlines for links. The underline style carries semantic information.", + "Do implement the full hover-then-press cycle on all interactive elements: rest offset, hover offset grows, active offset collapses.", + "Do suppress noise, scanlines, and all animations for `prefers-reduced-motion: reduce`. The content must be fully visible without the animation.", + "Do keep surface-background tints for badges/diagnostics at 10-15% opacity of the named colour. This is enough to carry the semantic tint without competing with the ramp." ], "donts": [ - "Don't use pure black (#000000) in shadows, borders, or backgrounds. Use Event Horizon (#110402) or warm-tinted transparencies.", - "Don't use blurred drop shadows. The only blur is the glow effect simulating radiated heat.", - "Don't use Dracula, Nord, Tokyo Night, One Dark, or any cold/blue/purple dark theme aesthetic.", - "Don't use flat, noiseless dark surfaces without the SVG noise and scanline overlays.", - "Don't use colours outside the 19 ramp stops and 6 accent families.", - "Don't use Fatal Error (#cf8175) for body text or link text. It is reserved for headings and keyword tokens.", - "Don't set body copy in all-caps.", - "Don't use border-left or border-right greater than 1px as a coloured accent stripe.", - "Don't use border-radius above 6px on any card, panel, or container.", - "Don't place a 1px border and a wide soft shadow on the same element." + "Don't use pure black (`#000000`) in shadows, borders, or backgrounds. The system has no cold materials. Use Event Horizon (`#110402`) or warm-tinted transparencies of the brand colour.", + "Don't use blurred drop shadows. The only blur in the system is the glow effect (`0 0 Npx rgba(175, 46, 26, 0.4)`), which simulates radiated heat, not material depth.", + "Don't use Dracula, Nord, Tokyo Night, One Dark, or any cold/blue/purple dark theme aesthetic. Those are the explicit anti-references. Cool tones are the opposite of the corroded mainframe.", + "Don't use flat, noiseless dark surfaces without the SVG noise and scanline overlays. Remove only for `prefers-reduced-motion`.", + "Don't use colours outside the 19 ramp stops and 6 accent families. If a colour is not in the palette, it does not belong. Extend the palette deliberately, not by accident.", + "Don't use Fatal Error (`#cf8175`) for body text or link text. It is reserved for headings and keyword tokens. Body text uses Ghost Pixel or Phosphor Smoke; links use Phantom Current.", + "Don't set body copy in all-caps. Rajdhani all-caps with wide tracking is for headings and labels only (4 words or fewer for labels).", + "Don't use `border-left` or `border-right` greater than 1px as a coloured accent stripe on cards, list items, or callouts. The section-title left border is a rare deliberate exception.", + "Don't use border-radius above 6px on any card, panel, or container. Full-pill radius is acceptable for small inline elements (badges, tags) only.", + "Don't place a 1px border and a wide soft shadow on the same element. Pick one: a solid thick border at the brand colour, or a defined offset shadow at no more than 8px offset. Never both as decoration." ] } } diff --git a/Digital Rust UI Specification.md b/Digital Rust UI Specification.md index e03072c..1bb4f61 100644 --- a/Digital Rust UI Specification.md +++ b/Digital Rust UI Specification.md @@ -283,7 +283,7 @@ light-catching bevel, physical travel. | **Primary** | Digital Rust bg, Ghost Pixel text, Digital Rust border, `offset-md` | Firewall Breach bg and border, `hover-md` + `glow-sm`, lifts | `offset` collapses, glow removed, presses in | | **Success** | Memory Leek border and text | Memory Leek bg, Event Horizon text | presses in | | **Warning** | Stack Overglow border and text | Stack Overglow bg, Event Horizon text | presses in | -| **Error** | Amber Alert border, Amber Alert Text (`#cb6353`) text | Amber Alert bg, Event Horizon text | presses in | +| **Error** | Amber Alert border, Amber Alert Text (`#cb6353`) text | Firewall Breach bg and border, Ghost Pixel text (raw Amber Alert fill fails AA with every text colour) | presses in | | **Disabled** | Bad Sector bg, muted text, no border colour shift | no response | no response; `cursor: not-allowed` | Reference CSS: diff --git a/index.html b/index.html index 56accae..7730659 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ Digital Rust / Demonstration + + diff --git a/spec.html b/spec.html index d8be316..145069c 100644 --- a/spec.html +++ b/spec.html @@ -4,6 +4,8 @@ + + diff --git a/specstyle.css b/specstyle.css index a179d0f..3d0be27 100644 --- a/specstyle.css +++ b/specstyle.css @@ -243,7 +243,7 @@ a:active { font-variation-settings: "slnt" 0; font-weight: 700; letter-spacing: -0.02em; - line-height: 1.1; + line-height: 1.3; } .spec-document h1 { @@ -302,6 +302,7 @@ a:active { font-size: var(--dr-text-lg); color: var(--copper-trace); max-width: 60ch; + line-height: 1.45; } /* ---- Meta Bar ---- */ diff --git a/style.css b/style.css index 48e96d3..f14c1ff 100644 --- a/style.css +++ b/style.css @@ -393,7 +393,6 @@ h1 { justify-content: space-between; align-items: center; font-weight: 700; - text-transform: uppercase; font-size: var(--dr-text-xs); color: var(--copper-trace); gap: var(--dr-space-sm); @@ -402,13 +401,17 @@ h1 { padding: 0; } +.token-card header > span:first-child { + text-transform: uppercase; + letter-spacing: 0.05em; +} + .token-swatch { background: var(--dr-surface-base); border: var(--dr-border-subtle); border-radius: var(--dr-radius-sm); padding: 0.2rem 0.4rem; - font-size: 0.7rem; - letter-spacing: 0.05em; + font-size: var(--dr-text-xs); color: var(--dr-text-primary); position: relative; } @@ -840,7 +843,7 @@ h1 { .tab { padding: var(--dr-space-xs) var(--dr-space-sm); - border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0; + border-radius: 0; background: var(--dr-surface-base); color: var(--dr-text-secondary); font-size: var(--dr-text-xs); @@ -1245,9 +1248,9 @@ h1 { } .btn-error:hover { - background: var(--amber-alert); - border-color: var(--amber-alert); - color: var(--dr-surface-base); + background: var(--firewall-breach); + border-color: var(--firewall-breach); + color: var(--ghost-pixel); } .btn:disabled, diff --git a/ui.html b/ui.html index fdca203..04a052d 100644 --- a/ui.html +++ b/ui.html @@ -5,6 +5,8 @@ Digital Rust / UI Guidelines + + -- 2.51.2