Skip to content
PodWave

The Podwave design system

Three colours, two typefaces, generous radii and one signature shape — the notched corner. Everything on this page is live theme code.

01 · Colour

Brand, teal and deep

Brand comes from Ghost Admin → Design & branding → Accent colour. Teal (--pw-teal) and Deep (--pw-deep) are CSS variables in assets/css/source.css. Neutrals are derived from the ink colour.

  • 1 · Brand Accent colourbg-brand · bg-accent-fill · text-accent
  • 2 · Teal --pw-tealbg-teal · text-teal-ink · bg-teal-tint
  • 3 · Deep --pw-deepbg-deep
  • canvas
  • surface-2
  • surface-3
  • tint
  • tint-2
  • muted
  • ink-2
  • ink

02 · Typography

Instrument Sans and Inter

Headings use Instrument Sans, body copy uses Inter. Both can be replaced in Ghost Admin → Design & branding → Typography.

text-mega

Press play

text-display

Accompany your routine

text-headline

Explore by genre

text-title

The future of AI in everyday life

text-lg · Inter

A practical conversation about how artificial intelligence is changing everyday tools and routines.

eyebrow

Editor's picks

03 · Controls

Buttons, chips and discs

btn-primary btn-ink btn-teal btn-secondary btn-outline
Technology Science Ep. 12 Video View all
SubscribeSign in

04 · Shape

Radii and the notched corner

notch-br, notch-tr and notch-tl cut a round bite out of a corner for a disc to nest in. slant-tr gives the angled top edge. Radii: card 1.25rem, tile 1.75rem, frame 2.25rem, buttons fully round.

notch-br
notch-tr
slant-tr
Arch (Featured Interview)

05 · Cards

Cards and image ratios

Archive cards use 4:3 covers, overlay tiles 16:11, host portraits 4:5 and playlist rows a round 1:1 thumbnail.

06 · Forms & media

Inputs and the player

Get new episodes by email

Episode pages show a player under the cover only when the post has a playable audio source (podwave:audio-url, a Ghost audio card or an audio link). It hands off to the floating player, which keeps playing across pages. Videos open in a lightbox and never autoplay.

Static illustration of the mini player.