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

# Podscan · Design System

> Podcast intelligence in a calm, data-first interface

**Theme:** light · **Industry:** saas · **Source:** https://podscan.fm/ · **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._

Podscan pairs a bright, restrained SaaS interface with vivid green calls to action and product-focused data previews. Its long homepage alternates white and faint-gray sections, using modular cards to explain monitoring, analytics, integrations, and pricing.

## North star

Keep the interface bright and information-rich, using dark type, delicate boundaries, and emerald only to direct attention to action or meaningful signals.

## Overview

The visual system is built on a near-white canvas, dark ink typography, and fine gray borders. Emerald is the primary action color, while blue and violet appear in selected links, cards, and plan actions; small mint and yellow badges communicate sentiment in transcript examples. Large, tightly tracked sans-serif headlines establish a confident editorial hierarchy, balanced by compact navigation and readable body copy. The hero centers its message over a pale, panoramic data visualization with green signal accents, then presents live product activity as a bordered interface preview. Across the long page, white and very light gray section bands create rhythm without strong contrast. Cards, comparison tables, feature lists, and pricing panels make dense platform information scannable. Soft gradients and restrained shadows add depth only where product previews or interactive elements need separation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, card faces, and the quiet space surrounding product previews. |
| Mint Outline | `#a7f3d0` | `--color-mint-outline` | semantic | Soft green border around positive sentiment badges in transcript examples. |
| Signal Pollen | `#fef08a` | `--color-signal-pollen` | semantic | Yellow badge outline used for neutral sentiment in product data examples. |
| Slate Copy | `#52525b` | `--color-slate-copy` | neutral | Muted supporting copy and compact navigation labels against white. |
| Verdant Label | `#047857` | `--color-verdant-label` | semantic | Dark green text on positive sentiment badges, distinct from primary button green. |
| Podscan Emerald | `#059669` | `--color-podscan-emerald` | brand | Primary CTA fill, selected links, small status accents, and highlighted data signals. |
| Carbon Ink | `#18181b` | `--color-carbon-ink` | neutral | Headings, primary body text, dark footer band, and occasional dark CTA surfaces. |
| Quiet Zinc | `#71717a` | `--color-quiet-zinc` | neutral | Subdued footer and secondary text where lower visual emphasis is needed. |
| Boundary Gray | `#e4e4e7` | `--color-boundary-gray` | neutral | Fine card, input, and section boundaries that organize the light interface. |
| Link Blue | `#2563eb` | `--color-link-blue` | accent | Occasional blue link and text accent; not the dominant action color. |
| Ochre Label | `#a16207` | `--color-ochre-label` | semantic | Text color for neutral sentiment badges in transcript examples. |
| Bright Mint | `#10b981` | `--color-bright-mint` | accent | Secondary mint accent on badges, card details, and small interactive highlights. |
| Signal Rose | `#db2777` | `--color-signal-rose` | accent | Limited pink text and link accents, notably in engagement-related content. |
| Violet Action | `#9333ea` | `--color-violet-action` | accent | A secondary trial button and occasional violet feature accents, not the core CTA. |
| Teal Note | `#0d9488` | `--color-teal-note` | accent | Minor teal link or text accent within feature and product content. |
| Deep Link Blue | `#1d4ed8` | `--color-deep-link-blue` | accent | Occasional blue button or text accent, including selected secondary actions. |
| Media Black | `#09090b` | `--color-media-black` | surface | Dark media surface, most visibly the video preview rather than the page canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#18181b` (Carbon Ink) · `--color-surface-2` → `#09090b` (Media Black) · `--color-text` → `#18181b` (Carbon Ink) · `--color-text-muted` → `#52525b` (Slate Copy) · `--color-text-subtle` → `#71717a` (Quiet Zinc) · `--color-border` → `#e4e4e7` (Boundary Gray) · `--color-accent` → `#059669` (Podscan Emerald) · `--color-accent-2` → `#2563eb` (Link Blue) · `--color-accent-3` → `#1d4ed8` (Deep Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#ffffff` | 17.72:1 | AAA |
| `#18181b` | `#09090b` | 1.12:1 | fail |
| `#52525b` | `#ffffff` | 7.73:1 | AAA |
| `#52525b` | `#18181b` | 2.29:1 | fail |
| `#52525b` | `#09090b` | 2.57:1 | fail |
| `#71717a` | `#ffffff` | 4.83:1 | AA |
| `#71717a` | `#18181b` | 3.67:1 | AA-large |
| `#71717a` | `#09090b` | 4.12:1 | AA-large |
| `#059669` | `#ffffff` | 3.77:1 | AA-large |
| `#059669` | `#18181b` | 4.7:1 | AA |

### Gradients

