---
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):** ブルー。ポッドキャスト、ダウンロード、2 番目のチャート系列用。
- **tertiary (#E0A43A):** アンバー。新曲、ライブ配信、3 番目の系列用。
- **neutral (#5E5B57):** 温かみのあるグレー。アーティスト名、再生時間、エピソードの詳細用。
- **surface (#F7F6F4):** ダークモードではほぼ黒で、カードは 1 段階明るく。ライトモードは温かみのあるオフホワイト。
- **on-surface (#121212)**

## Typography

画面タイトルとアルバム名は Syne のウェイト 700（ディスプレイ 48px、タイトル 32px）。本文と曲のリストは Manrope のウェイト 500、15px。時刻と再生時間は等幅数字で、数字が動かないようにします。

## Layout

左右 16px のパディングと、高さ 60px で 4 つのラベル付きタブの下部タブバーのスマートフォン画面。そのすぐ上に、常時表示のミニプレイヤー。再生中の画面はフルスクリーンで、上にアートワークを置きます。

## Shapes

カード、アートワーク、シートは 12px の角丸。タップ領域が 48px の丸い再生ボタン。影はなく、暗い面は色の明るさを一段上げて表現します。

## Components

横に並ぶ棚に置いた正方形のジャケットカード、番号、タイトル、アーティスト、再生時間を並べた曲の行、進行線付きのミニプレイヤー、スクラバーとキュー付きのフルサイズの再生中画面、再生とダウンロードのボタン付きのポッドキャストのエピソードカード。

## Do's and Don'ts

- ジャケットアートを、各画面でいちばん大きな要素にする。
- 再生中の画面以外では、ミニプレイヤーを常に表示しておく。
- 再生、いいね、録音以外にピンクを使わない。
- Syne を 17px より小さくしない。それより小さい文字は Manrope の役目。