---
version: alpha
name: Gates Foundation
description: Humanitarian authority rendered as editorial boldness — weathered-slate canvas, Gates Yellow as the singular chromatic signal, Noto Sans Condensed Black in all-caps for impact headlines, Noto Serif Condensed Light for editorial gravitas, and 7px corners that soften without yielding.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f5f3ed"  # warm off-white, used in editorial content zones

  # Ink / text
  ink: "#313a44"       # weathered slate — primary text, nav, and dark surfaces
  ink-secondary: "#696969"
  on-primary: "#313a44"  # dark text on yellow CTA — high contrast

  # Brand accent — Gates Yellow
  primary: "#ebcb00"
  primary-hover: "#ddad3b"  # --c-bg-button-tertiary-hover
  primary-active: "#c8ad00"
  on-background: "#313a44"

  # Interactive / link states
  link: "#313a44"
  link-hover: "#3860be"  # from dembrandt link hover data

  # Semantic
  error: "#d93027"  # --c-text-error
  success: "#357372"  # --c-text-green
  info: "#1b3c8e"   # --c-bg-blue

  # Borders / neutrals
  border: "#909090"        # --c-bg-button-disabled / input border
  border-light: "#bababa"
  border-subtle: "#d8d8d8"

  # Shadow tints (opaque approximations)
  shadow-soft: "#808080"  # was rgba(0,0,0,0.2) — Google format requires hex
  shadow-card: "#999999"  # was rgb(153,153,153) 0px 2px 10px -3px — Google format requires hex

typography:
  # Display — Noto Sans Condensed Black, uppercase, tight tracking
  display-hero:
    fontFamily: "Noto Sans Condensed, Noto Sans, Arial Narrow, sans-serif"
    fontSize: 80px
    fontWeight: 900
    lineHeight: 1.10
    letterSpacing: -2.4px
    fontFeature: "ss04"
  display:
    fontFamily: "Noto Sans Condensed, Noto Sans, Arial Narrow, sans-serif"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1.20
    letterSpacing: -1.2px
    fontFeature: "ss04"
  display-mid:
    fontFamily: "Noto Sans Condensed, Noto Sans, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.20
    letterSpacing: -0.8px
    fontFeature: "ss04"

  # Editorial / section headers — Noto Serif Condensed Light
  heading-editorial:
    fontFamily: "Noto Serif Condensed, Noto Serif, Georgia, serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -4px
  heading-section:
    fontFamily: "Noto Serif Condensed, Noto Serif, Georgia, serif"
    fontSize: 55px
    fontWeight: 300
    lineHeight: 1.20
    letterSpacing: -1.65px
  heading-sub:
    fontFamily: "Noto Serif, Georgia, serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.60
    letterSpacing: 0px

  # Body + UI — Noto Sans at functional weights
  body-large:
    fontFamily: "Noto Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Noto Sans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Noto Serif, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  nav-link:
    fontFamily: "Noto Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.60
    letterSpacing: 0px
  button-ui:
    fontFamily: "Noto Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0.36px
  caption:
    fontFamily: "Noto Sans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.30
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 56px
  4xl: 80px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 7px
  lg: 10px
  pill: 50px
  circle: 9999px

components:
  # Primary CTA — yellow fill, dark text
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  # Secondary — slate fill, white text
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 32px
  button-secondary-hover:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.background}"

  # Outlined / ghost — yellow border, transparent
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 32px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Card — content + image cards
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"

  # Input — email/search
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 17px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Nav bar — white/transparent on scroll
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px

  # Tag / category label
  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  # Focus ring
  focus-ring:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px 0px
---

# Gates Foundation Design System

## Overview

