shd.build/DESIGN.md

---
name: SHD.build
description: A precise tactical intelligence interface for The Division Resurgence community.
colors:
  operations-black: "#0a0c0d"
  terminal-black: "#0d0f10"
  terminal-surface: "#111415"
  terminal-graphite: "#141718"
  active-graphite: "#15191a"
  structural-line: "#303536"
  structural-line-soft: "#272c2d"
  field-manual-white: "#ecebe5"
  telemetry-muted: "#858b8d"
  telemetry-dim: "#5d6567"
  signal-orange: "#f6a821"
  signal-orange-hover: "#ffc45d"
  system-success: "#75c08c"
  system-danger: "#df8069"
  system-info: "#70b9d6"
  quality-standard: "#69b66f"
  quality-specialized: "#4f9ed8"
  quality-superior: "#9b68d4"
  quality-high-end: "#e4bd3f"
typography:
  display:
    fontFamily: "Barlow, Arial Narrow, Arial, Helvetica, sans-serif"
    fontSize: "clamp(3rem, 7vw, 6rem)"
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: "-0.04em"
  headline:
    fontFamily: "Barlow, Arial Narrow, Arial, Helvetica, sans-serif"
    fontSize: "clamp(2.25rem, 5vw, 4.5rem)"
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: "-0.03em"
  title:
    fontFamily: "Barlow, Arial Narrow, Arial, Helvetica, sans-serif"
    fontSize: "1.1875rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0"
  body:
    fontFamily: "Barlow, Arial Narrow, Arial, Helvetica, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "normal"
  editorial:
    fontFamily: "Source Serif 4, Georgia, serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: "normal"
  label:
    fontFamily: "Barlow, Arial Narrow, Arial, Helvetica, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: "0.08em"
rounded:
  engineered: "0px"
  avatar: "50%"
spacing:
  xs: "5px"
  sm: "8px"
  md: "12px"
  lg: "20px"
  panel: "24px"
components:
  button-primary:
    backgroundColor: "{colors.signal-orange}"
    textColor: "{colors.operations-black}"
    typography: "{typography.label}"
    rounded: "{rounded.engineered}"
    padding: "16px 22px"
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.signal-orange-hover}"
    textColor: "{colors.operations-black}"
    typography: "{typography.label}"
    rounded: "{rounded.engineered}"
    padding: "16px 22px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.field-manual-white}"
    typography: "{typography.label}"
    rounded: "{rounded.engineered}"
    padding: "16px 22px"
    height: "40px"
  input:
    backgroundColor: "{colors.terminal-black}"
    textColor: "{colors.field-manual-white}"
    typography: "{typography.body}"
    rounded: "{rounded.engineered}"
    padding: "11px"
    height: "40px"
  panel:
    backgroundColor: "{colors.terminal-graphite}"
    textColor: "{colors.field-manual-white}"
    rounded: "{rounded.engineered}"
    padding: "{spacing.panel}"
  status-chip:
    backgroundColor: "{colors.active-graphite}"
    textColor: "{colors.telemetry-muted}"
    typography: "{typography.label}"
    rounded: "{rounded.engineered}"
    padding: "5px 7px"
---

# Design System: SHD.build

## Overview

**Creative North Star: "The Strategic Operations Grid"**

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.

The 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.

**Key Characteristics:**

- 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.

## Colors

The palette combines Operations Black, Terminal Graphite, Field Manual White,
and rare Signal Orange with semantic system and item-quality signals.

### Primary

- **Signal Orange:** Primary actions, current navigation, focus, selected
  controls, important values, and SHD identity details.
- **Signal Orange Hover:** Brighter confirmation that an orange action is
  interactive, never a second decorative accent.

### Secondary

- **System Success:** Completed, approved, online, and healthy states.
- **System Danger:** Failed, rejected, blocked, destructive, and fault states.
- **System Info:** Informational system state that is neither action nor
  success.

### Tertiary

- **Quality Standard, Specialized, Superior, and High-end:** Stable
  game-semantic quality colors. They identify item quality and never replace a
  textual quality label.

### Neutral

- **Operations Black:** The persistent application canvas.
- **Terminal Black:** Recessed fields and data wells.
- **Terminal Surface:** Navigation, registry, and low-level panel surfaces.
- **Terminal Graphite:** Raised working panels and cards.
- **Active Graphite:** Hovered, selected, and locally emphasized surfaces.
- **Structural Line / Structural Line Soft:** Primary and subordinate
  separators that create hierarchy without elevation.
