Shift5

Overview

Shift5 is the operational intelligence backbone for America's defense and transportation infrastructure. The design system embodies Tactical Minimalism—a discipline that strips away decoration to expose pure function, authority, and data clarity. The aesthetic draws from command-center interfaces and military-grade dashboards: high contrast (near-black #202020 surfaces against off-white #e9ecef text), monospace accent typography (AuxMono), and a single vivid accent color (#ff5841 coral-red) deployed strategically on CTAs and critical alerts. The UI evokes precision, control, and mission-critical reliability—users should feel they are operating sophisticated systems, not browsing marketing content.

The brand voice is direct, technical, and unadorned. Vocabulary favors operational terms: 'platform,' 'intelligence,' 'actionable insights,' 'resilience,' 'peak performance.' Tone is confident without breathlessness, authoritative without condescension. Example sentence: 'Shift5 transforms untapped operational technology into actionable intelligence—enabling peak performance and cyber resilience across every vehicle, every fleet, every mission.'

Colors

The color system is built on a near-black foundation (#202020 surface, #161a1c surface-dim) paired with a high-contrast light text layer (#e9ecef on-surface, #b9b9b9 on-surface-variant). This 10:1+ contrast ratio ensures legibility in high-stress operational contexts and reinforces the command-center aesthetic. Primary (#ff5841) is a bold coral-red reserved exclusively for CTAs, alerts, and interactive focus states—it commands attention without feeling playful. Secondary (#b9b9b9) is a neutral gray used for supporting UI elements, disabled states, and secondary buttons. Tertiary (#667481) is a muted slate for tertiary actions and status indicators. The surface stack (surface-container-lowest through surface-container-highest) provides subtle depth through incremental lightening: #0f1214 →

Typography

The type system is anchored in NonSans (a geometric sans-serif) for display, headlines, and body text, paired with AuxMono (a monospace font) for labels, form inputs, and data-heavy contexts. This pairing communicates precision: NonSans conveys clarity and authority at large scales (display: 120px, headline-lg: 48px), while AuxMono signals technical rigor and machine-readability at small scales (label-md: 12px, letter-spacing: -0.24px). All display and headline weights are 400 (regular), avoiding heaviness and maintaining the austere, command-center aesthetic. Body text (body-lg: 18px, body-md: 16px) uses 400 weight with 28px and 24px line-heights respectively, ensuring comfortable reading in dense operational dashboards. Labels use AuxMono at 12px with tight letter-spacing (-0.24px) to cr

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1024px, optimized for desktop command-center displays and responsive down to 390px mobile viewports. Page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections, md (24px) divides subsections and card groups, sm (12px) provides breathing room between related elements. The gutter (24px) defines left/right padding on the container, ensuring content never touches viewport edges. White-space is deployed strategically to reduce cognitive load: large sections of negative space (40px+ margins) between hero and content blocks signal distinct information domains. Cards and containers use md (24px) internal padding to balance density with legibility. The footer employs a 64px (xl) top margin to cr

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container layering rather than dramatic drop shadows. Level 1 (Base): surface (#202020) with no shadow, establishing the command-center baseline. Level 2 (Cards/Modals): surface-container (#1a1e21) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation. Level 3 (Elevated Modals/Popovers): surface-container-high (#242829) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), signaling prominence. Hover states elevate cards from Level 2 to Level 3 shadow (0 8px 24px rgba(0, 0, 0, 0.2)) and shift background to surface-

Shapes

The shape philosophy is Architectural Sharpness—rounded corners are minimal and functional, never decorative. Buttons and primary CTAs use lg (24px) radius, creating a subtle softness that prevents the UI from feeling harsh while maintaining geometric precision. Cards and containers use DEFAULT (8px) radius, a conservative curve that defines boundaries without drawing attention. Input fields use DEFAULT (8px) radius to align with card styling and signal form-related context. Badges and pills use full (50%) radius for maximum visual distinction from rectangular UI elements. Modals and elevated

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. button-primary uses primary (#ff5841) background with on-primary (#202020) text, AuxMono 12px label-md typography, and lg (24px) border-radius. Padding is 16px horizontal × 12px vertical (48px total height). On hover, background shifts to primary-container (#ff7a63), maintaining the accent family while signaling interactivity. On active/press, background darkens to #e64d2e. button-secondary uses secondary (#b9b9b9) background with on-secondary (#202020) text, same dimensions and typography. button-ghost has transparent background with on-surface text and a 1px outline in outline (#8b8b8b); on hover, background becomes surface-container-high (#242829) and text shifts to primary (#ff5841).

Do's and Don'ts

**Do**

• Do use primary (#ff5841) exclusively for CTAs, alerts, and focus states—never for decorative elements or backgrounds.
• Do maintain 4.5:1 minimum contrast between text and background; test all color combinations with WCAG AA standards.
• Do use AuxMono (monospace) for form labels, data displays, and technical content to reinforce precision and machine-readability.
• Do apply lg (24px) border-radius to primary buttons and elevated surfaces; use DEFAULT (8px) for cards and inputs to maintain hierarchy.
• Do layer surfaces using the surface-container stack (lowest through highest) rather than introducing new colors; this preserves the monochromatic aesthetic.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) as the default card shadow; elevate to 0 8px 24px rgba(0, 0, 0, 0.2) on hover or focus.
• Do employ lg (40px) spacing between major sections and md (24px) between subsections to create visual breathing room in dense dashboards.

**Don't**

• Don't use secondary (#b9b9b9) or tertiary (#667481) as primary accent colors; they are supporting roles only.
• Don't apply rounded corners larger than lg (24px) to any element except full (50%) for badges and pills.
• Don't introduce new colors outside the defined palette; the system is intentionally limited to reinforce tactical authority.
• Don't use blur filters, gradients, or glassmorphism effects; the aesthetic is hard-edged and command-center-inspired.
• Don't render small labels (label-md, label-sm) over busy backgrounds without text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) for legibility.
• Don't mix NonSans and AuxMono at the same scale; use NonSans for body/display and AuxMono for labels/technical content.
• Don't use hover states that reduce contrast or obscure content; all interactive feedback must maintain or improve legibility.