Stamen — Design System

Color

Signature yellow + Toner monochrome + electric blue.

#FFFF00 appeared 125× in the live theme CSS. It is the brand color, not an accent. Everything else orbits around it.

Signature yellow — the dominant accent

Yellow#FFFF00Highlight underlay · CTA · brand signature

Yellow Deep#E8E800Readable yellow text on white

Yellow Soft#FFFB80Section background washes

Yellow Pale#FFFFCCLarge background fills

Monochrome core — the Toner discipline

Black#000000Wordmark · headlines · primary button

Navy#112337Softer dark panels · footer alt

Ink#1A1A1APrimary body text

White#FFFFFFSurface · ground

Electric blue — interactive states

Blue#204CE5Primary link · interactive

Blue Deep#001AB3Hover · emphasis

Blue Light#527EFFSoft accent · focus glow

Blue Pale#E6EBFFSurface tint

Slate ink — body family

Ink Soft#585E6ASecondary body

Ink Mid#686E77Meta · captions

Ink Quiet#A1A6AESubtle dividers · disabled

BG Soft#F5F5F5Section panel ground

Type

HelveticaNeue single-family.

No Google Fonts. No Inter. No Roboto. HelveticaNeue is the brand. Georgia italic only for pull-quotes and book references like Cradle to Cradle.

Display scale

Fluid clamp ranges. Letter-spacing tightens as size grows.

Display 88px

H1 64px

H2 48px

H3 32px

H4 22px

H5 18px

Body scale

19px lede, 16px body, 14px meta, 11px tracked eyebrow.

Lede 19px — Helping people find and tell more beautiful stories with data.

Body 16px — Our ability to find and illuminate the story in the data is central to how we work. We design from data, and not the other way around.

Meta 14px — January 12, 2026 · San Francisco

Eyebrow 11px tracked uppercase

Signature inline mark — yellow highlight

A linear-gradient applied 60% from baseline. Replaces both  emphasis and underline-style links for the strongest tier of inline emphasis.

We help our clients find and tell the stories in their data for the audience they need to communicate with.

Markup: phrase or phrase

Signature display block — "design by doing"

design by doing

Lowercase. Tighter than -0.03em. Full background-fill yellow on the strongest word.

Serif italic accent

"more effective than we are efficient"

Reserved for pull-quotes, book references (Cradle to Cradle), and the values triad signature. Never block-level body copy.

Buttons

Three button variants. Sharp corners.

No drop shadows. No rounded > 4px. The Toner discipline carries through to the CTAs.

Signature · Yellow with hard-offset shadow Live-site exact

The "Work With Us" button. Yellow ground + 2px black border + 8×8 hard black drop shadow (no blur). On hover the button shifts down-right and the shadow shrinks — feels like physically pressing it.

Work With Us Start a Project →

On dark

White Yellow signature Outline light

Text-link with yellow underline

Throughout long-form prose, the inline text link uses a 2px yellow underline that fills on hover. Also available in electric blue for interactive contexts.

Cards

Hairline borders, never drop-shadows.

Service tile · the 3-service signature

01 · Service

Data Storytelling

We help our clients find and tell the stories in their data for the audience they need to communicate with.

Learn more 02 · Service

Full Stack Cartography

Visually stunning and technically sophisticated digital maps — every stage of map production.

Learn more 03 · Service

Interactive Data Experiences

Make data insightful and actionable. Dashboards, navigable tools, analysis interfaces.

Learn more

Value tile · "what we're about" 4-up grid Live-site exact

Vertical YELLOW LEFT-RULE (not top border). Lowercase headlines, no eyebrow needed. Matches the live stamen.com "What we're about" block exactly.

design by doing

Our ability to find and illuminate the story in the data is central to how we work, and it's what makes us unique.

customizing our approach

There is no "one size fits all" project for Stamen. Our small size means we take a highly personalized approach.

being full-stack humans

We've got depth, and we've got breadth. We love tackling big, thorny and complicated projects.

doing good with data

We exist to make data insightful and actionable. We're quite serious about positive impact.

Variant · `.value-tile.top-rule` (horizontal top accent)

Use when the section needs a top-rule rhythm instead of left-rule. Add .top-rule modifier.

01

Customizing our approach

For pages where each tile leads with a numbered label.

02

Being full-stack humans

Same content, different rule orientation.

03

Doing good with data

Both variants share typography and spacing.

04

Design by doing

Toggle via class. No layout rebuild needed.

Case card · for project showcase

Cartography · 2024

AWS Location Service basemap refresh

A full design refresh of Amazon's global basemap tiles — initially shipped in 2023, refined in 2024 for legibility and place-name density.

Read case study

Interactive · Health equity

UCSF Health Atlas

Geographic disparities in California health outcomes, made navigable for researchers, journalists, and policymakers.

Read case study

Storytelling · Climate

Climate Central narrative dashboard

Real-time climate data made readable for general audiences. Built with Stamen's signature data-romance.

