patagonia Brand Book
Design Blueprint · v1.0 · inferred

The patagonia-inspired
design system.

Earthy outdoor editorial — blue and forest green, serif accents, conservation-first photography.

earthyeditorialoutdoorblue-greenauthentic
#003E5C
primary
01

Foundations

Logomark

patagonia

Disk + wordmark. Always pair with at least 8px of clearspace. Use #003E5C background or invert for dark surfaces.

Voice

  • +earthy
  • +editorial
  • +outdoor
  • +blue-green
  • jargon-as-drama
  • hype
  • FOMO

Design principles

  • Content first. Chrome second.
  • Brand accent does the heavy lifting.
  • Generous whitespace, calm hierarchy.
  • Mono for numbers, sans for prose.

Vibe · inspired by Patagonia

Patagonia's brand sits between outdoor brand and editorial magazine. Deep blue and forest green accents, serif display moments, lots of large landscape photography, and copy that's as likely to be about activism as it is about jackets.

Comparable to: Patagonia, REI, Filson (more restrained)

02

Color system

Primary scale

50
mix
100
mix
200
mix
300
mix
400 ★
#003E5C
500
mix
600
mix
700
mix
800
mix

Neutrals

White
#FFFFFF
Bg
#FFFFFF
Surface
#F5F2EC
Border
#D9D2C2
Muted
#5C5347
Ink
#1F1A12

Semantic

Success
#C6471F
Warning
#F59E0B
Danger
#EF4444
Info
#60A5FA

Brand accents

Primary
#003E5C
Secondary
#4F7728
Accent
#C6471F
Highlight
#F59E0B
03

Typography

Display · 64 / 0.95 / -0.03 / 800
We're in business to save our home planet.
H1 · 44 / 1.05 / -0.03 / 700
Built to last.
H2 · 30 / 1.15 / -0.02 / 700
Don't buy this jacket.
H3 · 20 / 1.3 / -0.01 / 700
Real-time observability for every layer.
Lead · 18 / 1.55 / 400
A friendly intro paragraph that sits below a hero headline and explains the value in plain language.
Body · 15 / 1.55 / 400
Standard body copy. Most page content sits at this size. Generous line height keeps long passages readable, and the typeface reads as earthy.
Caption · 12 / 1.4 / 500 · uppercase
Section label · metadata · table headers
Mono · 13 / 1.5 / 500
Fair Trade Certified

Weights

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800
04

Tokens · spacing, radius, shadow

Spacing

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px

Radius

2 · sm
6 · md
8 · lg
12 · xl
16 · 2xl
∞ · pill

Shadow

sm
card
lift
05

Components

Buttons · variants

Buttons · sizes

Buttons · with icon

Form controls

This value isn't valid.

Precision

Advanced

Anonymous metrics

Help improve the product.

Slider

200

Total iterations. Use 0 to run unlimited.

Dropdown menus

Closed (trigger)

Open

Account
Profile
Workspace · patagonia-inspired
Settings
Keyboard shortcuts ⌘K
Sign out

Badges & tags

Active Pro Done Beta Deprecated New Running Live v1.0.0 patagonia-inspired

Avatars

JR
DK
AL
MP
SL
JR
DK
AL
+4
DK

KPI cards

Active users

12,402 ▲ +12.4%

Conversion

3.8% ▲ +0.4 pp

Revenue

$48.2k ▲ +18%

vs. last period

Churn

2.1%

this month

Feature cards

Data tokens

One source of truth: colors, type, spacing, radius, shadow. Generated artifacts derive from a single JSON.

Components

Buttons, inputs, cards, tables, alerts — every recipe keyed to the brand's CSS variables.

Observability

Real-time charts, status, and KPIs. Live data layouts that survive long sessions and dense tables.

Complex card · domain object

Running #patagonia-inspired-482

Live deployment · production cluster

Started 14m ago · 7.5k / 12k steps · ETA 9m

Loss

1.04

Throughput

2,412

Memory

14.2 GB

Learning rate

5e-5

62%7,520 / 12,000

