Puzzle Fund — Brand Style Guide
Brand Style Guide v4.0

Puzzle Fund
Design System

Light, airy, and approachable — with #E16E04 as the one warm anchor. Warm Cream palette, Outfit display font, DM Sans body, soft slate neutrals throughout.

OutfitDisplay / Headings
DM SansBody / UI
#E16E04Logo Orange
#334155Text Slate
Section 01

Brand Palette — Warm Cream

Orange is the only saturated accent. The background is a warm cream-tinted white, text stays slate rather than black, and UI fills are gentle washes instead of heavy blocks.

Warm Cream
Warmest ground. Cream-tinted white, soft orange washes, slate text. Handcrafted and welcoming.
Page bg#FFFAF5
Brand / CTA#E16E04
Soft accent#FDBA74
Body text#64748B
Headings#334155
Section 02

Color System

The lightest tones are now the darkest accent fills. Everything flows toward white. Orange is the only fully warm, saturated moment on the page — use it deliberately.

Logo Orange — the one saturated anchor
Ghost
#FFF8F0
Pale
#FEF3E2
Soft
#FDBA74
Mid
Mid
#F59E0B
LOGO
Logo Orange
#E16E04
Slate Neutrals — structure without heaviness
Page
#FAFBFC
Ghost
#F1F5F9
Wash
#E8EFF6
Border
#CBD5E1
Muted
Muted
#94A3B8
Body
Body Text
#64748B
Head
Headings
#334155
Teal & Blue — soft interactive accents
Teal Ghost
#EFF6FF
Teal Pale
#BFDBFE
Teal Soft
#93C5FD
Base
Teal
#2563EB
Blue Ghost
#EFF6FF
Blue Pale
#BFDBFE
Base
Blue
#3B82F6
Gradients — warmth and progress cues
Orange Warm Fade#FFF8F0 → #FDBA74
Teal Fade#EFF6FF → #93C5FD
Slate Lift#FAFBFC → #E2E8F0
Color Ratio
60% Neutrals / White
20% Slate
12% Soft Orange
8%

Full-saturation orange is reserved for primary CTAs, overlines, and key stats only. Everywhere else, soft washes carry the warmth.

Section 03

Typography

Outfit brings a clean, warm, approachable feel to headings — modern without being cold, friendly without being childish. DM Sans keeps body copy crisp and product-ready.

Display · Headings
Outfit
Bring Your Fundraiser to Life
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
300 · 400 · 500 · 600 · 700 · 800
Body · UI · Labels
DM Sans
Puzzle Fund helps organizations raise support through a fundraising experience that feels interactive, clear, and momentum-building — not flat and forgettable.
300 · 400 · 500 · 600
Type Scale
64px / 800Hero headline
Fundraising, rebuilt.
40px / 700Section headline
How It Works
24px / 700Card title
Downtown Mural Restoration
16–18px / 400Body copy
Every donation claims a puzzle piece. Watch the image come together as your community rallies around the cause.
15px / 600Button text
11px / 700Overline / label
Community Project
13px / 400Caption / support
68 of 100 pieces claimed · 12 days remaining
Section 04

Buttons

Orange is the only fully saturated button — reserved for the single most important action on any screen. Everything else is soft, light, and understated so the orange CTA earns its weight through contrast.

Primary Actions
State Buttons
Sizes
Section 05

Campaign Cards

Cards are white surfaces on a light ground — elevation comes from a soft shadow and a gentle border. Card image areas use warm washes instead of dark gradients. Progress bars stay in the orange-to-amber family for active, teal for funded.

🏙️
Community Project
● Live
Downtown Mural Restoration
Help restore the iconic 1987 community mural. Every piece claimed reveals more of the original artwork.
$17,000 of $25,00068% · 12 days left
🎓
Education
⏱ Ending Soon
Robotics Lab for Lincoln High
Two days left, eight pieces needed. Students are ready to build the moment this fully funds.
$23,000 of $25,00092% · 2 days left
🐾
Animals & Rescue
✓ Funded
Dogs on Duty — K9 Memorial
All 100 pieces claimed. The memorial is being built. Thank you to every backer who made this happen.
$25,000 of $25,000100% · Complete 🎉
Section 06

Form Elements

Clean, airy inputs with a soft slate border. Focus state uses the orange ring — the only saturated moment in the form. Fields feel spacious and effortless to fill.

Choose something catchy and memorable.
Please enter a valid email address.
Section 07

Special Components

