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 serves active agents as 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 uses the same identity in an
efficient control surface.

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

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

## Brand Identity

SHD.build uses the two-color Core Segments identity. The emblem connects the
orange Division signal with ISAC's role as the site's analytic system:

- Three unequal Signal Orange arc segments form the outer circle. Each segment
  has square ends.
- The widest break sits in the upper-right quadrant and contains one detached
  Signal Orange square, which represents a data packet.
- A Field Manual White open square forms the ISAC core at the center.

Keep the emblem in Signal Orange and Field Manual White on Operations Black,
Terminal Black, or another approved dark surface. SHD.build has no one-color
emblem. Do not close the arc gaps, equalize the segments, remove the data
packet, fill the ISAC core, add letters to the emblem, or recolor either part.
If a placement cannot reproduce both colors, use a dark holding surface or omit
the emblem.

The standard lockup pairs the emblem with the heavy angular `SHD.build`
wordmark. Set `SHD` in Field Manual White and `.build` in Signal Orange. Place
the uppercase descriptor `RESURGENCE DATA & TOOLS` below the wordmark in
restrained telemetry type. Do not substitute another descriptor.

Use the complete lockup in the 76px global header and shared footer. The header
uses a 38px emblem; keep the wordmark and descriptor compact enough to preserve
the navigation grid. Mobile headers may use the emblem alone when the complete
lockup would crowd navigation. Favicons and app icons use the emblem without
text. Small-size artwork must retain both colors, widen the arc gaps where the
pixel grid requires it, and keep the packet and open core distinct.

Treat the emblem as decorative when visible `SHD.build` text names the product.
Give an emblem-only home link the accessible name `SHD.build home`. Preserve
the approved colors and full opacity in focus, disabled, and compact contexts;
use text or control styling to communicate state instead of fading the mark.
The Field Manual White core and Signal Orange arcs must remain distinct from
their background at every delivered size.

## Colors

The palette uses Operations Black, Terminal Graphite, Field Manual White, rare
Signal Orange, and 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:** Confirms that an orange action accepts input; never
  use it as a 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.** Use Signal Orange for action and emphasis. Keep
it out of large decorative areas and away from semantic state colors.

**The Redundant Meaning Rule.** Pair color with text, position, shape, or an
icon. A status or quality cannot 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 a squared, compact, engineered voice
that remains readable in dense interfaces. Reserve Source Serif 4 for
explanations, guide-like prose, and selected descriptive passages. Keep
operational data distinct from editorial knowledge.

### 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. Do
not use monospace 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 uses an aligned grid of operational regions. Public pages use
centered containers up to 1640px with responsive outer padding. ISAC uses a
compact command header, sticky 210px module rail, and flexible registry
workspace. Builder and account surfaces use 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. The scale preserves readable density and avoids
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. Use shadows for temporary surfaces that
detach from the document: menus, dialogs, toasts, and routed fault consoles.
Give each a clear downward offset and 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 identifies agent avatars, the SHD mark, compact online
indicators, and radial or orbital data graphics. Do not use pills as 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 radial information, not arbitrary controls.

## Components

Components feel tactile and technical. A press produces physical feedback; a
request exposes pending text and blocks repeat activation; focus remains clear
without ornament.

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