America.gov

Overview

America.gov is the authoritative digital gateway to U.S. federal services, embodying a philosophy of "Civic Clarity"—a design movement that prioritizes transparency, accessibility, and direct communication over ornament. The brand serves citizens seeking reliable government information, transforming bureaucratic complexity into intuitive pathways. The aesthetic is refined institutional modernism: clean serif headlines (Rhymes Text at 96px, 400 weight) paired with humanist sans-serif body copy (Helvetica Now Text at 16px), white backgrounds (#ffffff), and a restrained primary blue (#0052cc) reserved exclusively for actionable elements. The interface evokes trust through restraint: generous whitespace, clear hierarchy, and purposeful color usage create a sense of official authority without coldness.

The brand voice is direct, reassuring, and civic-minded. Vocabulary favors clarity over jargon: "start here" rather than "initiate navigation," "replace my social security card" rather than "SSA credential renewal." Tone is patient and non-judgmental, acknowledging that citizens may be stressed or unfamiliar with processes. Example sentence in brand voice: "Whatever you need from government, start here."

Colors

The color system is anchored in institutional restraint. Primary (#0052cc) is a confident federal blue used exclusively on call-to-action buttons, focus states, and critical links—it appears sparingly to maximize impact and signal actionability. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (surface-container-lowest #f3f3f3, surface-container #e9ecef, surface-container-high #e0e3e8) to create subtle visual separation without visual noise. On-surface text is a deep navy (#000c1f, not pure black) for reduced eye strain and improved readability at 16px body size. Secondary colors are reserved for status indicators: success uses a muted green (#1b5e20 text on #e8f5e9 background), info uses a calm blue (#0d47a1 on #e3f2fd), warning uses amber (#e65100

Typography

The type system establishes hierarchy through serif-sans pairing and weight discipline. Display and headline levels (display 96px, headline-lg 56px, headline-md 40px) use Rhymes Text, a serif typeface that conveys authority and permanence—appropriate for a government portal. Body and label levels use Helvetica Now Text, a humanist sans-serif that ensures legibility at small sizes and on screens. Font weights are minimal: display/headlines use 400 (regular), body uses 400, and labels use 500 (medium) for emphasis. Line heights are generous (display 104px, headline-lg 64px, body-md 24px) to support readability and reduce cognitive load for users navigating complex information. Letter-spacing is slightly negative on large headlines (-0.02em) to tighten the serif letterforms, while body text u

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fixed container on desktop while allowing full-bleed sections for hero imagery and accent backgrounds. The gutter is 24px (md spacing), providing breathing room between columns without excessive whitespace. Page rhythm is established through lg spacing (40px) between major sections, creating clear visual breaks that guide users through content. The hero section uses a large search input (56px height, 2px border in outline-variant) as the primary focal point, positioned below a 96px headline. Cards use md padding (24px) internally and are separated by md spacing (24px) vertically, creating a consistent rhythm. Container max-width of 1280px ensures text lines remain readable (50–75 characters per line at 16px b

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than color shifts. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.06)) for minor UI elements like badges, md (0 4px 12px rgba(0, 0, 0, 0.1)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for elevated surfaces like dropdowns or overlays. Primary buttons receive a branded shadow (0 4px 12px rgba(0, 82, 204, 0.15)) that reinforces their actionability; on hover, this shadow intensifies to rgba(0, 82, 204, 0.25) with a simultaneous background shift to #003d99. Cards have a 1px border in sur

Shapes

The shape philosophy is "Civic Softness"—rounded corners signal approachability and modernity while maintaining the formality of institutional design. Buttons and inputs use full radius (40px border-radius), creating pill-shaped elements that feel contemporary and are easier to tap on mobile. Cards and containers use lg radius (12px), providing subtle rounding that softens edges without appearing playful. Badges use DEFAULT radius (6px), a middle ground that distinguishes them from buttons while maintaining visual consistency. The search input uses full radius (40px) to emphasize its role as t

Components

Action Elements Buttons are the primary interactive elements and must always use the full radius (40px). The primary button uses background {colors.primary} (#0052cc), text color {colors.on-primary} (#ffffff), and label-md typography (16px, 500 weight). Padding is 10px 24px, creating a 44px total height. On hover, the background shifts to #003d99 and shadow intensifies to 0 4px 12px rgba(0, 82, 204, 0.25). On focus, add a 2px solid outline in {colors.primary} with 2px outlineOffset. The secondary button uses background {colors.surface-container-lowest} (#f3f3f3), a 1px border in {colors.outline-variant} (#b0b8c1), and the same padding/height as primary. On hover, background becomes {colors.surface-container-low} (#eeeff2). Transition all state changes over 200ms using ease timing.

###

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0052cc) exclusively on buttons, links, and focus states—never on backgrounds or decorative elements.
• Do maintain 24px (md spacing) gutters and 40px (lg spacing) between sections to create visual breathing room.
• Do pair Rhymes Text serif headlines with Helvetica Now Text sans-serif body copy to establish clear hierarchy.
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) to cards and use 1px borders in {colors.surface-variant} to define edges.
• Do use full radius (40px) on buttons and inputs to signal interactivity and approachability.
• Do test all interactive elements with keyboard navigation and ensure focus states use 2px outline in {colors.primary}.

**Don't**

• Don't use pure black (#000000) for text—use {colors.on-surface} (#000c1f) to reduce eye strain and maintain the refined aesthetic.
• Don't apply shadows stronger than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12))—excessive depth contradicts the clean, institutional aesthetic.
• Don't mix serif and sans-serif fonts within the same hierarchy level; headlines are always Rhymes Text, body is always Helvetica Now Text.
• Don't use secondary or tertiary colors on primary CTAs—primary (#0052cc) is reserved for the most important actions.
• Don't reduce padding below sm (12px) on interactive elements; insufficient spacing increases accidental activation risk.
• Don't apply color to text links without also providing an underline or other non-color indicator for colorblind users.