North Woods style guide

The living design system for makeminnesota.org — a cozy, warm, outdoorsy look built on forest, lake, birch, and campfire. All tokens live in assets/css/main.css as CSS custom properties.

Core palette

Drawn from a Minnesota north-woods scene: evergreen forest, a blue lake, birch-bark paper, and a campfire glow. --birch is the page, --paper is every card, --forest anchors the hero and footer, and --amber is the accent that pulls the eye.

Forest
#1c3a2b
Forest deep
#142a20
Pine
#2f5d43
Lake
#34708f
Amber
#dd8a3a
Clay
#c05f3c
Birch
#f6efe1
Paper
#fffdf6
Bark (text)
#33291e
Bark soft
#6f6152

Category accents

Each filter group carries one accent color, exposed as --accent via [data-group]. Cards borrow it for their top border and badge; filter pills borrow it for hover and active states. Add a category in _data/categories.yaml, a bucket in _data/groups.yaml, and a matching --g-* color here.

🛠️ Makerspaces
--g-makerspaces
🏺 Ceramics
--g-ceramics
🔥 Metal & Fire
--g-metalfire
🫧 Glass
--g-glass
🧶 Fiber & Craft
--g-fiber
🪵 Wood
--g-wood
🖨️ Print & Photo
--g-print
🏫 Schools
--g-schools
🎪 Events
--g-events

Typography

Headings use Fraunces, a soft, organic display serif. Body copy uses Nunito, a rounded, friendly sans. Together they read warm and hand-made rather than corporate.

Display / Fraunces 600
Build something real
Heading / Fraunces 600
Northern Clay Center
Body / Nunito 400
A cooperative studio for potters and sculptors, with classes for every level and open-studio access for members. The kind of place you leave with clay under your nails.

Components

Filter pill

Card

🏺Ceramics

Northern Clay Center

📍 Minneapolis

A cooperative studio for potters and sculptors, with classes for every level and open-studio access for members.

  • Wheel throwing
  • Gas & electric kilns
  • Glaze lab
  • +2 more

AccessClass fees; member studio time available

Principles

Warm over stark. Cream paper, rounded corners, soft shadows — nothing pure-white or hard-edged.
Color codes the craft. A glance at a card's accent tells you what kind of making happens there.
Data-driven. Content changes happen in _data/makers.yaml; categories and buckets in _data/categories.yaml and _data/groups.yaml. No HTML edits needed to add a space.