admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
250 lines
13 KiB
Markdown
250 lines
13 KiB
Markdown
# Design System Terinspirasi dari Spotify
|
||
|
||
> Category: Media & Konsumen
|
||
> Streaming musik. Hijau cerah di atas gelap, tipografi tebal, didominasi seni album.
|
||
|
||
## 1. Tema Visual & Atmosfer
|
||
|
||
Antarmuka web Spotify adalah pemutar musik gelap yang imersif, membungkus pendengar dalam kepompong hampir hitam (`#121212`, `#181818`, `#1f1f1f`) di mana seni album dan konten menjadi sumber warna utama. Filosofi desainnya adalah "kegelapan yang mengutamakan konten" — UI menyurut ke dalam bayangan agar musik, podcast, dan playlist dapat bersinar. Setiap permukaan adalah variasi warna arang, menciptakan lingkungan seperti bioskop di mana satu-satunya warna sejati berasal dari Spotify Green yang ikonik (`#1ed760`) dan karya seni album itu sendiri.
|
||
|
||
Tipografi menggunakan SpotifyMixUI dan SpotifyMixUITitle — font eksklusif dari keluarga CircularSp (Circular by Lineto, dikustomisasi untuk Spotify) dengan tumpukan fallback yang ekstensif mencakup font Arab, Ibrani, Sirilik, Yunani, Devanagari, dan CJK, yang mencerminkan jangkauan global Spotify. Sistem tipografi bersifat kompak dan fungsional: 700 (bold) untuk penekanan dan navigasi, 600 (semibold) untuk penekanan sekunder, dan 400 (regular) untuk bodi. Tombol menggunakan huruf kapital dengan letter-spacing positif (1.4px–2px) untuk kualitas sistematis seperti label.
|
||
|
||
Yang membedakan Spotify adalah geometri pill-dan-lingkaran. Tombol primer menggunakan radius 500px–9999px (pill penuh), tombol putar melingkar menggunakan radius 50%, dan input pencarian berbentuk pill 500px. Dikombinasikan dengan bayangan tebal (`rgba(0,0,0,0.5) 0px 8px 24px`) pada elemen yang terangkat dan kombinasi unik inset border-shadow (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), hasilnya adalah antarmuka yang terasa seperti perangkat audio premium — taktil, melengkung, dan dirancang untuk sentuhan.
|
||
|
||
**Karakteristik Utama:**
|
||
- Tema gelap imersif hampir hitam (`#121212`–`#1f1f1f`) — UI menghilang di balik konten
|
||
- Spotify Green (`#1ed760`) sebagai aksen merek tunggal — tidak dekoratif, selalu fungsional
|
||
- Keluarga font SpotifyMixUI/CircularSp dengan dukungan skrip global
|
||
- Tombol pill (500px–9999px) dan kontrol melingkar (50%) — membulat, dioptimalkan untuk sentuhan
|
||
- Label tombol huruf kapital dengan letter-spacing lebar (1.4px–2px)
|
||
- Bayangan tebal pada elemen terangkat (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||
- Warna semantik: merah negatif (`#f3727f`), oranye peringatan (`#ffa42b`), biru pengumuman (`#539df5`)
|
||
- Seni album sebagai sumber warna utama — UI itu sendiri akromatik secara desain
|
||
|
||
## 2. Palet Warna & Perannya
|
||
|
||
### Merek Utama
|
||
- **Spotify Green** (`#1ed760`): Aksen merek utama — tombol putar, status aktif, CTA
|
||
- **Near Black** (`#121212`): Permukaan latar belakang terdalam
|
||
- **Dark Surface** (`#181818`): Kartu, kontainer, permukaan terangkat
|
||
- **Mid Dark** (`#1f1f1f`): Latar belakang tombol, permukaan interaktif
|
||
|
||
### Teks
|
||
- **White** (`#ffffff`): `--text-base`, teks primer
|
||
- **Silver** (`#b3b3b3`): Teks sekunder, label redup, nav tidak aktif
|
||
- **Near White** (`#cbcbcb`): Teks sekunder sedikit lebih terang
|
||
- **Light** (`#fdfdfd`): Hampir putih murni untuk penekanan maksimum
|
||
|
||
### Semantik
|
||
- **Negative Red** (`#f3727f`): `--text-negative`, status error
|
||
- **Warning Orange** (`#ffa42b`): `--text-warning`, status peringatan
|
||
- **Announcement Blue** (`#539df5`): `--text-announcement`, status informasi
|
||
|
||
### Permukaan & Batas
|
||
- **Dark Card** (`#252525`): Permukaan kartu terangkat
|
||
- **Mid Card** (`#272727`): Permukaan kartu alternatif
|
||
- **Border Gray** (`#4d4d4d`): Batas tombol pada latar gelap
|
||
- **Light Border** (`#7c7c7c`): Batas tombol outlined, tautan redup
|
||
- **Separator** (`#b3b3b3`): Garis pemisah
|
||
- **Light Surface** (`#eeeeee`): Tombol mode terang (jarang)
|
||
- **Spotify Green Border** (`#1db954`): Varian batas aksen hijau
|
||
|
||
### Bayangan
|
||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialog, menu, panel terangkat
|
||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Kartu, dropdown
|
||
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Kombinasi border-shadow input
|
||
|
||
## 3. Aturan Tipografi
|
||
|
||
### Keluarga Font
|
||
- **Title**: `SpotifyMixUITitle`, fallback: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||
- **UI / Body**: `SpotifyMixUI`, tumpukan fallback yang sama
|
||
|
||
### Hierarki
|
||
|
||
| Peran | Font | Ukuran | Bobot | Line Height | Letter Spacing | Catatan |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bobot judul bold |
|
||
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Kepala seksi semibold |
|
||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Teks yang ditekankan |
|
||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Bodi standar |
|
||
| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |
|
||
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Tombol standar |
|
||
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigasi |
|
||
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Nav tidak aktif |
|
||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadata bold |
|
||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
|
||
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tag, jumlah |
|
||
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Teks kecil |
|
||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Teks terkecil |
|
||
|
||
### Prinsip
|
||
- **Biner bold/regular**: Sebagian besar teks adalah 700 (bold) atau 400 (regular), dengan 600 digunakan secara hemat. Ini menciptakan hierarki visual yang jelas melalui kontras bobot, bukan variasi ukuran.
|
||
- **Tombol huruf kapital sebagai sistem**: Label tombol menggunakan huruf kapital + letter-spacing lebar (1.4px–2px), menciptakan "suara label" sistematis yang berbeda dari teks konten.
|
||
- **Ukuran kompak**: Rentangnya 10px–24px — lebih sempit dari kebanyakan sistem. Tipografi Spotify kompak dan fungsional, dirancang untuk memindai playlist, bukan membaca artikel.
|
||
- **Dukungan skrip global**: Tumpukan fallback yang ekstensif (Arab, Ibrani, Sirilik, Yunani, Devanagari, CJK) mencerminkan jangkauan Spotify di 180+ pasar.
|
||
|
||
## 4. Gaya Komponen
|
||
|
||
### Tombol
|
||
|
||
**Dark Pill**
|
||
- Background: `#1f1f1f`
|
||
- Teks: `#ffffff` atau `#b3b3b3`
|
||
- Padding: 8px 16px
|
||
- Radius: 9999px (pill penuh)
|
||
- Penggunaan: Pill navigasi, aksi sekunder
|
||
|
||
**Dark Large Pill**
|
||
- Background: `#181818`
|
||
- Teks: `#ffffff`
|
||
- Padding: 0px 43px
|
||
- Radius: 500px
|
||
- Penggunaan: Tombol navigasi aplikasi utama
|
||
|
||
**Light Pill**
|
||
- Background: `#eeeeee`
|
||
- Teks: `#181818`
|
||
- Radius: 500px
|
||
- Penggunaan: CTA mode terang (persetujuan cookie, pemasaran)
|
||
|
||
**Outlined Pill**
|
||
- Background: transparent
|
||
- Teks: `#ffffff`
|
||
- Border: `1px solid #7c7c7c`
|
||
- Padding: 4px 16px 4px 36px (asimetris untuk ikon)
|
||
- Radius: 9999px
|
||
- Penggunaan: Tombol ikuti, aksi sekunder
|
||
|
||
**Circular Play**
|
||
- Background: `#1f1f1f`
|
||
- Teks: `#ffffff`
|
||
- Padding: 12px
|
||
- Radius: 50% (lingkaran)
|
||
- Penggunaan: Kontrol putar/jeda
|
||
|
||
### Kartu & Kontainer
|
||
- Background: `#181818` atau `#1f1f1f`
|
||
- Radius: 6px–8px
|
||
- Tidak ada batas terlihat pada sebagian besar kartu
|
||
- Hover: sedikit pencerahan background
|
||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` pada yang terangkat
|
||
|
||
### Input
|
||
- Input pencarian: background `#1f1f1f`, teks `#ffffff`
|
||
- Radius: 500px (pill)
|
||
- Padding: 12px 96px 12px 48px (dengan kesadaran ikon)
|
||
- Focus: batas menjadi `#000000`, outline `1px solid`
|
||
|
||
### Navigasi
|
||
- Sidebar gelap dengan SpotifyMixUI 14px bobot 700 untuk aktif, 400 untuk tidak aktif
|
||
- Warna redup `#b3b3b3` untuk item tidak aktif, `#ffffff` untuk aktif
|
||
- Tombol ikon melingkar (radius 50%)
|
||
- Logo Spotify kiri atas berwarna hijau
|
||
|
||
## 5. Prinsip Tata Letak
|
||
|
||
### Sistem Jarak
|
||
- Unit dasar: 8px
|
||
- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||
|
||
### Grid & Kontainer
|
||
- Sidebar (tetap) + area konten utama
|
||
- Kartu album/playlist berbasis grid
|
||
- Bar sekarang-diputar lebar penuh di bagian bawah
|
||
- Area konten responsif mengisi ruang yang tersisa
|
||
|
||
### Filosofi Ruang Putih
|
||
- **Kompresi gelap**: Spotify mengemas konten secara padat — grid playlist, daftar lagu, dan navigasi semuanya berspasi rapat. Latar belakang gelap memberikan istirahat visual antar elemen tanpa memerlukan jarak yang besar.
|
||
- **Kepadatan konten daripada ruang bernapas**: Ini adalah aplikasi, bukan situs pemasaran. Setiap piksel melayani pengalaman mendengarkan.
|
||
|
||
### Skala Border Radius
|
||
- Minimal (2px): Lencana, tag eksplisit
|
||
- Halus (4px): Input, elemen kecil
|
||
- Standar (6px): Kontainer seni album, kartu
|
||
- Nyaman (8px): Seksi, dialog
|
||
- Sedang (10px–20px): Panel, elemen overlay
|
||
- Besar (100px): Tombol pill besar
|
||
- Pill (500px): Tombol primer, input pencarian
|
||
- Pill Penuh (9999px): Pill navigasi, pencarian
|
||
- Lingkaran (50%): Tombol putar, avatar, ikon
|
||
|
||
## 6. Kedalaman & Elevasi
|
||
|
||
| Level | Perlakuan | Penggunaan |
|
||
|-------|-----------|-----|
|
||
| Base (Level 0) | Background `#121212` | Lapisan terdalam, latar belakang halaman |
|
||
| Surface (Level 1) | `#181818` atau `#1f1f1f` | Kartu, sidebar, kontainer |
|
||
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menu dropdown, kartu hover |
|
||
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modal, overlay, menu |
|
||
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Batas input |
|
||
|
||
**Filosofi Bayangan**: Spotify menggunakan bayangan yang tergolong berat untuk aplikasi bertemakan gelap. Bayangan dengan opasitas 0.5 dan blur 24px menciptakan efek dramatis "melayang dalam kegelapan" untuk dialog dan menu, sementara opasitas 0.3 dengan blur 8px memberikan angkatan kartu yang lebih halus. Kombinasi unik inset border-shadow pada input menciptakan kualitas taktil yang seperti terbenam.
|
||
|
||
## 7. Yang Harus dan Tidak Boleh Dilakukan
|
||
|
||
### Yang Harus Dilakukan
|
||
- Gunakan background hampir hitam (`#121212`–`#1f1f1f`) — kedalaman melalui variasi warna bayangan
|
||
- Terapkan Spotify Green (`#1ed760`) hanya untuk kontrol putar, status aktif, dan CTA primer
|
||
- Gunakan bentuk pill (500px–9999px) untuk semua tombol — melingkar (50%) untuk kontrol putar
|
||
- Terapkan huruf kapital + letter-spacing lebar (1.4px–2px) pada label tombol
|
||
- Jaga tipografi tetap kompak (rentang 10px–24px) — ini adalah aplikasi, bukan majalah
|
||
- Gunakan bayangan tebal (opasitas `0.3–0.5`) untuk elemen terangkat pada latar belakang gelap
|
||
- Biarkan seni album menyediakan warna — UI itu sendiri akromatik
|
||
|
||
### Yang Tidak Boleh Dilakukan
|
||
- Jangan gunakan Spotify Green secara dekoratif atau pada latar belakang — fungsinya hanya fungsional
|
||
- Jangan gunakan latar belakang terang untuk permukaan utama — imersi gelap adalah intinya
|
||
- Jangan lewati geometri pill/lingkaran pada tombol — tombol persegi merusak identitas
|
||
- Jangan gunakan bayangan tipis/halus — pada latar belakang gelap, bayangan harus tebal agar terlihat
|
||
- Jangan tambahkan warna merek tambahan — hijau + abu-abu akromatik adalah palet yang lengkap
|
||
- Jangan gunakan line-height yang longgar — tipografi Spotify kompak dan padat
|
||
- Jangan ekspos batas abu-abu mentah — gunakan batas berbasis bayangan atau inset
|
||
|
||
## 8. Perilaku Responsif
|
||
|
||
### Breakpoint
|
||
| Nama | Lebar | Perubahan Utama |
|
||
|------|-------|-------------|
|
||
| Mobile Small | <425px | Tata letak mobile kompak |
|
||
| Mobile | 425–576px | Mobile standar |
|
||
| Tablet | 576–768px | Grid 2 kolom |
|
||
| Tablet Large | 768–896px | Tata letak diperluas |
|
||
| Desktop Small | 896–1024px | Sidebar terlihat |
|
||
| Desktop | 1024–1280px | Tata letak desktop penuh |
|
||
| Large Desktop | >1280px | Grid diperluas |
|
||
|
||
### Strategi Penciutan
|
||
- Sidebar: penuh → diciutkan → disembunyikan
|
||
- Grid album: 5 kolom → 3 → 2 → 1
|
||
- Bar sekarang-diputar: dipertahankan di semua ukuran
|
||
- Pencarian: input pill dipertahankan, lebar menyesuaikan
|
||
- Navigasi: sidebar → bar bawah di mobile
|
||
|
||
## 9. Panduan Prompt Agen
|
||
|
||
### Referensi Warna Cepat
|
||
- Background: Near Black (`#121212`)
|
||
- Permukaan: Dark Card (`#181818`)
|
||
- Teks: White (`#ffffff`)
|
||
- Teks sekunder: Silver (`#b3b3b3`)
|
||
- Aksen: Spotify Green (`#1ed760`)
|
||
- Batas: `#4d4d4d`
|
||
- Error: Negative Red (`#f3727f`)
|
||
|
||
### Contoh Prompt Komponen
|
||
- "Buat kartu gelap: background `#181818`, radius 8px. Judul 16px SpotifyMixUI bobot 700, teks putih. Subjudul 14px bobot 400, `#b3b3b3`. Shadow rgba(0,0,0,0.3) 0px 8px 8px saat hover."
|
||
- "Desain tombol pill: background `#1f1f1f`, teks putih, radius 9999px, padding 8px 16px. 14px SpotifyMixUI bobot 700, huruf kapital, letter-spacing 1.4px."
|
||
- "Buat tombol putar melingkar: background Spotify Green (`#1ed760`), ikon `#000000`, radius 50%, padding 12px."
|
||
- "Buat input pencarian: background `#1f1f1f`, teks putih, radius 500px, padding 12px 48px. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||
- "Desain sidebar navigasi: background `#121212`. Item aktif: 14px bobot 700, putih. Tidak aktif: 14px bobot 400, `#b3b3b3`."
|
||
|
||
### Panduan Iterasi
|
||
1. Mulai dengan `#121212` — segalanya hidup dalam kegelapan hampir hitam
|
||
2. Spotify Green hanya untuk sorotan fungsional (putar, aktif, CTA)
|
||
3. Pill segalanya — 500px untuk besar, 9999px untuk kecil, 50% untuk melingkar
|
||
4. Huruf kapital + tracking lebar pada tombol — suara label yang sistematis
|
||
5. Bayangan tebal (opasitas 0.3–0.5) untuk elevasi — bayangan tipis tidak terlihat di latar gelap
|
||
6. Seni album menyediakan semua warna — UI tetap akromatik
|