Pricing cards

Free

For tinkering and learning.

$0/ month
  • 1 project
  • Community support
  • Open-source core
Most popular

Pro

For serious work.

$49/ month
  • Up to 10 projects
  • Priority support
  • Advanced features

Enterprise

For teams at scale.

Custom
  • Unlimited everything
  • Dedicated success
  • SLA + SSO + audit

Data table

Recent activity

42
ID Name Status Metric Owner Updated
#482production-deploy Running1.04
JR
Jon R.
14m ago
#481data-pipelineDone0.87
DK
Daniel K.
2h ago
#480backfill-2026Paused1.22
AL
Alex L.
5h ago
#479notificationsFailed
MP
Maya P.
1d ago
#478scratchDraft
JR
Jon R.
2d ago
Showing 1–5 of 42

Alerts & banners

Deployment complete.

All checks passed. Live in production after 14m 28s.

Memory approaching limit.

14.2 / 16 GB used. Consider scaling up before the next batch.

Run #479 failed.

CUDA out of memory at step 312. View logs for full stack trace.

New version available.

v1.1.0 dropped today. Drop-in compatible with your current config.

Pro

Unlock unlimited projects, priority support, and the full team workspace.

Tabs

Underline

Pill (segmented)

Chip filter

Modal / dialog

Confirm deployment?

patagonia-inspired v1.0 will go live to production. Estimated 14 minutes.

$ patagonia-inspired deploy --tag v1.0 --env production

Toasts

Run started

#482 · production cluster

!

Checkpoint saved

step-7000.bin · 2.1 GB

Tooltips

Hover me Tooltip on top
With shortcut Save⌘S
Branded Recommended

Progress & loaders

Linear

Build62%
Download28%
Memory89%

Circular

62%

Processing

7,520 of 12,000

ETA 9m 22s

Skeleton

Code & terminal

main.ts TS
import patagonia from "patagonia-inspired"

const result = await patagonia.deploy({
  env: "production",
  tag: "v1.0",
  timeout: 3600,
})

// Deploy in seconds
● ~/patagonia-inspired $ zsh
$ patagonia-inspired deploy --tag v1.0
  ✓ Validated config (4.0K)
  ✓ Resolved dependencies (24)
  ⚡ Starting deployment…

  step    elapsed  status
  ────    ───────  ──────
  0500    0:14     ✓
  1000    0:28     ✓
  7520    9:22     ← live

Charts

Throughput

requests / sec

7d

Loss

live run

▼ 0.38

Allocation

  • Compute 9.2G
  • Storage 3.2G
  • Network 1.8G

Empty state

No items yet

Kick off your first project to see it appear here. We'll keep you posted as things happen.

Breadcrumbs & pagination

06

Patterns · app shell

Dashboard

Good afternoon, Jon

Active users

12,402

Active

3

Churn

2.1%

Recent activity

07

Usage · do & don't

Do
  • Use #003E5C for one primary action per view.
  • Reserve mono for numbers, code, and identifiers.
  • Keep cards on surface, page on background.
  • Maintain consistent corner radius across components.
Don't
  • Don't stack more than one primary CTA per fold.
  • Don't use the primary color for long-form body text.
  • Don't drop heavy shadows everywhere — let surfaces breathe.
  • Don't mix mono and sans in the same heading.

Best for

  • Outdoor, apparel, conservation brands
  • Editorial-leaning ecommerce
  • Mission-driven products

Avoid for

  • Enterprise B2B dashboards
  • Pure dev tools
  • High-energy consumer apps
08

Accessibility

Contrast ratios. WCAG AA target ≥ 4.5 for body text, ≥ 3 for large text or UI components.

Foreground Background Contrast Use
#1F1A12#FFFFFF17.29 · AAABody, headings
#5C5347#FFFFFF7.54 · AAASecondary text
#003E5C#FFFFFF11.39 · AAABrand actions (button bg)
#FFFFFF#003E5C11.39 · AAABrand button (text on primary)
#EF4444#FFFFFF3.76 · AA LargeDanger states