BaseLocal — Design System Showcase

01Design Tokens

The atomic values everything else is built on. Colors, type, spacing, radius, shadows, motion.

Colors

Repeated from the brand guide. Use the token names — never hard-code hex.

Terracotta

primary

#C2604A

Deep Terracotta

primary-hover

#A84E3B

Espresso

dark

#2C2421

Charcoal

body

#444444

Gray

secondary-text

#797979

Silver

light-text

#999999

Warm Cream

bg-warm

#FAF6F4

Warm Border

border

#E8E0DC

White

bg-page

#FFFFFF

Green

success

#2D7A2D

Light Green

success-bg

#EEF7ED

Red

error

#C0392B

Light Red

error-bg

#FBEAE7

Typography

h1Bitter 35px / 700 / 1.2 / Espresso

The quick brown fox jumps over the lazy dog

h2Bitter 28px / 700 / 1.3 / Espresso

The quick brown fox jumps over the lazy dog

h3Lato 22px / 700 / 1.3 / Espresso

The quick brown fox jumps over the lazy dog

bodyLato 17px / 400 / 1.7 / Charcoal

The quick brown fox jumps over the lazy dog. Body copy is the workhorse — most paragraphs use this exact size, weight, and color.

body-boldLato 17px / 700 / 1.7 / Espresso

The quick brown fox jumps over the lazy dog

smallLato 15px / 500 / 1.5 / Gray

The quick brown fox jumps over the lazy dog

labelLato 13px / 800 / 1.0 / uppercase / 0.5px tracking

The quick brown fox

fine-printLato 12px / 400 / 1.6 / Silver

The quick brown fox jumps over the lazy dog. Used for disclosures and legal copy only.

Spacing

Base unit is 4px. Every spacing value is a multiple of 4.

space-xs4px

space-sm8px

space-md12px

space-base16px

space-lg20px

space-xl24px

space-2xl32px

space-3xl40px

space-4xl48px

space-5xl80px

Border Radius

radius-none 0

radius-sm 4px

radius-md 6px

radius-lg 8px

radius-pill 20px

radius-circle 50%

Shadows

Sparingly used. Always warm-tinted (terracotta or white) — never cool grays.

cta-hover 0 4px 14px rgba(194, 96, 74, 0.35)

cta-active 0 2px 8px rgba(194, 96, 74, 0.25)

card-lift 0 8px 24px rgba(255, 255, 255, 0.15)

Motion

Motion tokens are abstract — listed here as reference. See design-system.md § Motion & Animation for full keyframes and patterns.

Token	Value	Usage
ease-out-expo	cubic-bezier(0.16, 1, 0.3, 1)	All entrance animations — fast start, gentle settle
duration-entrance	0.7s	Scroll reveal, hero entrance, grid stagger
stagger-gap	80ms	Base delay between sequential items

02Logos

Three color variants × two formats (full wordmark and icon). Source files live in previews/baselocal/assets/logos/.

Full wordmark

Terracotta · on white

Espresso · on cream

White · on dark

Icon

Terracotta · on white

Espresso · on cream

White · on dark

03Components

Bridge-page and landing-page building blocks. Forms have their own section below.

3.1 Buttons — Primary

Sizes (default state)

States (default size)

3.2 Buttons — Secondary

Sizes (default state)

States

3.3 Links

Primary link · default

Read more about our editorial standards before submitting.

Primary link · hover

Read more about our editorial standards before submitting.

Muted link · default

Privacy · Terms · Contact

Muted link · hover

Privacy · Terms · Contact

3.4 Stat Callout

In the most recent reader survey, 78% of subscribers said BaseLocal helped them discover at least one new place every month — almost double the rate they reported from any other local source.

3.5 Comparison Box (VS Box)

What doesn't work

Generic "Top 10 Things to Do" lists
Algorithmic event aggregators
Paid placements buried in editorial
Stale calendars no one's updated

What does

Hand-picked weekly recommendations
Local editors who actually live here
Clear separation between picks and ads
Updated every Thursday morning

3.6 Inline CTA (Early CTA)

…the kind of weekly pick most local guides miss entirely.

Already convinced? Submit your event in under two minutes →

If you'd rather see a few more examples first, keep reading…

3.7 Safety / FAQ Section

Is this safe to submit?

Every submission goes through a real editor before it's published. We're not a free-for-all listings site — we're a curated directory.

No sharing your email with third parties, ever
You can edit or remove your listing at any time
Our team reviews submissions within one business day
Featured placement is optional — base listings are always free

3.8 Pick Cards — Base

Pick #2

Anchor & Oar Coffee

Tacoma's loudest, friendliest neighborhood roaster

