Whitehouse.gov Design System Deep Dive

1. Brand Overview

The White House’s digital presence has a deliberate tone: formal but accessible, authoritative but clean. It’s not trying to play in the “slick startup” or “media site” aesthetic space — this is a government brand, and the design reflects trust, tradition, and clarity.

The vibe? A restrained monumentality. Typography choices like Instrument Serif and Instrument Sans set a formal foundation but avoid the flourishes of something like Bodoni or Times. Colors pull straight from the US governmental visual language: deep navy-blacks (#0d132d, #293340), white (#ffffff), and muted grays (#d9dee8). Heavy contrast between text and background is used consistently — they want things readable, even for quickly scanning visitors.

This site has two audiences:

1. Citizens who need to find policies, announcements, and contact info.
2. The press and researchers who need authoritative documentation without distraction.

Design philosophy here: minimize UI chrome, lean on typography hierarchy, and keep palette simple. Buttons are unflashy — some even have border-radius: 0 — because the brand’s personality isn’t about playful UI, it’s about structured access to important information. You’ll notice that most interactive elements have just enough visual affordance to be discoverable, not flamboyant.

And unlike many modern sites, the White House uses large serif headings on the homepage. It communicates permanence and authority. There's no gradient noise, no over-the-top animation. Shadows are minimal, with a few subtle insets for separation (color(srgb 1 1 1 / 0.2) inset shadows) — the rest relies on borders and space to create layers.

Opinion: This is design that knows exactly where it stands. By stripping the palette down and keeping typography formal but digital-friendly, they sidestep both over-stylization and blandness.

2. Color System

2.1 Primary Colors

The primary "brand" color is #293340 — a deep blue-gray. This is the anchor against pure white backgrounds, used for text, link color, and large blocks. It evokes stability and seriousness. The secondary anchor is true white #ffffff — unsurprising, but note how it’s deployed not just for backgrounds but also text on dark backgrounds.

Another important dark tone is #0d132d — almost black navy. It’s used for header areas. It’s even more formal than #293340. The contrast between #ffffff text and #0d132d background is extremely high, well above WCAG AAA for normal text.

Grays here are not warm; #d9dee8 is a cool light gray — consistent with institutional design.

In comparison to other governmental sites (think gov.uk), this palette is slightly darker in its dark tones and less warm in its neutrals.

2.2 Complete Palette

2.3 Color Relationships

High contrast is the rule here. #ffffff on #0d132d or #293340 is strong enough even for heading-sized text under WCAG AA/AAA. Black (#000000) over white is textbook accessible. The light gray #d9dee8 works as a secondary surface against white — subtle but enough distinction for borders.

Dark mode considerations: They don’t run a dark mode variant; instead, dark backgrounds appear in specific components (headers, nav), but the rest of content is light mode by default.

2.4 Usage Guide

Works well:

• #ffffff text on #293340 background for CTA buttons.
• Deep navy sections (#0d132d) with white headings — huge readability.

Avoid:

• Using #d9dee8 for text — not enough contrast against white or navy.
• Mixing #000000 and #293340 text in same section — too imperceptible a difference, can look like an error instead of hierarchy.

3. Typography

3.1 Font Families

Two main families:

• Instrument Serif — for headings and links (yes, links).
• Instrument Sans — for buttons, captions, and some heading cases.

Source: Google Fonts (Instrument Sans). Instrument Serif appears to be custom/self-hosted.

Fallbacks not indicated in data, implying reliance on these fonts loading.

3.2 Type Scale

All extracted styles:

3.3 Hierarchy

Headings vary wildly in size — homepage hero uses huge 177px uppercase serif. That’s visual authority. Subpages tone it down to the 44–63px range. Links sometimes inherit large serif sizes, which is unusual — they’re clearly meant as prominent navigation callouts.

Body/link sizes in the 14–21px range keep reading comfortable. Minimal weight variation — most text is 400 (regular), buttons at 600.

4. Spacing & Layout

4.1 Spacing Scale

Base grid is 8px scale, but with some odd decimals (like 22.8031px) suggesting a responsive calc.

Values and usage:

4.2 Layout

Breakpoints:

• 439px / 440px — mobile threshold.
• 599px / 600px — small tablet.
• 781px / 782px — medium tablet.
• 959px / 960px — desktop entry.
• 1079px / 1080px — large desktop.
• 1440px — wide screens.

They pair variants: one “just-before” and one “exact threshold” — suggests pixel-perfect break control.

5. Visual Elements

Border radius: Done only where necessary. 0px in most places (buttons, inputs). Exceptions:

• 50% — round buttons (like carousel nav) and avatars.
• 9999px — pills and badges.
• 2px, 4px — small rounding on spans (rare).

Shadows: Minimal inset shadows with color(srgb 1 1 1 / 0.2) — acts as inner borders, not drop shadows.

Borders: Light usage. Many use white borders for separation on dark backgrounds or rgb(217, 222, 232) light gray for buttons.

6. Components

6.1 Buttons

Swiper Button Next:

• Default: transparent bg, white text, border-radius: 50%, border: 2px solid color(srgb 1 1 1 / 0.166667).
• Font: 21px sans.
• Padding: 12px.
• No hover/focus styles specified — likely minimal.

WP-Element Button:

• Default: bg #d9dee8, text #293340, padding 15px 20px, border 2px solid #d9dee8, no radius (square corners).
• Hover: bg var(--wp--preset--color--light-gray), text color changes to var(--wp--preset--color--charcoal).
• Focus: outline none, text color same as hover.

6.2 Links

Two styles:

1. Default deep blue-gray #293340 with underline; hover removes underline and flips to white — suggests links inside dark modules.
2. Default white text with underline; hover retains color but removes underline — for dark backgrounds.

6.3 Forms

Inputs:

• Email (light): white bg, black text, no border, horizontal padding 16px, no focus outline.
• Text: white bg, black text, 2px inset rgb(118,118,118) border, padding 1px 2px, no radius.
• Email (dark): transparent bg, white text, border none, padding 0 16px.

Focus states are minimal — no outline or color change.

6.4 Cards

Not explicitly listed, but given flat design, they rely on space and possibly light borders for separation. No dropshadows recorded except inset variants.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-deep-blue-gray: #293340;
  --color-black: #000000;
  --color-dark-navy: #0d132d;
  --color-light-cool-gray: #d9dee8;

  /* Typography */
  --font-instrument-serif: "Instrument Serif";
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-arial: Arial, sans-serif;

  /* Example type sizes */
  --type-h1-hero-size: 11.08rem; /* 177.333px */
  --type-h1-large-size: 3.94rem; /* 63px */
  --type-h1-medium-size: 2.78rem; /* 44.525px */
  --type-link-large-size: 2.33rem; /* 37.312px */
  --type-link-medium-size: 2.08rem; /* 33.2832px */
  --type-body-large-size: 1.31rem; /* 21px */
  --type-body-small-size: 0.88rem; /* 14px */
  --type-button-size: 0.83rem; /* 13.3333px */

  /* Spacing */
  --space-1: 1px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;
  --space-22: 22px;
  --space-22-8: 22.8031px;
  --space-24: 24px;
  --space-32: 32px;
  --space-34-9: 34.968px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-58-3: 58.3328px;
  --space-64: 64px;
  --space-350: 350px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-inset-light: color(srgb 1 1 1 / 0.2) 1px 0px 0px 0px inset;

}

8. AI Coding Assistant Prompt

# Whitehouse Design System Specification

System Prompt:  
You are a Whitehouse.gov design expert. Build UIs matching their visual language exactly.

Brand Context:  
The Whitehouse.gov site communicates authority, tradition, and clarity. It favors minimal UI chrome, a restrained palette of deep blues and whites, and formal typography in serif and sans families. Interaction feedback is subtle; content hierarchy is established through type size, color contrast, and spacing instead of heavy decoration.

## Colors
- White: #ffffff — Backgrounds, text on dark sections
- Deep Blue-Gray: #293340 — Primary text color, link default
- Pure Black: #000000 — Body text on light backgrounds
- Dark Navy: #0d132d — Header backgrounds
- Light Cool Gray: #d9dee8 — Button backgrounds, borders

## Typography
Fonts:
- Headings: "Instrument Serif"
- UI/Body: "Instrument Sans", sans-serif
- System fallback for buttons: Arial

Sizes:
| Role       | Font              | Size    | Weight | Line Height | Use |
|------------|-------------------|---------|--------|-------------|-----|
| Hero H1    | Instrument Serif  | 177.333px | 400    | 1.18        | Homepage hero titles |
| Section H1 | Instrument Serif  | 63px    | 400    | 1.08        | Major section headings |
| Medium H1  | Instrument Serif  | 44.525px| 400    | 1.18        | Subhead sections |
| Link Large | Instrument Serif  | 37.312px| 400    | 1.00        | Main nav links |
| Button     | Instrument Sans   | 16.3328px| 600   | 1.18        | Primary calls to action |

## Spacing & Grid
Base: 8px grid.  
Scale: 1px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 21px, 22px, 22.8031px, 24px, 32px, 34.968px, 40px, 48px, 50px, 58.3328px, 64px, 350px.

Buttons: padding `15px 20px` or `12px` for icon buttons.  
Section gaps: 40px–64px.

## Border Radius
- None: 0 — Inputs, square buttons
- sm: 2px — Spans
- md: 4px — Rare rounded spans
- circle: 50% — Circular buttons/icons
- full: 9999px — Pills, badges

## Shadows & Depth
Flat design, minimal depth. Use inset shadow: `color(srgb 1 1 1 / 0.2) 1px 0px 0px 0px inset` where separation is needed.

## Component Specifications

### Primary Button (wp-element-button)
Default:
```css
background-color: #d9dee8;
color: #293340;
padding: 15px 20px;
border: 2px solid #d9dee8;
border-radius: 0;
font-weight: 600;
font-size: 16.3328px;

Hover:

background-color: var(--wp--preset--color--light-gray);
color: var(--wp--preset--color--charcoal);

Focus:

outline: none;
color: var(--wp--preset--color--charcoal);

Icon Button (swiper-button-next)

Default:

background-color: transparent;
color: #ffffff;
padding: 12px;
border-radius: 50%;
border: 2px solid color(srgb 1 1 1 / 0.166667);
font-size: 21px;

Links

Dark mode link:

color: #293340;
text-decoration: underline;

Hover: remove underline, set color: #ffffff.

Light mode link:

color: #ffffff;
text-decoration: underline;

Hover: remove underline, maintain color.

Input Fields

Light email input:

background-color: #ffffff;
color: #000000;
border: none;
padding: 0 16px;
outline: none;

Dark email input:

background-color: transparent;
color: #ffffff;
padding: 0 16px;
border: none;

Text input:

background-color: #ffffff;
color: #000000;
border: 2px inset rgb(118,118,118);
padding: 1px 2px;
outline: none;

Layout & Responsive Rules

Breakpoints:

• 439px / 440px — mobile
• 599px / 600px — small tablet
• 781px / 782px — medium tablet
• 959px / 960px — desktop
• 1079px / 1080px — large desktop
• 1440px — wide desktop

Interaction Rules

• Transitions: minimal, instant feedback
• Focus indicators only where mandated — often outline: none
• Hover changes are subtle color swaps, no motion

DO List

• Use only #ffffff, #293340, #000000, #0d132d, #d9dee8
• Maintain 8px grid for spacing
• Use Instrument Serif for headings, Instrument Sans for UI text
• Keep button corners square unless specified
• Restrict shadows to inset styles only

DON'T List

• Do not use drop shadows
• Do not add extra colors
• Do not round corners on square button style
• Do not lower text contrast
• Do not animate text sizes

Code Examples

Button:

.btn-primary {
  background: #d9dee8;
  color: #293340;
  padding: 15px 20px;
  border-radius: 0;
  font-weight: 600;
  font-size: 16.3328px;
  border: 2px solid #d9dee8;
}
.btn-primary:hover { background: var(--wp--preset--color--light-gray); }

Circular Icon Button:

.btn-icon {
  background: transparent;
  color: #ffffff;
  padding: 12px;
  border-radius: 50%;
  border: 2px solid color(srgb 1 1 1 / 0.166667);
}

Input:

.input-text {
  background: #ffffff;
  color: #000000;
  border: 2px inset rgb(118,118,118);
  padding: 1px 2px;
}
.input-text:focus { outline: none; }

---

## 9. Summary

**TL;DR** — Whitehouse.gov’s design is formal, minimal, and high contrast. Deep blues and pure whites dominate. Typography is large, serif-led for headings, sans for UI. Buttons and inputs are flat, with square corners unless intentionally rounded.

**Brand Keywords**:  
- authority-minimalist  
- high-contrast  
- typography-led  
- flat-institutional