Kickstarter DESIGN.md

Optimistic, creator-first crowdfunding design built around a bright signature green, clean white surfaces, and project-centric cards with funding progress. Kickstarter's public product balances editorial storytelling with clear, trustworthy funding data.

1. Visual Theme & Atmosphere

Overall Aesthetic

Kickstarter feels like a gallery of creative projects with a live scoreboard. Big project imagery, editorial headlines, and bold green progress bars make every campaign feel alive and within reach.

Mood & Feeling

• Optimistic, creative, and hopeful
• Community-powered and independent
• Editorial and story-driven
• Trustworthy and transparent
• Energetic but grounded

Design Density

Medium density. Discovery grids are image-led with compact funding stats; project pages are long-form and editorial.

Visual Character

• Signature green (#05CE78) for CTAs, progress bars, and brand
• White canvas with near-black text
• Project cards with 16:9 image, title, creator, and progress bar
• Bold funding stats (pledged, backers, days to go)
• Editorial staff-pick sections with large imagery

2. Color Palette & Roles

Core Foundation

Support Palette

3. Typography Rules

Font Stack

css--font-sans: "Maison Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-editorial: "Moderat", "Maison Neue", "Helvetica Neue", sans-serif;

Type Scale

Typography Philosophy

Type is clean and editorial, with medium weights instead of heavy bolds. Funding numbers get size and green color to stand out.

4. Component Stylings

Buttons

css.button-primary {
  background: #037362;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
}

.button-primary:hover {
  background: #025c4e;
}

.button-secondary {
  background: #ffffff;
  color: #282828;
  border: 1px solid #dcdedd;
  border-radius: 4px;
  min-height: 48px;
  padding: 0 24px;
}

Project Card

css.project-card {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.progress-track {
  height: 4px;
  background: #e6e6e6;
}

.progress-fill {
  height: 4px;
  background: #05ce78;
}

Reward Tier

css.reward-tier {
  border: 1px solid #dcdedd;
  border-radius: 4px;
  padding: 24px;
}

.reward-tier:hover {
  border-color: #037362;
}

Component Notes

• Progress bars are thin (4px), green, and square-ended
• Cards are frameless: image on top, text below, no border or shadow
• "Project We Love" badges mark curated projects
• Reward tiers list price, description, estimated delivery, and backer count

5. Layout Principles

Spacing Scale

Layout Behavior

• Discover grid uses 3–4 columns of frameless project cards
• Project page: media and funding stats side by side above a tabbed story section
• Story column (~630px) sits beside a sticky rewards column

Whitespace Philosophy

Whitespace is editorial — clean gutters and consistent rhythm let project imagery lead.

6. Depth & Elevation

Elevation Strategy

Kickstarter is flat. Hierarchy comes from imagery, typography, and thin borders.

css--shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.12);
--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
--border-default: 1px solid #dcdedd;

Surface Hierarchy

• White canvas
• Light gray sections for grouping
• Bordered reward tiers and inputs

7. Do's and Don'ts

Do

• Use bright green for progress and brand moments
• Use darker green for text and filled CTAs to maintain contrast
• Lead with large project imagery
• Show funding stats prominently

Don't

• Do not put white text on bright #05CE78 (insufficient contrast)
• Do not add shadows or borders to discovery cards
• Do not use heavy bold weights for headlines
• Do not hide funding progress below the fold

8. Responsive Behavior

Breakpoints

Responsive Rules

• Rewards column moves below the story on mobile
• CTA buttons become full width on mobile
• Touch targets are at least 44px

9. Agent Prompt Guide

Quick Reference

• Bright green #05CE78 progress and brand
• Dark green #037362 filled CTAs
• Frameless image-led project cards
• Clean editorial Maison Neue typography

Prompt Template

textDesign this like Kickstarter's current public product style:
- white canvas with near-black text and bright green (#05CE78) brand and progress accents
- dark green (#037362) filled CTA buttons with 4px corners
- frameless project cards: 16:9 image, title, creator, thin green progress bar, funding stats
- clean editorial sans (Maison Neue style) with medium weights
- flat surfaces with thin borders on reward tiers
- optimistic, creative, community-powered tone