The Bill & Melinda Gates Foundation website operates at an unusual register for the enterprise category: it refuses to be dry. The canvas is white (`{colors.background}`) but the visual atmosphere is something closer to a high-impact editorial magazine — specifically the visual tradition of large-format NGO annual reports, where stark photography and typographic scale do the argumentative work that other organizations leave to data tables. The signature design decision is the chromatic one: `{colors.primary}`, a saturated golden yellow inherited from the Gates Foundation logo, is deployed as both a framing device (the wide yellow letterbox visible above and below the hero) and the sole CTA color. Everything else is monochrome. This restraint gives the yellow extraordinary authority — it doesn't announce itself as a design choice so much as as the organization's identity made visible.

The typeface system is the most distinctive element. Display headlines use Noto Sans Condensed Black (weight 900) in all-caps with tight negative tracking — a treatment that reads as proclamation rather than navigation. At 60–80px, compressed letterforms absorb substantial content width and create a visual density that communicates scale: these are not product features being listed, these are global health crises being named. Editorial section headers flip entirely — Noto Serif Condensed Light (weight 300) at similarly large sizes, with deeply negative tracking (`-4px` at 80px), introduces a quieter, more literary register. The alternation between the two families creates a deliberate rhetorical rhythm, the visual equivalent of alternating between a speaker at a podium and a passage of text from a book.

Depth is handled conservatively. Shadows are low-contrast and neutral, cards lift slightly on hover with a color shift to `{colors.surface}`, and the nav is clean and light. The real drama comes from photography and type at scale, not from surface treatments or gradients.

**Key Characteristics:**
- Gates Yellow (`{colors.primary}`) as the sole brand chromatic — logo color, CTA fill, and hero letterbox framing device
- Noto Sans Condensed Black at weight 900, all-caps, with `ss04` feature, for display text — proclamatory, compressed authority
- Noto Serif Condensed Light at weight 300 for editorial headings — the contrasting literary register
- Weathered slate (`{colors.ink}`) as the primary dark — not black, a slightly blue-gray that reads as considered restraint
- 7px `{rounded.md}` on buttons and inputs — mild softening without roundness
- 10px `{rounded.lg}` on cards and images — approachable without being playful
- Motion: `0.3s ease` transitions on links/buttons — brisk and purposeful
- Full-viewport hero photography with yellow letterboxing at top and bottom
- Generous vertical rhythm — `{spacing.4xl}` and `{spacing.5xl}` section spacing for impact reporting cadence
- Two-font editorial system: sans-serif for data/action, serif for narrative/context

## Colors

### Primary
- **White** (`{colors.background}`): Page canvas. Clean contrast against photography and type.
- **Weathered Slate** (`{colors.ink}`): Primary text, nav links, dark button fill. A slightly blue-gray near-black.
- **Gates Yellow** (`{colors.primary}`): Brand accent color. CTA buttons, logo background, hero letterbox framing. The one chromatic hue in the palette.

### Brand Accent
- **Yellow Hover** (`{colors.primary-hover}`): Darker amber for CTA hover — `--c-bg-button-tertiary-hover` in source CSS.
- **Yellow Active** (`{colors.primary-active}`): Pressed/active state, derived from logo asset hover color.

### Text States
- **Secondary text** (`{colors.ink-secondary}`): Subtitles, meta text, supporting copy on white surfaces.
- **Link** (`{colors.link}`): Default link color matches body text — `{colors.ink}` slate.
- **Link Hover** (`{colors.link-hover}`): On hover, links shift to a mid-tone blue — provides clear interactivity signal without introducing a competing accent.

### Semantic
- **Error** (`{colors.error}`): Form validation, alert states — `--c-text-error`.
- **Success** (`{colors.success}`): Data indicators, program milestones — `--c-text-green`, a muted teal-green.
- **Info** (`{colors.info}`): Informational badges, contextual blue — `--c-bg-blue`.

### Borders & Surfaces
- **Border** (`{colors.border}`): Default input and button outline — medium gray.
- **Border Light** (`{colors.border-light}`): Subtle dividers and inactive states.
- **Surface** (`{colors.surface}`): Warm off-white for editorial content zones and card hover states.

## Typography