- **Field Manual White:** Primary readable content.
- **Telemetry Muted / Telemetry Dim:** Secondary labels and low-priority
  operational metadata.

**The Orange Discipline Rule.** Signal Orange identifies action and emphasis;
it does not cover large decorative areas or compete with semantic state colors.

**The Redundant Meaning Rule.** Color always travels with text, position, shape,
or an icon. No status or quality can depend on hue alone.

## Typography

**Display Font:** Barlow (with Arial Narrow, Arial, Helvetica, and
sans-serif fallbacks)  
**Body Font:** Barlow (with Arial Narrow, Arial, Helvetica, and
sans-serif fallbacks)  
**Editorial Font:** Source Serif 4 (with Georgia and serif fallbacks)

**Character:** Barlow gives the system voice a squared, compact, engineered
rhythm while remaining highly readable in dense interfaces. Source Serif 4 is
reserved for human-readable explanations, guide-like prose, and selected
descriptive passages so operational data and editorial knowledge remain
visibly distinct.

### Hierarchy

- **Display** (700, fluid up to 6rem, 0.9 line-height): Short public hero
  statements and major exception messages; never dense application copy.
- **Headline** (700, fluid up to 4.5rem, 0.95 line-height): Primary routed-page
  identity and strong editorial section titles.
- **Title** (700, 1.1875rem, 1.1 line-height): Panel, card, record, and module
  names.
- **Body** (400, 1rem, 1.55 line-height): Functional copy and general content;
  long passages stay near 65–75 characters per line.
- **Editorial** (400, 1rem, 1.65 line-height): Explanations, introductions, and
  long-form descriptions.
- **Label** (900, 0.625rem, 0.1em tracking): Uppercase telemetry, field labels,
  statuses, metadata, and compact actions.

**The Two-Voice Rule.** Sans-serif operates the system; serif explains it.
Never use monospace merely to make an interface look technical.

**The Telemetry Restraint Rule.** Uppercase tracked labels are short navigational
or state-bearing signals, not paragraph typography.

## Layout

The system is an aligned grid of operational regions rather than a collection
of floating cards. Public pages use centered containers up to 1640px with
responsive outer padding. ISAC uses a compact command header, sticky 210px
module rail, and a flexible registry workspace. Builder and account surfaces
use deliberate workbench columns that collapse into a task-appropriate mobile
sequence.

Spacing follows a tight 5/8/12/20px rhythm with 24px as the standard panel
inset. Related controls stay close; modules and major sections receive clearer
separation. One-pixel borders can form contiguous matrices so related options
read as one instrument.

The global header is 76px. At 900px and below, desktop navigation becomes an
explicit mobile navigation layer and multi-column operational layouts collapse.
At 700px and below, tables, filter matrices, action groups, and editors become
touch-oriented stacks or controlled horizontal registries. Interactive mobile
targets are at least 44px where space permits.

Large displays use the shared display-scale progression: 1.15 at 2200px, 1.3 at
2800px, and 1.5 at 3400px. This preserves readable density rather than simply
expanding empty space.

**The Connected Grid Rule.** Use borders, shared edges, and aligned tracks to
show relationships. Do not wrap every subsection in another card.

**The Operational Density Rule.** Public discovery may breathe; ISAC and data
workbenches prioritize scanability and efficient repeated actions.

## Elevation & Depth

SHD.build uses structural layering. Depth comes from tonal surface changes,
fine borders, clipped corners, inset active rails, and controlled overlays.
Resting cards and panels do not float. Shadows are reserved for temporary
surfaces that must detach from the document—menus, dialogs, toasts, and routed
fault consoles—and use a clear downward offset with a soft black blur.

### Shadow Vocabulary

- **Detached Menu:** `0 18px 46px #000a` for account and compact floating menus.
- **Operational Dialog:** `0 18px 60px #000` for focused quick views and review
  dialogs.
- **Transient Feedback:** `0 12px 30px #000b` for toast notifications.
- **Fault Console:** `0 24px 70px #0008` for routed exception surfaces.

**The Structural Layering Rule.** Borders and tones establish permanent
hierarchy; shadows communicate temporary detachment.

