Northrop Grumman

Overview

Northrop Grumman's design system embodies **Technological Precision Minimalism**—a high-contrast, data-forward aesthetic that projects authority, clarity, and cutting-edge capability. The brand serves defense, aerospace, and space sectors where precision and trust are non-negotiable. The UI employs a stark white-on-dark hero canvas punctuated by a commanding deep navy blue (#00269a) accent, evoking the clarity of satellite imagery and the precision of advanced systems. The visual language is intentionally austere: generous whitespace, sharp geometric forms, and a restrained color palette create an atmosphere of technical competence and institutional confidence.

The brand voice is direct, authoritative, and solution-focused. Northrop Grumman speaks in declarative statements: "Outpacing Every Threat," "Accelerating Defense." The tone avoids hyperbole; instead, it grounds claims in engineering rigor and measurable capability. Example sentence in brand voice: "Our 95,000 engineers define possible every day—transforming complex defense challenges into advanced systems that protect and enable."

Colors

The color system is built on a **high-contrast, institutional foundation** where white (#ffffff) and near-black (#1e1e1e) form the primary surface stack, with a commanding deep navy primary accent (#00269a) reserved for calls-to-action, focus states, and brand-critical interactive elements. Primary (#00269a) is used exclusively on buttons, links, and active states—it is the signature accent that signals interactivity and brand authority. On hover, primary transitions to primary-container (#194ae0), a slightly lighter blue that maintains visual hierarchy while signaling state change. Secondary (#007bff) provides a supporting accent for secondary CTAs and status indicators, distinct from primary to avoid confusion. Tertiary (#222222 to #333333) anchors dark-mode surfaces and text hierarchies

Typography

The typography system pairs **FuturaMaxi and Futura PT** (geometric, technical sans-serifs) for headlines and UI labels with **Arial/Helvetica** for body text, creating a deliberate contrast between the brand's precision-forward identity (Futura's engineered geometry) and accessible, familiar body copy. Display (57.6px, 600 weight, -0.04em tracking) commands hero sections with monumental authority; Headline-lg (40px, 600 weight) anchors section introductions; Body-md (16px, 400 weight, 24px line-height) ensures readability at standard viewing distances. Label-md (13.008px, 600 weight) is applied to buttons and form labels with 0.01em tracking, tightening the letterspace to reinforce technical precision. On small labels over busy backgrounds (e.g., badge overlays on imagery), apply text-sha

Layout

The layout employs a **12-column fluid grid** with a 1200px container max-width, maintaining responsive flexibility on mobile (single column) and tablet (6-column) breakpoints. Page rhythm is governed by the spacing scale: lg (40px) separates major sections, md (24px) groups related content, sm (12px) provides breathing room within components. The gutter width is 24px, consistent with md spacing, creating visual cohesion between grid columns and component padding. White-space is generous and intentional—the design avoids visual clutter by using surface-container layers sparingly and reserving color contrast for interactive elements. Hero sections occupy full viewport height with centered, large-scale typography (57.6px display text) and a single, prominent CTA button. Secondary sections us

Elevation & Depth

Depth is conveyed through **subtle shadow layering and backdrop blur effects** rather than aggressive drop shadows. Level 1 (Base surfaces) uses no shadow, relying on color contrast and borders for definition. Level 2 (Standard cards and overlays) applies box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), creating a soft separation from the background. Level 3 (Modals and elevated panels) uses box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) combined with backdrop-filter: blur(10px) and background: rgba(21, 21, 21, 0.9), producing a frosted-glass effect that emphasizes modal prominence. The search modal ov

Shapes

The shape language is **Architectural Sharpness**—a deliberate rejection of soft, rounded forms in favor of precise, engineered geometry that reflects aerospace and defense engineering. Buttons use sm (2px) border-radius, creating a subtle, technical edge that avoids the softness of fully rounded corners while remaining approachable. Cards and containers use md (8px) border-radius, balancing precision with usability. Modals and elevated panels use lg (15px) border-radius, providing visual distinction while maintaining the sharp aesthetic. Pill-shaped elements (badges, toggle buttons) use full

Components

Action Elements Buttons are the primary interactive affordance. **Button-primary** uses background: {colors.primary} (#00269a), text-color: {colors.on-primary} (#ffffff), padding: 12px 10px, height: 40px, rounded: {rounded.sm} (2px), and typography: {typography.label-md} (13.008px, 600 weight). On hover, background transitions to {colors.primary-container} (#194ae0) with transition: background-color 0.2s ease, signaling state change without jarring contrast. **Button-secondary** uses transparent background with border: 1px solid {colors.primary}, rounded: {rounded.full} (9999px), and padding: 12px 24px, creating a hollow variant for tertiary actions. On hover, background becomes {colors.surface-container-high} (#d8dce1) with the same 0.2s ease transition.

Containers & Surfaces **C

Do's and Don'ts

**Do**

• Do use primary (#00269a) exclusively for CTAs, focus states, and brand-critical interactions—it is the signature accent that commands attention.
• Do maintain high contrast ratios (7:1 for body text on surface, 4.5:1 minimum for secondary text) to ensure accessibility across all user contexts.
• Do apply generous whitespace (lg spacing for section breaks, md spacing for component padding) to avoid visual clutter and reinforce the austere, technical aesthetic.
• Do use Futura PT for headlines and labels to reinforce the brand's precision-forward identity; reserve Arial/Helvetica for body text to ensure readability.
• Do apply box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) to elevated surfaces (cards, overlays) to create subtle depth without visual noise.
• Do use 2px border-radius on buttons and 8px on cards to maintain the Architectural Sharpness aesthetic while preserving usability.

**Don't**

• Don't use secondary (#007bff) or tertiary (#222222) as primary CTAs—primary (#00269a) is reserved for the most critical actions.
• Don't apply border-radius greater than lg (15px) to standard UI elements; excessive rounding contradicts the technical, engineered aesthetic.
• Don't use soft shadows (blur > 12px) on standard cards; reserve blur(10px) and larger shadows for modals and elevated panels only.
• Don't mix Futura and Arial in headlines; maintain typographic hierarchy by using Futura for all display and headline levels.
• Don't apply color overlays or gradients to hero imagery without maintaining sufficient contrast for readable text (minimum 4.5:1 ratio).
• Don't use more than 3 colors in a single component; the palette is intentionally restrained to reinforce institutional authority and clarity.