Potomac Institute · Web Brand Guidelines

Edition 2026 · v1.0

A visual standard for independent thought.

The web brand system for the Potomac Institute for Policy Studies — logo, the Core Eight palette, type, and the components needed to rebuild potomacinstitute.org.

Contents

01Logo
02Core Eight
03Accessibility
04Typography
05Buttons & Links
06Forms
07Navigation
08Cards
09Tags & Alerts
10Data Viz
11Grid & Spacing
12Imagery & Voice

01 / Logo

The Seal

The round seal is the Institute's single mark. The Σ with B and G represents the sum of knowledge across boundaries; the waves reference the Potomac. Never redraw, recolor outside approved versions, or separate its parts.

Primary — Blue Deep

Default on white & light

Legacy Blue

Existing assets only; phase out

Reversed — White

On Blue Deep, Violet, Foundry

One-color Black

Print, fax, legal documents

Clear space

Keep a minimum margin of ¼ the seal's diameter on all sides. No text, edges or imagery inside it.

Minimum size

96px

48px

32px

48px minimum when ring text must be legible. Below 48px (favicons, avatars) the ring text becomes texture — acceptable only for icons.

Header lockup

Potomac Institute

for Policy Studies

Potomac Institute

for Policy Studies

Seal + Newsreader name, divided by a 1px Platinum rule. Seal height = 2× name cap-height block.

Don't

✕ Recolor

✕ Stretch

✕ Rotate

✕ Add effects

✕ Busy background

02 / Core Eight

The Core Eight

Eight colors carry the brand on screen. Blue Deep leads; Parchment and white give the site air; Amber, Violet and Old Glory Red are used with intent, never decoration.

Leadership · Foresight · TrustBlue Deep

HEX: #00205B
RGB: 0, 32, 91
CMYK: 100, 65, 0, 64

Primary brand color. Header, footer, headlines, primary buttons.

Collaborative · Rigorous · ReliableFoundry

HEX: #2D3440
RGB: 45, 52, 64
CMYK: 30, 19, 0, 75

Secondary dark. Utility bars, data panels, code, secondary text on light.

Excellence · Precision · ClarityRich Black

HEX: #1A1A1A
RGB: 26, 26, 26
CMYK: 0, 0, 0, 90

Body text color. Never use pure #000.

Legacy · Continuity · PerspectiveParchment

HEX: #EDE7D9
RGB: 237, 231, 217
CMYK: 0, 2, 9, 7

Warm section backgrounds, pull quotes, publication cards.

Empowering · Momentum · ImpactAmber

HEX: #D4920A
RGB: 212, 146, 10
CMYK: 0, 31, 95, 17

Accent. Focus rings, rules, CTA on dark. Not for text on light.

Strategic · Inquiry · DiscoveryViolet

HEX: #2A1045
RGB: 42, 16, 69
CMYK: 39, 77, 0, 73

Research & ideas. Feature bands, STEPS journal, think-pieces.

Commitment · Mission · PurposeOld Glory Red

HEX: #B22234
RGB: 178, 34, 52
CMYK: 0, 81, 71, 30

Sparing emphasis. Live events, alerts, hover on links.

Integrity · Objective · CrediblePlatinum

HEX: #D4D8DE
RGB: 212, 216, 222
CMYK: 5, 3, 0, 13

Borders, dividers, disabled states, text on dark navy.

Proportion on a typical page

White / Warm White 45%

Blue Deep 25%

Parch. 12

Neutrals and Blue Deep do ~80% of the work. Accents together stay under 10%.

Web tokens (CSS)

:root {
  --pi-blue-deep: #00205B;  --pi-foundry:  #2D3440;
  --pi-rich-black:#1A1A1A;  --pi-parchment:#EDE7D9;
  --pi-amber:     #D4920A;  --pi-violet:   #2A1045;
  --pi-red:       #B22234;  --pi-platinum: #D4D8DE;
  /* UI support from extended palette */
  --pi-blue-tint: #E8EDF7;  --pi-amber-deep:#8A5C06;
  --pi-warm-white:#FAF6F0;  --pi-slate-mid: #4E5D6E;
}

03 / Accessibility

Accessible pairings

All text must meet WCAG 2.2 AA: 4.5:1 for body, 3:1 for large text (24px+ or 19px bold) and UI outlines. Use these approved combinations.

Blue Deep on White

15.6:1

AAA

Rich Black on White

17.4:1

AAA

Blue Deep on Parchment

12.7:1

AAA

White on Blue Deep

15.6:1

AAA

Platinum on Blue Deep

10.9:1

AAA

Amber on Blue Deep

6.0:1

White on Violet

17.0:1

AAA

Amber on Foundry

4.9:1

Old Glory Red on White

6.6:1

Rich Black on Amber

7.1:1

AAA

Amber on White

2.5:1

Fail — decoration only

Blue Deep on Red

2.4:1

Fail — never pair

Focus states use a 3px Amber outline with 2px offset on every interactive element. Never rely on color alone to convey meaning — pair with icons or text.

04 / Typography

Typography

