",
- "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
+
+