Skip to content
Theme Lab

Specimen 001 · Summer Camp

Design decisions, held up to the light.

This page exists to be looked at. Every component below is rendered from the same markup on every theme page, so the only variable is the palette, the type, and the shape of the thing.

Colors in palette
16
Semantic tokens
34
Accent families
6

About Summer Camp

This palette starts from the WPA park posters of the late 1930s and the coloring books that came after them: flat inks on absorbent paper, warm neutrals that have faded a stop or two, and a handful of colors that stayed vivid because they were laid down thick. The neutrals — Canvas and Bark — are deliberately off-axis, cream and umber rather than white and black, which lets serious material sit on them without the page feeling clinical. Trail is the cool counterweight: sage, lake, and deep water, carrying links, focus, and primary actions so the warm colors never have to do structural work. Pennant is the press run. It is meant to be spent sparingly, and it is what keeps the theme from reading as nostalgic wallpaper.

WPA park posters, 1935–1943 (Library of Congress)
01

Palette

The raw source colors, grouped as the theme's own authors group them.

Canvas

Four bleached lights. Paper, cream, old map, and tent duck — the surfaces. None of them is white, and that is the entire point.

#fdfaf4

camp0

Bleached paper — reading surface

#f6efe2

camp1

Warm cream — page background

#ece1cd

camp2

Aged map — raised panels

#dccdb2

camp3

Canvas duck — hairlines, dividers

Bark

Four warm darks. Umber and char rather than black — the deep blocks in light mode, the whole interface in dark mode.

#2b261f

camp4

Char — hero, footer, body text

#38312a

camp5

Leather — raised panels on dark

#4a4136

camp6

Bark — hairlines on dark

#6d6152

camp7

Driftwood — muted text, disabled

Trail

Three cool structurals. The counterweight to all that warmth: links, focus rings, and primary actions live here so Pennant never has to.

#9aab88

camp8

Lichen — soft structural sage

#5f8f92

camp9

Shallow lake — secondary

#35646e

camp10

Deep water — primary on light

Pennant

Five press-run colors. Clay, ember, goldenrod, moss, and twilight — flat inks that stayed vivid. Ration these; scarcity is where they get their volume.

#b3523f

camp11

Clay — errors, destructive

#cd7a3f

camp12

Ember — caution, deprecation

#dfa93f

camp13

Goldenrod — warnings, highlights

#7f9450

camp14

Moss — success, additions

#8e6b93

camp15

Twilight — rare emphasis

02

Semantic tokens

What the raw colors are actually used for. Components name these, never the hexes above.

Surfaces & fills

page

Behind everything

surface

Cards, reading area

raised

Panel on a panel

contrast

Deep block — hero, footer

accent

Primary action

accent-tint

Soft accent wash

Accent families

Three roles per color: base fills, ink is text-safe on surface, tint is a soft background.

red

Aa · text on tint

orange

Aa · text on tint

yellow

Aa · text on tint

green

Aa · text on tint

teal

Aa · text on tint

purple

Aa · text on tint

Text roles

The quick brown fox ink
The quick brown fox ink-muted
The quick brown fox ink-faint
The quick brown fox accent-ink

Lines

line — hairline, dividers
line-strong — focus, active
03

Contrast audit

Every foreground/background pair on this page, measured at build time and graded.

Light mode

24/24 at AA

Aa ink on surface 14.40 AAA
Aa ink on raised 11.59 AAA
Aa ink-muted on surface 7.31 AAA
Aa ink-faint on surface 5.62 AA
Aa ink-faint on page 5.12 AA
Aa ink-faint on raised 4.52 AA
Aa accent-ink on surface 7.28 AAA
Aa accent-ink on tint 6.31 AA
Aa accent-on on accent 6.30 AA
Aa accent-on on hover 8.42 AAA
Aa contrast-ink 13.12 AAA
Aa contrast-ink-muted 5.07 AA
Aa red-ink on surface 5.75 AA
Aa red-ink on tint 4.91 AA
Aa orange-ink on surface 5.26 AA
Aa orange-ink on tint 4.64 AA
Aa yellow-ink on surface 6.03 AA
Aa yellow-ink on tint 5.33 AA
Aa green-ink on surface 5.58 AA
Aa green-ink on tint 4.78 AA
Aa teal-ink on surface 6.14 AA
Aa teal-ink on tint 5.30 AA
Aa purple-ink on surface 6.20 AA
Aa purple-ink on tint 5.28 AA

Dark mode

24/24 at AA

