---
version: alpha
name: "Vinyl"
description: "커버 아트가 먼저, 핫핑크 재생 버튼, 듣기 좋은 어두운 방. Vinyl은 커버 아트가 분위기를 정하게 합니다. 거의 검은 배경, 큼직한 정사각형 아트워크, 핫핑크 재생 버튼, 대담하고 약간 별난 제목을 위한 Syne. 모든 화면의 탭 바 위에 있는 미니 플레이어 덕분에 재생은 언제나 한 번의 탭이면 닿습니다."
colors:
  primary: "#D81B60"
  on-primary: "#FFFFFF"
  secondary: "#2F6FD6"
  tertiary: "#E0A43A"
  neutral: "#5E5B57"
  surface: "#F7F6F4"
  on-surface: "#121212"
typography:
  display-lg:
    fontFamily: "Syne"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Syne"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Syne"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Syne"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: "Manrope"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
rounded:
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Vinyl은 커버 아트가 분위기를 정하게 합니다. 거의 검은 배경, 큼직한 정사각형 아트워크, 핫핑크 재생 버튼, 대담하고 약간 별난 제목을 위한 Syne. 모든 화면의 탭 바 위에 있는 미니 플레이어 덕분에 재생은 언제나 한 번의 탭이면 닿습니다.

## Colors

- **primary (#D81B60):** 라이트 모드에서는 라즈베리 핑크, 다크 모드에서는 핫핑크. 재생, 진행 막대, 좋아요한 트랙, 활성 탭에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#2F6FD6):** 파랑. 팟캐스트, 다운로드, 두 번째 차트 계열에 씁니다.
- **tertiary (#E0A43A):** 앰버. 신곡, 라이브 공연, 세 번째 계열에 씁니다.
- **neutral (#5E5B57):** 따뜻한 회색. 아티스트 이름, 재생 시간, 에피소드 정보에 씁니다.
- **surface (#F7F6F4):** 다크 모드에서는 카드가 한 단계 밝은 거의 검은색, 라이트 모드는 따뜻한 오프화이트.
- **on-surface (#121212)**

## Typography

화면 제목과 앨범명은 Syne 굵기 700(디스플레이 48px, 제목 32px), 본문과 트랙 목록은 Manrope 굵기 500 15px. 시간과 재생 길이는 흔들리지 않도록 고정폭 숫자를 씁니다.

## Layout

좌우 패딩 16px의 휴대폰 화면, 이름표가 있는 탭 네 개의 높이 60px 하단 탭 바와 바로 위에 항상 떠 있는 미니 플레이어. 지금 재생 중 화면은 상단에 아트워크가 있는 전체 화면입니다.

## Shapes

카드, 아트워크, 시트는 12px 모서리, 터치 영역이 48px인 둥근 재생 버튼. 그림자 없이, 어두운 면은 대신 톤을 한 단계씩 높입니다.

## Components

가로 선반에 놓인 정사각형 커버 아트 카드, 번호, 제목, 아티스트, 재생 길이가 있는 트랙 행, 진행선이 있는 미니 플레이어, 스크러버와 대기열이 있는 전체 재생 화면, 재생과 다운로드가 있는 팟캐스트 에피소드 카드.

## Do's and Don'ts

- 커버 아트를 각 화면에서 가장 큰 요소로 만드세요.
- 지금 재생 중 화면을 제외한 모든 곳에서 미니 플레이어를 보이게 두세요.
- 재생, 좋아요, 녹음이 아닌 것에는 핑크를 쓰지 마세요.
- Syne을 17px보다 작게 쓰지 마세요. 더 작은 글씨는 Manrope의 몫입니다.