Vinyl: sistema de diseño de apps de música y podcasts
App · Dark · Bold · MusicVinyl
Primero la portada, un botón de reproducir rosa intenso y una sala oscura para escuchar.
Vinyl deja que la portada marque el ambiente: un fondo casi negro, grandes carátulas cuadradas, un botón de reproducir rosa intenso y Syne para títulos atrevidos y algo peculiares. La reproducción nunca queda a más de un toque, gracias a un minirreproductor que se sitúa sobre la barra de pestañas en todas las pantallas.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/es/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
Best for
- Apps de streaming de música
- Reproductores de podcasts y audiolibros
- Apps de radio y DJ
- Apps de artistas y sellos
Do's and don'ts
- Haz que la carátula sea el elemento más grande de cada pantalla.
- Mantén el minirreproductor visible en todas partes salvo en la pantalla de reproducción.
- No uses el rosa para nada que no sea reproducir, dar me gusta o grabar.
- No pongas Syne por debajo de 17px; el texto más pequeño es de Manrope.