Aa ink on surface 13.12 AAA
Aa ink on raised 11.19 AAA
Aa ink-muted on surface 9.79 AAA
Aa ink-faint on surface 5.54 AA
Aa ink-faint on page 6.03 AA
Aa ink-faint on raised 4.73 AA
Aa accent-ink on surface 5.34 AA
Aa accent-ink on tint 4.54 AA
Aa accent-on on accent 5.34 AA
Aa accent-on on hover 6.85 AA
Aa contrast-ink 15.58 AAA
Aa contrast-ink-muted 7.00 AAA
Aa red-ink on surface 5.94 AA
Aa red-ink on tint 5.16 AA
Aa orange-ink on surface 6.79 AA
Aa orange-ink on tint 5.47 AA
Aa yellow-ink on surface 8.66 AAA
Aa yellow-ink on tint 6.41 AA
Aa green-ink on surface 7.17 AAA
Aa green-ink on tint 5.83 AA
Aa teal-ink on surface 7.09 AAA
Aa teal-ink on tint 5.56 AA
Aa purple-ink on surface 6.26 AA
Aa purple-ink on tint 5.31 AA

Every pair clears 4.5:1 in both schemes, so any of these colors can carry body text on the background it is paired with. That is a property of the token choices, not of the source palette — several of Summer Camp's printed colors are lifted or darkened for their ink role, while the base fill stays exactly as published.

Text on accent

6.30:1

#fdfaf4

Text on hover

8.42:1

#fdfaf4

Ink on surface

14.40:1

#2b261f

Ink on raised

11.59:1

#2b261f

04

Typography

Scale, families, and the measure — the part a palette cannot rescue.

6xl / display

Wayfinding by daylight

4xl / page title

Wayfinding by daylight

2xl / section

Wayfinding by daylight

lg / lede

Wayfinding by daylight

base / body

Wayfinding by daylight

sm / secondary

Wayfinding by daylight

xs / caption

Wayfinding by daylight

Measure — 68 characters, serif

Type is the part of a theme you cannot fake with color. A palette can rescue a mediocre layout for about four seconds; the moment somebody reads a paragraph, the line height and the measure decide whether they keep going.

font-sans

Grumpy wizards

Interface, labels, navigation, and dense data.

font-serif

Grumpy wizards

Headlines, pull quotes, and long reading.

font-mono

Grumpy wizards

Tokens, code, and tabular numbers.

Numerals — tabular

0123456789

05

Buttons, badges & callouts

Every interactive weight, plus the accent families doing semantic work.

Variants

Sizes

With icons & states

Text links

An inline accent link inside a sentence, next to a quiet underlined link for comparison.

Badges

Shipped In review Blocked Draft Archived Default

With leading dot

Operational Degraded Outage

Callouts

Note

The accent carries structure — links, focus, primary actions.

Success

Deploy finished in 14 seconds.

Warning

This certificate expires in nine days.

Error

Could not reach the origin server.

06

Cards

Four treatments at four volumes: bordered, media, accent fill, and deep block.

Consistent surfaces

Three background levels — page, surface, raised — carry the entire depth model. No shadows required, though they are available.

Read more

Rationed color

Six accent families, each with a fill, a text-safe ink, and a soft tint. Semantics first, decoration second.

Read more

One markup, many themes

Nothing in this page names a color. Every component reads semantic tokens, so a theme is a variable swap.

Read more

Field notes

Why neutrals should not be neutral

A grey that leans toward the accent hue makes large surfaces feel intentional instead of unfinished.

AN

A. Norling

6 min read

Highlighted

One card the eye lands on first

Full accent fill is the loudest move available. Use once per screen, and make sure it is the thing you actually want clicked.

This quarter

Uptime
99.98%
Median deploy
14s
Open incidents
0
07

Quotes & pull text

Display quotes on the deep block, pull quotes in flow, and a testimonial pair.

A palette is not a mood board. It is a set of promises about what the reader should look at next, and every color you add is one more promise you have to keep.
MR

Marta Ryland

Design director, Northline

Pull quote in flow

The temptation with a sixteen-color palette is to use all sixteen. The discipline is to pick four and let the other twelve exist as options you decline.

Restraint is the only feature that never needs a redesign.

What is left after that subtraction is a page where the one warm badge in the corner actually means something, because nothing else on screen is competing for the same job.

“We rebuilt the whole marketing site on these tokens in a weekend. Nothing needed a color change afterward.”
DH

Dev Halloran

Engineering lead

“The dark variant was not an afterthought for once. It shipped the same day as the light one.”
PR

Priya Raghunathan

Product design

08

Block text

