AirwaveLegacy format

Airwave is a design system for podcast platforms, audio shows, and on-demand listening apps. The aesthetic borrows from late-night broadcast booths and vintage audio gear — charcoal surfaces, glowing amber accents, and waveform visualizations that act as both decoration and information...

Text Primary#F5F1E8
Text Secondary#A8A099
Background#0F0E0D
Surface#1A1816
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayGT Sectra, Tiempos Headline, Georgia · 56px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1GT Sectra, Tiempos Headline, Georgia · 40px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2GT Sectra, Tiempos Headline, Georgia · 28px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Inter, Söhne, system-ui · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeInter, Söhne, system-ui · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter, Söhne, system-ui · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SmallInter, Söhne, system-ui · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter, Söhne, system-ui · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Episode NumberJetBrains Mono, Berkeley Mono · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

TimestampJetBrains Mono, Berkeley Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

Airwave is a design system for podcast platforms, audio shows, and on-demand listening apps. The aesthetic borrows from late-night broadcast booths and vintage audio gear — charcoal surfaces, glowing amber accents, and waveform visualizations that act as both decoration and information...

Components

Buttons

Waveform

Episode List (48px)

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Elevation & Depth

Amber Halo

Do's & Don'ts

Do

Use amber as the heartbeat color across play states, scrubbers, and live indicators

Don't

Use cool blue or cyan accents — Airwave is intentionally warm

Icons

Font Awesome
?
list

Library: Font Awesome · Style: outline · Size: 20px

Motion

Motion in Airwave is rhythmic — it borrows from the cadence of audio. Standard duration is 240ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Playback button transitions use 180ms. The active episode's amber halo pulses on a 2.4-second sine wave at low amplitude — subtle, like breathing. Waveform bars animate height on entry (staggered 16ms each, 360ms total). Page transitions cross-fade over 240ms. The mini-player expanding to full-screen on mobile uses a spring physics curve (stiffness 240, damping 28).

Voice and Tone

Conversational but produced. Like a host's intro, not a dashboard alert.

Use show language: "On this episode," "From the archives," "Coming up next."

Subscribe verbs are warm: "Follow," "Add to library," "Save for later" — not "Subscribe" alone.

Empty states use audio idiom: "Nothing in the queue," "Dead air," "No transcript available yet."

Push notifications are show-personal: "New from [Show Name]" rather than "You have a new podcast."

Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 9.9 KB
Downloads 6
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/duanhdan/airwave and implement it in my code

Don't have the MCP? Install it here