Vinyl: Musik- und Podcast-App-Designsystem
App · Dunkel · Kräftig · MusikVinyl
Cover-Art zuerst, ein pinker Play-Button und ein dunkler Raum zum Zuhören.
Vinyl lässt die Cover-Art die Stimmung bestimmen: ein fast schwarzer Hintergrund, große quadratische Artworks, ein pinker Play-Button und Syne für kräftige, leicht schrullige Titel. Die Wiedergabe ist nie mehr als einen Tipp entfernt, dank eines Mini-Players, der auf jedem Screen über der Tab-Leiste sitzt.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Vinyl. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/vinyl.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles 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)
Dunkles 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)
Schriften
- Überschriften
- Syne · 700
- Fließtext
- Manrope · 500
- Monospace
- JetBrains Mono
Schriftgrößen
- display · 48/1 · -0.02emZwölf Boxkämpfer jagen Viktor
- h1 · 32/1.05 · -0.01emZwölf Boxkämpfer jagen Viktor
- h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
- h3 · 17/1.3Zwölf Boxkämpfer jagen Viktor
- body · 15/1.5Zwölf Boxkämpfer jagen Viktor
- small · 12/1.4 · 0.02emZwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 8pxmd 10pxlg 12pxxl 16px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 60px, 4 Einträge, icons with labels; mini player above tab bar
- Bildschirmrand
- 16px
- Navigation
- bottom tab bar with a persistent mini player
- Ziffern
- tabular for time
Ideal für
- Musik-Streaming-Apps
- Podcast- und Hörbuch-Player
- Radio- und DJ-Apps
- Apps für Künstler und Labels
Dos and Don’ts
- Mach die Cover-Art zum größten Element auf jedem Screen.
- Halte den Mini-Player überall sichtbar außer auf dem Now-Playing-Screen.
- Verwende Pink nur für Abspielen, Liken und Aufnehmen.
- Setze Syne nicht unter 17px; kleinerer Text gehört Manrope.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader