Design systems

Pick the design system that fits your org.

Sixteen reference systems extracted from real institutions. Each direction is a full kit-of-parts: a design system reference and a section pattern catalog. Tokens live in _shared.css; sections compose only from those tokens.

Filter by audience

Full kit-of-parts · church + nonprofit
Source Scottsdale Bible

Suburban evangelical, photography-led.

Editorial Sunday-morning serif with warm photography. Calm, grown-up, comfortable in its skin — "come as you are" rendered as a layout.

  • TypeFraunces serif display + Inter body
  • Best forEstablished suburban evangelical churches with strong photography
  • SignatureSky-blue accent, real-people photography led
Explore → 4 palettes · 6 pages
Source Phoenix Seminary

Editorial gravitas, scholarly without stuffy.

Scholarly without going dusty. A theological-journal register that lends institutional weight to a teaching church.

  • TypeFraunces display + EB Garamond body + Inter UI
  • Best forSeminaries, teaching churches, higher-ed-adjacent ministries
  • SignatureWarm orange + Reformed navy + tan-and-putty palette
Explore → 4 palettes · 6 pages
Source Ecosia (light mode)

Mission-forward, modern nonprofit chunky.

Mission-forward and chunky. Action-verbs-not-adjectives voice — the green CTA is the loudest thing on the page.

  • TypeBricolage Grotesque display + Inter body
  • Best forFood pantries, urban plants, recovery, environmental ministries
  • SignatureSignature-green CTAs, generous whitespace, mission-as-headline
Explore → 4 palettes · 6 pages
Source N50 Project

Civic editorial, digital-equity nonprofit.

Civic editorial for policy-aware nonprofits. The long-arrow CTAs and diagonal cross-hatch say "partnership, coalition, advocacy" without saying the words.

  • TypeManrope display + Inter body
  • Best forDigital-equity, coalition-led missions, advocacy nonprofits
  • Signature20px radii, long-arrow CTAs, diagonal cross-hatch
Explore → 4 palettes · 6 pages
Source YMCA of Central Virginia

Community-Y, blue-and-purple cause-driven.

Community-Y cause-driven blue and purple. Comfortable in a 100-year-local-history register, family-focused without going saccharine.

  • TypeSofia Sans display + body (free substitute for proprietary Cachet)
  • Best forMulti-branch community Ys, scholarship-funded community nonprofits
  • SignatureYCVA blue + purple + gold (deliberately NOT YMCA federation red)
Explore → 4 palettes · 7 pages
Source YMCA of Greater Montgomery

Multi-branch Y, gradient-driven Alabama softness.

Multi-branch Y with a softer Alabama register. Ample whitespace and gradient-driven imagery let the cause carry the page.

  • TypeSofia Sans display + body, distinctive weight-200 H3 voice
  • Best for17+ branch associations, regional cause networks
  • Signature4-piece overlapping hero, gradient-frame branch cards, pale-blue rounded footer
Explore → 4 palettes · 7 pages
Full kit-of-parts · commercial / services
Source Goettl Air Conditioning

Trades premium, blue-collar editorial.

Trades premium with a patriot edge. "Right way not the easy way" voice; trust signals (years, guarantees, badges) carry the conversion.

  • TypeRoboto Slab display + Mulish body
  • Best forResidential HVAC, plumbing, electrical, roofing brands
  • SignatureMascot red + flag navy + Goettl orange, patriot-themed
Explore → 4 palettes · 6 pages
Source Master Craftsmen Inc.

Trades modern, replacement-windows lead-gen.

Replacement-windows lead-gen with family-shop confidence. Authorized-dealer marks (Marvin, Milgard) do the heavy lifting.

  • TypeOswald display + Open Sans body
  • Best forResidential window/door installers, family-owned trade shops
  • SignatureBrand blue + burgundy + cool slate, dealer trust marks
Explore → 4 palettes · 6 pages
Source Master Craftsmen Inc.

Desert modern, residential premium.

