{ "schemaVersion": 2, "generatedAt": "2026-07-27T19:09:41.393Z", "title": "Design System: SHD.build", "extensions": { "colorMeta": { "operations-black": { "role": "neutral", "displayName": "Operations Black", "canonical": "#0a0c0d", "tonalRamp": ["#050606", "#0a0c0d", "#171a1b", "#303536", "#555c5e", "#858b8d", "#c1c4c2", "#f0f0eb"] }, "terminal-black": { "role": "neutral", "displayName": "Terminal Black", "canonical": "#0d0f10", "tonalRamp": ["#050606", "#0d0f10", "#1b1e1f", "#34393a", "#596062", "#888f91", "#c3c7c6", "#f1f2ee"] }, "terminal-surface": { "role": "neutral", "displayName": "Terminal Surface", "canonical": "#111415", "tonalRamp": ["#070808", "#111415", "#202425", "#393e3f", "#5f6668", "#8d9496", "#c6cac9", "#f2f3ef"] }, "terminal-graphite": { "role": "neutral", "displayName": "Terminal Graphite", "canonical": "#141718", "tonalRamp": ["#080a0a", "#111415", "#202425", "#343a3b", "#565e60", "#858d8f", "#c0c5c3", "#f0f1ed"] }, "active-graphite": { "role": "neutral", "displayName": "Active Graphite", "canonical": "#15191a", "tonalRamp": ["#080a0a", "#15191a", "#252a2b", "#3e4445", "#626a6c", "#909799", "#c8cccb", "#f2f3f0"] }, "modeled-data-surface": { "role": "neutral", "displayName": "Modeled Data Surface", "canonical": "#0d1213", "tonalRamp": ["#050708", "#0d1213", "#1c2527", "#334043", "#526165", "#7d8b8e", "#bac2c2", "#eff1ef"] }, "structural-line": { "role": "neutral", "displayName": "Structural Line", "canonical": "#303536", "tonalRamp": ["#0d0f10", "#1b1f20", "#303536", "#4b5152", "#6a7274", "#92999b", "#c3c8c7", "#f0f1ee"] }, "structural-line-soft": { "role": "neutral", "displayName": "Structural Line Soft", "canonical": "#272c2d", "tonalRamp": ["#0b0d0d", "#181b1c", "#272c2d", "#43494a", "#656d6f", "#8e9597", "#c2c6c5", "#eff0ed"] }, "structural-line-strong": { "role": "neutral", "displayName": "Structural Line Strong", "canonical": "#424849", "tonalRamp": ["#111415", "#252a2b", "#424849", "#5d6567", "#7c8587", "#a0a7a8", "#c9cdcc", "#f1f2ef"] }, "modeled-data-line": { "role": "neutral", "displayName": "Modeled Data Line", "canonical": "#3b4648", "tonalRamp": ["#0e1314", "#20292b", "#3b4648", "#566366", "#758184", "#9aa3a5", "#c6cbca", "#f0f2ef"] }, "field-manual-white": { "role": "neutral", "displayName": "Field Manual White", "canonical": "#ecebe5", "tonalRamp": ["#252522", "#44433f", "#66655f", "#898780", "#aaa8a1", "#cac8c1", "#ecebe5", "#faf9f5"] }, "telemetry-muted": { "role": "neutral", "displayName": "Telemetry Muted", "canonical": "#858b8d", "tonalRamp": ["#151718", "#292d2e", "#414647", "#5e6466", "#858b8d", "#a6abad", "#cbd0cf", "#f1f2ef"] }, "telemetry-dim": { "role": "neutral", "displayName": "Telemetry Dim", "canonical": "#5d6567", "tonalRamp": ["#111314", "#222627", "#373c3d", "#4b5254", "#5d6567", "#858d8f", "#bcc1c0", "#eef0ed"] }, "signal-orange": { "role": "primary", "displayName": "Signal Orange", "canonical": "#f6a821", "tonalRamp": ["#2b1a05", "#4c2f08", "#754a0d", "#a66c14", "#d7901c", "#f6a821", "#ffd278", "#fff1cf"] }, "signal-orange-hover": { "role": "primary", "displayName": "Signal Orange Hover", "canonical": "#ffc45d", "tonalRamp": ["#2d1f08", "#51380d", "#785515", "#a97824", "#d99d39", "#ffc45d", "#ffdda0", "#fff3d9"] }, "system-success": { "role": "secondary", "displayName": "System Success", "canonical": "#75c08c", "tonalRamp": ["#102a19", "#194328", "#275f39", "#3f7d50", "#5c9e6d", "#75c08c", "#a8dcba", "#e2f4e8"] }, "system-danger": { "role": "secondary", "displayName": "System Danger", "canonical": "#df8069", "tonalRamp": ["#32130e", "#542219", "#793428", "#a54a39", "#c9634f", "#df8069", "#edae9f", "#f8dfd9"] }, "system-info": { "role": "secondary", "displayName": "System Information", "canonical": "#70b9d6", "tonalRamp": ["#0d2630", "#163f50", "#245b70", "#387991", "#5599b3", "#70b9d6", "#a6d5e7", "#e1f1f7"] }, "quality-standard": { "role": "tertiary", "displayName": "Standard Quality", "canonical": "#69b66f", "tonalRamp": ["#0e2912", "#17431d", "#255e2b", "#397b3e", "#519a56", "#69b66f", "#9dd4a1", "#dff0e0"] }, "quality-specialized": { "role": "tertiary", "displayName": "Specialized Quality", "canonical": "#4f9ed8", "tonalRamp": ["#0c2435", "#123c59", "#1d567d", "#2d72a3", "#408dc4", "#4f9ed8", "#8dc5ea", "#d9edf8"] }, "quality-superior": { "role": "tertiary", "displayName": "Superior Quality", "canonical": "#9b68d4", "tonalRamp": ["#21132f", "#38204f", "#522f70", "#704594", "#8959b7", "#9b68d4", "#c3a2e5", "#eee1f7"] }, "quality-high-end": { "role": "tertiary", "displayName": "High-end Quality", "canonical": "#e4bd3f", "tonalRamp": ["#2d2408", "#4c3c0d", "#6f5815", "#95771f", "#bd992d", "#e4bd3f", "#f0d982", "#fbf2ce"] } }, "typographyMeta": { "display": { "displayName": "Operational Display", "purpose": "Barlow for short public hero statements and major exception titles." }, "headline": { "displayName": "Operational Headline", "purpose": "Barlow for routed-page identity and strong editorial section titles." }, "title": { "displayName": "Registry Title", "purpose": "Barlow for module, panel, card, and record names." }, "body": { "displayName": "System Body", "purpose": "Barlow for functional copy and general interface content." }, "editorial": { "displayName": "Field Editorial", "purpose": "Source Serif 4 for human-readable explanations, introductions, and longer descriptions." }, "label": { "displayName": "Telemetry Label", "purpose": "Compact uppercase controls, statuses, and metadata." } }, "shadows": [ { "name": "detached-menu", "value": "0 18px 46px #000a", "purpose": "Account and compact floating menus." }, { "name": "operational-dialog", "value": "0 18px 60px #000", "purpose": "Focused quick views and review dialogs." }, { "name": "transient-feedback", "value": "0 12px 30px #000b", "purpose": "Toast notifications." }, { "name": "fault-console", "value": "0 24px 70px #0008", "purpose": "Routed exception surfaces." } ], "motion": [ { "name": "control-state", "value": "transform .12s ease, filter .18s ease, opacity .18s ease, box-shadow .18s ease", "purpose": "Shared tactile interaction feedback." }, { "name": "toast-enter", "value": "180ms ease-out", "purpose": "Short lateral arrival for transient feedback; removed under reduced motion." } ], "breakpoints": [ { "name": "mobile-compact", "value": "560px" }, { "name": "mobile-operational", "value": "700px" }, { "name": "navigation-collapse", "value": "900px" }, { "name": "large-display", "value": "2200px" }, { "name": "ultra-display", "value": "2800px" }, { "name": "four-k-display", "value": "3400px" } ] }, "components": [ { "name": "Primary Action", "kind": "button", "refersTo": "button-primary", "description": "The decisive action within a task group.", "html": "", "css": ".ds-btn-primary{min-height:40px;border:0;border-radius:0;padding:12px 22px;background:var(--shd-orange,#f6a821);color:#111;font:900 12px/1 Barlow,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,filter .18s ease,background .18s ease}.ds-btn-primary:hover{background:var(--shd-orange-hover,#ffc45d)}.ds-btn-primary:focus-visible{outline:1px solid var(--shd-focus-ring,#f6a821);outline-offset:2px}.ds-btn-primary:active{transform:translateY(2px) scale(.985);filter:brightness(.9)}.ds-btn-primary:disabled{cursor:wait;opacity:.58}" }, { "name": "Secondary Action", "kind": "button", "refersTo": "button-secondary", "description": "A supporting or cancel action with equal geometric discipline.", "html": "", "css": ".ds-btn-secondary{min-height:40px;border:1px solid var(--shd-border,#303536);border-radius:0;padding:12px 22px;background:transparent;color:var(--shd-text,#ecebe5);font:900 12px/1 Barlow,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,filter .18s ease,border-color .18s ease}.ds-btn-secondary:hover{border-color:var(--shd-orange,#f6a821);color:var(--shd-orange-hover,#ffc45d)}.ds-btn-secondary:focus-visible{outline:1px solid var(--shd-focus-ring,#f6a821);outline-offset:2px}.ds-btn-secondary:active{transform:translateY(2px) scale(.985);filter:brightness(.9)}" }, { "name": "Operational Field", "kind": "input", "refersTo": "input", "description": "A recessed data-entry field with explicit label and precise focus.", "html": "", "css": ".ds-field{display:grid;gap:6px;color:var(--shd-text-muted,#858b8d);font:900 12px/1 Barlow,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase}.ds-field input{width:100%;min-height:40px;border:1px solid #363b3c;border-radius:0;padding:11px;background:var(--shd-bg-field,#0d0f10);color:var(--shd-text,#ecebe5);font:400 16px/1.3 Barlow,Arial,sans-serif}.ds-field input:focus{border-color:var(--shd-orange,#f6a821);outline:none}.ds-field input:focus-visible{outline:1px solid var(--shd-orange,#f6a821);outline-offset:1px}" }, { "name": "Segmented Choice", "kind": "chip", "refersTo": "status-chip", "description": "A bounded radio-style choice rendered as one connected instrument.", "html": "
", "css": ".ds-segments{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--shd-border,#303536);background:var(--shd-bg,#0a0c0d)}.ds-segments button{min-height:44px;border:0;border-left:1px solid var(--shd-border,#303536);border-radius:0;background:var(--shd-surface,#111415);color:var(--shd-text-muted,#858b8d);font:900 12px/1 Barlow,Arial,sans-serif;letter-spacing:1px;cursor:pointer}.ds-segments button:first-child{border-left:0}.ds-segments button:hover,.ds-segments button:focus-visible{background:var(--shd-surface-active,#15191a);color:var(--shd-text,#ecebe5)}.ds-segments button:focus-visible{outline:1px solid var(--shd-orange,#f6a821);outline-offset:-2px}.ds-segments button[aria-checked=true]{background:#2b2111;color:var(--shd-orange,#f6a821);box-shadow:inset 0 -2px var(--shd-orange,#f6a821)}.ds-segments button:active{filter:brightness(.82)}" }, { "name": "Database Record Card", "kind": "card", "refersTo": "panel", "description": "A public data card built from identity, metadata, and compact fact regions.", "html": "
SHD
WEAPON // SMG

FIRST WAVE VECTOR

T2
DAMAGE
12,480–15,920
RPM
1,200

Level 50 operational values calculated from authoritative game data.

", "css": ".ds-record{border:1px solid var(--shd-border,#303536);border-top:2px solid #404748;border-radius:0;background:var(--shd-surface,#111415);color:var(--shd-text,#ecebe5);font-family:Barlow,Arial,sans-serif}.ds-record header{min-height:78px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid var(--shd-border,#303536)}.ds-record-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid #343a3b;background:#0c0f10;color:var(--shd-orange,#f6a821);font-size:12px;font-weight:900}.ds-record small,.ds-record dt{color:#697174;font-size:12px;font-weight:900;letter-spacing:.8px}.ds-record h3{margin:5px 0 0;font-size:16px;line-height:1.1}.ds-record header>b{padding:4px 6px;border:1px solid #765426;background:#21180d;color:var(--shd-orange,#f6a821);font-size:12px}.ds-record dl{display:grid;grid-template-columns:1fr 1fr;margin:10px 12px 0;border:1px solid var(--shd-border,#303536)}.ds-record dl>div{padding:9px;border-left:1px solid var(--shd-border,#303536)}.ds-record dl>div:first-child{border-left:0}.ds-record dd{margin:5px 0 0;font-size:14px;font-weight:900}.ds-record>p{margin:9px 12px 12px;padding:9px;border-left:1px solid var(--shd-orange,#f6a821);background:#0d1011;color:#a2a8aa;font:14px/1.55 Source Serif 4,Georgia,serif}" }, { "name": "ISAC Module Navigation", "kind": "nav", "description": "A dense indexed registry rail with one explicit active module.", "html": "", "css": ".ds-isac-nav{display:flex;flex-direction:column;border:1px solid #2c3132;background:#0f1213;font-family:Barlow,Arial,sans-serif}.ds-isac-nav a{min-height:49px;display:grid;grid-template-columns:33px 1fr auto;align-items:center;border-bottom:1px solid #272c2d;color:#858c8e;text-decoration:none}.ds-isac-nav a small{height:100%;display:grid;place-items:center;background:#141819;color:#858b8d;font-size:12px;letter-spacing:.6px}.ds-isac-nav a span{padding-left:11px;font-size:12px;font-weight:700}.ds-isac-nav a b{padding-right:12px;color:var(--shd-orange,#f6a821);font-size:17px}.ds-isac-nav a:hover,.ds-isac-nav a:focus-visible,.ds-isac-nav a.active{background:#151819;color:#fff}.ds-isac-nav a:focus-visible{outline:1px solid var(--shd-orange,#f6a821);outline-offset:-2px}.ds-isac-nav a.active{box-shadow:inset 2px 0 var(--shd-orange,#f6a821)}.ds-isac-nav a.active small{background:#2b2111;color:var(--shd-orange,#f6a821)}" }, { "name": "System Toast", "kind": "custom", "description": "Detached semantic feedback with a concise operational title and dismissal.", "html": "", "css": ".ds-toast{--ds-tone:var(--shd-success,#75c08c);min-height:72px;display:grid;grid-template-columns:4px minmax(0,1fr) 34px;overflow:hidden;border:1px solid #414849;border-top:2px solid var(--ds-tone);border-radius:0;background:linear-gradient(105deg,#171b1cee,#0c0f10f7);box-shadow:0 12px 30px #000b;color:var(--shd-text,#ecebe5);font-family:Barlow,Arial,sans-serif}.ds-toast>i{background:var(--ds-tone)}.ds-toast>div{display:grid;align-content:center;gap:4px;padding:11px 10px}.ds-toast span{color:var(--ds-tone);font-size:12px;font-weight:900;letter-spacing:1px}.ds-toast strong{font-size:13px;line-height:1.3}.ds-toast p{margin:0;color:#91999b;font-size:12px;line-height:1.45}.ds-toast button{width:34px;height:34px;margin:4px 3px 0 0;border:0;background:transparent;color:#70787a;font-size:17px;cursor:pointer}.ds-toast button:hover,.ds-toast button:focus-visible{background:#ffffff09;color:var(--ds-tone)}.ds-toast button:focus-visible{outline:1px solid var(--ds-tone);outline-offset:-2px}.ds-toast button:active{transform:translateY(1px);filter:brightness(.8)}" }, { "name": "Modeled Authoring Assist", "kind": "custom", "refersTo": "assistant-panel", "description": "A permission-aware draft workspace for mechanic and calculation authoring.", "html": "
ISAC AUTHORING ASSISTAI MECHANIC DRAFTING
AUTHORIZED

Convert in-game wording into a reviewable draft. Manual authoring remains available.

", "css": ".ds-assist{border:1px solid var(--shd-model-border,#3b4648);border-left:2px solid var(--shd-info,#70b9d6);border-radius:0;background:var(--shd-model-surface,#0d1213);color:var(--shd-text,#ecebe5);font-family:Barlow,Arial,sans-serif}.ds-assist header{min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--shd-border,#303536);background:var(--shd-surface-raised,#141718)}.ds-assist header div{display:grid;gap:2px}.ds-assist span,.ds-assist b{color:var(--shd-info,#70b9d6);font-size:12px;font-weight:900;letter-spacing:.9px}.ds-assist b{padding:5px 7px;border:1px solid var(--shd-model-border,#3b4648)}.ds-assist button{min-height:40px;padding:0 11px;border:1px solid var(--shd-info,#70b9d6);border-radius:0;background:transparent;color:var(--shd-info,#70b9d6);font-size:12px;font-weight:900;letter-spacing:.7px;cursor:pointer}.ds-assist button:hover{background:#152225}.ds-assist button:focus-visible{outline:1px solid var(--shd-orange,#f6a821);outline-offset:2px}.ds-assist button:active{transform:translateY(1px);filter:brightness(.84)}.ds-assist p{margin:0;padding:10px 11px;color:var(--shd-text-muted,#858b8d);font-size:14px;line-height:1.45}" } ], "narrative": { "northStar": "The Strategic Operations Grid", "overview": "SHD.build serves active agents through a dependable intelligence network: precise, restrained, tactical, and built around trustworthy data. Alignment, density, operational labels, and visible state carry the interface. Public surfaces use space and larger editorial hierarchy. ISAC compresses the same identity into an efficient control surface.\n\nFine structural lines, layered black and graphite surfaces, cropped game iconography, clipped silhouettes, and tactile state changes give the interface its technical character. Theme language supports comprehension and avoids military cosplay.", "keyCharacteristics": [ "Dark, high-contrast operational canvas with restrained tonal layering.", "Square engineered geometry, except circular agent avatars and the SHD mark.", "Dense uppercase telemetry balanced by readable editorial descriptions.", "Signal Orange used sparingly for action, focus, selection, and important data.", "Explicit textual states paired with icons, color, and motion.", "Responsive density from mobile touch layouts through scaled 4K workspaces." ], "rules": [ { "name": "The Orange Discipline Rule", "body": "Use Signal Orange for action and emphasis. Keep it out of large decorative areas and away from semantic state colors.", "section": "colors" }, { "name": "The Redundant Meaning Rule", "body": "Pair color with text, position, shape, or an icon. A status or quality cannot depend on hue alone.", "section": "colors" }, { "name": "The Two-Voice Rule", "body": "Sans-serif operates the system; serif explains it. Do not use monospace to make an interface look technical.", "section": "typography" }, { "name": "The Telemetry Restraint Rule", "body": "Uppercase tracked labels are short navigational or state-bearing signals, not paragraph typography.", "section": "typography" }, { "name": "The Connected Grid Rule", "body": "Use borders, shared edges, and aligned tracks to show relationships. Do not wrap every subsection in another card.", "section": "layout" }, { "name": "The Operational Density Rule", "body": "Public discovery may breathe; ISAC and data workbenches prioritize scanability and efficient repeated actions.", "section": "layout" }, { "name": "The Structural Layering Rule", "body": "Borders and tones establish permanent hierarchy; shadows communicate temporary detachment.", "section": "elevation" }, { "name": "The No Ambient Card Rule", "body": "Ordinary panels and cards remain shadowless at rest.", "section": "elevation" }, { "name": "The Engineered Edge Rule", "body": "Square is the default and rounding must have semantic justification.", "section": "shapes" }, { "name": "The Identity Circle Rule", "body": "Circular crops belong to people, the SHD emblem, and radial information, not arbitrary controls.", "section": "shapes" } ], "dos": [ "Do reserve Signal Orange for action, focus, selection, and important operational values.", "Do build hierarchy with connected grids, fine borders, tonal layers, and concise labels.", "Do pair every state color and icon with explicit text.", "Do use reusable segmented choices for bounded sets and searchable assignments for large relational sets.", "Do preserve tactile pressed, focus-visible, pending, disabled, error, success, and reduced-motion behavior.", "Do keep AI-generated data inside an explicit draft-and-review boundary while preserving manual authoring controls.", "Do let public editorial surfaces breathe while keeping ISAC dense and task-oriented." ], "donts": [ "Don't use camouflage, distressed textures, decorative weapon imagery, or tactical ornament in utility interfaces.", "Don't introduce rounded friendly-SaaS cards, decorative pills, glass panels, gradient text, or ambient card shadows.", "Don't cover large areas in orange or use glow as a substitute for hierarchy.", "Don't turn every section into equal icon-heading-description cards or nest cards inside cards.", "Don't use monospace as a technical costume or tracked uppercase type for long-form copy.", "Don't let operational terminology obscure the action, consequence, recovery, or state it describes." ] } }