Brand

Identity

US Foreign Policy is built on the U.S. Web Design System with a navy primary, a warm-red accent, Merriweather headings, and Public Sans body text; this page lists every brand token and media asset so a designer, a developer, or an AI assistant can describe or match the site in one hop.

Design tokens

Read this block programmatically; values are generated at build time from the Sass theme (src/sass/_uswds-theme.scss) and the USWDS token source, so the page cannot drift from the stylesheet.

name: US Foreign Policy
url: https://usforeignpolicy.org
updated: 2026-10-19
standard_followed: https://llmbestpractices.com
design_system: U.S. Web Design System (USWDS) 3
fonts:
  heading: "Merriweather"
  body: "Public Sans"
  mono: "Roboto Mono"
type_scale:
  h1: "2xl"  # USWDS size token, serif family
  body: "sm"  # USWDS size token, sans family
colors:
  light:
    primary-lightest: "#ecf1f7"  # blue-warm-5
    primary-lighter: "#e1e7f1"  # blue-warm-10
    primary-light: "#98afd2"  # blue-warm-30
    primary: "#0050d8"  # blue-warm-60v
    primary-vivid: "#1a4480"  # blue-warm-70v
    primary-dark: "#1a4480"  # blue-warm-70v
    primary-darker: "#162e51"  # blue-warm-80v
    secondary-lighter: "#f4e3db"  # red-warm-10
    secondary-light: "#dca081"  # red-warm-30
    secondary: "#d54309"  # red-warm-50v
    secondary-vivid: "#d54309"  # red-warm-50v
    secondary-dark: "#9c3d10"  # red-warm-60v
    secondary-darker: "#63340f"  # red-warm-70v
    base-lightest: "#f1f3f6"  # gray-cool-4
    base-lighter: "#dfe1e2"  # gray-cool-10
    base-light: "#a9aeb1"  # gray-cool-30
    base: "#71767a"  # gray-cool-50
    base-dark: "#565c65"  # gray-cool-60
    base-darker: "#3d4551"  # gray-cool-70
    base-darkest: "#1c1d1f"  # gray-cool-90
logo: https://usforeignpolicy.org/images/usfp-logo.png
favicon: https://usforeignpolicy.org/images/usfp-favicon.png
og_image: https://usforeignpolicy.org/images/og-default.jpg
per_page_og_image: https://usforeignpolicy.org/images/<article-slug>-hero.jpg
theme_color: "#162e51"

Logo

The wordmark is the site name set in Merriweather Bold, with a square "USF" mark in the secondary (warm red) color. The raster logo below is the publisher logo used in structured data and as the touch icon.

File: /images/usfp-logo.png (PNG, 1024×1024, 381 KB)
Usage: keep the mark on a white or base-lightest background; do not recolor it, and do not pair it with any government seal or banner. This is an independent publication.

Favicon

Declared on every page as <link rel="icon" type="image/png" sizes="32x32">. File: /images/usfp-favicon.png (PNG, 32×32).

Color palette

All colors are USWDS theme tokens; the swatches below are rendered with the same utility classes the site uses. Values are the light-mode palette; the site has no separate dark mode and respects forced-colors mode through USWDS.

Primary (navy)

Primary (navy) theme tokens
Theme token	USWDS system token	Value	Role
`primary-lightest`	`blue-warm-5`	`#ecf1f7`	Primary tints
`primary-lighter`	`blue-warm-10`	`#e1e7f1`	Primary tints
`primary-light`	`blue-warm-30`	`#98afd2`	Primary tints
`primary`	`blue-warm-60v`	`#0050d8`	Links, buttons, primary actions
`primary-vivid`	`blue-warm-70v`	`#1a4480`	Focus and active primary states
`primary-dark`	`blue-warm-70v`	`#1a4480`	Links (visited/hover states)
`primary-darker`	`blue-warm-80v`	`#162e51`	Headings, wordmark, theme-color

Secondary (warm red)

Secondary (warm red) theme tokens
Theme token	USWDS system token	Value	Role
`secondary-lighter`	`red-warm-10`	`#f4e3db`	Accent tints
`secondary-light`	`red-warm-30`	`#dca081`	Accent tints
`secondary`	`red-warm-50v`	`#d54309`	Accent
`secondary-vivid`	`red-warm-50v`	`#d54309`	Logo mark, stat rules, focus ring
`secondary-dark`	`red-warm-60v`	`#9c3d10`	Category eyebrow labels, falling deltas
`secondary-darker`	`red-warm-70v`	`#63340f`	Accent (dark)

Base (cool gray)

Base (cool gray) theme tokens
Theme token	USWDS system token	Value	Role
`base-lightest`	`gray-cool-4`	`#f1f3f6`	Card media backgrounds, light panels
`base-lighter`	`gray-cool-10`	`#dfe1e2`	Borders, table stripes
`base-light`	`gray-cool-30`	`#a9aeb1`	Borders
`base`	`gray-cool-50`	`#71767a`	Dividers, meta separators
`base-dark`	`gray-cool-60`	`#565c65`	Meta text, captions, source lines
`base-darker`	`gray-cool-70`	`#3d4551`	Body text (dark)
`base-darkest`	`gray-cool-90`	`#1c1d1f`	Body text

Typography

Headings: Merriweather — The quick brown fox jumps over the lazy dog
Body: Public Sans — The quick brown fox jumps over the lazy dog
Code: Roboto Mono — The quick brown fox jumps over the lazy dog
Weights in use: Light (300), Regular (400), Bold (700), plus italics; all served as self-hosted woff2 from USWDS (no third-party font requests).
Type scale: USWDS size tokens; h1 is 2xl and body text is sm. Heading line-height token 2, body line-height token 3.

Media assets

Downloadable brand and social assets
Asset	Format	Pixels	Size	Used for	Link
Logo	PNG	1024×1024	381 KB	Publisher logo (JSON-LD), apple-touch-icon	Download
Favicon	PNG	32×32	2 KB	Browser tab icon	Download
Default social image	JPEG	1200×630	55 KB	Fallback Open Graph / Twitter card	Download

Per-article social images follow the pattern https://usforeignpolicy.org/images/<article-slug>-hero.jpg (JPEG, 1600×800 nominal; 38 files at the time of this build). The default card is 1200×630.

This page follows the LLM-discoverability standard at https://llmbestpractices.com.