Vinyl: 음악·팟캐스트 앱 디자인 시스템
App · Dark · Bold · MusicVinyl
커버 아트가 먼저, 핫핑크 재생 버튼, 듣기 좋은 어두운 방.
Vinyl은 커버 아트가 분위기를 정하게 합니다. 거의 검은 배경, 큼직한 정사각형 아트워크, 핫핑크 재생 버튼, 대담하고 약간 별난 제목을 위한 Syne. 모든 화면의 탭 바 위에 있는 미니 플레이어 덕분에 재생은 언제나 한 번의 탭이면 닿습니다.
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/ko/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
- 음악 스트리밍 앱
- 팟캐스트·오디오북 플레이어
- 라디오와 DJ 앱
- 아티스트·레이블 앱
Do's and don'ts
- 커버 아트를 각 화면에서 가장 큰 요소로 만드세요.
- 지금 재생 중 화면을 제외한 모든 곳에서 미니 플레이어를 보이게 두세요.
- 재생, 좋아요, 녹음이 아닌 것에는 핑크를 쓰지 마세요.
- Syne을 17px보다 작게 쓰지 마세요. 더 작은 글씨는 Manrope의 몫입니다.