### Font Family
- **Display**: `Noto Sans Condensed`, fallbacks `Noto Sans, Arial Narrow, sans-serif` — weight 900, uppercase, `font-feature-settings: "ss04"` for OpenType stylistic set 04
- **Editorial**: `Noto Serif Condensed`, fallbacks `Noto Serif, Georgia, serif` — weight 300 for light display, weight 700 for sub-headings
- **Body & UI**: `Noto Sans`, fallbacks `Arial, sans-serif` — weights 300, 400, 500, 600
- **OpenType Features**: `ss04` on Noto Sans display text; no special feature on Noto Serif

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | Maximum impact — 80px Noto Sans Condensed Black, uppercase |
| `display` | Primary hero headlines, campaign titles (60px) |
| `display-mid` | Section opener headlines (40px) |
| `heading-editorial` | Noto Serif Condensed Light, large editorial moments (80px) |
| `heading-section` | Serif editorial section headers (55px) |
| `heading-sub` | Article headers, content sub-sections (36px Noto Serif bold) |
| `body-large` | Intro paragraphs, lead text (18px) |
| `body` | Standard reading text (16px) |
| `body-small` | Noto Serif at small size — footnotes, captions with editorial tone |
| `nav-link` | Navigation links (18px medium) |
| `button-ui` | Button labels (18px semibold, 0.36px tracking) |
| `caption` | Metadata, dates, category labels |

### Principles
- **Uppercase as argument**: Noto Sans Condensed at weight 900 in all-caps is not decoration — it's the visual equivalent of a statement. Use for impact phrases, not navigation labels.
- **Serif as counterpoint**: Noto Serif Condensed Light exists to introduce deliberateness and depth after the compression of the sans-serif display. Alternate intentionally.
- **Weight contrast within family**: Noto Sans spans 300–900 in use. The contrast between caption light (300) and display black (900) is intentional and dramatic — don't collapse the range.
- **Tracking inversely proportional to size**: Large display text tracks tight (`-2.4px` to `-4px`). Small UI text carries slight positive tracking (`+0.36px` for button labels). Never add positive tracking to display-sized text.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: **8px**. The scale extends generously to `{spacing.5xl}` (96px) to accommodate the foundation's editorial section cadence, where large breathing room between major topics reinforces the weight of the subject matter.

### Grid & Container
- Max content width: approximately 1280–1330px (per `1280px` and `1330px` breakpoints)
- Hero: full-viewport photography with overlaid display text, yellow letterbox bands top and bottom
- Content sections: 2-column split (text + image/stat) and 3-column card grids
- Full-width CTA sections with slate (`{colors.ink}`) background for contrast reversal

### Whitespace Philosophy
- **Generous by conviction**: The foundation's visual voice gives each subject room to breathe. The 96px section gap says "this matters, consider it."
- **Vertical rhythm is editorial**: Section cadence mirrors long-form journalism — major beats have wide margins, sub-topics nest tightly within.
- **Photography-led sections** rely on negative space within the image itself, not additional padding.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default page surface, editorial sections |
| Subtle (Level 1) | `0px 2px 10px -3px {colors.shadow-card}` | Cards, content panels |
| Raised (Level 2) | `0px 4px 8px 0px {colors.shadow-soft}` | Modals, dropdowns |
| Focus Ring | `3px solid {colors.primary}` outline | Keyboard focus, accessibility |

**Shadow Philosophy**: Shadows are neutral and minimal. The foundation's visual drama comes from photography scale and typographic contrast — not from surface elevation. Cards lift on hover through background color shift to `{colors.surface}`, not through shadow intensification.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rules, tab indicators |
| `sm` | 4px | Badges, small tags |
| `md` | 7px | Buttons, inputs, search fields |
| `lg` | 10px | Cards, image containers |
| `pill` | 50px | Social media icon containers |
| `circle` | 9999px | Avatar circles |

The system uses a two-tier practical approach: `{rounded.md}` for interactive elements (buttons, inputs) and `{rounded.lg}` for containers and media (cards, images). The rounding is present but restrained — enough to communicate approachability without softening the editorial authority.

## Components

The complete component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Button Variants

