Page demos

Every page, side by side.

Four full-page compositions assembled from the section catalog: the flagship homepage plus three service-line landings — data storytelling, cartography, interactive. Each is standalone-runnable: open it and it should look complete.

Gallery

Four pages.

Click any card to open the full page. Each composition leans only on tokens and components from _shared.css.

Stamen homepage hero — AWS basemap

Homepage

Yellow-highlighted hero · 3-service grid · "design by doing" pull-block · map-trinity showcase · featured work · client grayscale grid · 4-value tiles · team photo · museum credits · CTA band.
Data Storytelling landing

Landing 1 · Data Storytelling

Service · narrative-led data viz. Hero · intro · 4 value tiles · 5-step process · case studies (UCSF, Climate Central, Catalina) · pull-quote · FAQ · museum-credits · CTA.
Cartography landing — AWS basemap

Landing 2 · Full Stack Cartography

Service · the signature. Hero · map-trinity as second-act · 6-tile deliverables · 6-step process · case studies (AWS, UCSF, Watercolor→Cooper Hewitt) · open-source dark strip · pull-quote · CTA.
Interactive Data Experiences landing

Landing 3 · Interactive Experiences

Service · dashboards + tools. Hero · intro · tech-stack credibility table · 4 value tiles · 5-step process · case studies · FAQ · pull-quote · CTA.
Blog list page

Blog · Post list

2-column blog archive — filter strip (Format / Author), featured post card up top, 8 standard post cards in a single-column list, pagination, sidebar with Categories / Tags / Archive / Newsletter signup widget. Yellow category pill on each card.
Single blog post

Blog · Single post

Long-form editorial. Breadcrumb + yellow category pill · 88px H1 · author byline w/ avatar + date · hero image w/ Georgia-italic caption · "first appeared in" prefatory note · max-70ch body · 6 H2 sections · yellow-highlighted blockquote · share/tags strip · author block · 3-up related posts · newsletter CTA.
Page Contact

Contact · Form + Find Us

2-col layout. Hero w/ yellow-highlighted lede · Contact form (first/last/email/country/reason/source/message + privacy + newsletter) with hairline-bordered fields and yellow focus-shadow · yellow-shadow Send button · sticky Find-Us sidebar w/ mono lat-long coord-tag, full address, 3 email routes, social row, toner-style mini-map · 4-tile "skip the form" quick-routes strip · newsletter CTA.
About page — Stamen team

About · Studio + Team

Studio narrative + 11-person team grid. Hero w/ "Our story" + utility-vs-beauty manifesto pullquote · 2-col approach intro · dark-bg recognition strip w/ 4-stat award grid + museum-credits row · team grid (12 cards w/ yellow-corner initials portraits + "Join us" CTA tile) · full-width team-photo · 6-tile studio principles · client grayscale grid (12 logos) · CTA.
Single case study — Brain Cartography for UCSF

Case study · Single project

Long-form project deep-dive. Breadcrumb · yellow eyebrow · 64px H1 · Georgia-italic subtitle · 4-col meta-row (client/year/services/platforms) bordered top + bottom · 21:9 hero image w/ caption · 70ch main column + sticky cs-jump sidebar TOC · 6 H2 sections w/ top-rule · yellow-bordered blockquote · 6-step process grid w/ inverted-yellow num-pills · 4-up outcome stat grid · spec-table tech stack · project-credits block.
Classes & Workshops

Classes & Workshops

Education service line. 2-col hero w/ image · teaching-credibility intro · open-enrollment "Community Classes" section w/ 3 detailed class-cards (yellow date-block + bullets + instructor + price + reserve CTA) · yellow newsletter strip · "Custom Workshops" section w/ 4-step value tiles + recent-workshops spec-table · testimonial pullquote · 4-up instructor grid · 5-question FAQ · CTA.
Reference System Overview

Index · System overview

The kit's front door. File list, brand-in-a-paragraph, voice anchors, forbidden moves, mood keywords. Read first.
Reference Design System

Design System · Tokens + components

Every color swatch, type spec, button variant, card, signature pattern (map-trinity, plant icons, museum strip, client grid, reading-now, pull-quote). The visual API doc.
Catalog Sections

Sections · Pattern catalog

Every reusable block rendered in Stamen's voice with real copy. Yellow TOC strip at top for jumping between patterns.
Source Brand Spec

Brand spec · Markdown source

Source-of-truth narrative. Voice anchors verbatim, color tokens with semantic mapping, signature patterns, forbidden moves, mood keywords.
Config Palettes

Palettes · Toggle config

Three palettes: Toner (default monochrome + yellow), Watercolor (warm earth tones, museum-y), Terrain (topo greens + tans). JSON consumed by palette-toggle.js.