mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00

Files

T

681dacde18 feat(landing): DESIGN.md systems hub + design-token spec sheet + scenario mocks on design-system pages (#4420 )

* feat(landing): systems-page DESIGN.md/FAQ copy + design-token loader

* feat(landing): DESIGN.md+FAQ sections on systems hub, token spec sheet on detail

* feat(landing): detail-page TOC nav, token visuals, tighter spacing, unified related cards

* feat(landing): multi-scenario themed previews (web/app/slides/poster) on design-system detail

* feat(landing): localized routes for design-system detail pages (chrome i18n, DESIGN.md body stays en)

* feat(landing): theme scenario mocks from real design tokens; phone app, 16:9 slide, refined poster

* feat(landing): redesign slide mock (two-zone), sticky schema nav, contribute moved to top

* feat(landing): right-rail section nav + 2-up related cards on design-system detail

* fix(landing): localize design-system detail title suffix + keyword-rich meta description + keywords meta

* feat(landing): declutter detail header — icon-only share, move contribute callout to page bottom

* fix(landing): cancel homepage 130px section padding on detail-block (killed huge inter-section gaps)

* i18n(landing): localize design-system detail + systems-hub chrome across 17 locales

* feat(landing): locale-aware DESIGN.md body loading (DESIGN-<locale>.md) with English fallback

* i18n(design-systems): localize apple DESIGN.md body into 17 locales

* i18n(design-systems): localize stripe DESIGN.md body into 17 locales

* i18n(design-systems): localize vercel DESIGN.md body into 17 locales

* i18n(design-systems): localize notion DESIGN.md body into 17 locales

* i18n(design-systems): localize github DESIGN.md body into 17 locales

* i18n(design-systems): localize airtable DESIGN.md body into 17 locales

* i18n(design-systems): localize figma DESIGN.md body into 17 locales

* i18n(design-systems): localize openai DESIGN.md body into 17 locales

* i18n(design-systems): localize slack DESIGN.md body into 17 locales

* i18n(design-systems): localize discord DESIGN.md body into 17 locales

* i18n(design-systems): localize webflow DESIGN.md body into 17 locales

* i18n(design-systems): localize cohere DESIGN.md body into 17 locales

* i18n(design-systems): localize duolingo DESIGN.md body into 17 locales

* i18n(design-systems): localize spotify DESIGN.md body into 17 locales

* i18n(design-systems): localize shopify DESIGN.md body into 17 locales

* i18n(design-systems): localize nvidia DESIGN.md body into 17 locales

* i18n(design-systems): localize pinterest DESIGN.md body into 17 locales

* i18n(design-systems): localize uber DESIGN.md body into 17 locales

* i18n(design-systems): localize nike DESIGN.md body into 17 locales

* i18n(design-systems): localize airbnb DESIGN.md body into 17 locales

* i18n(design-systems): localize ibm DESIGN.md body into 17 locales

* i18n(design-systems): localize playstation DESIGN.md body into 17 locales

* i18n(design-systems): localize starbucks DESIGN.md body into 17 locales

* i18n(landing): localize detailSystemLabel (design-system H1/title noun) across 17 locales

* i18n(landing): localize plugins chrome (contribute callout, card CTA, search, about) across 15 remaining locales

* i18n(landing): localized card taglines + category labels for design systems (149 systems x 17 locales)

* fix(landing): suppress on-load locale auto-redirect on design-system detail pages (keep localized routes + hreflang)

* fix(landing): localize SystemCard detail link so cards on /<locale>/ stay in-locale

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>

2026-06-17 15:24:58 +08:00

13 KiB

Raw Permalink Blame History

以 Spotify 為靈感的設計系統

Category: 媒體與消費者音樂串流。深色背景上的鮮明綠色、粗獷字型、以專輯封面為視覺驅動。

1. 視覺主題與氛圍

Spotify 的網頁介面是一個沉浸式的深色音樂播放器，以近乎純黑的色繭（#121212、#181818、#1f1f1f）包裹聆聽者，讓專輯封面與內容成為主要的色彩來源。設計哲學是「以內容為先的暗色調」——UI 退隱於陰影之中，讓音樂、播客與播放清單得以發光。每一個介面層都是一種深炭色調，營造出如劇院般的環境，唯一真正的色彩來自標誌性的 Spotify Green（#1ed760）與專輯封面本身。

字體採用 SpotifyMixUI 與 SpotifyMixUITitle——這是 CircularSp 家族的專屬字型（Lineto 的 Circular，為 Spotify 客製化），並備有涵蓋阿拉伯文、希伯來文、西里爾文、希臘文、梵文及 CJK 字型的完整備援字體清單，體現 Spotify 的全球佈局。字型系統簡潔且功能導向：700（粗體）用於強調與導覽，600（半粗體）用於次要強調，400（一般）用於正文。按鈕採用全大寫並搭配正向字距（1.4px–2px），呈現出一種系統性的標籤質感。

Spotify 的獨特之處在於其膠囊與圓形幾何語言。主要按鈕使用 500px–9999px 圓角（完整膠囊），圓形播放按鈕使用 50% 圓角，搜尋輸入框則為 500px 膠囊形。搭配高層元素上的重陰影（rgba(0,0,0,0.5) 0px 8px 24px），以及獨特的內嵌邊框陰影組合（rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset），整體呈現出如頂級音響設備般的介面質感——觸覺豐富、圓潤，且為觸控操作而生。

Key Characteristics:

近純黑沉浸式深色主題（#121212–#1f1f1f）——UI 隱沒於內容之後
Spotify Green（#1ed760）作為單一品牌強調色——從不用於裝飾，永遠具功能意義
SpotifyMixUI/CircularSp 字體家族，支援全球多種文字系統
膠囊按鈕（500px–9999px）與圓形控制元件（50%）——圓潤、觸控最佳化
全大寫按鈕標籤搭配寬字距（1.4px–2px）
高層元素上的重陰影（rgba(0,0,0,0.5) 0px 8px 24px）
語意色彩：錯誤紅（#f3727f）、警告橙（#ffa42b）、公告藍（#539df5）
專輯封面作為主要色彩來源——UI 本身在設計上為無彩色

2. 色彩調色盤與角色定義

主要品牌色

Spotify Green（#1ed760）：主要品牌強調色——播放按鈕、啟用狀態、CTA
近純黑（#121212）：最深層背景表面
深色表面（#181818）：卡片、容器、高層表面
中深色（#1f1f1f）：按鈕背景、互動表面

文字色

白色（#ffffff）：--text-base，主要文字
銀色（#b3b3b3）：次要文字、靜音標籤、非啟用導覽項目
近白（#cbcbcb）：稍亮的次要文字
亮色（#fdfdfd）：接近純白，用於最高強調

語意色

錯誤紅（#f3727f）：--text-negative，錯誤狀態
警告橙（#ffa42b）：--text-warning，警告狀態
公告藍（#539df5）：--text-announcement，資訊狀態

表面與邊框

深色卡片（#252525）：高層卡片表面
中色卡片（#272727）：替代卡片表面
邊框灰（#4d4d4d）：深色背景上的按鈕邊框
亮邊框（#7c7c7c）：外框按鈕邊框、靜音連結
分隔線（#b3b3b3）：分隔線條
亮色表面（#eeeeee）：淺色模式按鈕（少見）
Spotify Green 邊框（#1db954）：綠色強調邊框變體

陰影

重陰影（rgba(0,0,0,0.5) 0px 8px 24px）：對話框、選單、高層面板
中陰影（rgba(0,0,0,0.3) 0px 8px 8px）：卡片、下拉選單
內嵌邊框（rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset）：輸入框邊框陰影組合

3. 字型規則

字體家族

標題：SpotifyMixUITitle，備援：CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic
UI / 正文：SpotifyMixUI，相同備援字體清單

層級

角色	字體	尺寸	字重	行高	字距	備註
區段標題	SpotifyMixUITitle	24px (1.50rem)	700	normal	normal	粗體標題字重
特色標頭	SpotifyMixUI	18px (1.13rem)	600	1.30（緊縮）	normal	半粗體區段標頭
正文粗體	SpotifyMixUI	16px (1.00rem)	700	normal	normal	強調文字
正文	SpotifyMixUI	16px (1.00rem)	400	normal	normal	標準正文
按鈕大寫	SpotifyMixUI	14px (0.88rem)	600–700	1.00（緊縮）	1.4px–2px	`text-transform: uppercase`
按鈕	SpotifyMixUI	14px (0.88rem)	700	normal	0.14px	標準按鈕
導覽連結粗體	SpotifyMixUI	14px (0.88rem)	700	normal	normal	導覽列
導覽連結	SpotifyMixUI	14px (0.88rem)	400	normal	normal	非啟用導覽項目
說明文字粗體	SpotifyMixUI	14px (0.88rem)	700	1.50–1.54	normal	粗體後設資料
說明文字	SpotifyMixUI	14px (0.88rem)	400	normal	normal	後設資料
小字粗體	SpotifyMixUI	12px (0.75rem)	700	1.50	normal	標籤、計數
小字	SpotifyMixUI	12px (0.75rem)	400	normal	normal	細則文字
徽章	SpotifyMixUI	10.5px (0.66rem)	600	1.33	normal	`text-transform: capitalize`
微型文字	SpotifyMixUI	10px (0.63rem)	400	normal	normal	最小文字

原則

粗體／一般的二元對立：大多數文字非 700（粗體）即 400（一般），600 僅少量使用。透過字重對比而非尺寸變化，建立清晰的視覺層級。
大寫按鈕作為系統語言：按鈕標籤使用全大寫搭配寬字距（1.4px–2px），形成一種系統性的「標籤」語調，有別於內容文字。
緊縮尺寸：範圍為 10px–24px——比多數系統更窄。Spotify 的字型緊縮且功能導向，為快速掃視播放清單而設計，而非閱讀文章。
全球文字系統支援：完整備援字體清單（阿拉伯文、希伯來文、西里爾文、希臘文、梵文、CJK）反映 Spotify 覆蓋 180+ 個市場的佈局。

4. 元件樣式

按鈕

深色膠囊

背景：#1f1f1f
文字：#ffffff 或 #b3b3b3
內距：8px 16px
圓角：9999px（完整膠囊）
用途：導覽膠囊、次要操作

深色大膠囊

背景：#181818
文字：#ffffff
內距：0px 43px
圓角：500px
用途：主要應用程式導覽按鈕

亮色膠囊

背景：#eeeeee
文字：#181818
圓角：500px
用途：淺色模式 CTA（Cookie 同意、行銷頁面）

外框膠囊

背景：transparent
文字：#ffffff
邊框：1px solid #7c7c7c
內距：4px 16px 4px 36px（非對稱，供圖示使用）
圓角：9999px
用途：追蹤按鈕、次要操作

圓形播放

背景：#1f1f1f
文字：#ffffff
內距：12px
圓角：50%（圓形）
用途：播放／暫停控制元件

卡片與容器

背景：#181818 或 #1f1f1f
圓角：6px–8px
大多數卡片無可見邊框
懸停：背景輕微提亮
陰影：高層時套用 rgba(0,0,0,0.3) 0px 8px 8px

輸入框

搜尋輸入框：#1f1f1f 背景，#ffffff 文字
圓角：500px（膠囊）
內距：12px 96px 12px 48px（考量圖示空間）
聚焦：邊框變為 #000000，outline 1px solid

導覽列

深色側欄，使用 SpotifyMixUI 14px，啟用項目字重 700，非啟用 400
非啟用項目使用 #b3b3b3 靜音色，啟用項目使用 #ffffff
圓形圖示按鈕（50% 圓角）
Spotify 標誌位於左上角，以綠色顯示

5. 版面原則

間距系統

基礎單位：8px
刻度：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、15px、16px、20px

格線與容器

固定側欄 + 主內容區域
格線式專輯／播放清單卡片
底部全寬「正在播放」列
響應式內容區域填滿剩餘空間

留白哲學

深色壓縮：Spotify 將內容密集排列——播放清單格線、曲目清單與導覽列間距皆緊密。深色背景在元素之間提供視覺休息，無需使用大間距。
內容密度優先於呼吸空間：這是一款應用程式，不是行銷網站。每個像素都服務於聆聽體驗。

圓角刻度

極小（2px）：徽章、明確標籤
細微（4px）：輸入框、小型元素
標準（6px）：專輯封面容器、卡片
舒適（8px）：區段、對話框
中等（10px–20px）：面板、覆蓋層元素
大（100px）：大型膠囊按鈕
膠囊（500px）：主要按鈕、搜尋輸入框
完整膠囊（9999px）：導覽膠囊、搜尋
圓形（50%）：播放按鈕、頭像、圖示

6. 景深與層次

層級	處理方式	用途
基礎（Level 0）	`#121212` 背景	最深層，頁面背景
表面（Level 1）	`#181818` 或 `#1f1f1f`	卡片、側欄、容器
高層（Level 2）	`rgba(0,0,0,0.3) 0px 8px 8px`	下拉選單、懸停卡片
對話框（Level 3）	`rgba(0,0,0,0.5) 0px 8px 24px`	強制回應視窗、覆蓋層、選單
內嵌（邊框）	`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`	輸入框邊框

陰影哲學：對於深色主題的應用程式，Spotify 使用了相當重的陰影。0.5 不透明度搭配 24px 模糊的陰影，為對話框和選單創造了戲劇性的「懸浮於黑暗中」效果；0.3 不透明度搭配 8px 模糊則提供更細微的卡片浮起感。輸入框上獨特的內嵌邊框陰影組合，帶來一種內凹的觸覺質感。

7. 應做與禁止

應做

使用近純黑背景（#121212–#1f1f1f）——透過色調變化營造景深
僅將 Spotify Green（#1ed760）用於播放控制、啟用狀態與主要 CTA
所有按鈕使用膠囊形狀（500px–9999px），播放控制使用圓形（50%）
在按鈕標籤上套用全大寫與寬字距（1.4px–2px）
保持字型緊縮（10px–24px 範圍）——這是一款應用程式，不是雜誌
對深色背景上的高層元素使用重陰影（0.3–0.5 不透明度）
讓專輯封面提供色彩——UI 本身保持無彩色

禁止

不可將 Spotify Green 用於裝飾或背景——它僅具功能性
不可將淺色背景用於主要表面——深色沉浸感是核心特質
不可在按鈕上省略膠囊／圓形幾何——方形按鈕會破壞品牌識別
不可使用細緻或輕微的陰影——在深色背景上，陰影必須夠重才可見
不可增加額外品牌色——綠色加無彩色灰階即是完整調色盤
不可使用寬鬆的行高——Spotify 的字型緊縮且密集
不可暴露原始灰色邊框——改用基於陰影或內嵌的邊框

8. 響應式行為

斷點

名稱	寬度	主要變化
行動裝置小	<425px	緊縮行動版版面
行動裝置	425–576px	標準行動版
平板	576–768px	雙欄格線
平板大	768–896px	擴展版面
桌機小	896–1024px	側欄可見
桌機	1024–1280px	完整桌機版面
大型桌機	>1280px	擴展格線

折疊策略

側欄：完整 → 收合 → 隱藏
專輯格線：5 欄 → 3 欄 → 2 欄 → 1 欄
正在播放列：所有尺寸下均維持顯示
搜尋：膠囊輸入框維持，寬度自動調整
導覽：側欄 → 行動裝置底部列

9. Agent 提示指南

快速色彩參考

背景：近純黑（#121212）
表面：深色卡片（#181818）
文字：白色（#ffffff）
次要文字：銀色（#b3b3b3）
強調色：Spotify Green（#1ed760）
邊框：#4d4d4d
錯誤：錯誤紅（#f3727f）

元件提示範例

"建立深色卡片：#181818 背景，8px 圓角。標題使用 16px SpotifyMixUI 字重 700，白色文字。副標題使用 14px 字重 400，#b3b3b3。懸停時陰影 rgba(0,0,0,0.3) 0px 8px 8px。"
"設計膠囊按鈕：#1f1f1f 背景，白色文字，9999px 圓角，8px 16px 內距。14px SpotifyMixUI 字重 700，全大寫，字距 1.4px。"
"製作圓形播放按鈕：Spotify Green（#1ed760）背景，#000000 圖示，50% 圓角，12px 內距。"
"建立搜尋輸入框：#1f1f1f 背景，白色文字，500px 圓角，12px 48px 內距。內嵌邊框：rgb(124,124,124) 0px 0px 0px 1px inset。"
"設計導覽側欄：#121212 背景。啟用項目：14px 字重 700，白色。非啟用：14px 字重 400，#b3b3b3。"

迭代指南

從 #121212 開始——所有內容存在於近純黑的黑暗之中
Spotify Green 僅用於功能性高亮（播放、啟用狀態、CTA）
所有按鈕做成膠囊——大型用 500px，小型用 9999px，圓形用 50%
按鈕標籤使用全大寫加寬字距——系統性的標籤語調
高層元素使用重陰影（0.3–0.5 不透明度）——淺色陰影在深色背景上不可見
專輯封面提供所有色彩——UI 本身保持無彩色

13 KiB Raw Permalink Blame History Unescape Escape