Christopher Mullins / Principal Product Designer

Studio Design Kit

Live rendering against production CSS · not indexed · dev reference only

01

Color tokens

Base
–wp–preset–color–base
#faf9f7 · page bg
Contrast
–wp–preset–color–contrast
#1a1a1a · body text
Subtle
–wp–preset–color–subtle
#f0ede8 · dividers, code bg
Muted
–wp–preset–color–muted
#6b6560 · captions, meta
Accent
–wp–preset–color–accent
#2c5f6e · –studio-teal · links, em, buttons
Teal light
–studio-teal-light
#3d7a8c · hover / secondary accent
Cream
–studio-cream
#f3efe8 · gr-story–cream bg
Ink
–studio-ink
#0e1a1f · dark section bg
02

Type scale

Display
–studio-display
clamp(2.75rem, 5.5vw, 4.5rem)
Fraunces · weight 300
Claim-driven design
H1 · x-large
fluid 1.75→2.5rem
Fraunces serif
margin-bottom: spacing–40

A trustworthy mirror

H2 · large
fluid 1.25→1.75rem
Fraunces serif
margin-top: spacing–55

Ground truth lives on a sheet

H3 · medium
fluid 1→1.125rem
Fraunces serif
margin-top: spacing–45

Human review is architecture

Body · medium
fluid 1→1.125rem
Source Sans 3 · lh 1.55
default prose
No reservation API. The Forest Service runs a first-come signup clipboard at HQ. Overclaiming availability would erode trust faster than no app at all.
Small
0.875rem
Source Sans 3
nav · captions · tags
Caption · nav · metadata · byline · badge · tag
Section kicker
.gr-section-kicker
0.72rem · uppercase · ls 0.16em
Source Sans 3 · weight 600

01 — Problem

light variant (on dark)

Studio section label
.studio-section-label
Same metrics as kicker
used outside Greenridge scope

At a glance

03

Spacing scale

–wp–preset–spacing–20 · 0.5rem
–wp–preset–spacing–30 · 1rem
–wp–preset–spacing–40 · 1.5rem
–wp–preset–spacing–45 · 2rem
–wp–preset–spacing–50 · 2.5rem
–wp–preset–spacing–55 · 3rem
–wp–preset–spacing–60 · 4rem
–wp–preset–spacing–70 · 6rem
05

Section patterns

Kicker + H2 + lead + CTA · light bg

01 — Problem

Ground truth lives on a physical sheet

No reservation API. The Forest Service runs a first-come signup clipboard at HQ. Overclaiming availability would erode trust faster than no app at all.

Problem discovery

Kicker + H2 + lead + CTA · dark bg

What it taught

You can’t automate authority

The model reads the sheet. The sheet is still authoritative.

Five lessons
06

Pull quote

Uncertainty is not an edge case in the product. Uncertainty is the product condition.

Greenridge design process
07

Surface cards

gr-surface-card · gr-surface-card–featured · gr-surfaces__grid

Case study

Hero, process, pipeline, ML loop, design kit.

Read case study →

Default card

Know before you go · TestFlight · clipboard landing.

Link text →
08

Device frame

gr-device-frame — phone chrome applied via ::before/::after

160px (thumbnail)

Map screen

200px (story section)

Sites list

260px (showcase tile)

Clipboard capture
09

Glance grid + stack table

gr-glance__grid — dt/dd at-a-glance

Role
Product design · UX writing · design system · full-stack · ops
Stack
React · Vite PWA · Node · Cognito · Claude · Lightsail
Status
Live PWA · iterative field hardening

gr-stack__table — approach table

ClientVite + React PWA
APINode/Express · Cognito
VisionClaude multimodal + admin review
DeployLightsail · Capacitor shell
10

Home hero

studio-hero–home · cover block · display type · entrance animation · min-height capped to 520px in kit (production: min(88vh, 920px))

Principal product design · validation-stage AI

Shaping AI products before they’re built — for work where getting it wrong matters.

Full-process product design for AI and consequential systems.

11

About hero

studio-hero · alignfull · 58/42 split · about-hero-photo fills right column edge-to-edge

Full-process product design for AI and consequential systems.

Principal Product Designer · Bristow, VA · 23+ years

Christopher Mullins