Roasts every batch in-house, twice a week
Open 6am to 4pm, seven days a week
Outdoor patio with heaters in winter

From $4.50

Single-origin pour-overs run $5.50; drip refills are $1.

3.9 Pick Cards — Featured

Top Pick

North Sound Roasters

Award-winning craft roaster with a no-rush policy

Editor's Pick

2024 Pacific Northwest Roaster of the Year
Beans roasted within 72 hours of brewing
Free coffee education classes every Saturday
Dog-friendly indoor seating with house water bowl

From $5.00

Subscription saves 15%. Free local delivery on orders over $30.

Save 20% with code BASELOCAL

Affiliate link — your discount stays the same and we earn a small commission that funds editorial.

3.10 Mid-Page CTA

Ready to see what a real local guide looks like?

Read this week's edition →

3.11 Bottom CTA

Two ways to get started

Pick the one that fits — both are free to try.

Already a member? Sign in here.

3.12 Disclosure Block

BaseLocal may earn a commission when you click certain links on this page and complete a purchase or subscription. Our editorial picks are independent — partners do not pay for placement, and commissions never determine which products we recommend. Individual results vary. Nothing on this page is medical or financial advice.

3.13 Site Header

3.14 Section Divider

…end of one section.

Start of the next section.

04Forms

Form primitives and patterns from the events submission flow. The 13 sub-sections below cover inputs, layouts, alerts, and confirmation states.

4.1Text Input

Default field for short, single-line text. 44px min height, 6px radius, focus ring uses terracotta.

Default · empty (placeholder)

Default · filled

Focus

Error

Disabled

With label · helper text

Event website

Where attendees can RSVP or learn more. Optional.

With label · required · error

Email *

Enter a valid email address.

4.2Textarea

Same styling as text input. Min-height 120px. Counter sits below, right-aligned.

Default · with counter

Event description *

187 / 500

Counter near limit (terracotta)

472 / 500

Counter over limit (red)

514 / 500

4.3Select / Dropdown

Native select, styled to match text input. Custom chevron in terracotta.

Default

Time zone

Focus

4.4Date and Time Inputs

Native date and time inputs. Browser-rendered pickers — for multi-day selection use the multi-select calendar.

Date

Door open

Time

Start time

4.5Field Label · Helper · Error

Labels sit above their field. Required gets a terracotta asterisk. Helper and error text replace each other — never both at once.

Required label

Email *

Optional label · helper text

Phone

For us to reach you about your submission. Not shown publicly.

Error text

Phone *

Enter a valid phone number.

4.6Form Section Header

Groups related fields. Bitter 22px, thin warm-border underline.

Event details

…fields would go here…

Contact info

…fields would go here…

4.7Category Pill Selector

Single-select pill grid. Wraps to multiple rows. Tap to select.

All 20 BaseLocal categories · Music selected

4.8Location Multi-Select

Search + grouped list + chips strip. Made for picking N from a few hundred. Click a row to toggle.

Tacoma, WA × Olympia, WA × Bellingham, WA ×

3 selected

Washington

Bellingham, WA

Everett, WA

Olympia, WA

Seattle, WA

Spokane, WA

Tacoma, WA

Oregon

Bend, OR

Eugene, OR

Portland, OR

Salem, OR

California

Long Beach, CA

Los Angeles, CA

Oakland, CA

Sacramento, CA

San Diego, CA

4.9Multi-Select Calendar

Click any individual day to toggle. Quick picks are additive (except Clear). Past months are inaccessible — back chevron hides on the current month.

April 2026

SunMonTueWedThuFriSat

Next month — May 2026 (with 4 days selected on the 1, 2, 8, 15)

May 2026

SunMonTueWedThuFriSat

4.10Order Summary Card

Live cost breakdown. Math line shows the multiplication, total emphasized in Bitter.

Empty state

Order summary

Pick dates and locations to see your total.

Filled · Directory + Newsletter

Order summary

PlanDirectory + Newsletter

Days3

Locations2

Per unit$25

3 days × 2 locations × $25

Total $150

Mobile pattern · sticky bottom bar (collapsed)

Total $150

4.11Step Indicator

Linear 4-step progress. On mobile, collapses to a single "Step n of 4" pill.

Desktop · step 2 (Details) is current

1 Plan

2 Details

3 Payment

4 Done

Mobile compact pill

STEP 2 OF 4 · DETAILS

4.12Inline Alert

Three variants. Used at the top of a form or above a section.

ⓘ

Heads up Your event is reviewed before going live. Most submissions are approved within one business day.

⚠

Something needs fixing Your card was declined. Try a different payment method or contact your bank.

✓

Saved Your changes are saved. You can keep editing or come back later.

4.13Confirmation Block

