Skip to main content

Marigold Design System · v0.4

Brand &
Components

Every token, every component, every pattern. Compare everything you build against this page. Source of truth for the big push.

ColorsTypeButtonsCardsSectionsNavVoice

Colors

Three-color system: earth green + white + marigold orange. Sky and sun are rare sub-accents — use only when differentiation is required.

Primary palette (90% of all surfaces)

Earth

#1E2311

Primary text, dark surfaces, hero bg

White

#FFFFFF

Card surfaces, clean sections

Eggshell

#FFECE5

Warm page background

Marigold

#F86B00

Primary CTA — ONE per view

Orange

#FB8621

Hover state on marigold

Stem

#565B1A

Logo, quiet accent, secondary

Sub-accents (use sparingly)

Sky

#88C4D7

Info states only (rare)

Sun

#F4C75E

Featured badges only (rare)

Color rules

  • • One marigold CTA per view — never two orange buttons visible
  • • Earth text on white/paper surfaces. Eggshell text on earth surfaces.
  • • Sky and sun ONLY for status pills or badges, never for CTAs or backgrounds
  • • Never place marigold orange on stem olive — poor contrast, muddy
  • • Derived: border = earth @12%, muted text = earth @60%

Typography

Fraunces for display + headlines. Inter for everything else. Loaded via next/font — zero external requests.

Display XL

80px

Flourish

Display L

64px

Experiences

H1

48px

Worth showing up for

H2

32px

Popular this week

H3

24px

Restorative Yoga Flow

H4

20px

Featured this weekend

Body L

18px

Local workshops for people who want their weekend to mean something.

Body

16px

Browse by category, city, date, or vibe. Filter by price, group size, time.

Body S

14px

Sat, Apr 19 · 1:00 PM · West Chester, PA

Caption

12px

18 spots left

Overline

11px

Trending now

Spacing

8px base grid. No magic numbers in code — always use spacing tokens.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

space-16

64px

space-24

96px

space-32

128px

Buttons

Primary (marigold) for ONE CTA per view. Earth for secondary. Outline for tertiary. All pill-shaped (rounded-full).

Primary variants

Sizes

With icons

On dark surfaces

Disabled

Pills & Badges

Category labels, status indicators, filter chips. Earth-toned by default.

Category chips (filter bar)

Status badges

Arts & Crafts6 spots leftFeaturedApproved Philadelphia, PA

Trust badge (hero overlay)

Join 2,400+ experiences

Inputs

Forms are the product. Consistent focus rings (marigold or stem). 44px minimum touch targets.

Standard inputs

Search (in-nav style)

Newsletter

Hero search (white card)

Select / dropdown

Cards

The primary content unit. Rounded-2xl, white surface, subtle border, hover lift. Used for experiences, hosts, cities, vibes, stats.

Experience card (the most important component)

Spring Sips & Succulents
Arts & Crafts6 spots left

Chester County Cart Co

Spring Sips & Succulents

Sat, Apr 19 · 1:00 PM

West Chester, PA

$85
507
Cocktail Garden Workshop
Food & Drink

Bierhaul Townhouse

Cocktail Garden Workshop

Wed, May 13 · 6:00 PM

West Chester, PA

$65
219

Vibe / collection card (horizontal scroll)

Date Night
🌙Date Night
Girls Night
🥂Girls Night
Solo Adventure
🧘Solo Adventure
Outdoor
🌿Outdoor

City card

Philadelphia

Philadelphia

340 experiences

New York

New York

890 experiences

Los Angeles

Los Angeles

720 experiences

Stat card (floating overlay)

157

Cities

4.9

Rating

9.25%

Host fee

Guarantee card

The Marigold Guarantee

Host cancels? Full refund in 48 hours. No surprise fees, ever.

Host benefit card (on dark)

Predictable payouts

Released 7 days after each event.

Keep your list

Export attendees anytime.

9.25% host fee

No listing fees. No reserve holds.

How it works card (light + dark)

Step 01

Discover

Browse by category, city, date.

Step 02

Book instantly

No surprise fees. Instant confirmation.

Step 03

Show up

Meet people. Leave with a story.

Stats strip

13,700+

Local businesses

157

Cities nationwide

4.9/5

Average host rating

<48h

Guarantee refund

Section Patterns

Reusable page-level modules. Every homepage section is a pattern — use them across the app.

Section header (standard)

Trending now

Popular this week

View all

Section header (with location)

Trending near you

Philadelphia, PA

Popular this week

View all

Dark hero container (rounded)

Section label

Dark section container

Used for hero, host CTA, and any full-bleed emphasis section. Always rounded-[1.75rem] with internal padding.

Eggshell section (alternating)

Eggshell section

Used for visual rhythm

Alternate white and paper sections to create visual breathing room. Never two white sections in a row.

Iconography

Lucide React. 1.5px stroke default. Never mix libraries. Never emoji as UI icons.

Voice & Tone

Warm, confident, editorial. Not corporate. Not cutesy. Not shouty.

Do

  • “Reserve your spot”
  • “Cancel up to 48 hours before”
  • “Experiences” not “events”
  • “Hosts” not “vendors”
  • Contractions, second person (you, your)
  • “Worth saying yes to” energy

Don't

  • “Register now!!!”
  • “Curated” (overused, banned)
  • “Leverage / unlock / delight”
  • ALL CAPS BUTTONS
  • Emoji in every sentence
  • “Stakeholders” / “value prop”

Motion

Subtle, functional, never decorative. Respect prefers-reduced-motion.

Card hover

translateY(-4px) + shadow-lg. 300ms ease-out.

Hover me

Button press

scale(0.98) on active. 80ms.

Image zoom

scale(1.05) on parent hover. 500ms.

Brand System · Marigold