The Front Porch styleguide

Block Party design system reference. Every primitive on this page is a real component imported from @/components/ — what you see here is what ships.

1Brand identity

Marks, wordmark, ornaments

Logo

Wordmark

theFront PorchtheFront PorchtheFront Porch

Bunting strip

Leaf flourish

Porch sketch

Heart

2Color tokens

Surfaces, ink, accents

Surfaces

paper

#fbf6ec

Default canvas

paper-warm

#f7efdd

Card / inset background

cream

#f4ecdc

Section break

cream-deep

#efe4cf

Photo placeholder

Ink

ink

#1a140c

Body / titles

ink-soft

#5a4a38

Body subdued

ink-mute

#8c7a60

Captions / meta

rule

#e1d2b0

Borders / dividers

Bunting accents

Tomato

tomato

tomato-d

tomato-soft

Mustard

mustard

mustard-d

mustard-soft

Sky

sky

sky-d

sky-soft

Grass

grass

grass-d

grass-soft

Lavender

lavender

lavender-d

lavender-soft

Category roles

Each seller category maps to one accent. These aliases are what domain code references — never reach for the raw accent token inside a category-aware component.

Kid

c-kid

c-kid-d

c-kid-soft

Bakery

c-bakery

c-bakery-d

c-bakery-soft

Maker

c-maker

c-maker-d

c-maker-soft

Garden

c-garden

c-garden-d

c-garden-soft

Other

c-other

c-other-d

c-other-soft

3Type scale

Five families, one voice

What's growing on your block?

DM Serif Display · 44px

Display H1 / hero headlines

Porches your neighbors love.

DM Serif Display · 32px

Section H2

brewing baking growing

Allura · 48px

Hero verb / accents

A map of the homemade things sold from porches near you.

DM Sans · 16px

Body — readable, neutral

Browse the map →

DM Sans · 15px · 600

Button / CTA — semibold 600

A NEIGHBORHOOD DIRECTORY

DM Sans · 11px · 700

Eyebrow — tracked, bold 700

"best sourdough I've had outside Paris."

Cormorant Garamond · 20px · italic

Pull quotes / italic prose

thefrontporch.store

IBM Plex Mono · 13px

URLs / mono tags

4Icons

One 24×24 family

Hand-drawn on a 24×24 grid, 1.6 stroke, currentColor. Pass size and color via props. Add new icons to components/brand/icons.tsxonly — they're family members, not independent assets.

ArrowLeft

ArrowRight

Bullseye

Calendar

Camera

Check

Chevron

Clock

Copy

Edit

Facebook

Instagram

Map

Medal

Plus

Sms

Star

5UI primitives

The reusable interface

Button

Card variants

paper

warm

tomato

mustard

sky

grass

lavender

Eyebrow labels

Default eyebrowTomato eyebrowMustard eyebrowSky eyebrowGrass eyebrowLavender eyebrow

StatusPill (semantic)

Open nowSoonBy apptClosedCancelled

OpenBadge

openCOME ON IN!

soonOPENS SAT

visitBY APPT

closedCOME BACK SOON

6Domain

Porch components

PorchCheck trust badge

Porch CheckPorch Check

StandStatusPill (event status)

Open ✓OpenOpening soonOpens in 1h 45mClosedCancelled

BadgesRow

First lemonade

Repeat neighbor ×4

Saturday regular ×7

Cookie taster ×12

GoalChalkboard (kid-only)

— Saving up for —

Lily wants a new bike.

$47 of $120

thank you, neighbors

Pin colors (map)

Kid

Bakery

Maker

Garden

Other

7Brand motifs

The signature moves

Bunting strip

Five colors strung from a sagging line. Hero gets a long one; section headers can use a short 3–5-flag fragment. Don't repeat it more than twice per screen.

Wordmark lockup

the in serif italic, Front Porch in Allura. Never set the script word in another typeface.

theFront Porch

“Open” door badge

Round badge mimicking a bakery door hanger. Reserved for the featured-shop and shop-detail status hero. Live listings use the small StatusPill, not this.

openCOME ON IN!

soonOPENS SAT 10

Leaf flourish

Simple line + two-petal leaf. Use as a section divider or to close a quiet section. One flourish per screen, max — let the script type and bunting do the rest of the talking.

8Copy voice

How it sounds

Say · don't say

✓porch shopstorefront
✓from my homebusiness
✓pick it up at the porchcheckout
✓neighborscustomers
✓list your porchcreate a listing
✓pay directprocess payment
✓a real person reviewsautomated review
✓free, foreverfreemium

Tone rules

Second person. "Your block," "your neighbors," "your porch." Never "users."
Concrete, not abstract. Name the actual things: sourdough, lemonade, candles, eggs. Parallel lists.
Short sentences. Then longer ones. Mix the rhythm — don't pile on clauses.
Avoid commerce words. No "merchant," "vendor," "transaction," "checkout," "platform." Triggers the wrong mental and legal frame.
Don’t certify compliance. Sellers self-attest. We’re educational, not advisory. Never say "you’re compliant."
Privacy notes are matter-of-fact. "Address hidden by default" is a feature, not an alarm.

9Migration map

From the old stack → Block Party

The earlier production app used a different type stack and a sage-leaning palette. Below is the direct swap table — search-and-replace through globals.css and per-component style props in that order.

Layer	Was	Now	Notes
Display headlines	EB Garamond Medium	DM Serif Display	Tighter, more editorial.
Italic accents	EB Garamond Italic	Cormorant Garamond Italic	For "what they sell" descriptors and pull quotes.
Body	Nunito	DM Sans	Same vibe, cleaner numerals. 400 / 500 / 600 / 700.
Script accent	Caveat (handwritten)	Allura	Bigger jump. Allura reads as signage, not handwriting.
Eyebrow	Architects Daughter	DM Sans 700, 0.22em tracked, UPPER	Lose the second handwritten face — Allura is enough.
Mono / labels	IBM Plex Mono	IBM Plex Mono (keep)	Used for addresses, URLs, technical labels.
Brand color	Sage (#6F8765)	Tomato (var(--tomato) · #D94B3A)	CTAs get LOUD. Sage retires.
Open status color	Sage	Grass (var(--grass) · #6FA84A)	Reserve grass exclusively for "open now" semantic.
Map pin colors	peach / brown / teal / sage / taupe	tomato / mustard / sky / grass / lavender	Brighter, higher contrast, easier to read on cream.
Border radius	rounded-md (6px) everywhere	12px cards · 18px hero blocks · 8px chips	Larger radius on key surfaces, smaller on chrome.
Primary button	bg-sage text-paper	Button variant="primary" (tomato bg, white text)	Tomato attention; outline for secondary.

components/brand · components/ui · components/stand