- `linear-gradient(rgb(250, 250, 250), rgb(255, 255, 255))`
- `linear-gradient(rgb(255, 255, 255), rgba(250, 250, 250, 0.3), rgb(255, 255, 255))`
- `radial-gradient(62% 58% at 50% 44%, rgba(250, 250, 250, 0.9), rgba(250, 250, 250, 0) 72%)`
- `linear-gradient(to right, rgba(209, 250, 229, 0.2), rgba(219, 234, 254, 0.2), rgba(243, 232, 255, 0.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 500, 700, 600 | Primary system font for navigation, body copy, buttons, cards, and most headings. | Inter |
| Inter Tight | `--font-display` | webfont | 700, 400, 600 | Display headline, selected section headings, and the search input text. | Inter |

- **ui-sans-serif:** Use clean sans-serif forms, measured weights from regular through bold, and compact negative tracking; keep casing natural.
- **Inter Tight:** Use bold display weight with tight tracking for prominent headlines; reserve its condensed feel for emphasis.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1 | -0.025em | — | Inter Tight | Oversized centered hero headline above the product preview. |
| h1 | 30px | 700 | 1.2 | -0.013em | — | ui-sans-serif | Primary page or major section heading in system sans. |
| h2 | 24px | 700 | 1.33 | -0.017em | — | Inter Tight | Section titles, especially centered product and pricing headings. |
| h3 | 20px | 700 | 1.4 | -0.02em | — | ui-sans-serif | Feature, card, and subsection titles within content grids. |
| body | 16px | 400 | 1.5 | -0.025em | — | ui-sans-serif | Descriptions, feature explanations, and general interface copy. |
| caption | 14px | 400 | 1.43 | -0.029em | — | ui-sans-serif | Compact supporting labels, notes, and badge text. |
| button | 16px | 500 | 1.5 | -0.025em | — | ui-sans-serif | CTA labels and other interactive control text. |
| nav | 14px | 500 | 1.43 | -0.029em | — | ui-sans-serif | Small, medium-weight labels in the horizontal top navigation. |
| link | 16px | 500 | 1.5 | -0.025em | — | ui-sans-serif | Inline links and card-level navigation actions. |
| code | 12px | 400 | 1.33 | -0.033em | — | ui-monospace | Compact API or technical data labels where code styling is present. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 64 px.
- Section rhythm 64px · element gap 12px · card padding 16px · max content width 1104px.

A centered, responsive page uses a measured 1104px maximum content width and a comfortable density. The hero aligns centrally, with a full-width visual backdrop and a contained live-activity preview. Content alternates between centered introductions, two-column feature showcases, and multi-column card grids. Repeated white and #fafafa bands distinguish major sections without heavy dividers. Use generous section intervals, consistent card interiors, and dense but orderly tables for pricing comparisons.

## Shape & elevation

- Radius: button `8px` · input `12px` · card `12px` · media `8px` · badge `9999px` · nav `8px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `hairline` (card, button, other): `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 `md` (button, link, media): `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 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Shadow `sm` (button): `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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(5, 150, 105, 0.2) 0px 10px 15px -3px, rgba(5, 150, 105, 0.2) 0px 4px 6px -4px`
- Shadow `hairline-2` (text): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(228, 228, 231, 0.8) 0px 0px 0px 1px, 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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: thin gray boundaries define cards, inputs, and tables. Use subtle short shadows beneath interactive controls and a slightly deeper lift for prominent media or product cards. Rounded corners soften modules without turning the layout into floating dashboards; reserve stronger dark surfaces for media and the footer.

## Imagery

The hero uses an abstract panoramic data visualization: pale gray waveform-like structures with a green signal path, fading into white rather than competing with the headline. Product screenshots and interface previews are framed in light cards with restrained borders. A dark video thumbnail provides the clearest tonal contrast. Small logos and illustrative icons support specific sections; keep them subordinate to real interface content.

## Components

### Primary CTA