Nine hundred words with a sidebar competing for attention. The real test.

Every theme looks good on a landing page. A landing page is mostly whitespace, one photograph, and a headline set large enough that the type designer's opinion does all the work. The test that matters comes later, when somebody has to read nine hundred words of body copy on a Tuesday afternoon, and the only thing standing between them and closing the tab is whether the contrast holds and the measure is honest.

That is what this block is for. It is deliberately long, deliberately dense, and deliberately full of the things that break a design system: an inline link that has to be distinguishable from bold text without shouting, a run of emphasised words that should read as emphasis rather than a second heading, and a monospace token dropped mid-sentence where the baseline and the x-height rarely agree.

On the second level of hierarchy

Section headings inside an article have a harder job than page titles. They must separate without interrupting, which means they need enough weight to be found while scanning and little enough to be skipped while reading. Most systems solve this with size alone and end up with a heading that looks like a mistake.

If you cannot tell the heading from the paragraph at a squint, it is too quiet. If you notice it before you notice the paragraph, it is too loud.

And a third, for the stubborn cases

The third level exists for documents that genuinely need it and for nobody else. When it is needed, italics plus a modest weight bump usually beats another size step, because the size steps have already been spent.

  • Body copy sits at a comfortable reading size, never smaller than sixteen pixels.
  • Line height opens up as the measure widens — long lines need more air, not less.
  • List markers take the accent color, which is the cheapest hierarchy available.
  • Nothing in the reading column uses more than two colors of text.

There is a version of this that goes too far, where the type system becomes so refined that nobody can add a page to the site without a meeting. The useful stopping point is earlier than that: enough structure that the obvious choice is also the correct one, and enough slack that a new component does not require a new token.


What remains is the part no palette can supply. The words have to be worth the setting.

09

Bento grid

Mixed tile weights on one grid — the fastest way to see the whole palette cooperating.

Bento

Tiles of different weight, one grid

The layout works because the tiles disagree: a deep block, a tint, a plain surface, and a single accent fill. Same grid, four different volumes.

Primary

98%

of components need no override

Warning

Rationed

Accent colors mark meaning, not mood.

Surface

  • Tokens resolve at runtime
  • Dark mode is a variable swap
  • No color literals in markup

Raised

One bar in accent; the rest recede.

10

Tables & forms

Dense data, status tints, focus rings, and an error state.

Workstreams

Status colors come from the accent families.

Project Owner Status Progress
Palette rollout M. Ryland Shipped
100%
Token export D. Halloran In review
74%
Dark variant audit P. Raghunathan Blocked
31%
Type scale v2 A. Norling Draft
12%
Showing 4 of 28

Form controls

Focus rings use the accent — tab through to see them.

Enter a valid email address.

Preferences
11

Pricing

Three tiers, one lifted onto the deep block.

Sketch

For trying a palette on a weekend project.

$0 /month

  • One theme
  • Light and dark
  • Community support

Studio

Most picked

For teams shipping more than one surface.

$24 /month

  • Unlimited themes
  • Token export (CSS, JSON)
  • Contrast auditing
  • Priority support

Foundry

For design systems with a public API.

$96 /month

  • Everything in Studio
  • Versioned token releases
  • Figma sync
  • Dedicated review
12

FAQ

Native disclosure, no JavaScript.

Frequently asked

A disclosure list — native <details>, no JavaScript.

Why is every theme page identical?
Because comparison only works when there is exactly one variable. The markup, the copy, and the layout are shared across every theme page — the only difference between this page and the next one is the token file.
What happens to a component that needs a color the theme has not got?
It does not get built. Six accent families plus the neutral scale is the budget. A component that needs a seventh color is usually a component that needs a rethink.
Is dark mode generated automatically?
No. Each theme declares its dark token set by hand. Deriving dark from light algorithmically produces something that technically passes contrast and still feels wrong.
How is contrast verified?
It is measured, not asserted. Specimen 03 computes the WCAG ratio for every foreground/background pair on this page at build time and prints the grade, including the pairs that only reach AA Large. Where a theme ships a color that does not pass, the color is kept as published and the shortfall is shown.
13

Calls to action

Three volumes: full-bleed accent, raised newsletter, deep split.

Ready to see this palette on something real?

Full accent fill, edge to edge. The loudest band a page gets — one per page, at the end.

A quieter call to action

Same job, one volume down. When the page already has an accent band, the second ask lives on a raised surface instead.

No more than once a month. Unsubscribe anytime.

Deep-block variant

The same ask, on the dark block

Useful directly above a dark footer, where an accent band would cut the page in half.