**The No Ambient Card Rule.** Ordinary panels and cards remain shadowless at
rest.

## Shapes

The default radius is zero. Buttons, fields, panels, cards, filters, badges,
dialogs, and navigation elements use square engineered geometry with one-pixel
structural borders. Select hero visuals and status consoles may use clipped
polygon corners when the silhouette reinforces an operational artifact.

Circular geometry is identity-specific: agent avatars, the SHD mark, compact
online indicators, and true radial or orbital data graphics. Pills are not a
general control shape.

**The Engineered Edge Rule.** Square is the default and rounding must have
semantic justification.

**The Identity Circle Rule.** Circular crops belong to people, the SHD emblem,
and genuinely radial information—not arbitrary controls.

## Components

Components feel tactile and technical: a press produces immediate physical
feedback, a request exposes pending text and disables repeat activation, and
focus is unmistakable without becoming ornamental.

### Buttons

- **Shape:** Square with no radius and compact uppercase label typography.
- **Primary:** Signal Orange with Operations Black text and strong weight.
- **Secondary:** Transparent or Terminal Surface with Field Manual White text
  and a Structural Line border.
- **Danger:** Dark red-toned surface or restrained danger text; destructive
  confirmation remains explicit.
- **Hover / Focus:** Brighter border, text, or surface using the control's
  semantic color. Focus-visible uses the thin Signal Orange outline.
- **Pressed / Pending:** Active controls move down 1–2px, subtly scale, and
  darken. Pending controls change their label, set `aria-busy`, and disable
  duplicate activation.

### Chips

- **Style:** Square, compact, bordered telemetry labels. Selection uses
  Signal Orange or the relevant semantic color plus explicit selected text or
  state.
- **State:** Multi-select chips remain individually removable; pending
  contributor references say `PENDING` and identify their provenance.

### Cards / Containers

- **Corner Style:** Square engineered edge.
- **Background:** Terminal Surface or Terminal Graphite according to hierarchy.
- **Shadow Strategy:** None at rest; see Structural Layering for overlays.
- **Border:** One-pixel Structural Line, with a two-pixel top signal only when a
  meaningful category or state owns it.
- **Internal Padding:** Usually 20–24px on public cards and tighter 8–14px on
  dense data registries.

### Inputs / Fields

- **Style:** Recessed Terminal Black fill, one-pixel Structural Line border,
  Field Manual White value, and compact uppercase label above.
- **Focus:** Signal Orange border and a one-pixel focus-visible outline with a
  one-pixel offset.
- **Numeric Entry:** Existing content selects on focus for efficient
  replacement.
- **Error / Disabled:** Error state uses System Danger with recovery text.
  Disabled and pending states remain readable, expose why they are unavailable,
  and prevent duplicate requests.

### Navigation

Desktop global navigation uses centered tracked labels with a thin orange
active baseline. The authenticated agent menu combines circular identity,
online state, unread count, and an explicit expanded marker. Mobile navigation
becomes a numbered, full-height operational list with visible current state and
notification counts.

ISAC navigation uses a sticky registry rail with aligned index cells, module
labels, review badges, and an inset orange current-state bar. Permission and
mode indicators remain visible in the command header.

### Segmented Choice

Two-to-six bounded choices render as one square matrix instead of a dropdown.
Radio semantics permit one active value; checkbox semantics permit additive
selection. Game-semantic icons may replace repeated text when their meaning is
clear, but accessible labels remain present.

### Searchable Assignment

Large or relational option sets use a searchable assignment instrument with a
selected summary, removable assignments, live match count, and an explicit
result action. Pending records remain usable and visibly attributed.

### Registry and Database Cards

Registry rows prioritize names, durable statuses, relationships, and edit
actions within consistent columns. Public database cards use an identity
header, icon, metadata, compact fact matrices, and optional relationship icon
rails. Facts disappear when they do not apply rather than displaying empty
placeholders.

### Toasts and Dialogs

Toasts are transient, top-right detached panels with semantic top and side
signals, clear titles, concise recovery text, and dismiss controls. Dialogs use
a darkened backdrop, orange top rule, structured header, constrained scroll
region, and explicit confirmation actions. Reduced-motion preferences remove
entrance animation.

## Do's and Don'ts

### Do:

- **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.

### Don't:

- **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.