NHTSA

Overview

NHTSA is a civic-authority digital platform serving the National Highway Traffic Safety Administration. The design system embodies 'Civic Clarity'—a modernized government aesthetic that balances institutional gravitas with urgent, actionable safety messaging. The interface prioritizes rapid information access and task completion (vehicle recall searches, safety ratings, incident reporting) through a bold, high-contrast color scheme and hierarchical typography. The emotional response is one of competence and trustworthiness: users should feel confident they are accessing authoritative, up-to-date vehicle safety data.

The brand voice is direct, instructional, and empathetic. Vocabulary favors plain language over jargon; sentences are short and imperative ('Check for recalls,' 'Report a safety problem'). The tone never condescends but assumes users may be unfamiliar with automotive terminology. Example sentence: 'Your vehicle's VIN is a 17-character code on your registration—we use it to check for active recalls.'

Colors

The color system is anchored by a primary blue (#0075b7) that signals authority, trust, and actionability—it appears on all primary CTAs, navigation highlights, and focus states. This blue is paired with a secondary gold (#ffcc06) used exclusively for high-priority alerts and recall notifications, creating visual urgency without relying on red alone. A supporting teal (#35bbc3) provides a tertiary accent for secondary actions and informational badges. The surface stack uses a clean white (#ffffff) as the primary background with carefully calibrated grays (surface-container-low: #e9ecef, surface-container-high: #dfe1e2) for layering and depth. Text defaults to near-black (#1b1b1b) for maximum readability at 16px body size. Error states use a civic red (#bf1e2d) reserved for critical warning

Typography

The type system uses two families: Roboto for body and display text (providing modern, geometric clarity), and Source Sans Pro Web for labels, buttons, and form elements (offering slightly more humanistic warmth in interactive contexts). Display text (45–60px, weight 900) anchors hero sections with maximum impact; headline-lg (40px, weight 700) introduces major sections; headline-md (28px, weight 700) breaks up content regions. Body text runs at 16px (weight 400, line-height 24px) for standard paragraphs, with 18px reserved for introductory copy. Labels and button text use Source Sans Pro at 16px weight 700 to ensure clickable elements stand out. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. Letter-sp

Layout

The page uses a 12-column fluid grid with a max-width container of 1280px, centering content on desktop while allowing full-width hero imagery. The spacing scale follows an 8px unit system: gutter spacing between major sections is 40px (lg), card padding is 24px (md), and internal element spacing is 12px (sm). The hero section spans full width with a semi-transparent dark overlay (rgba(0, 0, 0, 0.55)) over background imagery, ensuring text legibility. Below the hero, the 'Check for Recalls' section uses a 2-column layout on desktop (left: form inputs, right: tab navigation) that collapses to single-column on mobile. Cards within content regions use 24px padding with 12px gaps between them. The alert banner (Recall Alert) sits at full width with 16px vertical padding and 24px horizontal pad

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background layering rather than dramatic drop shadows. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Cards & Inputs): 1px solid border in outline-variant (#adb5bd) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) for subtle separation. Level 3 (Buttons & Interactive): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover, creating tactile lift. Level 4 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) combined with a semi-transparent dark overlay (rgba(0, 0, 0, 0.7)) and backdrop-filter: blur(4p

Shapes

The shape philosophy is 'Civic Precision'—sharp, minimal corner radii that convey institutional formality while remaining modern and approachable. Buttons and form inputs use 4px (0.5rem / DEFAULT) border-radius, creating a subtle softness without appearing playful. Cards and modals use 6px (0.75rem / md) for slightly more breathing room. The alert banner uses no border-radius (0px) to emphasize its banner-like, full-width nature. Tab buttons have no border-radius on the top edge (borderRadius: 4px 4px 0px 0px) to create a connected, tab-like appearance. Badges and pills use 9999px (full) for

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#0075b7), text-color: white, padding: 12px 20px, height: 44px, border-radius: 4px, and font-weight: 700. On hover, background shifts to {colors.primary-container} (#005ea2) with a 150ms transition. On active/pressed, background becomes {colors.primary-fixed-dim} (#1a4480). Secondary buttons are transparent with a 2px solid border in primary blue; on hover, they gain a light background (surface-container-high: #dfe1e2). The 'REPORT A SAFETY PROBLEM' button in the top-right uses primary styling with uppercase label-md typography. Tab buttons (Vehicle, Car Seat, Tire, Equipment) are transparent with no border; the active tab gains a 3px solid bottom border in primary blue and t

Do's and Don'ts

**Do**

• Do use the primary blue (#0075b7) for all primary CTAs, focus states, and active navigation to create consistent affordance.
• Do apply the secondary gold (#ffcc06) exclusively to high-priority alerts and recall notifications to signal urgency without overuse.
• Do maintain 16px body text with 24px line-height for all body copy to ensure readability at standard viewing distances.
• Do use 40px (lg spacing) between major sections and 24px (md spacing) for card padding to create clear visual rhythm.
• Do apply the 150ms ease-in-out transition to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use Source Sans Pro Web at weight 700 for all button and label text to ensure interactive elements stand out from body text.
• Do reserve the 4px border-radius for buttons and inputs, 6px for cards, and 9999px for badges to create a clear shape hierarchy.

**Don't**

• Don't use the secondary gold (#ffcc06) as a background for non-alert content; it is reserved for high-priority notifications only.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) outside of modals and overlays; excessive depth flattens the visual hierarchy.
• Don't use border-radius values between 7px and 8998px; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain consistency.
• Don't set button padding below 12px 20px or height below 44px; smaller buttons reduce touch target size and accessibility.
• Don't use letter-spacing wider than 0.1em on body text; it reduces readability and feels scattered.
• Don't apply text-shadow to body text; reserve it for small labels (12–14px) over busy backgrounds only.
• Don't use more than two font families in a single component; Roboto and Source Sans Pro Web are the only approved families.