Desert-modern residential premium. "Plate № 01" archival photo notation and Marvin-grade product photography — sells on craftsmanship over price.

  • TypeFraunces editorial display + Inter body + JetBrains Mono spec lines
  • Best forCustom-home services, premium contractors, "we build heirlooms"
  • SignatureSand-ochre on bone, ink hairline rules, full-bleed product photography
Explore → 18 patterns · 2 pages
Source CentiMark Corporation

Commercial-grade B2B, dual-blue corporate.

Commercial-grade B2B. Designed for facility managers, not consumers — sober dual-blue with a single warm-gold accent for the 24/7 number.

  • TypeRoboto display + Montserrat body
  • Best forCommercial roofers, industrial trades, B2B facility services
  • Signature20px right-to-left fill button, halo-shadow cards, sticky white-panel header
Explore → 4 palettes · 7 pages
Source Lightsource bp

Global utility-solar, bp Pulse editorial.

Global utility-solar at bp scale. Cinematic drone aerials with aubergine → magenta → orange scrims; climate-investor narrative posture.

  • TypeLato single-family (300 / 400 / 700 / 900)
  • Best forGlobal IPPs, climate-investor decks, Fortune-50 joint-venture cobrands
  • SignatureMagenta-orange gradient buttons, GW-deployed counter, agrivoltaics band
Explore → 4 palettes · 7 pages
Source DeMar Consulting Group

Boutique advisory, crimson editorial.

Boutique advisory in crimson editorial. Closer to a law firm or financial-advisory practice than corporate-blue management consulting.

  • TypeManrope 700 display + Inter 400 body
  • Best forBoutique consulting, advisory practices, expert-witness firms
  • SignatureSharp 0px-radius cards, 56×3 crimson rule, full-flip-to-red industry tiles
Explore → 4 palettes · 7 pages
Source Imperial Shinez (Sydney mobile detailing)

Gloss-blue, showroom-black.

Approachable-luxury automotive. Gloss-blue, showroom-black, champagne credentials — premium without going gold-chrome tacky.

  • TypeCal Sans 500 display + Poppins 400 body
  • Best forPremium mobile services (detailing, ceramic coating, PPF), automotive aftermarket
  • Signature20px softly-rounded chamfer, racing-red "MOST CHOSEN" ribbon, windshield-highlight sweeps
Explore → 4 palettes · 7 pages
Source Prime Wellness Chiropractic (Penshurst, AU)

Forest green, mint sage, Lora italic.

Modern allied-health clinic. Evidence-led and gym-friendly — explicitly NOT white-coat-pharma or wellness-spa.

  • TypeInter Tight 600 display + 500 body + Lora italic single-word insertion
  • Best forAllied-health clinics (chiro / physio / sports therapy / osteo)
  • Signature30px mint physio-card hero, Lora italic insertions, AU health-fund logo strip
Explore → 4 palettes · 7 pages
Source No Limit Turf (Phoenix Valley AZ)

Direct-supplier turf, grass + lightning.

Photo-led synthetic-turf supplier voice. Cut-to-deliver direct-from-manufacturer model with a three-track audience split (Homeowners / Contractors / Commercial) — supplier-confident, not luxury or bargain.

  • TypeLato single-family (100 / 300 / 700 / 900), Light 300 body in sage
  • Best forSynthetic turf installers, landscape suppliers, "skip the markup" regional brokers
  • SignatureGhost-then-filled grass CTA, before/after slider, 9-SKU product grid, lightning-chartreuse top-borders
Explore → 4 palettes · 7 pages
Source Horizon Fix (South Shore MA multi-trade)

Sunrise trades, multi-service home repair.

Sunrise trades, multi-service home repair. Optimistic and capable — the "one phone for the whole house" register made visible.

  • TypeManrope 800 display + Inter body
  • Best forMulti-trade home services, generalist contractors, regional trades shops
  • Signature8-stop sunrise gradient, 4px sunrise bar above every section, 3×3 service-tile stack
Explore → 4 palettes · 7 pages