- **`button-primary`** — Gates Yellow fill (`{colors.primary}`), dark slate text (`{colors.on-primary}`), `{rounded.md}` corners, 10px 32px padding. The sole chromatic CTA in the system.
- **`button-secondary`** — Slate fill (`{colors.ink}`), white text. Used in dark-background contexts and for secondary actions on light sections.
- **`button-outline`** — Transparent with `1px solid {colors.border}` border, slate text. For tertiary actions and less emphatic links.

### Cards

- **`card`** — White background, `{rounded.lg}` corners, soft shadow on hover. Photography cards use full-bleed image at top with text below.
- **`card-hover`** — Background shifts to `{colors.surface}` warm off-white on hover, `0.25s ease-in-out` transition.

### Inputs

- **`input`** — White fill, `1px solid {colors.border}` border, `{rounded.md}` corners, 12px 17px padding. Email newsletter input pairs with a slate button in a split component pattern.

### Badges / Tags

- **`tag`** — Warm surface fill (`{colors.surface}`), slate text, small radius (`{rounded.sm}`). Used for content category labels (Health, Education, Financial Inclusion).

### Navigation

Horizontal sticky nav on white, logo wordmark left-aligned. Navigation links use Noto Sans 18px weight 500, `{colors.ink}` text. On hover, links shift to `{colors.link-hover}` blue. Right side: Search icon. No inline CTA button in nav — the foundation defers to content CTAs within sections.

## Do's and Don'ts

### Do
- Use `{colors.primary}` yellow exclusively for primary CTAs and the brand framing device — its power comes from scarcity
- Apply `font-feature-settings: "ss04"` on all Noto Sans Condensed display text
- Use uppercase transforms only for Noto Sans Condensed at display sizes — never for body text or nav
- Pair Noto Sans Condensed Black sections with Noto Serif Condensed Light sections for editorial rhythm contrast
- Use full-viewport photography with the yellow letterbox (top/bottom bands in `{colors.primary}`) for hero modules
- Apply negative letter-spacing to display text: `-2.4px` at 80px, proportionally relaxing down the scale
- Maintain the 7px button radius (`{rounded.md}`) consistently across all interactive form elements
- Use `{colors.ink}` weathered slate — not black — for all dark surfaces and primary text

### Don't
- Don't use `{colors.primary}` yellow for decorative elements, backgrounds, or anything not actionable or brand-framing
- Don't apply Noto Sans Condensed Black at body sizes — the condensed Black is a display-only voice
- Don't introduce additional chromatic accent colors (orange, green, blue for buttons) — the system is monochrome + yellow
- Don't use positive letter-spacing on display-sized type — tracking only loosens from neutral, never tightens into positive at large sizes
- Don't round buttons beyond `{rounded.md}` (7px) — pill-shaped buttons contradict the system's editorial seriousness
- Don't use decorative gradients in UI surfaces — the foundation's visual richness comes from photography, not CSS
- Don't reduce vertical section spacing below `{spacing.2xl}` — the generous rhythm is structural, not decorative
- Don't use light-weight Noto Serif for UI labels or button text — it belongs in editorial/narrative contexts only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column, full-width cards, stacked hero |
| Mobile | 400–680px | Reduced display type, compressed navigation |
| Tablet | 680–1024px | 2-column grids begin, reduced letterbox height |
| Desktop | 1024–1280px | Full layout, 3-column card grids |
| Large Desktop | >1280px | Maximum content width, centered with generous margins |

### Touch Targets
- Buttons: 40–44px minimum height with 10px 32px padding
- Navigation links: 48px row height for touch targets
- Input fields: 44px+ height for comfortable mobile entry
- Social icon containers: `{rounded.circle}` 44px circles

### Collapsing Strategy
- Hero: 80px display → 40–48px on mobile, uppercase maintained
- Navigation: horizontal sticky nav → hamburger with full-screen overlay
- Feature grids: 3-column → 2-column → single-column stack
- Yellow letterbox: reduces in height proportionally, maintains presence
- Section spacing: 96px → 56px → 32px as viewport narrows
- Editorial serif headings compress proportionally but maintain weight contrast

