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

# Podia · Design System

> A warm, spacious canvas for creator tools

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

Podia pairs a calm, near-white canvas and oversized black typography with bright yellow calls to action. Editorial spacing and collage-like creator imagery make a broad SaaS feature set feel approachable and human.

## North star

Keep the canvas quiet and spacious so bold type, creator imagery, and yellow trial actions carry the page.

## Overview

The page is built on a near-white canvas (#fdfdfc), with occasional warm-gray feature bands (#f4f3f1) to group product content without introducing heavy dividers. Near-black (#1b1a18) carries the headline, body copy, navigation, and footer, while golden yellow (#fdc837) marks the top navigation band and primary trial actions. GT Standard is used throughout: large, light-weight, tightly tracked headlines contrast with compact, readable supporting copy and restrained nav labels. The layout favors centered hero messaging, generous open space, and broad image-led sections, then shifts into a tidy two-column feature-card rhythm. Creator portraits and software screenshots are layered with colorful paper-like shapes in blue, teal, green, pink, and yellow; these hues enliven product imagery rather than replacing the core neutral brand palette. Cards remain mostly flat, with modest rounded corners and subtle shadow where screenshots need depth. The overall effect is friendly, editorial, and product-focused.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1b1a18` | `--color-soft-ink` | brand | Primary headings, body text, navigation, dark CTA buttons, and the full-width footer. |
| Creator Gold | `#fdc837` | `--color-creator-gold` | accent | Top navigation band, primary trial buttons, and small high-contrast highlights. |
| Gallery White | `#fdfdfc` | `--color-gallery-white` | surface | Main page canvas and the open space around hero copy, creator portraits, and testimonials. |
| Warm Fog | `#f4f3f1` | `--color-warm-fog` | surface | Alternating feature bands and cards that group product descriptions with interface previews. |
| Creator Blue | `#97b6f9` | `--color-creator-blue` | accent | Testimonial card background and blue collage accents around product imagery. |
| Studio Teal | `#57e6dd` | `--color-studio-teal` | accent | Teal collage backdrops and interface-preview panels within product illustrations. |
| Paper Yellow | `#f5ca56` | `--color-paper-yellow` | semantic | Illustration-only warm yellow collage elements; not a primary text or page-surface color. |
| Mint Green | `#9de0b7` | `--color-mint-green` | accent | Green collage backdrops behind product screenshots, rather than a core page surface. |
| Petal Pink | `#fad1fd` | `--color-petal-pink` | semantic | Illustration-only pink collage panels and product-preview backdrops. |

### Semantic aliases

`--color-canvas` → `#fdfdfc` (Gallery White) · `--color-surface` → `#f4f3f1` (Warm Fog) · `--color-surface-2` → `#1b1a18` (Soft Ink) · `--color-surface-3` → `#97b6f9` (Creator Blue) · `--color-surface-4` → `#9de0b7` (Mint Green) · `--color-text` → `#1b1a18` (Soft Ink) · `--color-text-muted` → `#fdfdfc` (Gallery White) · `--color-border` → `#fdc837` (Creator Gold) · `--color-accent` → `#fdc837` (Creator Gold) · `--color-accent-2` → `#97b6f9` (Creator Blue) · `--color-accent-3` → `#57e6dd` (Studio Teal) · `--color-on-accent` → `#1b1a18` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b1a18` | `#fdfdfc` | 17.09:1 | AAA |
| `#1b1a18` | `#f4f3f1` | 15.68:1 | AAA |
| `#1b1a18` | `#97b6f9` | 8.59:1 | AAA |
| `#fdfdfc` | `#f4f3f1` | 1.09:1 | fail |
| `#fdfdfc` | `#1b1a18` | 17.09:1 | AAA |
| `#fdfdfc` | `#97b6f9` | 1.99:1 | fail |
| `#fdc837` | `#fdfdfc` | 1.53:1 | fail |
| `#fdc837` | `#f4f3f1` | 1.4:1 | fail |
| `#fdc837` | `#1b1a18` | 11.17:1 | AAA |
| `#fdc837` | `#97b6f9` | 1.3:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Standard | `--font-body` | webfont | 400, 500, 600, 700 | Used throughout for display headlines, body copy, navigation, buttons, and footer links. | Inter |

- **GT Standard:** Use regular-weight, tightly tracked display headings; keep body copy open and readable, with medium-weight compact nav and button labels.

### Type scale — Perfect Fifth (ratio ≈ 1.52, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.95 | -0.03em | — | GT Standard | Oversized hero and key campaign headlines. |
| h1 | 72px | 400 | 0.95 | -0.025em | — | GT Standard | Main hero heading and major section titles. |
| h2 | 52px | 400 | 1 | -0.02em | — | GT Standard | Feature-group and secondary editorial headings. |
| h3 | 36px | 400 | 1.05 | -0.02em | — | GT Standard | Product-card and smaller feature headings. |
| body | 18px | 400 | 1.35 | 0.01em | — | GT Standard | Introductory descriptions, feature explanations, and testimonial copy. |
| caption | 14px | 500 | 1 | 0.015em | — | GT Standard | Compact supporting labels and small contextual text. |
| button | 16px | 400 | 1.6 | 0 | — | GT Standard | Primary trial actions and product-card actions. |
| nav | 14px | 500 | 1 | 0.015em | — | GT Standard | Header navigation and compact footer navigation. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 11, 12, 16, 24, 28, 32, 36, 40, 64, 72 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width 1312px.

Use a centered content area capped at the measured 1312px maximum width, with broad margins and a comfortable density. The hero is centered and spacious; feature content alternates between text-led splits and large product previews, then settles into paired cards and a wide community showcase. Section spacing follows the measured 64px rhythm, with 24px element gaps. Keep the footer as a dark, full-width band with four content columns.

## Shape & elevation

- Radius: button `8px` · card `8px` · xs `7px` · sm `8px` · md `17px`
- Shadow `lg` (card): `rgba(21, 41, 31, 0.1) 10.6px 10.6px 16px 0px, rgba(21, 41, 31, 0.1) 0px 10.6px 16px 0px`
- Shadow `md` (card): `rgba(21, 41, 31, 0.1) 0px 10.6px 16px 0px`
- Motion: standard transition `0.12s ease` on interactive elements.

Favor flat surfaces and clear whitespace over borders. Cards use the measured 8px radius; interface previews can sit above collage backdrops with restrained soft shadows. Keep outlines and hairlines sparse, and let the near-black footer create the strongest surface contrast.

## Imagery

Use real creator portraits and workspace photography as the emotional anchor, paired with crisp product-interface screenshots. Frame images with irregular, paper-like color panels and crop them boldly, allowing the portrait or interface to overlap its background. The measured accent colors chiefly appear inside these collages and product cards, not as broad branded section fills.

## Components

### Navigation

A full-width golden-yellow top band with the Podia wordmark, compact dark nav links, and a near-black rounded trial button.

### Hero

Centered oversized headline, short proof statement, yellow trial CTA, and a large collage-style creator image below.

### Feature card

Warm-gray cards with concise product copy, dark Learn more action, and colorful screenshot backdrops.

### Feature showcase

Wide product section combining a heading and description with a large software-interface image or collage.

### Testimonial carousel

Broad colored quote cards with creator attribution and small pagination indicators beneath.

### Closing CTA

Centered reassurance and creator-proof copy followed by a yellow free-trial button.

### Footer

Near-black full-width surface with light logo and links arranged across four columns, plus a compact lower utility row.

### Measured component styles

- **Primary button** (“Start your free 14-day trial”): background #fdc837 · text #1b1a18 · border 1px solid #fdc837 · radius 8px · padding 12px 16px · 500 16px GT Standard
- **Secondary button** (“Start free trial”): background #1b1a18 · text #fdfdfc · border 1px solid #1b1a18 · radius 8px · padding 12px 16px · 500 16px GT Standard
- **Link** (“Learn more”): transparent background · text #1b1a18 · radius 0px · padding 1px 1px 4px 1px · 500 16px GT Standard
- **Card** (“Email Send newsletters, welcome new cust”): background #f4f3f1 · text #111111 · radius 8px · padding 0px · 400 16px GT Standard
- **Navigation item** (“Features Switch to Podia Pricing Login S”): transparent background · text #111111 · radius 0px · padding 0px · 400 16px GT Standard

## Do

- Use the near-white canvas as the dominant page surface.
- Set major headings large, regular-weight, and tightly tracked.
- Reserve yellow for the navigation band and primary trial actions.
- Separate feature groups with warm-gray bands rather than heavy rules.
- Layer creator photography and product screenshots over collage-like color panels.
- Keep text groups concise and leave generous space around them.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use bright collage colors as broad page backgrounds.
- Do not add gradients; none are measured.
- Do not decorate every card with borders or strong shadows.
- Do not make every CTA yellow; secondary actions are near-black.
- Do not crowd the hero with secondary content.

## Agent prompt

Build a new Podia-style SaaS page with a calm editorial feel. Use Gallery White (#fdfdfc) as the main canvas and Soft Ink (#1b1a18) for type; reserve Creator Gold (#fdc837) for the top navigation and primary trial actions. Use GT Standard or a close sans-serif substitute, with large regular-weight, tightly tracked headings and readable body copy. Keep the layout centered within the measured 1312px maximum width, with generous section breathing room and clear alignment. Group features on Warm Fog (#f4f3f1) panels, mixing concise descriptions with product-interface previews. Add creator photography and screenshot collages with restrained Creator Blue (#97b6f9), Studio Teal (#57e6dd), Mint Green (#9de0b7), and Petal Pink (#fad1fd) backdrops; keep these accents within imagery. Use modest rounded corners, subtle screenshot depth, and a near-black footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, proof line, and CTA above the emerging creator collage. | Prominent free-trial action, Creator credibility proof | Oversized centered heading, Yellow primary button, Open white canvas |
| 2 | gallery | Full-bleed collage centered around a creator portrait. | Human brand introduction | Layered portrait, Color-block collage, Asymmetric crop |
| 3 | stats | Three evenly spaced metrics in one row. | Social proof, Business outcome proof | Three-column statistics, Minimal text presentation |
| 4 | feature-split | Left-aligned explanatory copy paired with a collage-style workspace image. | Explain platform consolidation, Secondary learn-more link | Text and image split, Editorial alignment |
| 5 | product-showcase | Single centered heading with generous surrounding whitespace. | Transition into feature details | Centered section title, Open spacing |
| 6 | feature-grid | Left-aligned feature copy within a warm-gray product band. | Feature explanation, Learn-more link | Warm-gray surface, Simple text-led introduction |
| 7 | product-showcase | Wide, full-bleed interface preview under the course description. | Visual product demonstration | Large screenshot, Color collage backdrop |
| 8 | feature-grid | Two product cards side by side, each with copy and imagery. | Compare adjacent capabilities, Learn-more links | Paired warm-gray cards, Separate product previews |
| 9 | feature-grid | Two product cards side by side with text above preview imagery. | Explore complementary tools, Learn-more links | Paired feature cards, Color-backed screenshots |
| 10 | feature-grid | Wide left-aligned feature band for copy and community preview. | Explain community benefits, Learn-more link | Warm-gray section, Wide product image |
| 11 | product-showcase | Full-width community interface image with vivid collage framing. | Product proof through interface | Large screenshot, Yellow collage accents |
| 12 | testimonials | Centered introduction above a horizontal row of quote cards. | Creator testimonials, Carousel pagination | Colored quote panels, Attribution portraits, Pagination dots |
| 13 | gallery | Large creator portrait composition centered within open whitespace. | Humanize the platform | Portrait-led collage, Overlapping color shapes |
| 14 | cta | Centered reassurance, proof copy, and trial button. | Reduce signup anxiety, Repeat trial conversion | Centered heading, Yellow CTA, Minimal surrounding content |
| 15 | footer | Dark full-width footer with four link columns and a lower utility row. | Browse product and resource links, Access legal and support links | Near-black surface, Light text, Four-column navigation |

## Source CSS custom properties (selected)

```css
--color-bg: #ffffff;
--color-bg-subtle: #f7f7f8;
--color-text: #111111;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-accent: #4f46e5;
--color-accent-hover: #4338ca;
--color-accent-fg: #ffffff;
--color-primary-pink-900: #950091;
--color-primary-pink-700: #f564f5;
--color-primary-pink-500: #ff99ff;
--color-primary-pink-300: #fad1fd;
--color-primary-pink-100: #fdebfe;
--color-primary-teal-900: #00857a;
--color-primary-teal-700: #00b3a5;
--color-primary-teal-500: #57e6dd;
--color-primary-teal-300: #acfbf3;
--color-primary-teal-100: #e2fffc;
--color-primary-green-900: #005b24;
--color-primary-green-700: #007d3a;
--color-primary-green-500: #00b36d;
--color-primary-green-300: #88e2b4;
--color-primary-green-100: #d4fde7;
--color-primary-blue-900: #00216a;
--color-primary-blue-700: #003399;
--color-primary-blue-500: #1961d9;
--color-primary-blue-300: #8fb7ff;
--color-primary-blue-100: #d8e6ff;
--color-primary-red-900: #980000;
--color-primary-red-700: #d20000;
--color-primary-red-500: #ff4c54;
--color-primary-red-300: #ffa8ac;
--color-primary-red-100: #ffdfe0;
--color-primary-yellow-900: #9d6d00;
--color-primary-yellow-700: #d59700;
--color-primary-yellow-500: #fdc837;
--color-primary-yellow-300: #ffe499;
--color-primary-yellow-100: #fff7d9;
--color-neutral-800: #1b1a18;
--color-neutral-700: #282725;
```

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