feat: refine ISAC design and prepare production deployment
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
---
|
||||
target: application route system
|
||||
total_score: 28
|
||||
max_score: 40
|
||||
na_heuristics:
|
||||
p0_count: 0
|
||||
p1_count: 2
|
||||
timestamp: 2026-07-26T15-49-23Z
|
||||
slug: src-routes
|
||||
---
|
||||
# SHD.build route-system critique
|
||||
|
||||
## Design Health Score
|
||||
|
||||
| # | Heuristic | Score | Key issue |
|
||||
|---|---|---:|---|
|
||||
| 1 | Visibility of system status | 4 | ISAC exposes environment, access, mode, active navigation, and filter state clearly. |
|
||||
| 2 | Match system / real world | 3 | SHD vocabulary is authentic, but codes such as OSPR and WMOD need plain-language support. |
|
||||
| 3 | User control and freedom | 3 | Navigation and cancellation patterns are strong; empty destinations and filter clearing are less explicit. |
|
||||
| 4 | Consistency and standards | 3 | Shared patterns are cohesive, but live search plus Search, static-looking KPI links, and Edit-only rows diverge. |
|
||||
| 5 | Error prevention | 3 | Guardrails are extensive, but Add/Edit consequence language is not visible before entry. |
|
||||
| 6 | Recognition rather than recall | 2 | Seventeen ISAC destinations, code labels, and visually identical category cards create scanning burden. |
|
||||
| 7 | Flexibility and efficiency | 3 | Search, filtering, page sizes, and grouped navigation help experts; one-page registries expose unnecessary controls. |
|
||||
| 8 | Aesthetic and minimalist design | 2 | The system is disciplined, but cinematic hero scale and equally weighted bordered blocks compete with the task. |
|
||||
| 9 | Error recovery | 3 | The application has designed error and preservation patterns, though recovery was not exercised in the inspected states. |
|
||||
| 10 | Help and documentation | 2 | Microcopy exists, but ISAC terms, permissions, and proposal consequences lack contextual help. |
|
||||
| **Total** | | **28/40** | **Good foundation; focused hierarchy and disclosure work needed.** |
|
||||
|
||||
## Design Specificity Verdict
|
||||
|
||||
The result is strongly authored for SHD.build. Black/graphite command surfaces,
|
||||
orange targeting rails, angular hero cuts, coded modules, explicit system state,
|
||||
and ISAC terminology form a convincing Division intelligence network. The
|
||||
identity becomes less specific where repeated bordered registry cards and KPI
|
||||
blocks flatten into a generic dark administrative grid.
|
||||
|
||||
The deterministic scan found seven source findings across `src/routes`: one
|
||||
warning for the two-pixel semantic notification rail in
|
||||
`src/routes/account/+page.svelte`, and six advisory colors outside the documented
|
||||
palette in the homepage and account route. The rail is largely a detector false
|
||||
positive because it conveys semantic message state, but its colors should still
|
||||
come from named tokens. The homepage build colors are data-like values rather
|
||||
than structural CSS, yet they also bypass the maintained palette.
|
||||
|
||||
Mutable browser injection was unavailable, so no visual overlay is claimed.
|
||||
Fresh Chrome tabs, screenshots, DOM snapshots, and computed styles instead
|
||||
confirmed no horizontal overflow and no visible text below 12px on the public
|
||||
Database or ISAC Attributes pages.
|
||||
|
||||
## Overall Impression
|
||||
|
||||
SHD.build already feels unusually coherent and product-specific. Its biggest
|
||||
opportunity is to let that identity guide attention rather than compete for it:
|
||||
the public Database should reach useful records sooner, and ISAC should reveal
|
||||
its complexity according to the operator's current task and role.
|
||||
|
||||
## What's Working
|
||||
|
||||
1. The visual language is specific, restrained, and thematically credible.
|
||||
Orange remains primarily an action/current-state signal, and textual state
|
||||
accompanies color.
|
||||
2. Shared structures such as KPI filters, registry pagination, database-card
|
||||
anatomy, and the ISAC shell make the large application feel related rather
|
||||
than stitched together.
|
||||
3. Baseline semantics are strong: named navigation, headings, search labels,
|
||||
`aria-current`, disabled-state semantics, and explicit status text are
|
||||
present in the inspected DOM.
|
||||
|
||||
## Priority Issues
|
||||
|
||||
### P1 — ISAC exposes the entire system before the current task
|
||||
|
||||
The Attributes screen simultaneously presents 17 sidebar destinations, four
|
||||
system-state blocks, four KPI filters, search, pagination, row-size controls,
|
||||
six table columns, and repeated Edit actions. Experienced operators can scan
|
||||
it, but contributors and new Oversight users must decode the whole information
|
||||
architecture before acting.
|
||||
|
||||
**Fix:** make sidebar groups collapsible, prioritize modules by role and recent
|
||||
work, hide pagination controls when one page is present, and preserve a compact
|
||||
module switcher/search for experts.
|
||||
|
||||
**Suggested command:** `$impeccable distill`
|
||||
|
||||
### P1 — Mutation consequences are not visible at the decision point
|
||||
|
||||
The interface knows whether an operator publishes directly or creates a review
|
||||
proposal, but the registry's Add/Edit actions do not state that consequence.
|
||||
This is a high-stakes ambiguity for contributors and Oversight.
|
||||
|
||||
**Fix:** place a role-aware consequence line beside the module action and repeat
|
||||
it in the editor header: either “Creates a proposal for Oversight review” or
|
||||
“Publishes directly and creates an audit event.”
|
||||
|
||||
**Suggested command:** `$impeccable clarify`
|
||||
|
||||
### P2 — The Database hero delays the lookup task
|
||||
|
||||
At the inspected 4K viewport the 82px, two-line hero occupies roughly a
|
||||
333px-tall surface, and the category grid starts around 563px down the page.
|
||||
“Contribute data” is visually louder than registry discovery even though lookup
|
||||
is the common task.
|
||||
|
||||
**Fix:** retain the angular tactical hero but reduce its vertical commitment,
|
||||
move useful category identity into the first viewport, and demote contribution
|
||||
to a clear secondary path.
|
||||
|
||||
**Suggested command:** `$impeccable layout`
|
||||
|
||||
### P2 — Empty registries promise the same value as populated registries
|
||||
|
||||
Four of eight Database cards show zero records and “Awaiting contributions,”
|
||||
but look and behave like full destinations. That creates repeated anticipation
|
||||
followed by a low-value endpoint.
|
||||
|
||||
**Fix:** give empty registries an explicit empty-state anatomy with expected
|
||||
content, contribution action, and availability state. Keep them visible, but do
|
||||
not imply the same outcome as populated data.
|
||||
|
||||
**Suggested command:** `$impeccable onboard`
|
||||
|
||||
### P2 — Functional contrast and interaction grammar remain uneven
|
||||
|
||||
Muted database descriptions, inactive navigation, unit sublabels, and
|
||||
pagination text recede heavily. KPI filters resemble static metrics, table rows
|
||||
look selectable while only the small Edit action works, and a Search button
|
||||
remains beside an input that searches as the user types.
|
||||
|
||||
**Fix:** reserve the dimmest tone for nonessential metadata, raise informative
|
||||
copy and available navigation one contrast step, make KPI filter state
|
||||
unmistakably interactive, align desktop row behavior with mobile, and remove or
|
||||
reframe redundant Search controls.
|
||||
|
||||
**Suggested command:** `$impeccable polish`
|
||||
|
||||
## Cognitive Load
|
||||
|
||||
Five checklist failures indicate high load on ISAC: insufficient progressive
|
||||
disclosure, too many simultaneous paths, competing hierarchy, repeated
|
||||
low-information choices, and excessive visible controls for one-page results.
|
||||
Grouping itself is good, but several decision points exceed working-memory
|
||||
limits: six global destinations, eight Database categories, 17 ISAC modules,
|
||||
seven-plus pagination/search controls, and 22 repeated Edit actions.
|
||||
|
||||
## Emotional Journey
|
||||
|
||||
The Database hero creates a confident, premium entry peak. Populated cards
|
||||
promise useful intelligence, but visually equal empty categories produce a
|
||||
disappointment valley. ISAC's “Online / Authorized / Admin” state reassures
|
||||
operators, then the uniform density creates fatigue with little calm focus.
|
||||
The most important missing reassurance is a plain statement of what Add/Edit
|
||||
will do to live data.
|
||||
|
||||
## Persona Red Flags
|
||||
|
||||
**Alex, experienced optimizer:** the Database adds a cinematic layer before
|
||||
facts, empty destinations interrupt rapid lookup, and one-page registries retain
|
||||
unnecessary pagination controls. Recent registries, global data search, and
|
||||
role-aware shortcuts would accelerate expert use.
|
||||
|
||||
**Sam, keyboard and low-vision operator:** semantics and focus foundations are
|
||||
strong, but faint functional text and dozens of repeated Edit actions increase
|
||||
navigation cost. KPI links need clearer control semantics, and role/consequence
|
||||
state should be announced before mutation.
|
||||
|
||||
**Maya, first-time mobile agent:** ISAC, OSPR, WMOD, Oversight, registry, and
|
||||
resolved attributes assume insider fluency. Category icons, plain-language
|
||||
supporting labels, and meaningful empty states would reduce abandonment.
|
||||
|
||||
## Minor Observations
|
||||
|
||||
- Database categories need stronger visual identity; icons would aid recognition
|
||||
and make the incomplete final grid row feel intentional.
|
||||
- The record total “15” can overstate breadth while half the registries are
|
||||
empty; “4 registries online · 15 records” sets expectations better.
|
||||
- Unit values such as `%` and `NO UNIT` are hard to associate with the attribute
|
||||
name at a glance.
|
||||
- Module-count headers add telemetry but do not always improve task choice.
|
||||
- The maintained design sidecar is stale relative to `DESIGN.md`.
|
||||
|
||||
## Questions to Consider
|
||||
|
||||
- Is the Database index primarily a cinematic gateway or a fast lookup tool?
|
||||
- Should empty registries be destinations, contribution prompts, or roadmap
|
||||
teasers?
|
||||
- If ISAC already knows role and mode, why should every operator receive the
|
||||
same full module navigation?
|
||||
- What single sentence must a contributor understand before selecting Add?
|
||||
@@ -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."
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"files": ["src/app.html"],
|
||||
"insertBefore": "</body>",
|
||||
"commentSyntax": "html",
|
||||
"cspChecked": true
|
||||
}
|
||||
Reference in New Issue
Block a user