### Image Behavior
- Full-viewport hero maintains aspect ratio with `object-fit: cover`
- Impact photography cards: 10px `{rounded.lg}` radius maintained at all sizes
- Logo: SVG wordmark, scales with container
- Social media images: 16:9 cards become full-width stacked on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text / dark surfaces: Weathered Slate (`{colors.ink}`)
- Primary CTA: Gates Yellow (`{colors.primary}`)
- CTA Hover: Amber (`{colors.primary-hover}`)
- Secondary text: Medium Gray (`{colors.ink-secondary}`)
- Border: Gray (`{colors.border}`)
- Surface/card hover: Warm Off-White (`{colors.surface}`)
- Link hover: Mid Blue (`{colors.link-hover}`)
- Error: Red (`{colors.error}`)

### Example Component Prompts

- "Create a hero section: full-viewport photograph behind a yellow letterbox band at top and bottom (20px `{colors.primary}` strips). Overlay a headline using Noto Sans Condensed at 80px, weight 900, all-caps, letter-spacing -2.4px, color white, font-feature-settings 'ss04'. Sub-headline in 18px Noto Serif Light, color white, line-height 1.60. Add a yellow CTA button (`{colors.primary}` background, `{colors.on-primary}` text, 7px radius, 10px 32px padding, Noto Sans 18px weight 600, 0.36px letter-spacing)."
- "Design an editorial section header: Noto Serif Condensed at 55px, weight 300, letter-spacing -1.65px, color `{colors.ink}`, line-height 1.20, followed by body text at 18px Noto Sans weight 400, `{colors.ink-secondary}`, line-height 1.60. White background with 96px vertical padding above and below."
- "Build a content card: white background, 10px border-radius, soft shadow `0px 2px 10px -3px {colors.shadow-card}`. Full-bleed image at top. Card title in Noto Sans 26px weight 900 all-caps letter-spacing null, color `{colors.ink}`. Body text 16px Noto Sans weight 400, `{colors.ink-secondary}`. Hover: background shifts to `{colors.surface}` with 0.25s ease-in-out transition."
- "Create a navigation bar: white background, sticky. Left: Gates Foundation wordmark SVG. Center: horizontal links in Noto Sans 18px weight 500, `{colors.ink}`, hover color `{colors.link-hover}` with 0.3s ease transition. Right: Search icon. No border — separation from hero via yellow letterbox below."
- "Build a newsletter sign-up row: white background, 80px vertical padding. Headline 40px Noto Sans Condensed weight 900 all-caps, `{colors.ink}`, letter-spacing -0.8px. Below: a flex row — email input (white bg, 1px solid `{colors.border}`, 7px radius, 12px 17px padding, Noto Sans 16px) + subscribe button (`{colors.ink}` bg, white text, 7px radius, 10px 32px padding, Noto Sans 18px weight 600)."

### Iteration Guide

1. Start with a white canvas (`{colors.background}`) and slate typography (`{colors.ink}`) — the system is fundamentally monochrome
2. Reserve `{colors.primary}` yellow for exactly two roles: primary CTA buttons and hero letterbox framing — nowhere else
3. Display type formula: Noto Sans Condensed + weight 900 + uppercase + `ss04` + negative tracking — all four elements together, never partial
4. Editorial counterpoint: follow a compressed-sans section with a Noto Serif Condensed Light section for tonal contrast
5. Color hierarchy: `{colors.ink}` for primary text, `{colors.ink-secondary}` for supporting text, `{colors.link-hover}` blue only on interactive link hover
6. Radius rule: 7px (`{rounded.md}`) for interactive elements, 10px (`{rounded.lg}`) for containers — never larger
7. Section spacing: at least `{spacing.4xl}` (80px) between major content sections — the generous rhythm is deliberate

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gates Foundation. Brand names and trademarks belong to their respective owners.