feat: refine ISAC design and prepare production deployment
This commit is contained in:
JB
@@ -0,0 +1,221 @@
|
||||
{
|
||||
"schemaVersion": 2,
|
||||
"generatedAt": "2026-07-26T15:12:23.344Z",
|
||||
"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-graphite": {
|
||||
"role": "neutral",
|
||||
"displayName": "Terminal Graphite",
|
||||
"canonical": "#141718",
|
||||
"tonalRamp": ["#080a0a", "#111415", "#202425", "#343a3b", "#565e60", "#858d8f", "#c0c5c3", "#f0f1ed"]
|
||||
},
|
||||
"field-manual-white": {
|
||||
"role": "neutral",
|
||||
"displayName": "Field Manual White",
|
||||
"canonical": "#ecebe5",
|
||||
"tonalRamp": ["#252522", "#44433f", "#66655f", "#898780", "#aaa8a1", "#cac8c1", "#ecebe5", "#faf9f5"]
|
||||
},
|
||||
"signal-orange": {
|
||||
"role": "primary",
|
||||
"displayName": "Signal Orange",
|
||||
"canonical": "#f6a821",
|
||||
"tonalRamp": ["#2b1a05", "#4c2f08", "#754a0d", "#a66c14", "#d7901c", "#f6a821", "#ffd278", "#fff1cf"]
|
||||
},
|
||||
"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"]
|
||||
}
|
||||
},
|
||||
"typographyMeta": {
|
||||
"display": {
|
||||
"displayName": "Operational Display",
|
||||
"purpose": "Barlow for short public hero statements and major exception titles."
|
||||
},
|
||||
"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": "<button class=\"ds-btn-primary\">SAVE CHANGES <span aria-hidden=\"true\">→</span></button>",
|
||||
"css": ".ds-btn-primary{min-height:40px;border:0;border-radius:0;padding:12px 22px;background:var(--shd-orange,#f6a821);color:#111;font:900 11px/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": "<button class=\"ds-btn-secondary\">CANCEL</button>",
|
||||
"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 11px/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": "<label class=\"ds-field\"><span>ATTRIBUTE NAME</span><input value=\"Critical Hit Damage\" /></label>",
|
||||
"css": ".ds-field{display:grid;gap:6px;color:var(--shd-text-muted,#858b8d);font:900 8px/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 14px/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": "<div class=\"ds-segments\" role=\"radiogroup\" aria-label=\"Tier\"><button role=\"radio\" aria-checked=\"false\">T0</button><button role=\"radio\" aria-checked=\"true\">T1</button><button role=\"radio\" aria-checked=\"false\">T2</button></div>",
|
||||
"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 9px/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": "<article class=\"ds-record\"><header><div class=\"ds-record-icon\" aria-hidden=\"true\">SHD</div><div><small>WEAPON // SMG</small><h3>FIRST WAVE VECTOR</h3></div><b>T2</b></header><dl><div><dt>DAMAGE</dt><dd>12,480–15,920</dd></div><div><dt>RPM</dt><dd>1,200</dd></div></dl><p>Level 50 operational values calculated from authoritative game data.</p></article>",
|
||||
"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:9px;font-weight:900}.ds-record small,.ds-record dt{color:#697174;font-size:6px;font-weight:900;letter-spacing:.8px}.ds-record h3{margin:5px 0 0;font-size:14px;line-height:1.1}.ds-record header>b{padding:4px 6px;border:1px solid #765426;background:#21180d;color:var(--shd-orange,#f6a821);font-size:7px}.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:11px;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:10px/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": "<nav class=\"ds-isac-nav\" aria-label=\"ISAC modules\"><a href=\"#\"><small>01</small><span>ATTRIBUTES</span><b>›</b></a><a class=\"active\" href=\"#\" aria-current=\"page\"><small>02</small><span>TALENTS</span><b>›</b></a><a href=\"#\"><small>03</small><span>GEAR</span><b>›</b></a></nav>",
|
||||
"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:#535a5c;font-size:7px;letter-spacing:.6px}.ds-isac-nav a span{padding-left:11px;font-size:10px;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": "<aside class=\"ds-toast\" role=\"status\"><i></i><div><span>ISAC // COMPLETE</span><strong>ATTRIBUTE SAVED</strong><p>The registry has been updated.</p></div><button aria-label=\"Dismiss\">×</button></aside>",
|
||||
"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:6px;font-weight:900;letter-spacing:1px}.ds-toast strong{font-size:9px;line-height:1.3}.ds-toast p{margin:0;color:#91999b;font-size:7px;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)}"
|
||||
}
|
||||
],
|
||||
"narrative": {
|
||||
"northStar": "The Strategic Operations Grid",
|
||||
"overview": "SHD.build behaves like a dependable intelligence network shared by active agents: precise, restrained, tactical, and structured around trustworthy data. The interface communicates through alignment, density, operational labels, and visible state rather than spectacle. Public surfaces can breathe and use larger editorial hierarchy, while ISAC compresses the same identity into an efficient control surface.\n\nThe world is technical without becoming sterile. Fine structural lines, tonally layered black and graphite surfaces, cropped game iconography, clipped silhouettes, and tactile state changes create its character. Theme language supports comprehension; it never becomes 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": "Signal Orange identifies action and emphasis; it does not cover large decorative areas or compete with semantic state colors.",
|
||||
"section": "colors"
|
||||
},
|
||||
{
|
||||
"name": "The Redundant Meaning Rule",
|
||||
"body": "Color always travels with text, position, shape, or an icon. No status or quality can depend on hue alone.",
|
||||
"section": "colors"
|
||||
},
|
||||
{
|
||||
"name": "The Two-Voice Rule",
|
||||
"body": "Sans-serif operates the system; serif explains it. Never use monospace merely to make an interface look technical.",
|
||||
"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 Structural Layering Rule",
|
||||
"body": "Borders and tones establish permanent hierarchy; shadows communicate temporary detachment.",
|
||||
"section": "elevation"
|
||||
},
|
||||
{
|
||||
"name": "The Engineered Edge Rule",
|
||||
"body": "Square is the default and rounding must have semantic justification.",
|
||||
"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 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."
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user