Done-state hero. Big green check, headline, body, optional next-steps callout.

✓

You're in.

Your event has been submitted and your payment has been processed. We'll review the details and get it live in the directory within one business day.

What happens next

You'll get an email confirmation with your order number and a receipt.
Our team reviews the submission for fit and accuracy — usually within one business day.
Once approved, your event is pinned to the top of the directory in each location you picked, on the days you picked.
If you chose Directory + Newsletter, your event also runs inside the newsletter on those days.

05Newsletter Components

Email-safe building blocks. Render in email clients and on web preview pages. Stylesheet at previews/baselocal/newsletters/styles/newsletter.css.

5.1 Section Card

White card on cream paper. 5px radius. 30px padding. The default container for almost every newsletter section.

5.2 Top Nav

Subscribe | Submit an Event | Advertise

…flush left, uppercase tracking, 3px circle separators, hairline below.

5.3 Masthead

5.4 Kicker

01 — This Week

Numeric anchor. Section heading sits below.

5.5 Section Heading + Dek

02 — In the News

What we're tracking this week

Five stories shaping how locals get around, eat, and gather.

…body content goes here.

5.6 News Items (with auto-divider)

03 — In the News

This week's headlines

Pacific Avenue closure — the city finalized the bus-only lane for the downtown corridor. Construction starts May 11.

Point Defiance ferry resumes weekend service this Saturday after the eight-week dock retrofit. Schedule and fares here.

The old Woolworth's building is officially the next downtown food hall. Eight stalls, opens late summer. Lineup announced.

5.7 Tag Pills

Five category variants — used inline with highlights and quick lists.

Free Outdoor Kids Music Food

5.8 Advertise CTA

…end of Local Business Spotlight content.

Want to be featured here?

Reach 14,000+ engaged locals every Thursday morning.

See sponsorship options

5.9 Events Section

04 — Events

This weekend

🎵 Tacoma Symphony — Spring Pops
Saturday May 2, 7:30pm · Pantages Theater

🌳 Wright Park Plant Swap
Sunday May 3, 10am–2pm · Wright Park

🍣 Tacoma Night Market
Friday May 1, 5–10pm · Old City Hall

5.10 Highlights / Quick Lists

05 — Quick Hits

Worth knowing about

Free First Friday Art Walk kicks off the warm season this week.
Kids Story time at King's Books moves outside through September.
Food Wapato Park taco truck reopened — Tuesdays through Sundays.
Outdoor Point Defiance loop repaving wraps up Friday.

5.11 Editor Signature

That's everything for this week. Reply if you spot something we should cover next time — we read every email.

Maddie Editor, Tacoma Edition

5.12 Ranked Card

1

North Sound Roasters made the best espresso we drank all year

Beans roasted Tuesday were on the bar by Friday. The shop's house blend is balanced enough for milk drinks but interesting enough to drink straight. Visit their roastery →

2

Anchor & Oar Coffee earned its neighborhood-favorite reputation

Open early, friendly to remote workers, and dialed in on the basics. Their cortado is a perfect 3.5oz pour every single time. Plan a visit →

3

Pacific Bean Co. — best subscription for serious home brewers

If you grind your own at home and care about freshness dates, this is the program to beat. Use code BASELOCAL for 20% off your first month. Start a subscription →

5.13 Newsletter Footer

06Layout

Content widths, padding, and breakpoints. Reference table only.

Content widths

Context	Max-width
Website (full-width sections)	1120px (--max-width-site)
Website (narrow content)	720px (--max-width-content)
Bridge pages / articles	720px
Newsletter container	670px

Page padding

Context	Padding
Bridge page (desktop)	48px top, 24px sides, 80px bottom
Bridge page (mobile)	48px top, 24px sides, 80px bottom
Newsletter	24px 16px 48px

Responsive breakpoints

Breakpoint	Behavior
≤ 600px	H1 → 28px, H2 → 24px. Pick card padding reduces.
≤ 560px	VS box stacks to single column.

07Accessibility

Contrast targets and minimum sizes. Reference table only.

Requirement	Spec
Body text contrast	WCAG AA minimum (4.5:1). Charcoal on white = 9.73:1 ✓
Link/CTA contrast	Terracotta on white = 4.55:1 (AA) ✓
Heading contrast	Espresso on white = 15.4:1 (AAA) ✓
Minimum body font	16px (newsletter), 17px (web). Never smaller for body text.
Touch targets	Minimum 44×44px for all tappable elements on mobile.
Gray text minimum	Gray #797979 only at 16px+ or for non-essential info. Silver #999 for fine print only.

Source of truth: brain/brands/baselocal/design-system.md. Components added or changed there should be backfilled here through the extend-design-system skill.