Vinyl: Music and Podcast App Design System

App · Dark · Bold · Music

Vinyl

Cover art first, a hot pink play button and a dark room to listen in.

Vinyl lets cover art set the mood: a near-black background, big square artwork, a hot pink play button and Syne for bold, slightly quirky titles. Playback is never more than a tap away, thanks to a mini player that sits above the tab bar on every screen.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Vinyl design system. Its spec is at https://codexdesign.io/design-systems/vinyl.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#F7F6F4oklch(0.973 0.003 84.559)
foreground#121212oklch(0.182 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#121212oklch(0.182 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#121212oklch(0.182 0 0)
primary#D81B60oklch(0.574 0.218 7.849)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#ECEAE6oklch(0.937 0.006 84.567)
secondary-foreground#121212oklch(0.182 0 0)
muted#EFEDEAoklch(0.947 0.005 78.298)
muted-foreground#5E5B57oklch(0.473 0.007 75.349)
accent#E8E5E1oklch(0.923 0.006 75.404)
accent-foreground#121212oklch(0.182 0 0)
destructive#B3261Eoklch(0.501 0.178 28.705)
border#DEDBD6oklch(0.892 0.008 80.72)
input#D0CCC6oklch(0.847 0.009 78.275)
ring#D81B60oklch(0.574 0.218 7.849)
chart-1#D81B60oklch(0.574 0.218 7.849)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#E0A43Aoklch(0.758 0.137 77.684)
chart-4#18A0A0oklch(0.641 0.105 194.845)
chart-5#7C5CD6oklch(0.569 0.18 291.767)

Dark theme

background#0A0A0Boklch(0.145 0.002 286.131)
foreground#F2F2F3oklch(0.961 0.001 286.375)
card#141416oklch(0.192 0.004 286.018)
card-foreground#F2F2F3oklch(0.961 0.001 286.375)
popover#141416oklch(0.192 0.004 286.018)
popover-foreground#F2F2F3oklch(0.961 0.001 286.375)
primary#FF4F8Boklch(0.688 0.215 4.087)
primary-foreground#0A0A0Boklch(0.145 0.002 286.131)
secondary#1D1D20oklch(0.232 0.006 285.946)
secondary-foreground#F2F2F3oklch(0.961 0.001 286.375)
muted#18181Boklch(0.21 0.006 285.885)
muted-foreground#9A9AA2oklch(0.689 0.012 286.091)
accent#222226oklch(0.254 0.007 285.856)
accent-foreground#F2F2F3oklch(0.961 0.001 286.375)
destructive#FF6B5Eoklch(0.709 0.183 27.67)
border#26262Aoklch(0.27 0.007 285.898)
input#303035oklch(0.311 0.009 285.874)
ring#FF4F8Boklch(0.688 0.215 4.087)
chart-1#FF4F8Boklch(0.688 0.215 4.087)
chart-2#6FA0FFoklch(0.713 0.149 262.556)
chart-3#FFC24Doklch(0.849 0.147 80.441)
chart-4#3DD6C4oklch(0.794 0.127 183.43)
chart-5#B79BFFoklch(0.754 0.143 295.667)

Fonts

Headings: Syne · 700
Body: Manrope · 500
Monospace: JetBrains Mono

Type scale

display · 48/1 · -0.02emThe quick brown fox
h1 · 32/1.05 · -0.01emThe quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 17/1.3The quick brown fox
body · 15/1.5The quick brown fox
small · 12/1.4 · 0.02emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 8pxmd 10pxlg 12pxxl 16px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Touch targets: 48px
Tab bar: 60px, 4 items, icons with labels; mini player above tab bar
Screen padding: 16px
Navigation: bottom tab bar with a persistent mini player
Numerals: tabular for time

Vinyl: Music and Podcast App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps