A reusable kit modeled from stamen.com — the 25-year San Francisco data visualization and cartography studio. Stark monochrome discipline, signature #FFFF00 highlights, Helvetica Neue single-family, and the four-plant icon system (lily / bacon / garden-table / woodpile). Built for the JBSG sprinkle pipeline.
Eight files. One system. Each page is standalone-runnable — open and view.
| File | Role | What it gives you |
|---|---|---|
brand-spec.md | Source narrative | Voice anchors verbatim from live site, color tokens with semantic mapping, signature patterns, forbidden moves, mood keywords. Read this first. |
_shared.css | Tokens + components | ~700 lines of CSS — variables, layout grid, buttons, cards, signature patterns (map-trinity, museum-strip, client-grid, etc.). All HTML files load this one stylesheet. |
palettes.json | Palette toggle config | 3 palettes: Toner (default monochrome + yellow), Watercolor (warm earth tones, museum-y), Terrain (topo greens + tans). |
design-system.html | Kitchen-sink reference | Every color swatch, type spec, button variant, card, signature pattern. Use as the visual API doc. |
sections.html | Pattern catalog | Every reusable section rendered with Stamen voice and real copy. TOC at top for jumping. |
pages.html | Page gallery | Thumbnail grid of all 4 full-page compositions (homepage + 3 service landings). |
homepage.html | Homepage assembly | Yellow-highlighted hero · 3-service grid · map-trinity showcase · client grayscale grid · museum credits strip · "design by doing" pull-block · team photo · CTA band. |
landing-1-data-storytelling.html | Service landing | Data Storytelling. Narrative-led data viz. Hero · value tiles · 5-step process · case studies · museum-credits · CTA. |
landing-2-cartography.html | Service landing | Full-Stack Cartography. Map-trinity showcase as hero second-act · process · case studies (AWS basemap, UCSF Atlas) · open-source tools strip · CTA. |
landing-3-interactive.html | Service landing | Interactive Data Experiences. Dashboard showcase · technical-stack credibility · case studies · FAQ · CTA. |
assets/stamen-brand/ | Brand assets | 22 real assets pulled from live site: logo SVG · 4 signature plant icons · team photo · 3 project thumbnails · 11 client logos · live theme.css for reference. |
Stamen is the rare studio where a Cradle to Cradle reference, a Smithsonian National Design Award, and a "bacon" icon all coexist on the same homepage. Founded 2001 in San Francisco's Mission District; their Watercolor map style is in the Cooper Hewitt permanent collection — the first live website to join. Voice is editorial-scholarly with a sly garden warmth; visual language is the Toner-map discipline (stark monochrome) plus the brightest yellow in the spectrum (#FFFF00) as the signature accent. HelveticaNeue single-family, no Google Fonts, no Inter — a confidence move.
Editorial confidence, research-meets-craft, hand-typeset gravitas.
Gradient-minimal SaaS aesthetics. Not us. Stamen runs sharp, lowercase, and unapologetic.
Use as a tiebreaker. If a design choice doesn't serve at least two of these, pick the other choice.
Phrases lifted verbatim from the live site. The yellow-highlighted ones are the strongest — use them whenever the copy slot fits.
"design by doing"
"Helping people find and tell more beautiful stories with data."
"We design from data, not the other way around."
"more effective than we are efficient"
"data visualization · cartography · data products"
"transparency, curiosity, and joy"
A short list of things this DS will not do — each would dilute the brand's identity.
Inter / Roboto / Geist font swaps.