shd.build/DESIGN.md

name, description, colors, typography, rounded, spacing, components

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