Read case study

Signature pattern

The Map Trinity.

Stamen's three open-source map styles — Toner, Watercolor, Terrain — are arguably more recognizable than the wordmark. Now distributed by Stadia Maps. Rendered here as stylized CSS evocations (not real tiles).

Open-source Toner

Cooper Hewitt collection Watercolor

Topographic Terrain

Live tiles available via stadiamaps.com

Signature pattern

The four-plant icon system.

Stamen's non-logo identity — vernacular Mission District objects. On the live site, these four icons live ONLY in the "Data visualization services" dark-bg section (rendered white). Reference inventory on a soft ground for visibility:

Lily

→ Data storytelling

Bacon

→ Interactive data experiences

Garden Table

→ Classes & workshops

Woodpile

→ Open-source mapping tools

Signature pattern

Museum credits + client grayscale grid.

Museum credits strip

Permanent collections

Smithsonian National Design Award Cooper Hewitt MoMA Victoria & Albert SFMOMA

Used in About-page top + above-footer trust strip. The 2021 Cooper Hewitt acquisition of Watercolor is THE flex.

Client grayscale grid

+ 30 more

Logos render grayscale at 65% opacity. Hover → full color + 100% opacity. From the real /about/ page client list.

Signature pattern

Reading-now + pull-quote.

Two patterns that anchor the brand's philosophical posture — Eric Rodenbeck's Cradle to Cradle reference deserves its own pattern.

Reading now · Eric Rodenbeck

Cradle to Cradle: Remaking the Way We Make Things

William McDonough & Michael Braungart

The frame for "more effective than we are efficient." A perennial reference around the studio.

"We want to be more effective than we are efficient."

Eric Rodenbeck · Founder & CEO

Pattern

Process · FAQ · spec tables.

Numbered process — 5 steps

01

Discovery

Understand your data, audience, and the story you need to tell.

02

Define

Frame the brief. Identify the rhetorical arc and the call to action.

03

Design

Iterate on form. Sketch, prototype, test with your audience.

04

Build

Engineer the final artifact — interactive, static, or somewhere between.

05

Launch

Ship it. Then iterate based on how the audience actually uses it.

FAQ

How long is a typical Stamen engagement?

Most projects run 3–9 months. Short data-storytelling pieces can land in 4–6 weeks; full-stack cartography platforms typically run 6+ months with a maintenance contract after launch.

Do you take fixed-price work?

Yes, for tightly scoped deliverables. For research-led engagements (most of our work), we prefer T&M with a budget cap — invention is hard to fixed-bid.

Are the Toner / Watercolor / Terrain map styles still free?

Yes — distributed via stadiamaps.com since 2023. Free tier available for low-volume use; paid tiers for production.

Can you work in our existing design system?

Always. We co-design — your brand, our craft. We've extended design systems for Google, National Geographic, the Washington Post, and dozens more.

Spec table

Token	Value	Use
`--stamen-yellow`	#FFFF00	Inline highlight underlay · CTA fill · "design by doing" emphasis
`--stamen-black`	#000000	Wordmark · headlines · primary button · Toner grounds
`--stamen-navy`	#112337	Softer dark panels · footer ground alt
`--stamen-blue`	#204CE5	Primary link · interactive states
`--ink`	#1A1A1A	Primary body text
`--ink-soft`	#585E6A	Secondary body
`--bg-soft`	#F5F5F5	Section panel ground

Signature yellow + Toner monochrome + electric blue.

Signature yellow — the dominant accent

Monochrome core — the Toner discipline

Electric blue — interactive states

Slate ink — body family

HelveticaNeue single-family.

Display scale

Body scale

Signature inline mark — yellow highlight

Signature display block — "design by doing"

Serif italic accent

Three button variants. Sharp corners.

Primary — Black

Signature — Yellow

Outline + Blue + Ghost

Signature · Yellow with hard-offset shadow Live-site exact

On dark

Text-link with yellow underline

Hairline borders, never drop-shadows.

Service tile · the 3-service signature

Data Storytelling

Full Stack Cartography

Interactive Data Experiences

Value tile · "what we're about" 4-up grid Live-site exact

design by doing

customizing our approach

being full-stack humans

doing good with data

Variant · .value-tile.top-rule (horizontal top accent)

Customizing our approach

Being full-stack humans

Doing good with data

Design by doing

Case card · for project showcase

AWS Location Service basemap refresh

UCSF Health Atlas

Climate Central narrative dashboard

The Map Trinity.

The four-plant icon system.

Lily

Bacon

Garden Table

Woodpile

Data visualization services

Museum credits + client grayscale grid.

Museum credits strip

Client grayscale grid

Reading-now + pull-quote.

Process · FAQ · spec tables.

Numbered process — 5 steps

Discovery

Define

Design

Build

Launch

FAQ

Spec table

Want to put this kit to work?

Variant · `.value-tile.top-rule` (horizontal top accent)