---
title: "Buzzsprout design system"
variant: extended
source: https://www.buzzsprout.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/buzzsprout-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Buzzsprout · Design System

> A bright, confident stage for podcast creators

**Theme:** light · **Industry:** saas · **Source:** https://www.buzzsprout.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Buzzsprout pairs an airy, near-white canvas with deep green typography and clear, friendly calls to action. Large editorial headlines, product-interface previews, and alternating dark feature bands make the long homepage feel both approachable and substantial.

## North star

Let deep green typography and product-led proof carry the page, with generous light space and dark bands used only for emphasis.

## Overview

The page is built on a near-white canvas (#fafafa), with deep evergreen (#214538) carrying navigation, links, body copy, and the primary CTA. The darker charcoal-green (#151e1b) is reserved for immersive full-width feature bands, where light text and product imagery create a deliberate change of pace. Graphik keeps the system clean and human: oversized, tightly tracked display lettering anchors the hero, while restrained body and navigation styles support scanning. The layout uses a centered content frame, generous open areas, and modular split or multi-column sections; the rhythm alternates white content fields with dark feature panels rather than adding decoration everywhere. Product screenshots, device mockups, and podcast-platform marks demonstrate the software in context. Cards rely on subtle borders and selective soft shadows, while pale yellow-to-gold accents appear sparingly in gradient-led sections. Keep the overall impression calm, legible, and creator-focused.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#fafafa` | `--color-studio-white` | neutral | Main page canvas and the dominant background for the light content sections. |
| Evergreen | `#214538` | `--color-evergreen` | brand | Navigation, links, primary CTA backgrounds, and prominent text throughout the light sections. |
| Night Forest | `#151e1b` | `--color-night-forest` | surface | Full-width dark feature-section backgrounds and their inverse, high-contrast text treatment. |
| Quiet Divider | `#e4e5e6` | `--color-quiet-divider` | neutral | Subtle card and navigation borders that separate UI without competing with content. |
| Soft Marigold | `#fae38b` | `--color-soft-marigold` | accent | Warm endpoint in the yellow section gradient; use as a section accent, not a general text color. |
| Golden Signal | `#f4c419` | `--color-golden-signal` | accent | Brighter endpoint of the measured yellow gradient and a sparing visual highlight. |
| Graphite Gray | `#4d4d4f` | `--color-graphite-gray` | semantic | Secondary text seen in small amounts; subordinate explanatory copy. |
| Mist Sage | `#ccdbd3` | `--color-mist-sage` | semantic | Muted green-tinted text detail; use only for restrained supporting information. |
| Podcast Green | `#61d752` | `--color-podcast-green` | semantic | Bright green visible in a card-level accent or focus treatment, not a core page color. |
| Moss Link | `#396252` | `--color-moss-link` | brand | Low-frequency green link and interface detail supporting the main evergreen. |
| Butter Cream | `#f9eec2` | `--color-butter-cream` | surface | Pale warm card surface; use as a localized supporting panel rather than a page canvas. |
| Button Mist | `#eeeeee` | `--color-button-mist` | neutral | Light button border and understated interface edge. |
| True Black | `#000000` | `--color-true-black` | semantic | Sparse text or embedded UI detail; not the defining dark surface. |
| Deep Pine | `#162e25` | `--color-deep-pine` | semantic | Infrequent dark-green text detail, close in character to the main evergreen. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Studio White) · `--color-surface` → `#151e1b` (Night Forest) · `--color-surface-2` → `#214538` (Evergreen) · `--color-surface-3` → `#f9eec2` (Butter Cream) · `--color-text` → `#151e1b` (Night Forest) · `--color-text-muted` → `#214538` (Evergreen) · `--color-text-subtle` → `#fafafa` (Studio White) · `--color-border` → `#e4e5e6` (Quiet Divider) · `--color-accent` → `#fae38b` (Soft Marigold) · `--color-accent-2` → `#f4c419` (Golden Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151e1b` | `#fafafa` | 16.31:1 | AAA |
| `#151e1b` | `#214538` | 1.6:1 | fail |
| `#151e1b` | `#f9eec2` | 14.62:1 | AAA |
| `#214538` | `#fafafa` | 10.2:1 | AAA |
| `#214538` | `#151e1b` | 1.6:1 | fail |
| `#214538` | `#f9eec2` | 9.14:1 | AAA |
| `#fafafa` | `#151e1b` | 16.31:1 | AAA |
| `#fafafa` | `#214538` | 10.2:1 | AAA |
| `#fafafa` | `#f9eec2` | 1.12:1 | fail |
| `#fae38b` | `#fafafa` | 1.22:1 | fail |

### Gradients

- `linear-gradient(125deg, rgb(250, 227, 139), rgb(244, 196, 25))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.85), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 400, 600, 500 | Site-wide display, headings, body copy, navigation, links, and buttons. | Inter |

- **Graphik:** Use clean sans-serif forms; display headings are bold and tightly tracked, while body copy stays regular and sentence case.

### Type scale — Major Third (ratio ≈ 1.246, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.1 | -0.003em | — | Graphik | Oversized hero headline and other high-impact page statements. |
| h1 | 50px | 600 | 1.1 | -0.005em | — | Graphik | Primary page-level heading where the hero display treatment is not used. |
| h2 | 35px | 400 | 1.1 | -0.005em | — | Graphik | Major section titles, often centered above supporting content. |
| h3 | 30px | 400 | 1.5 | -0.008em | — | Graphik | Feature and subsection headings paired with descriptive copy. |
| h4 | 25px | 400 | 1.5 | -0.006em | — | Graphik | Smaller feature titles and card-level headings. |
| body | 20px | 400 | 1.5 | -0.008em | — | Graphik | Introductory copy and primary explanatory paragraphs. |
| caption | 14px | 400 | 1.43 | -0.011em | — | Graphik | Small supporting labels, review details, and compact interface notes. |
| button | 14px | 400 | 1.5 | -0.011em | — | Graphik | CTA and secondary action labels. |
| nav | 15px | 500 | 1.5 | -0.011em | — | Graphik | Header links and compact navigation items. |
| link | 24px | 400 | 1.5 | -0.007em | — | Graphik | Prominent inline or standalone resource links. |
| eyebrow | 11px | 600 | 1.45 | 0.08em | uppercase | Graphik | Compact uppercase category or section label above a heading. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 14, 15, 16, 20, 24, 30, 32, 40, 50, 80 px.
- Section rhythm 40px · element gap 12px · card padding 16px · max content width 1080px.

Use a centered content frame with a compact header and a spacious, text-led hero. The measured page maximum is 1080px; build sections around that frame, then let feature bands span the viewport. Alternate centered introductions, split feature layouts, and multi-column proof sections. The measured spacing system is compact at its base, but the screenshot's large open fields and section breaks give the page room to breathe. Keep alignment purposeful: centered for showcases and reviews, left-aligned for explanatory feature content.

## Shape & elevation

- Radius: button `10px` · card `8px` · media `8px` · badge `50%` · nav `8px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `10px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.16) 0px 10px 36px 0px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Shadow `hairline-2` (card): `rgba(97, 215, 82, 0.18) 0px 0px 0px 4px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections feel flat and spacious. Product previews sit in softly raised white panels with subtle shadows; cards may use a thin pale-gray border instead of heavy outlines. Reserve stronger shadowing for large interface mockups, and avoid layering effects that would make the otherwise clean page feel glossy.

## Imagery

Use real product UI screenshots and device mockups to explain podcast publishing and listening workflows. Frame them as clean, bright panels with restrained borders and soft shadows, allowing interface details to remain legible. Use platform marks as supporting proof, not as the central visual identity. In dark feature bands, place device imagery against the deep background for contrast. The page is product-led rather than illustration- or photography-led.

## Components

### Header navigation

A compact horizontal header on the light canvas, with evergreen links and a dark-green Get Started Free action.

### Primary CTA

Evergreen fill with white Graphik text; measured variants range from compact navigation treatment to a prominent hero action.

### Hero headline

Large, bold, tightly tracked uppercase display statement centered over the introductory copy and product preview.

### Product preview panel

Bright, softly elevated frame for podcast dashboard, directory, or device UI screenshots.

### Dark feature band

Full-width #151e1b panel pairing light copy with product imagery or feature descriptions.

### Review cards

Light-background testimonial content arranged in columns, with star ratings, short quotes, and compact attribution.

### Directory tiles

A grid of podcast platform marks and listing states inside a product-oriented distribution section.

### Measured component styles

- **Primary button** (“Get Started Free”): background #214538 · text #ffffff · radius 6px · padding 10px 20px · 500 15px Graphik
- **Secondary button** (“Customer Support”): transparent background · text #214538 · border 1px solid #eeeeee · radius 10px · padding 4px 15px · 400 14px Graphik
- **Link** (“3,600”): transparent background · text #214538 · radius 0px · padding 0px · 400 20px Graphik
- **Card** (“IAB 2.2 Certified Certified to the IAB T”): background #214538 · text #214538 · radius 0px · padding 8px 24px · 400 20px Graphik
- **Badge** (“+15”): background #f4f4f4 · text #747576 · radius 9999px · padding 0px · 600 11px Graphik
- **Navigation item** (“Features Pricing How to Start a Podcast ”): transparent background · text #214538 · radius 0px · padding 0px · 500 15px Graphik

## Do

- Use #fafafa as the dominant canvas.
- Use #214538 for navigation, links, and primary actions.
- Keep large display headlines bold and tightly tracked.
- Use #151e1b for selected full-width feature bands.
- Show product interfaces as legible framed previews.
- Let whitespace separate the long sequence of sections.

## Don't

- Don't turn every section into a card.
- Don't use bright yellow as a persistent page background.
- Don't substitute generic stock imagery for product UI.
- Don't make dark bands the default section treatment.
- Don't use heavy borders or dramatic shadows everywhere.
- Don't add decorative colors that are absent from the measured palette.

## Agent prompt

Build a new Buzzsprout-style SaaS page with a bright #fafafa canvas and an editorial, creator-friendly feel. Use Graphik, or Inter as a free substitute, with bold tightly tracked display headlines and calm, readable body copy. Use Evergreen (#214538) for navigation, links, and white-text primary CTAs; use Night Forest (#151e1b) only for selected full-width feature bands. Keep the content centered within the measured 1080px maximum width, varying centered showcases with left-aligned feature copy and split product sections. Use product dashboards, device previews, and podcast-platform marks as concrete evidence. Give screenshots subtle borders or soft shadows, not glossy effects. Preserve generous visual breathing room and use the Soft Marigold (#fae38b) to Golden Signal (#f4c419) gradient only as a restrained section accent.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-split | Dark full-width band with explanatory copy and product/device imagery. | Reassurance copy, Feature explanation | Dark inverse surface, Side-by-side text and media |
| 2 | integrations | Centered heading above a multi-column grid of directory destinations. | Multi-platform discovery, Distribution proof | Platform icon grid, Dark section surface |
| 3 | reviews | Light section with centered heading and support proof arranged across columns. | Service reassurance, Performance proof | Light canvas, Three-column content |
| 4 | stats | Light, two-column trust section with text and supporting imagery. | Social proof, Trust building | Left-aligned heading, Two-column composition |
| 5 | feature-split | Light section divided into two columns with centered heading and app imagery. | Mobile workflow promotion, Feature explanation | App imagery, Light canvas |
| 6 | product-showcase | Centered section heading followed by a two-column product-feature presentation. | Tool discovery, Feature preview | Product imagery, Paired feature layout |
| 7 | feature-grid | Dark full-width section with centered heading and three feature columns. | Feature comparison, Player customization | Inverse text, Three-column feature row |
| 8 | feature-split | Light section with a left-aligned heading and concise checklist. | Benefit checklist, Monetization options | Checkmark list, Open light layout |
| 9 | feature-split | Light section with left-aligned heading and a compact feature checklist. | Capability checklist, Quick scanning | Checkmark list, Simple text hierarchy |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/buzzsprout-com