# Buzzsprout — Design System
> The easiest podcasting software for hosting, promoting, and tracking your podcast.
- **Canonical:** https://uiuxskills.com/library/buzzsprout
- **Source:** https://www.buzzsprout.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:05.641Z

---

---
version: alpha
name: Buzzsprout
description: The easiest podcasting software for hosting, promoting, and tracking your podcast.
tone: >-
  Supportive, encouraging, professional, and user-centric. The brand emphasizes simplicity and
  reliability, positioning itself as a partner in the creator's journey.
color-scheme: light
colors:
  primary: "#00A859"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-container: "#F3F4F6"
  on-surface: "#111827"
  neutral: "#6B7280"
  error: "#DC2626"
  success: "#059669"
  outline: "#E5E7EB"
  focus-ring: "#00A859"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3.75rem
    fontWeight: 800
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
    fontWeight: 700
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
    fontWeight: 600
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 400
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 600
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#008F4C"
    textColor: "{colors.on-primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#008F4C"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#D1FAE5"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 20px 25px -5px rgba(0,0,0,0.1)
---

## Overview

Buzzsprout features a friendly, accessible, and highly supportive visual identity. It balances a professional SaaS aesthetic with a warm, community-focused tone, utilizing a clean layout that prioritizes ease of use for creators of all experience levels.

## Colors

The color strategy centers on a high-contrast, professional palette that uses a signature green to guide users through key actions, ensuring the interface remains approachable and easy to navigate.

*   Primary (inferred) (#00A859): The core brand green used for primary CTAs and key highlights.
*   On-Primary (inferred) (#FFFFFF): Text color for elements on primary backgrounds.
*   Surface (#FFFFFF): Main background color for page sections.
*   Surface-Container (#F3F4F6): Light gray background for secondary sections and cards.
*   On-Surface (#111827): Primary text color for headings and body copy.
*   Neutral (inferred) (#6B7280): Secondary text color for subheads and metadata.
*   Error (inferred) (#DC2626): Semantic color for error states and alerts.
*   Success (inferred) (#059669): Semantic color for positive feedback and success indicators.
*   Outline (inferred) (#E5E7EB): Border color for cards and input fields.
*   Focus-Ring (inferred) (#00A859): Focus ring color for accessible navigation.

## Typography

The typography uses a clean, sans-serif system designed for maximum readability and clear hierarchy across marketing and product surfaces.

*   Display-lg: Hero headlines, emphasizing bold, authoritative presence.
*   Headline-lg: Main section titles.
*   Headline-md: Feature sub-headings.
*   Body-md: Standard paragraph text for long-form content.
*   Body-sm: Secondary text, metadata, and captions.
*   Label-md (inferred): Primary button labels and interactive triggers.
*   Label-sm (inferred): Small UI labels and status badges.

## Layout

The site utilizes a centered container approach with a max-width constraint to maintain focus. Spacing follows a 4px-based scale, ensuring a consistent rhythm across sections. The page pattern typically follows a hero-led structure (hero, features, social-proof, directories, support, footer) with mobile-first responsive behaviour where content blocks stack vertically on smaller screens.

## Elevation & Depth

Subtle, single-layer shadows are used to provide depth and focus, applied sparingly to highlight interactive elements. The `elevation.sm` token is used for subtle separation, `elevation.md` for standard interactive components like dropdowns, and `elevation.lg` for major feature cards or modal overlays.

## Shapes

The design language favors a friendly, approachable aesthetic through generous corner radii. The `rounded.lg` (12px) token is standard for cards to soften their appearance, while `rounded.full` (9999px) is strictly used for buttons to reinforce a welcoming, modern feel.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
The primary action button uses `{colors.primary}` with `{typography.label-md}`. It is designed to be the most prominent element on the page, utilizing a `rounded.full` shape to maintain the brand's friendly tone. Use this for all primary conversion points.

### Card
Cards utilize `{colors.surface}` with a `{colors.outline}` border and `{rounded.lg}` corners. These are used to group related feature information or testimonials, providing a clean, contained visual structure.

### Input Field
Input fields feature a `{colors.surface}` background and `{rounded.md}` corners. On focus, the border transitions to `{colors.focus-ring}` to ensure accessibility and clear user feedback during form interactions.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for primary action buttons. |
| Apply `{rounded.lg}` to all feature cards. | Do not use sharp corners (0px) on buttons or cards. |
| Use `{typography.headline-lg}` for main section titles. | Avoid using `{colors.neutral}` for primary headings. |
| Maintain consistent `{spacing.lg}` between sections. | Do not use excessive shadows on non-interactive elements. |
| Use `{colors.on-surface}` for all primary body text. | Never apply `{typography.body-md}` on `{colors.surface-container}` without contrast. |
| Apply `{colors.success}` for positive status indicators. | Avoid mixing too many font weights; stick to the established scale. |
| Use `{colors.outline}` for card and input borders. | Do not use `{colors.surface-container}` for primary text backgrounds. |
| Apply `{rounded.md}` to all `input-field` components. | Do not use `0px` radius on any interactive surface. |

## Content Style

CTA labels are imperative and action-oriented, typically using short, punchy verbs like "Get Started" or "Sign Up" to drive user momentum.

Headings are benefit-focused and declarative, designed to address user pain points directly rather than using abstract marketing language.

Copy density is kept light and scannable. Paragraphs are short, and the design relies heavily on bulleted lists and white space to maintain a rhythm that is easy for busy creators to digest.

## Imagery & Icons

The brand uses a mixed treatment approach, combining high-quality product screenshots, illustrative icons, and human-centric photography to build trust. Iconography follows a clean, minimal style, while photography should feel authentic and approachable, avoiding overly staged or stock-heavy visuals.