Stats, timers, piece counters, alerts, badges, tags, and donor lists. All in the same light register — orange appears only in key numbers and CTAs.

Campaign Stats
$17K
Raised
68
Pieces Claimed
142
Backers
12
Days Left
Countdown Timer
04Days
:
12Hours
:
38Mins
:
07Secs
Piece Counters
🧩 68 / 100 pieces claimed
🎉 100 / 100 — Complete!
Status Badges
● Live✓ Funded⏱ Ending Soon✨ New
Category Tags
CommunityAnimalsEducationArtLocal
Donor List
JD
Jane D.
"Love this project!"
$50
MR
Mike R.
"Piece #42 is mine!"
$25
AK
Anonymous
$100
Alerts & Notifications
🧩
This campaign has 32 pieces remaining. Share it to help reach the goal.
✅
Piece #42 claimed! You'll receive a confirmation email shortly.
⏱
Only 2 days left. This campaign needs 8 more pieces to reach its goal.
⚠️
Payment failed. Please check your card details and try again.
ℹ️
Your campaign is under review and will go live within 24 hours.
Section 08

Spacing Scale

4px base grid. On a light palette, generous whitespace is what creates the premium feel — lean into it liberally.

4px — icon gaps, tight nudges
8px — inline element spacing
12px — badge / tag internal gaps
16px — card internal padding base
24px — section sub-element gaps
32px — card padding, component margins
48px — section internal breathing room
64px — hero internal padding
80px — between major page sections
Section 09

Design Principles

Six principles behind every Puzzle Fund design decision.

🧩
Piece by Piece
Every interaction should feel like progress. Show the impact of each contribution visually and immediately.
✨
Delightful Details
Micro-interactions, smooth transitions, satisfying moments. Funding should feel rewarding — never transactional.
🤝
Trust Through Transparency
Clear progress, honest numbers, visible backers. People fund what they can see and understand.
📱
Mobile-First, Always
Most supporters discover campaigns on their phone. Every component must feel native on small screens.
🌐
Accessible to All
High contrast, keyboard navigation, screen reader support. Every supporter can participate fully.
⚡
Speed Builds Confidence
Minimal JS, optimized assets, no heavy frameworks. A fast experience signals quality and professionalism.
Section 10

CSS Design Tokens

Copy-paste ready. The lightest tones are now the darkest UI fills — the whole system lives in the upper end of the lightness scale.

/* ================================================PUZZLE FUND — Design Tokens v4Light palette. Orange is the one warm anchor.================================================ */:root {/* Logo Orange — only fully saturated color */--pf-orange: #E16E04;--pf-orange-mid: #F59E0B;--pf-orange-soft: #FDBA74;--pf-orange-pale: #FEF3E2;--pf-orange-ghost: #FFF8F0;/* Slate — text and structure, never heavy */--pf-navy-text: #334155; /* headings */--pf-navy-body: #64748B; /* body text */--pf-navy-muted: #94A3B8; /* captions */--pf-navy-border: #CBD5E1; /* borders */--pf-navy-wash: #E8EFF6; /* soft fills */--pf-navy-ghost: #F1F5F9; /* lightest wash *//* Surfaces */--pf-page: #FAFBFC;--pf-surface: #FFFFFF;/* Teal — progress & success */--pf-teal: #2563EB;--pf-teal-soft: #93C5FD;--pf-teal-pale: #BFDBFE;--pf-teal-ghost: #EFF6FF;/* Blue — interactive elements */--pf-blue: #3B82F6;--pf-blue-pale: #BFDBFE;--pf-blue-ghost: #EFF6FF;/* Semantic */--pf-success: #10B981;--pf-danger: #EF4444;/* Typography */--font-display: 'Outfit', system-ui, sans-serif;--font-body: 'DM Sans', system-ui, sans-serif;/* Border Radius */--r-sm: 4px; --r-md: 8px; --r-lg: 12px;--r-xl: 16px; --r-2xl: 20px; --r-pill: 9999px;/* Shadows — gentle on a light ground */--shadow-sm: 0 1px 3px rgba(51,65,85,.06);--shadow-md: 0 4px 12px rgba(51,65,85,.07);--shadow-lg: 0 10px 28px rgba(51,65,85,.08);--shadow-xl: 0 20px 44px rgba(51,65,85,.09);}
🧩

Puzzle Fund

Brand Style Guide v4.0 · #E16E04 · Outfit + DM Sans

Every piece matters.