# Podimo Design System

> High-contrast geometric clarity meets a vibrant purple signal, anchored by bold Diatype headlines and generous 40px radius containers.

**Source:** https://podimo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Podimo utilizes a high-contrast foundation of pure black (#000000) and white (#ffffff), energized by a signature electric purple (#794cf8). The typographic system is built on **PodimoDiatype**, a geometric neo-grotesque used for heavy-weight headlines (700) with tight negative letter-spacing (-1.12px at display sizes). Layouts are characterized by large-scale cards featuring a distinct 40px corner radius and generous 32px internal padding. While the primary brand color is purple, the system allows for secondary chromatic blocks (orange and olive) to differentiate content pillars within the same structural framework.

## Signature DNA
1. **The 40px Radius Card** (Large-scale containers with aggressive rounding, used for feature blocks and "by the numbers" stats across all pages).
2. **Diatype Display** (Heavyweight 700 weight headlines with significant negative tracking to create a dense, modern editorial feel).
3. **Chromatic Block Pacing** (Alternating between pure white canvases and saturated full-bleed color sections in purple, black, or orange).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Podimo (Parent) | #794cf8 | Geometric cards | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | #ffffff | Page background, text on dark surfaces | 19 | 1.0 | computed_style |
| `{colors.black}` | #000000 | Primary text, dark section backgrounds | 24 | 1.0 | computed_style |
| `{colors.dark-bg}` | #121212 | Alternative dark surface | 1 | 0.8 | --toastify-color-dark |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | #794cf8 | Brand signal, hero backgrounds, primary buttons | 4 | 0.6 | computed_style |
| `{colors.accent-orange}` | #f56d2a | Secondary content pillar (Audiobooks) | 2 | 0.5 | card_background |
| `{colors.accent-olive}` | #8f9178 | Tertiary content pillar (Shows) | 2 | 0.5 | card_background |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| `{colors.success}` | #07bc0c | Success icons and progress | --toastify-color-success |
| `{colors.warning}` | #f1c40f | Warning states | --toastify-color-warning |
| `{colors.info}` | #3498db | Information states | --toastify-color-info |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| PodimoDiatype | 400, 500, 700 | Headlines, UI, Buttons | ABC Diatype (Licensed) | Proprietary |
| podimoFont | 400 | Body copy | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-huge}` | 56px | 64px | -1.12px | 700 | Hero headlines | `h1.AboutPage...hugeHeading` |
| `{type.heading-lg}` | 34px | 40px | -0.68px | 700 | Section titles | `h2.ContentBlock...heading` |
| `{type.heading-md}` | 28px | 32px | -0.28px | 700 | Sub-section heads | `p._.te` |
| `{type.heading-sm}` | 22px | 24px | -0.22px | 500 | Hero subtitles | `p.HeroSection...subtitle` |
| `{type.body-lg}` | 18px | 24px | -0.18px | 500 | Navigation links | `a.i.n` |
| `{type.body-md}` | 16px | 20px | -0.16px | 400 | Description text | `p.ContentBlock...description` |
| `{type.body-base}` | 16px | 18.4px | normal | 400 | Standard body | `section.HeroSection...hero` |
| `{type.caption}` | 14px | 20px | normal | 400 | Small labels | Not captured in source |

### Principles
1. **Tight Tracking on Heads:** Negative letter-spacing increases as font size grows, reaching -2% at display sizes.
2. **Geometric Priority:** Diatype's circular forms are mirrored in the 40px radius of UI components.
3. **Weight Contrast:** Headlines are strictly 700 weight; body copy remains at 400 for maximum legibility.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 3 |
| `{space.md}` | 20px | 4 |
| `{space.lg}` | 32px | 6 |
| `{space.xl}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp sections, images | 27 occurrences |
| `{radius.panel-sm}` | 28px | Secondary cards | 3 occurrences |
| `{radius.panel-lg}` | 40px | Primary feature cards | 10 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All cards and surfaces | 0px border-width observed |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** https://podimo.com, https://podimo.com/about
**Spec:** Background #794cf8 / Text #ffffff / Radius 9999px (pill) / Padding 12px 24px / Typography Diatype 500
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting specific content pillars or stats
**Pages observed:** https://podimo.com, https://podimo.com/about
**Spec:** Background #794cf8 (or #f56d2a) / Text #000000 / Radius 40px / Padding 32px / Typography Diatype 700
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://podimo.com
**Spec:** Background #ffffff / Text #000000 / Height 64px / Typography Diatype 500
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Cookie Consent Toast
**Role:** Legal compliance
**Pages observed:** https://podimo.com
**Spec:** Background #ffffff / Radius 12px / Shadow --toastify-toast-shadow (#000000)
**States observed:** Default: captured

#### Content Block
**Role:** Alternating text and image sections
**Pages observed:** https://podimo.com/about
**Spec:** Background #ffffff or #000000 / Padding 40px vertical / Typography Diatype 700
**States observed:** Default: captured

#### Footer
**Role:** Global site map
**Pages observed:** https://podimo.com
**Spec:** Background #f5f5f5 (computed) / Text #000000 / Padding 40px / Typography Diatype 400
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Gap | 40px - 80px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Cards stack vertically; padding reduces to 20px |
| Desktop | 1440px | Multi-column card grids (3-up) |

## Imagery & decoration
Podimo uses high-quality photography of people listening or creators in studio. Graphic decoration is limited to the Podimo "P" logo mark and simple iconography within feature cards. It avoids drop shadows, preferring flat color blocks to define depth.

## Do's
- Use **PodimoDiatype 700** for all headings.
- Apply a **40px radius** to large container cards.
- Use **#794cf8** as the primary interactive signal.
- Maintain **32px padding** inside feature cards.
- Use negative letter-spacing on display text (e.g., -1.12px at 56px).

## Don'ts
- **Wrong:** Using #bb86fc (sub-brand/toastify purple) as the primary brand background. **Right:** Use #794cf8. **Reason:** #bb86fc is a utility/semantic token, not the brand primary.
- Do not use drop shadows on cards; the system is strictly flat.
- Do not use a border-radius smaller than 28px for content panels.
- Do not use serif fonts; the system is strictly neo-grotesque.

## Similar brands
- Spotify (Geometric, high-contrast)
- Headspace (Bold radii, saturated color blocks)
- Netflix (Typography-first, dark/light alternating sections)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #794cf8;
  --color-black: #000000;
  --color-white: #ffffff;
  --radius-card: 40px;
  --font-display: "PodimoDiatype", sans-serif;
  --font-body: "podimoFont", sans-serif;
}
```

## Agent prompt examples
- "Generate a feature card using Podimo's 40px radius, #794cf8 background, and white Diatype 700 text."
- "Create a hero section with a black background, 56px Diatype headline with -1.12px letter spacing."
- "Design a 3-column grid of cards with 32px internal padding and 40px external spacing."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific font size scaling for display text was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://podimo.com | 1440px | 2026-06-06 |
| About | https://podimo.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://podimo.com | 390px | 2026-06-06 |