Emerald fill (#059669), white medium-weight sans-serif label, and an 8px radius; use for the main monitoring or trial action.

### Top navigation

Compact horizontal links in muted gray with dark text emphasis, ending in a concise trial action; keep the header visually light.

### Product preview card

White interface panel with a fine #e4e4e7 boundary, rounded corners, subtle shadow, and small status or sentiment details.

### Feature card

Modular white card with a simple colored icon, short heading, concise supporting copy, and a restrained link or action.

### Sentiment badge

Pill-shaped label with a pale mint or yellow background, matching colored text, and a fine semantic border.

### Pricing plan

Three comparison-friendly plan cards with clear price hierarchy, compact feature lists, and contrasting trial buttons; one plan receives emerald emphasis.

### Search input

White rounded field with a fine gray border and dark text, placed within a centered database-search module.

### Measured component styles

- **Primary button** (“Start monitoring free”): background #059669 · text #ffffff · radius 8px · padding 14px 32px · 600 16px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(5, 150,
- **Secondary button** (“Start free trial”): background #9333ea · text #ffffff · radius 8px · padding 10px 16px · 500 16px ui-sans-serif
- **Link** (“Real-time Alerts Get notified within min”): transparent background · text #18181b · radius 8px · padding 16px · 400 16px ui-sans-serif
- **Input**: transparent background · text #18181b · border 1px solid #e4e4e7 · radius 12px · padding 12px 112px 12px 48px · 400 14px Inter Tight
- **Card** (“2,000+ Business Ideas Extracted”): background #fafafa · text #18181b · radius 8px · padding 16px · 400 16px ui-sans-serif
- **Badge** (“Positive”): background #ecfdf5 · text #047857 · border 1px solid #a7f3d0 · radius 9999px · padding 2px 8px · 400 12px ui-sans-serif
- **Navigation item** (“Charts Stats Ideas Solutions Features Bl”): transparent background · text #18181b · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Keep the canvas white and the section backgrounds only subtly varied.
- Use emerald for the most important action and meaningful live-data cues.
- Set prominent headlines in a bold, tightly tracked sans-serif.
- Make feature and pricing information scannable with clear card structure.
- Use thin neutral borders before adding shadows.
- Keep product previews visually realistic and contained within light frames.

## Don't

- Do not introduce large saturated background blocks across ordinary sections.
- Do not use every accent color with equal prominence.
- Do not let decorative data graphics overpower the hero copy.
- Do not make cards feel heavily raised or glossy.
- Do not compress long-form pricing and feature details into undifferentiated text.
- Do not treat colors from badges or product illustrations as the core brand palette.

## Agent prompt

Build a new Podscan-style SaaS page with a bright, calm, data-first interface. Use Gallery White (#ffffff) as the main canvas, Carbon Ink (#18181b) for headlines and primary text, Slate Copy (#52525b) for supporting copy, and Boundary Gray (#e4e4e7) for delicate borders. Make Podscan Emerald (#059669) the clear primary action color; use Link Blue (#2563eb), Violet Action (#9333ea), and Signal Rose (#db2777) only as restrained secondary accents. Set a centered bold sans-serif headline above concise copy and a believable product preview. Organize subsequent content into alternating white and faint-gray bands, modular feature cards, a searchable data panel, and comparison-friendly pricing. Keep generous section breathing room, low visual elevation, fine boundaries, and realistic interface details. Use gradients and illustrations sparingly, and ensure every color supports hierarchy or product meaning.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with broad abstract data backdrop, CTA pair, status metrics, and contained live-intelligence preview. | primary CTA, secondary demo CTA, proof metrics, live activity preview | bold centered headline, green signal graphic, white product panel, pill badges |
| 2 | video | Centered heading and description above a contained, wide video player. | play video, platform walkthrough link | dark media frame, centered section title, quiet caption link |
| 3 | other | Centered database heading and search field with suggested queries beneath. | search input, suggested searches, search submit | white bordered panel, compact query chips, centered layout |
| 4 | feature-grid | Four equal-width audience cards in a light-gray band, each with icon, copy, and tailored action. | audience selection, card-level links | four-column cards, colored icons, subtle card shadows |
| 5 | feature-split | Left-aligned feature copy and checklist beside a right-side engagement analytics preview. | feature explanation, data add-on link | two-column split, analytics card, rose chart accents |
| 6 | feature-split | Two-column band with explanatory text and checklist beside an export interface preview. | feature explanation, export add-on link | light-gray band, export table preview, emerald details |
| 7 | logo-cloud | Full-width strip with a brief centered eyebrow and a dense horizontal logo field. | trust signaling | monochrome logo row, low-contrast band |
| 8 | product-showcase | Centered introduction followed by a two-column product explanation and interface showcase. | product discovery, API path, explore action | feature checklist, metrics tiles, product mockup |
| 9 | feature-grid | Centered heading above four audience cards arranged in a light-gray section. | audience-specific navigation, learn-more links | four-column cards, small colored icons, fine borders |
| 10 | feature-grid | Centered section introduction over a three-column grid of compact feature descriptions. | feature discovery, explore all features | icon-and-copy modules, colored icon accents, centered closing action |
| 11 | pricing | Three plan cards above a broad feature comparison table and additional access options. | plan selection, trial CTA, feature comparison, enterprise contact | highlighted plan card, comparison table, colored trial buttons, dark enterprise panel |
| 12 | cta | Centered closing message with two actions and concise reassurance beneath. | start trial, book demo, reassurance notes | centered headline, paired buttons, minimal supporting copy |
| 13 | footer | Dark research band with capability columns and CTAs, followed by a light multi-column link footer. | research discovery, trial CTA, footer navigation | dark-to-light transition, capability icon grid, dense link columns |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-color: rgb(59 130 246 / 0.5);
```

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