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