An editorial serif for authority and a clear civic sans for reading. Both are free Google Fonts for fast, consistent web delivery.

Newsreader

Display & headlines

400 · 500 · 600 · Italic

Public Sans

Body, UI, navigation

400 · 500 · 600 · 700

IBM Plex Mono

Eyebrows, data, dates

400 · 500

Display

Newsreader 500 · 72/76 · −1%

Science & technology policy

Newsreader 500 · 48/56

Research that informs

Newsreader 500 · 36/44

Center for Neurotechnology Studies

Newsreader 600 · 24/32

Upcoming seminar series

Public Sans 700 · 18/26

Key findings

Lead

Public Sans 400 · 20/32

An independent, nonpartisan think tank addressing the nation's most pressing challenges.

Body

Public Sans 400 · 17/28 · max 70ch

The Institute conducts objective research and analysis to provide policymakers with the scientific and technical understanding needed to make informed decisions.

Small

Public Sans 400 · 14/20

Published March 4, 2026 · 12 min read

Eyebrow

Plex Mono 500 · 12 · +18% caps

Policy Memo · Cybersecurity

"Pull quotes use Newsreader italic in Blue Deep with a 4px Amber rule."
— Quote attribution, Title

05 / Buttons & Links

Buttons & links

Buttons are squared (4px radius) and confident. One primary action per view.

On light

On dark

Amber is the primary CTA color on dark backgrounds only — it's the brand's "momentum" moment.

Inline link

Read the 2026 annual report for details.

States

Default Blue Deep · Hover Old Glory Red · Visited Violet · Focus Amber outline.

Specs

Height 48 / 40 / 56 · radius 4 · weight 600 · min target 44×44

06 / Forms

Forms

Used for newsletter signup, event registration, contact, and publication search.

Newsletter

The Potomac Brief

Monthly research highlights and event invitations.

Site search

⌕

07 / Navigation

Navigation & footer

A utility bar, a primary header with clear information architecture, breadcrumbs for deep pages, and a substantive footer.

NewsroomCareersContactDonate

Potomac Institute

for Policy Studies

⌕

Science & Technology

Policy areas, programs and recent work.

National Security

Policy areas, programs and recent work.

Health & Neuroscience

Policy areas, programs and recent work.

Regulation & Law

Policy areas, programs and recent work.

Mega-menu panel shown open on "Research". Active item: 2px Amber underline. Mobile collapses to a full-screen Blue Deep drawer.

Breadcrumb & pagination

Home / Publications / Reports

‹123…12›

08 / Cards

Cards

Content cards for the Institute's core content types. Flat white or Parchment, 1px Platinum border, soft navy shadow on hover.

Report · Mar 2026

Securing the bioeconomy: a framework for resilience

Recommendations for safeguarding critical biotechnology supply chains.

Download PDF

APR

Live

10:00 AM ET · Arlington & Online

Seminar

AI and the future of deterrence

Dr. Jane Doe

Senior Fellow, Neurotechnology

NeuroethicsBrain-computer interfacesRegulation

View profile

STEPS · Vol. 7, Issue 1

Science, Technology, Engineering & Policy Studies

Violet marks inquiry: journals, essays and long-form ideas.

30+

Years of independent research

Stat block: Newsreader numerals, Amber accent glyph.

09 / Tags & Alerts

Tags, badges & alerts

Content-type tags

ReportJournalTestimonyOp-EdFeaturedLiveArchive

Info. Registration closes Friday at 5 PM ET.

Notice. Office closed for the federal holiday.

Error. We couldn't submit your form. Try again.

10 / Data Viz

Data visualization

Charts in reports and on the web use the Core Eight in a fixed order so series stay consistent across publications.

Federal R&D funding by sector (illustrative)

20222023202420252026

Series order

1Blue Deep
2Amber
3Violet
4Old Glory Red
5Slate Mid
6Blue Mid
7Platinum (baseline / other)

Highlight a single key value in Old Glory Red; gray out the rest in Platinum.

11 / Grid & Spacing

Grid & spacing

A 12-column grid, 1200px max content width, and an 8px spacing scale.

Spacing scale (px)

128

Breakpoints

Mobile: < 640; 4 col · 16 gutter · 20 margin
Tablet: 640–1023; 8 col · 24 gutter · 32 margin
Desktop: 1024–1439; 12 col · 24 gutter · 48 margin
Wide: ≥ 1440; 12 col · 32 gutter · 1200 max

Corners: 4px buttons/inputs, 6px cards. Section padding: 96px desktop, 64px mobile.

12 / Imagery & Voice

Imagery & voice

Photography

Real people, real work: researchers, briefings, the Capitol region. Natural light. Apply a subtle Blue Deep duotone for hero banners to unify mixed sources.

Iconography

1.5px outline icons (e.g. Lucide) in Blue Deep or Foundry, 24px grid. No filled, cartoon or multicolor icons.

Voice

Objective, precise, nonpartisan. Lead with the finding. Active voice, plain words, sentence-case headlines. Avoid hype and jargon.

Write

"New report outlines five steps to secure U.S. microelectronics."

Avoid

"Game-changing insights revolutionize the chip landscape!"