# UNICEF USA design system

> Captured from https://www.unicefusa.org/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/unicef-usa/). An independent analysis for reference: UNICEF USA and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

UNICEF USA runs a dark #000000 ground under white type, with a #00bdf2 sky blue header band and #ee3224 red pills for giving. Headlines are Barlow Condensed at 70px, weight 600, set in uppercase, and body copy uses Yantramanav at 20px. Buttons are fully rounded pills, and the red reads at 5.1:1 on black.

- Theme: dark
- Mood: dark, condensed, uppercase, pill buttons, blue and red
- Category: Nonprofit

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 21.0:1 on the background |
| Accent | `#ee3224` | Primary actions |
| Highlight | `#00bdf2` | Brand color in artwork, marks and badges |
| Border | `#878c91` | Hairlines and dividers |

Full palette, most used first: `#000000`, `#ffffff`, `#00bdf2`, `#ee3224`, `#003e5e`, `#e1f4fd`, `#ff7800`.

## Typography

- **Yantramanav**: body, 58.6% of the text. Use Yantramanav. Yantramanav is free under the SIL Open Font License.
- **Barlow Condensed**: display, 37.5% of the text. Use Barlow Condensed. Barlow Condensed is free under the SIL Open Font License.
- **Roboto Condensed**: display, 3.9% of the text. Use Roboto Condensed. Roboto Condensed is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Barlow Condensed | 70px | 600 | 1 | 0 |
| Heading | Barlow Condensed | 36px | 600 | normal | 0 |
| Subheading | Barlow Condensed | 28px | 600 | 1.4 | 0 |
| Body | Yantramanav | 20px | 500 | 1.5 | 0 |
| Small | Yantramanav | 18px | 400 | normal | 0 |

Sizes in use, largest first: 70px, 36px, 32px, 28px, 26px, 24px, 22px, 20px, 18px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 26px, 35px, 40px, 56px.

## Shape

Corner radii, smallest first: 8px, 10px, pill (9999px).

No shadows: depth comes from color and borders.

## Components

### Primary button ("DONATE NOW")

- Fill: #ee3224
- Text: #ffffff, 26px at weight 600
- Border: none
- Corner: pill (9999px)
- Height: 43px, padding 0px 16px

### Secondary button ("TRICK OR TREAT")

- Fill: transparent
- Text: #ff7800, 26px at weight 600
- Border: 2px solid #ff7800
- Corner: pill (9999px)
- Height: 43px, padding 0px 16px

### Card

- Fill: transparent
- Border: 1px solid #878c91
- Corner: 10px
- Shadow: none

## Do

- Set headlines in a condensed face, uppercase, large and in the brand blue.
- Use pill shaped buttons and keep red for the giving actions only.
- Let a black ground make photography and blue headings feel urgent.

## Don't

- Mix in a serif: every size comes from two condensed and plain sans families.
- Use the sky blue for body copy; it is reserved for display type and the header band.
- Square off the buttons: the main actions here are full pills.

## CSS variables

```css
:root {
  --color-background: #000000;
  --color-surface: #ffffff;
  --color-text: #ffffff;
  --color-accent: #ee3224;
  --color-highlight: #00bdf2;
  --color-border: #878c91;
  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --text-display: 70px;
  --weight-display: 600;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --text-heading: 36px;
  --weight-heading: 600;
  --font-subheading: "Barlow Condensed", system-ui, sans-serif;
  --text-subheading: 28px;
  --weight-subheading: 600;
  --font-body: "Yantramanav", system-ui, sans-serif;
  --text-body: 20px;
  --weight-body: 500;
  --font-small: "Yantramanav", system-ui, sans-serif;
  --text-small: 18px;
  --weight-small: 400;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 26px;
  --space-10: 35px;
  --space-11: 40px;
  --space-12: 56px;
  --radius-1: 8px;
  --radius-2: 10px;
  --radius-3: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.