④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 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。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,249 @@
|
||||
# نظام تصميم مستوحى من Spotify
|
||||
|
||||
> Category: وسائط ومستهلكون
|
||||
> بث الموسيقى. الأخضر النابض على خلفية داكنة، خط عريض، مدفوع بأغلفة الألبومات.
|
||||
|
||||
## 1. الطابع البصري والأجواء
|
||||
|
||||
واجهة Spotify على الويب هي مشغّل موسيقى داكن وغامر يُحيط المستمعين بغلاف شبه أسود (`#121212`، `#181818`، `#1f1f1f`) حيث تصبح أغلفة الألبومات والمحتوى المصدرَ الرئيسي للألوان. فلسفة التصميم هي "الظلام أولاً للمحتوى" — تنزوي الواجهة في الظل حتى تتألق الموسيقى والبودكاست وقوائم التشغيل. كل سطح هو درجة من درجات اللون الفحمي، مما يخلق بيئة تشبه المسرح حيث يأتي اللون الحقيقي الوحيد من أخضر Spotify الأيقوني (`#1ed760`) ومن أغلفة الألبومات ذاتها.
|
||||
|
||||
يستخدم الخط SpotifyMixUI وSpotifyMixUITitle — خطوط خاصة من عائلة CircularSp (Circular بتصميم Lineto، مُخصَّص لـ 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`)، مما ينتج عنه واجهة تبدو كجهاز صوتي فاخر — ملموسة ومستديرة ومصممة للمس.
|
||||
|
||||
**الخصائص الرئيسية:**
|
||||
- ثيم داكن غامر شبه أسود (`#121212`–`#1f1f1f`) — تختفي الواجهة خلف المحتوى
|
||||
- أخضر Spotify (`#1ed760`) كلون تمييز فريد للعلامة التجارية — وظيفي دائماً، لا زخرفي أبداً
|
||||
- عائلة خط SpotifyMixUI/CircularSp مع دعم النصوص العالمية
|
||||
- أزرار بيضاوية (500px–9999px) وعناصر تحكم دائرية (50%) — مستديرة ومُحسَّنة للمس
|
||||
- تسميات أزرار بأحرف كبيرة مع تباعد واسع للحروف (1.4px–2px)
|
||||
- ظلال ثقيلة على العناصر المرتفعة (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- ألوان دلالية: أحمر سلبي (`#f3727f`)، برتقالي تحذيري (`#ffa42b`)، أزرق إعلاني (`#539df5`)
|
||||
- غلاف الألبوم كمصدر أساسي للألوان — الواجهة لا لونية بطبيعتها
|
||||
|
||||
## 2. لوحة الألوان وأدوارها
|
||||
|
||||
### العلامة التجارية الأساسية
|
||||
- **أخضر Spotify** (`#1ed760`): لون التمييز الأساسي للعلامة التجارية — أزرار التشغيل والحالات النشطة وعبارات الدعوة إلى الفعل
|
||||
- **شبه أسود** (`#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** (`#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`
|
||||
- **الواجهة / النص الأساسي**: `SpotifyMixUI`، نفس مجموعة البدائل
|
||||
|
||||
### التسلسل الهرمي
|
||||
|
||||
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| عنوان القسم | SpotifyMixUITitle | 24px (1.50rem) | 700 | عادي | عادي | وزن عنوان عريض |
|
||||
| عنوان مميز | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (ضيق) | عادي | رؤوس أقسام شبه عريضة |
|
||||
| نص أساسي عريض | SpotifyMixUI | 16px (1.00rem) | 700 | عادي | عادي | نص مؤكَّد |
|
||||
| نص أساسي | SpotifyMixUI | 16px (1.00rem) | 400 | عادي | عادي | نص أساسي قياسي |
|
||||
| زر بأحرف كبيرة | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (ضيق) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| زر | SpotifyMixUI | 14px (0.88rem) | 700 | عادي | 0.14px | زر قياسي |
|
||||
| رابط تنقل عريض | SpotifyMixUI | 14px (0.88rem) | 700 | عادي | عادي | التنقل |
|
||||
| رابط تنقل | SpotifyMixUI | 14px (0.88rem) | 400 | عادي | عادي | تنقل غير نشط |
|
||||
| تسمية توضيحية عريضة | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | عادي | بيانات وصفية عريضة |
|
||||
| تسمية توضيحية | SpotifyMixUI | 14px (0.88rem) | 400 | عادي | عادي | بيانات وصفية |
|
||||
| صغير عريض | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | عادي | علامات وأعداد |
|
||||
| صغير | SpotifyMixUI | 12px (0.75rem) | 400 | عادي | عادي | نص دقيق |
|
||||
| شارة | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | عادي | `text-transform: capitalize` |
|
||||
| مجهري | SpotifyMixUI | 10px (0.63rem) | 400 | عادي | عادي | أصغر نص |
|
||||
|
||||
### المبادئ
|
||||
- **التباين الثنائي عريض/عادي**: معظم النصوص إما 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
|
||||
- الاستخدام: عبارات الدعوة إلى الفعل في الوضع الفاتح (موافقة ملفات تعريف الارتباط والتسويق)
|
||||
|
||||
**حبة خطية**
|
||||
- الخلفية: شفاف
|
||||
- النص: `#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`، مخطط `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. العمق والارتفاع
|
||||
|
||||
| المستوى | المعالجة | الاستخدام |
|
||||
|-------|-----------|-----|
|
||||
| أساسي (مستوى 0) | خلفية `#121212` | أعمق طبقة، خلفية الصفحة |
|
||||
| سطح (مستوى 1) | `#181818` أو `#1f1f1f` | البطاقات والشريط الجانبي والحاويات |
|
||||
| مرتفع (مستوى 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | القوائم المنسدلة وبطاقات التمرير |
|
||||
| حوار (مستوى 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 (`#1ed760`) فقط لعناصر التحكم في التشغيل والحالات النشطة وعبارات الدعوة إلى الفعل الأساسية
|
||||
- استخدام شكل الحبة (500px–9999px) لجميع الأزرار — دائري (50%) لعناصر تحكم التشغيل
|
||||
- تطبيق الأحرف الكبيرة مع تباعد واسع للحروف (1.4px–2px) على تسميات الأزرار
|
||||
- إبقاء الطباعة مدمجة (نطاق 10px–24px) — هذا تطبيق وليس مجلة
|
||||
- استخدام ظلال ثقيلة (شفافية 0.3–0.5) للعناصر المرتفعة على الخلفيات الداكنة
|
||||
- السماح لغلاف الألبوم بتوفير اللون — الواجهة ذاتها لا لونية
|
||||
|
||||
### لا ينبغي
|
||||
- عدم استخدام أخضر Spotify بشكل زخرفي أو على الخلفيات — وظيفي فقط
|
||||
- عدم استخدام خلفيات فاتحة للأسطح الأساسية — الانغماس الداكن هو الجوهر
|
||||
- عدم تخطي هندسة الحبة/الدائرة على الأزرار — الأزرار المربعة تكسر الهوية
|
||||
- عدم استخدام ظلال رفيعة/خفيفة — على الخلفيات الداكنة، تحتاج الظلال أن تكون ثقيلة لتكون مرئية
|
||||
- عدم إضافة ألوان علامة تجارية إضافية — الأخضر مع الرمادي اللاللوني هو اللوحة الكاملة
|
||||
- عدم استخدام ارتفاعات مريحة لأسطر النصوص — طباعة Spotify مدمجة وكثيفة
|
||||
- عدم كشف حدود رمادية خام — استخدم حدوداً قائمة على الظل أو منخفضة بدلاً منها
|
||||
|
||||
## 8. السلوك المتجاوب
|
||||
|
||||
### نقاط التوقف
|
||||
| الاسم | العرض | التغييرات الرئيسية |
|
||||
|------|-------|-------------|
|
||||
| جوال صغير | <425px | تخطيط جوال مدمج |
|
||||
| جوال | 425–576px | جوال قياسي |
|
||||
| جهاز لوحي | 576–768px | شبكة عمودين |
|
||||
| جهاز لوحي كبير | 768–896px | تخطيط موسَّع |
|
||||
| سطح مكتب صغير | 896–1024px | الشريط الجانبي مرئي |
|
||||
| سطح مكتب | 1024–1280px | تخطيط سطح مكتب كامل |
|
||||
| سطح مكتب كبير | >1280px | شبكة موسَّعة |
|
||||
|
||||
### استراتيجية الطي
|
||||
- الشريط الجانبي: كامل ← مطوي ← مخفي
|
||||
- شبكة الألبومات: 5 أعمدة ← 3 ← 2 ← 1
|
||||
- شريط التشغيل الحالي: يُحافَظ عليه في جميع الأحجام
|
||||
- البحث: مدخل حبة محفوظ، العرض يُعدَّل
|
||||
- التنقل: شريط جانبي ← شريط سفلي على الجوال
|
||||
|
||||
## 9. دليل موجِّه الوكيل
|
||||
|
||||
### مرجع سريع للألوان
|
||||
- الخلفية: شبه أسود (`#121212`)
|
||||
- السطح: بطاقة داكنة (`#181818`)
|
||||
- النص: أبيض (`#ffffff`)
|
||||
- النص الثانوي: فضي (`#b3b3b3`)
|
||||
- لون التمييز: أخضر Spotify (`#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 (`#1ed760`)، أيقونة `#000000`، زاوية 50%، حشو 12px."
|
||||
- "أنشئ مدخل بحث: خلفية `#1f1f1f`، نص أبيض، زاوية 500px، حشو 12px 48px. حدود منخفضة: `rgb(124,124,124) 0px 0px 0px 1px inset`."
|
||||
- "صمِّم شريط تنقل جانبي: خلفية `#121212`. العناصر النشطة: 14px وزن 700، أبيض. غير النشطة: 14px وزن 400، `#b3b3b3`."
|
||||
|
||||
### دليل التكرار
|
||||
1. ابدأ بـ `#121212` — كل شيء يعيش في الظلام شبه الأسود
|
||||
2. أخضر Spotify للإبرازات الوظيفية فقط (تشغيل، نشط، عبارة الدعوة إلى الفعل)
|
||||
3. اجعل كل شيء حبة — 500px للكبيرة، 9999px للصغيرة، 50% للدائرية
|
||||
4. أحرف كبيرة مع تباعد واسع للأزرار — صوت الملصق المنهجي
|
||||
5. ظلال ثقيلة (شفافية 0.3–0.5) للارتفاع — الظلال الخفيفة غير مرئية على الخلفيات الداكنة
|
||||
6. غلاف الألبوم يوفر كل الألوان — تبقى الواجهة لا لونية
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspired by Spotify
|
||||
|
||||
> Category: Medien & Konsumenten
|
||||
> Musik-Streaming. Lebendiges Grün auf Dunkel, markante Typografie, albumcover-getrieben.
|
||||
|
||||
## 1. Visuelles Thema & Atmosphäre
|
||||
|
||||
Spotifys Web-Interface ist ein dunkler, immersiver Musik-Player, der Hörerinnen und Hörer in einen fastschwarzen Kokon hüllt (`#121212`, `#181818`, `#1f1f1f`), in dem Albumcover und Inhalte zur primären Farbquelle werden. Die Designphilosophie lautet „Content-First-Dunkelheit" — die UI tritt in den Schatten zurück, damit Musik, Podcasts und Playlists leuchten können. Jede Fläche ist ein Anthrazit-Ton, was eine theaterartige Umgebung schafft, in der die einzige echte Farbe vom ikonischen Spotify Green (`#1ed760`) und den Albumcovern selbst stammt.
|
||||
|
||||
Die Typografie verwendet SpotifyMixUI und SpotifyMixUITitle — proprietäre Schriften aus der CircularSp-Familie (Circular von Lineto, für Spotify angepasst) mit einem umfangreichen Fallback-Stack, der arabische, hebräische, kyrillische, griechische, Devanagari- und CJK-Schriften umfasst — ein Spiegelbild von Spotifys globaler Reichweite. Das Typsystem ist kompakt und funktional: 700 (Bold) für Hervorhebung und Navigation, 600 (Semibold) für sekundäre Akzente und 400 (Regular) für Fließtext. Buttons verwenden Großschreibung mit positivem Buchstabenabstand (1,4 px–2 px) für eine systematische, etikettartige Qualität.
|
||||
|
||||
Was Spotify auszeichnet, ist seine Pille-und-Kreis-Geometrie. Primäre Buttons verwenden einen Radius von 500 px–9999 px (volle Pille), runde Play-Buttons verwenden 50 % Radius, und Sucheingaben sind 500-px-Pillen. Kombiniert mit starken Schatten (`rgba(0,0,0,0.5) 0px 8px 24px`) auf erhöhten Elementen und einer einzigartigen Inset-Border-Shadow-Kombination (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`) entsteht ein Interface, das wie ein hochwertiges Audiogerät wirkt — taktil, abgerundet und für Touch konzipiert.
|
||||
|
||||
**Wesentliche Merkmale:**
|
||||
- Fastschwarzes, immersives Dunkelthema (`#121212`–`#1f1f1f`) — die UI verschwindet hinter dem Inhalt
|
||||
- Spotify Green (`#1ed760`) als einzelner Markenakzent — niemals dekorativ, stets funktional
|
||||
- SpotifyMixUI/CircularSp-Schriftfamilie mit globaler Schriftunterstützung
|
||||
- Pille-Buttons (500 px–9999 px) und kreisförmige Steuerelemente (50 %) — abgerundet, touch-optimiert
|
||||
- Großgeschriebene Button-Beschriftungen mit breitem Buchstabenabstand (1,4 px–2 px)
|
||||
- Starke Schatten auf erhöhten Elementen (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Semantische Farben: Negativ-Rot (`#f3727f`), Warn-Orange (`#ffa42b`), Hinweis-Blau (`#539df5`)
|
||||
- Albumcover als primäre Farbquelle — die UI ist von Natur aus achromatisch
|
||||
|
||||
## 2. Farbpalette & Rollen
|
||||
|
||||
### Primäre Markenfarben
|
||||
- **Spotify Green** (`#1ed760`): Primärer Markenakzent — Play-Buttons, aktive Zustände, CTAs
|
||||
- **Fastschwarz** (`#121212`): Tiefste Hintergrundfläche
|
||||
- **Dunkle Fläche** (`#181818`): Karten, Container, erhöhte Flächen
|
||||
- **Mitteldunkel** (`#1f1f1f`): Button-Hintergründe, interaktive Flächen
|
||||
|
||||
### Text
|
||||
- **Weiß** (`#ffffff`): `--text-base`, primärer Text
|
||||
- **Silber** (`#b3b3b3`): Sekundärer Text, gedämpfte Beschriftungen, inaktive Navigation
|
||||
- **Nahweiß** (`#cbcbcb`): Etwas hellerer sekundärer Text
|
||||
- **Hell** (`#fdfdfd`): Nahreines Weiß für maximale Betonung
|
||||
|
||||
### Semantisch
|
||||
- **Negativ-Rot** (`#f3727f`): `--text-negative`, Fehlerzustände
|
||||
- **Warn-Orange** (`#ffa42b`): `--text-warning`, Warnzustände
|
||||
- **Hinweis-Blau** (`#539df5`): `--text-announcement`, Informationszustände
|
||||
|
||||
### Flächen & Rahmen
|
||||
- **Dunkle Karte** (`#252525`): Erhöhte Kartenfläche
|
||||
- **Mittlere Karte** (`#272727`): Alternative Kartenfläche
|
||||
- **Rahmen-Grau** (`#4d4d4d`): Button-Rahmen auf Dunkel
|
||||
- **Heller Rahmen** (`#7c7c7c`): Umrissene Button-Rahmen, gedämpfte Links
|
||||
- **Trennlinie** (`#b3b3b3`): Trennlinien
|
||||
- **Helle Fläche** (`#eeeeee`): Hellmodus-Buttons (selten)
|
||||
- **Spotify Green Rahmen** (`#1db954`): Grüne Akzent-Rahmen-Variante
|
||||
|
||||
### Schatten
|
||||
- **Stark** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialoge, Menüs, erhöhte Panels
|
||||
- **Mittel** (`rgba(0,0,0,0.3) 0px 8px 8px`): Karten, Dropdowns
|
||||
- **Inset-Rahmen** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Eingabefeld-Rahmen-Shadow-Kombination
|
||||
|
||||
## 3. Typografie-Regeln
|
||||
|
||||
### Schriftfamilien
|
||||
- **Titel**: `SpotifyMixUITitle`, Fallbacks: `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`, gleicher Fallback-Stack
|
||||
|
||||
### Hierarchie
|
||||
|
||||
| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Buchstabenabstand | Hinweise |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Abschnittstitel | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Fettes Titelgewicht |
|
||||
| Feature-Überschrift | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (eng) | normal | Semibold-Abschnittsköpfe |
|
||||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Betonter Text |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard-Fließtext |
|
||||
| Button Großschrift | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (eng) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard-Button |
|
||||
| Nav-Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
|
||||
| Nav-Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inaktive Navigation |
|
||||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Fette Metadaten |
|
||||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadaten |
|
||||
| Klein Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, Zählungen |
|
||||
| Klein | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Kleingedrucktes |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Mikro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Kleinster Text |
|
||||
|
||||
### Grundsätze
|
||||
- **Binäres Bold/Regular**: Der meiste Text ist entweder 700 (Bold) oder 400 (Regular), wobei 600 sparsam eingesetzt wird. Dies schafft eine klare visuelle Hierarchie durch Gewichtskontrast statt Größenvariation.
|
||||
- **Großgeschriebene Buttons als System**: Button-Beschriftungen verwenden Großschrift + breiten Buchstabenabstand (1,4 px–2 px) und schaffen damit eine systematische „Beschriftungs"-Stimme, die sich vom Inhaltstext abhebt.
|
||||
- **Kompakte Größen**: Die Spanne reicht von 10 px bis 24 px — enger als die meisten Systeme. Spotifys Typografie ist kompakt und funktional, konzipiert zum Scannen von Playlists, nicht zum Lesen von Artikeln.
|
||||
- **Globale Schriftunterstützung**: Der umfangreiche Fallback-Stack (Arabisch, Hebräisch, Kyrillisch, Griechisch, Devanagari, CJK) spiegelt Spotifys Reichweite in über 180 Märkten wider.
|
||||
|
||||
## 4. Komponenten-Stile
|
||||
|
||||
### Buttons
|
||||
|
||||
**Dunkle Pille**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` oder `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (volle Pille)
|
||||
- Verwendung: Navigations-Pillen, sekundäre Aktionen
|
||||
|
||||
**Dunkle große Pille**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Verwendung: Primäre App-Navigationsbuttons
|
||||
|
||||
**Helle Pille**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Verwendung: Hellmodus-CTAs (Cookie-Einwilligung, Marketing)
|
||||
|
||||
**Umrissene Pille**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asymmetrisch für Icon)
|
||||
- Radius: 9999px
|
||||
- Verwendung: Folgen-Buttons, sekundäre Aktionen
|
||||
|
||||
**Kreisförmiger Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (Kreis)
|
||||
- Verwendung: Play/Pause-Steuerung
|
||||
|
||||
### Karten & Container
|
||||
- Background: `#181818` oder `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- Keine sichtbaren Rahmen bei den meisten Karten
|
||||
- Hover: leichte Aufhellung des Hintergrunds
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` auf erhöhten Elementen
|
||||
|
||||
### Eingabefelder
|
||||
- Sucheingabe: `#1f1f1f` Hintergrund, `#ffffff` Text
|
||||
- Radius: 500px (Pille)
|
||||
- Padding: 12px 96px 12px 48px (icon-bewusst)
|
||||
- Fokus: Rahmen wird `#000000`, Outline `1px solid`
|
||||
|
||||
### Navigation
|
||||
- Dunkle Seitenleiste mit SpotifyMixUI 14px Gewicht 700 für aktiv, 400 für inaktiv
|
||||
- `#b3b3b3` gedämpfte Farbe für inaktive Einträge, `#ffffff` für aktive
|
||||
- Kreisförmige Icon-Buttons (50 % Radius)
|
||||
- Spotify-Logo oben links in Grün
|
||||
|
||||
## 5. Layout-Grundsätze
|
||||
|
||||
### Abstands-System
|
||||
- Basiseinheit: 8px
|
||||
- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Raster & Container
|
||||
- Seitenleiste (fest) + Hauptinhaltsbereich
|
||||
- Rasterbasierte Album-/Playlist-Karten
|
||||
- Vollbreite Now-Playing-Leiste am unteren Rand
|
||||
- Responsiver Inhaltsbereich füllt den verbleibenden Platz
|
||||
|
||||
### Weißraum-Philosophie
|
||||
- **Dunkle Verdichtung**: Spotify packt Inhalte dicht — Playlist-Raster, Track-Listen und Navigation sind alle eng gesetzt. Der dunkle Hintergrund schafft visuellen Abstand zwischen Elementen, ohne große Lücken zu benötigen.
|
||||
- **Inhaltsdichte vor Atemraum**: Dies ist eine App, keine Marketing-Website. Jedes Pixel dient dem Hörerlebnis.
|
||||
|
||||
### Rahmenradius-Skala
|
||||
- Minimal (2px): Badges, explizite Tags
|
||||
- Subtil (4px): Eingabefelder, kleine Elemente
|
||||
- Standard (6px): Albumcover-Container, Karten
|
||||
- Komfortabel (8px): Abschnitte, Dialoge
|
||||
- Mittel (10px–20px): Panels, Overlay-Elemente
|
||||
- Groß (100px): Große Pille-Buttons
|
||||
- Pille (500px): Primäre Buttons, Sucheingabe
|
||||
- Volle Pille (9999px): Navigations-Pillen, Suche
|
||||
- Kreis (50%): Play-Buttons, Avatare, Icons
|
||||
|
||||
## 6. Tiefe & Erhöhung
|
||||
|
||||
| Ebene | Behandlung | Verwendung |
|
||||
|-------|-----------|-----|
|
||||
| Basis (Ebene 0) | `#121212` Hintergrund | Tiefste Schicht, Seitenhintergrund |
|
||||
| Fläche (Ebene 1) | `#181818` oder `#1f1f1f` | Karten, Seitenleiste, Container |
|
||||
| Erhöht (Ebene 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown-Menüs, Hover-Karten |
|
||||
| Dialog (Ebene 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, Overlays, Menüs |
|
||||
| Inset (Rahmen) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Eingabefeld-Rahmen |
|
||||
|
||||
**Schatten-Philosophie**: Spotify verwendet für eine dunkel-themed App auffallend starke Schatten. Der Schatten mit 0,5 Deckkraft bei 24 px Weichzeichnung erzeugt einen dramatischen „Schweben in der Dunkelheit"-Effekt für Dialoge und Menüs, während 0,3 Deckkraft bei 8 px Weichzeichnung eine subtilere Karten-Hebung bietet. Die einzigartige Inset-Rahmen-Shadow-Kombination bei Eingabefeldern erzeugt eine versenkte, taktile Qualität.
|
||||
|
||||
## 7. Empfehlungen & Warnhinweise
|
||||
|
||||
### Empfohlen
|
||||
- Fastschwarze Hintergründe verwenden (`#121212`–`#1f1f1f`) — Tiefe durch Schattierungsvariation
|
||||
- Spotify Green (`#1ed760`) ausschließlich für Play-Steuerung, aktive Zustände und primäre CTAs einsetzen
|
||||
- Pillenform (500 px–9999 px) für alle Buttons — Kreisform (50 %) für Play-Steuerung
|
||||
- Großschrift + breiten Buchstabenabstand (1,4 px–2 px) auf Button-Beschriftungen anwenden
|
||||
- Typografie kompakt halten (10 px–24 px-Bereich) — dies ist eine App, kein Magazin
|
||||
- Starke Schatten (`0,3–0,5 Deckkraft`) für erhöhte Elemente auf dunklen Hintergründen verwenden
|
||||
- Albumcover für Farbe sorgen lassen — die UI selbst bleibt achromatisch
|
||||
|
||||
### Nicht empfohlen
|
||||
- Spotify Green nicht dekorativ oder auf Hintergründen einsetzen — es ist ausschließlich funktional
|
||||
- Keine hellen Hintergründe für primäre Flächen — die dunkle Immersion ist das Kernkonzept
|
||||
- Keine Pille-/Kreis-Geometrie bei Buttons weglassen — eckige Buttons brechen die Identität
|
||||
- Keine dünnen/subtilen Schatten verwenden — auf dunklen Hintergründen müssen Schatten stark sein, um sichtbar zu sein
|
||||
- Keine zusätzlichen Markenfarben hinzufügen — Grün + achromatische Grautöne sind die vollständige Palette
|
||||
- Keine lockeren Zeilenhöhen verwenden — Spotifys Typografie ist kompakt und dicht
|
||||
- Keine rohen grauen Rahmen freilegen — stattdessen schatten- oder inset-basierte Rahmen verwenden
|
||||
|
||||
## 8. Responsives Verhalten
|
||||
|
||||
### Haltepunkte
|
||||
| Name | Breite | Wesentliche Änderungen |
|
||||
|------|-------|-------------|
|
||||
| Mobile Klein | <425px | Kompaktes mobiles Layout |
|
||||
| Mobile | 425–576px | Standard-Mobile |
|
||||
| Tablet | 576–768px | 2-spaltiges Raster |
|
||||
| Tablet Groß | 768–896px | Erweitertes Layout |
|
||||
| Desktop Klein | 896–1024px | Seitenleiste sichtbar |
|
||||
| Desktop | 1024–1280px | Vollständiges Desktop-Layout |
|
||||
| Großer Desktop | >1280px | Erweitertes Raster |
|
||||
|
||||
### Kollaps-Strategie
|
||||
- Seitenleiste: vollständig → eingeklappt → ausgeblendet
|
||||
- Album-Raster: 5 Spalten → 3 → 2 → 1
|
||||
- Now-Playing-Leiste: in allen Größen erhalten
|
||||
- Suche: Pille-Eingabe erhalten, Breite passt sich an
|
||||
- Navigation: Seitenleiste → untere Leiste auf Mobile
|
||||
|
||||
## 9. Agent-Prompt-Leitfaden
|
||||
|
||||
### Schnelle Farbreferenz
|
||||
- Hintergrund: Fastschwarz (`#121212`)
|
||||
- Fläche: Dunkle Karte (`#181818`)
|
||||
- Text: Weiß (`#ffffff`)
|
||||
- Sekundärer Text: Silber (`#b3b3b3`)
|
||||
- Akzent: Spotify Green (`#1ed760`)
|
||||
- Rahmen: `#4d4d4d`
|
||||
- Fehler: Negativ-Rot (`#f3727f`)
|
||||
|
||||
### Beispiel-Komponenten-Prompts
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Iterations-Leitfaden
|
||||
1. Mit `#121212` beginnen — alles lebt in fastschwarzer Dunkelheit
|
||||
2. Spotify Green nur für funktionale Hervorhebungen (Play, aktiv, CTA)
|
||||
3. Alles als Pille gestalten — 500 px für groß, 9999 px für klein, 50 % für kreisförmig
|
||||
4. Großschrift + breiter Tracking auf Buttons — die systematische Beschriftungs-Stimme
|
||||
5. Starke Schatten (0,3–0,5 Deckkraft) für Erhöhung — helle Schatten sind auf Dunkel unsichtbar
|
||||
6. Albumcover liefern alle Farbe — die UI bleibt achromatisch
|
||||
@@ -0,0 +1,249 @@
|
||||
# Sistema de Diseño Inspirado en Spotify
|
||||
|
||||
> Category: Medios y Consumo
|
||||
> Streaming de música. Verde vibrante sobre fondo oscuro, tipografía audaz, impulsado por el arte de álbumes.
|
||||
|
||||
## 1. Tema Visual y Atmósfera
|
||||
|
||||
La interfaz web de Spotify es un reproductor de música oscuro e inmersivo que envuelve al oyente en un capullo casi negro (`#121212`, `#181818`, `#1f1f1f`) donde el arte de álbumes y el contenido se convierten en la fuente principal de color. La filosofía de diseño es "oscuridad con el contenido en primer plano" — la UI se retira hacia las sombras para que la música, los podcasts y las listas de reproducción puedan brillar. Cada superficie es un tono de carbón, creando un entorno similar a un teatro donde el único color verdadero proviene del icónico Verde Spotify (`#1ed760`) y de la propia portada de los álbumes.
|
||||
|
||||
La tipografía utiliza SpotifyMixUI y SpotifyMixUITitle — fuentes propietarias de la familia CircularSp (Circular de Lineto, personalizada para Spotify) con una extensa pila de respaldo que incluye fuentes en árabe, hebreo, cirílico, griego, devanagari y CJK, lo que refleja el alcance global de Spotify. El sistema tipográfico es compacto y funcional: 700 (negrita) para énfasis y navegación, 600 (seminegrita) para énfasis secundario, y 400 (regular) para el cuerpo. Los botones usan mayúsculas con espaciado de letras positivo (1.4px–2px) para una calidad sistemática, similar a etiquetas.
|
||||
|
||||
Lo que distingue a Spotify es su geometría de píldoras y círculos. Los botones principales usan radio de 500px–9999px (píldora completa), los botones circulares de reproducción usan radio del 50%, y los campos de búsqueda son píldoras de 500px. Combinado con sombras pesadas (`rgba(0,0,0,0.5) 0px 8px 24px`) en elementos elevados y una combinación única de borde con sombra insertada (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), el resultado es una interfaz que se siente como un dispositivo de audio premium — táctil, redondeada y diseñada para el tacto.
|
||||
|
||||
**Características Clave:**
|
||||
- Tema oscuro e inmersivo casi negro (`#121212`–`#1f1f1f`) — la UI desaparece detrás del contenido
|
||||
- Verde Spotify (`#1ed760`) como acento de marca singular — nunca decorativo, siempre funcional
|
||||
- Familia tipográfica SpotifyMixUI/CircularSp con soporte para escrituras globales
|
||||
- Botones en forma de píldora (500px–9999px) y controles circulares (50%) — redondeados, optimizados para el tacto
|
||||
- Etiquetas de botón en mayúsculas con amplio espaciado de letras (1.4px–2px)
|
||||
- Sombras pesadas en elementos elevados (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Colores semánticos: rojo negativo (`#f3727f`), naranja de advertencia (`#ffa42b`), azul de anuncio (`#539df5`)
|
||||
- El arte del álbum como fuente principal de color — la UI es acromática por diseño
|
||||
|
||||
## 2. Paleta de Colores y Roles
|
||||
|
||||
### Marca Principal
|
||||
- **Verde Spotify** (`#1ed760`): Acento de marca principal — botones de reproducción, estados activos, CTAs
|
||||
- **Negro Profundo** (`#121212`): Superficie de fondo más oscura
|
||||
- **Superficie Oscura** (`#181818`): Tarjetas, contenedores, superficies elevadas
|
||||
- **Oscuro Medio** (`#1f1f1f`): Fondos de botones, superficies interactivas
|
||||
|
||||
### Texto
|
||||
- **Blanco** (`#ffffff`): `--text-base`, texto principal
|
||||
- **Plateado** (`#b3b3b3`): Texto secundario, etiquetas atenuadas, navegación inactiva
|
||||
- **Casi Blanco** (`#cbcbcb`): Texto secundario ligeramente más brillante
|
||||
- **Claro** (`#fdfdfd`): Blanco casi puro para máximo énfasis
|
||||
|
||||
### Semántico
|
||||
- **Rojo Negativo** (`#f3727f`): `--text-negative`, estados de error
|
||||
- **Naranja de Advertencia** (`#ffa42b`): `--text-warning`, estados de advertencia
|
||||
- **Azul de Anuncio** (`#539df5`): `--text-announcement`, estados informativos
|
||||
|
||||
### Superficie y Borde
|
||||
- **Tarjeta Oscura** (`#252525`): Superficie de tarjeta elevada
|
||||
- **Tarjeta Media** (`#272727`): Superficie de tarjeta alternativa
|
||||
- **Gris de Borde** (`#4d4d4d`): Bordes de botones sobre fondos oscuros
|
||||
- **Borde Claro** (`#7c7c7c`): Bordes de botones con contorno, enlaces atenuados
|
||||
- **Separador** (`#b3b3b3`): Líneas divisoras
|
||||
- **Superficie Clara** (`#eeeeee`): Botones en modo claro (poco frecuente)
|
||||
- **Borde Verde Spotify** (`#1db954`): Variante de borde con acento verde
|
||||
|
||||
### Sombras
|
||||
- **Pesada** (`rgba(0,0,0,0.5) 0px 8px 24px`): Diálogos, menús, paneles elevados
|
||||
- **Media** (`rgba(0,0,0,0.3) 0px 8px 8px`): Tarjetas, menús desplegables
|
||||
- **Borde Insertado** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Combinación de borde con sombra para campos de entrada
|
||||
|
||||
## 3. Reglas Tipográficas
|
||||
|
||||
### Familias Tipográficas
|
||||
- **Título**: `SpotifyMixUITitle`, respaldos: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **UI / Cuerpo**: `SpotifyMixUI`, misma pila de respaldo
|
||||
|
||||
### Jerarquía
|
||||
|
||||
| Rol | Fuente | Tamaño | Peso | Altura de línea | Espaciado de letras | Notas |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Título de sección | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Peso de título en negrita |
|
||||
| Encabezado destacado | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (compacto) | normal | Encabezados de sección en seminegrita |
|
||||
| Cuerpo en negrita | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Texto con énfasis |
|
||||
| Cuerpo | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Cuerpo estándar |
|
||||
| Botón en mayúsculas | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (compacto) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Botón | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Botón estándar |
|
||||
| Enlace de nav en negrita | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navegación |
|
||||
| Enlace de nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Navegación inactiva |
|
||||
| Subtítulo en negrita | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadatos en negrita |
|
||||
| Subtítulo | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadatos |
|
||||
| Pequeño en negrita | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Etiquetas, contadores |
|
||||
| Pequeño | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Texto de nota al pie |
|
||||
| Insignia | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Texto más pequeño |
|
||||
|
||||
### Principios
|
||||
- **Binario negrita/regular**: La mayor parte del texto es 700 (negrita) o 400 (regular), con 600 usado de forma moderada. Esto crea una jerarquía visual clara mediante el contraste de peso en lugar de la variación de tamaño.
|
||||
- **Botones en mayúsculas como sistema**: Las etiquetas de botón usan mayúsculas + amplio espaciado de letras (1.4px–2px), creando una voz de "etiqueta" sistemática que se distingue del texto de contenido.
|
||||
- **Tamaños compactos**: El rango va de 10px a 24px — más estrecho que la mayoría de los sistemas. La tipografía de Spotify es compacta y funcional, diseñada para explorar listas de reproducción, no para leer artículos.
|
||||
- **Soporte para escrituras globales**: La extensa pila de respaldo (árabe, hebreo, cirílico, griego, devanagari, CJK) refleja el alcance de Spotify en más de 180 mercados.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botones
|
||||
|
||||
**Píldora Oscura**
|
||||
- Background: `#1f1f1f`
|
||||
- Texto: `#ffffff` o `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (píldora completa)
|
||||
- Uso: Píldoras de navegación, acciones secundarias
|
||||
|
||||
**Píldora Oscura Grande**
|
||||
- Background: `#181818`
|
||||
- Texto: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Uso: Botones de navegación principal de la app
|
||||
|
||||
**Píldora Clara**
|
||||
- Background: `#eeeeee`
|
||||
- Texto: `#181818`
|
||||
- Radius: 500px
|
||||
- Uso: CTAs en modo claro (consentimiento de cookies, marketing)
|
||||
|
||||
**Píldora con Contorno**
|
||||
- Background: transparent
|
||||
- Texto: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asimétrico para icono)
|
||||
- Radius: 9999px
|
||||
- Uso: Botones de seguir, acciones secundarias
|
||||
|
||||
**Reproducción Circular**
|
||||
- Background: `#1f1f1f`
|
||||
- Texto: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (círculo)
|
||||
- Uso: Controles de reproducción/pausa
|
||||
|
||||
### Tarjetas y Contenedores
|
||||
- Background: `#181818` o `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- Sin bordes visibles en la mayoría de las tarjetas
|
||||
- Al pasar el cursor: ligero aclaramiento del fondo
|
||||
- Sombra: `rgba(0,0,0,0.3) 0px 8px 8px` en elevados
|
||||
|
||||
### Campos de Entrada
|
||||
- Campo de búsqueda: fondo `#1f1f1f`, texto `#ffffff`
|
||||
- Radius: 500px (píldora)
|
||||
- Padding: 12px 96px 12px 48px (adaptado para icono)
|
||||
- Foco: el borde se convierte en `#000000`, contorno `1px solid`
|
||||
|
||||
### Navegación
|
||||
- Barra lateral oscura con SpotifyMixUI 14px peso 700 para activo, 400 para inactivo
|
||||
- Color atenuado `#b3b3b3` para elementos inactivos, `#ffffff` para activos
|
||||
- Botones de icono circulares (radio 50%)
|
||||
- Logotipo de Spotify en la esquina superior izquierda en verde
|
||||
|
||||
## 5. Principios de Maquetación
|
||||
|
||||
### Sistema de Espaciado
|
||||
- Unidad base: 8px
|
||||
- Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Cuadrícula y Contenedor
|
||||
- Barra lateral (fija) + área de contenido principal
|
||||
- Tarjetas de álbumes/listas de reproducción basadas en cuadrícula
|
||||
- Barra de reproducción actual a ancho completo en la parte inferior
|
||||
- El área de contenido responsiva ocupa el espacio restante
|
||||
|
||||
### Filosofía del Espacio en Blanco
|
||||
- **Compresión oscura**: Spotify empaqueta el contenido de forma densa — las cuadrículas de listas de reproducción, las listas de pistas y la navegación están todas muy juntas. El fondo oscuro proporciona descanso visual entre elementos sin necesidad de grandes espacios.
|
||||
- **Densidad de contenido sobre espacio para respirar**: Esto es una app, no un sitio de marketing. Cada píxel sirve a la experiencia de escucha.
|
||||
|
||||
### Escala de Radio de Bordes
|
||||
- Mínimo (2px): Insignias, etiquetas explícitas
|
||||
- Sutil (4px): Campos de entrada, elementos pequeños
|
||||
- Estándar (6px): Contenedores de arte de álbum, tarjetas
|
||||
- Cómodo (8px): Secciones, diálogos
|
||||
- Medio (10px–20px): Paneles, elementos superpuestos
|
||||
- Grande (100px): Botones de píldora grandes
|
||||
- Píldora (500px): Botones principales, campo de búsqueda
|
||||
- Píldora completa (9999px): Píldoras de navegación, búsqueda
|
||||
- Círculo (50%): Botones de reproducción, avatares, iconos
|
||||
|
||||
## 6. Profundidad y Elevación
|
||||
|
||||
| Nivel | Tratamiento | Uso |
|
||||
|-------|-----------|-----|
|
||||
| Base (Nivel 0) | Fondo `#121212` | Capa más profunda, fondo de página |
|
||||
| Superficie (Nivel 1) | `#181818` o `#1f1f1f` | Tarjetas, barra lateral, contenedores |
|
||||
| Elevado (Nivel 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menús desplegables, tarjetas al pasar el cursor |
|
||||
| Diálogo (Nivel 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modales, superposiciones, menús |
|
||||
| Insertado (Borde) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordes de campos de entrada |
|
||||
|
||||
**Filosofía de Sombras**: Spotify utiliza sombras notablemente pesadas para una app de tema oscuro. La sombra de opacidad 0.5 con desenfoque de 24px crea un dramático efecto de "flotando en la oscuridad" para diálogos y menús, mientras que la opacidad 0.3 con desenfoque de 8px proporciona un levantamiento de tarjeta más sutil. La combinación única de borde con sombra insertada en los campos de entrada crea una calidad táctil y empotrada.
|
||||
|
||||
## 7. Lo que Debes y No Debes Hacer
|
||||
|
||||
### Debes
|
||||
- Usar fondos casi negros (`#121212`–`#1f1f1f`) — profundidad mediante variación de tonos
|
||||
- Aplicar Verde Spotify (`#1ed760`) únicamente en controles de reproducción, estados activos y CTAs principales
|
||||
- Usar forma de píldora (500px–9999px) en todos los botones — circular (50%) para controles de reproducción
|
||||
- Aplicar mayúsculas + amplio espaciado de letras (1.4px–2px) en las etiquetas de botón
|
||||
- Mantener la tipografía compacta (rango 10px–24px) — esto es una app, no una revista
|
||||
- Usar sombras pesadas (`opacidad 0.3–0.5`) para elementos elevados sobre fondos oscuros
|
||||
- Dejar que el arte del álbum aporte el color — la UI en sí misma es acromática
|
||||
|
||||
### No Debes
|
||||
- No usar Verde Spotify de forma decorativa ni en fondos — es únicamente funcional
|
||||
- No usar fondos claros para superficies principales — la inmersión oscura es fundamental
|
||||
- No omitir la geometría de píldora/círculo en los botones — los botones cuadrados rompen la identidad
|
||||
- No usar sombras finas/sutiles — sobre fondos oscuros, las sombras deben ser pesadas para ser visibles
|
||||
- No agregar colores de marca adicionales — verde + grises acromáticos es la paleta completa
|
||||
- No usar alturas de línea relajadas — la tipografía de Spotify es compacta y densa
|
||||
- No exponer bordes grises sin procesar — usa bordes basados en sombras o insertados
|
||||
|
||||
## 8. Comportamiento Responsivo
|
||||
|
||||
### Puntos de Quiebre
|
||||
| Nombre | Ancho | Cambios Clave |
|
||||
|------|-------|-------------|
|
||||
| Móvil pequeño | <425px | Maquetación móvil compacta |
|
||||
| Móvil | 425–576px | Móvil estándar |
|
||||
| Tableta | 576–768px | Cuadrícula de 2 columnas |
|
||||
| Tableta grande | 768–896px | Maquetación expandida |
|
||||
| Escritorio pequeño | 896–1024px | Barra lateral visible |
|
||||
| Escritorio | 1024–1280px | Maquetación de escritorio completa |
|
||||
| Escritorio grande | >1280px | Cuadrícula expandida |
|
||||
|
||||
### Estrategia de Colapso
|
||||
- Barra lateral: completa → colapsada → oculta
|
||||
- Cuadrícula de álbumes: 5 columnas → 3 → 2 → 1
|
||||
- Barra de reproducción actual: mantenida en todos los tamaños
|
||||
- Búsqueda: campo en píldora mantenido, el ancho se ajusta
|
||||
- Navegación: barra lateral → barra inferior en móvil
|
||||
|
||||
## 9. Guía de Prompts para el Agente
|
||||
|
||||
### Referencia Rápida de Colores
|
||||
- Background: Negro Profundo (`#121212`)
|
||||
- Superficie: Tarjeta Oscura (`#181818`)
|
||||
- Texto: Blanco (`#ffffff`)
|
||||
- Texto secundario: Plateado (`#b3b3b3`)
|
||||
- Acento: Verde Spotify (`#1ed760`)
|
||||
- Borde: `#4d4d4d`
|
||||
- Error: Rojo Negativo (`#f3727f`)
|
||||
|
||||
### Ejemplos de Prompts de Componentes
|
||||
- "Crea una tarjeta oscura: fondo #181818, radio 8px. Título en 16px SpotifyMixUI peso 700, texto blanco. Subtítulo en 14px peso 400, #b3b3b3. Sombra rgba(0,0,0,0.3) 0px 8px 8px al pasar el cursor."
|
||||
- "Diseña un botón de píldora: fondo #1f1f1f, texto blanco, radio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, mayúsculas, espaciado de letras 1.4px."
|
||||
- "Construye un botón de reproducción circular: fondo Verde Spotify (#1ed760), icono #000000, radio 50%, padding 12px."
|
||||
- "Crea un campo de búsqueda: fondo #1f1f1f, texto blanco, radio 500px, padding 12px 48px. Borde insertado: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Diseña una barra lateral de navegación: fondo #121212. Elementos activos: 14px peso 700, blanco. Inactivos: 14px peso 400, #b3b3b3."
|
||||
|
||||
### Guía de Iteración
|
||||
1. Empieza con #121212 — todo vive en la oscuridad casi negra
|
||||
2. Verde Spotify solo para destacados funcionales (reproducción, activo, CTA)
|
||||
3. Píldora en todo — 500px para grande, 9999px para pequeño, 50% para circular
|
||||
4. Mayúsculas + amplio tracking en botones — la voz de etiqueta sistemática
|
||||
5. Sombras pesadas (opacidad 0.3–0.5) para elevación — las sombras ligeras son invisibles sobre fondos oscuros
|
||||
6. El arte del álbum aporta todo el color — la UI se mantiene acromática
|
||||
@@ -0,0 +1,249 @@
|
||||
# Système de Design Inspiré de Spotify
|
||||
|
||||
> Category: Médias & Grand public
|
||||
> Streaming musical. Vert vif sur fond sombre, typographie affirmée, sublimé par les pochettes d'albums.
|
||||
|
||||
## 1. Thème Visuel & Atmosphère
|
||||
|
||||
L'interface web de Spotify est un lecteur de musique sombre et immersif qui enveloppe les auditeurs dans un cocon quasi-noir (`#121212`, `#181818`, `#1f1f1f`) où les pochettes d'albums et le contenu deviennent la principale source de couleur. La philosophie de design est la « noirceur au service du contenu » — l'UI s'efface dans l'ombre pour que la musique, les podcasts et les playlists puissent rayonner. Chaque surface est une nuance de gris anthracite, créant un environnement semblable à une salle de cinéma où la seule vraie couleur provient du Vert Spotify iconique (`#1ed760`) et des pochettes d'albums elles-mêmes.
|
||||
|
||||
La typographie utilise SpotifyMixUI et SpotifyMixUITitle — des polices propriétaires de la famille CircularSp (Circular par Lineto, personnalisée pour Spotify) avec une pile de repli étendue incluant l'arabe, l'hébreu, le cyrillique, le grec, le dévanagari et les polices CJK, reflétant la portée mondiale de Spotify. Le système typographique est compact et fonctionnel : 700 (gras) pour l'emphase et la navigation, 600 (semi-gras) pour l'emphase secondaire, et 400 (normal) pour le corps de texte. Les boutons utilisent des majuscules avec un espacement positif des lettres (1.4px–2px) pour un aspect systématique, à la manière d'une étiquette.
|
||||
|
||||
Ce qui distingue Spotify, c'est sa géométrie en pilule et en cercle. Les boutons principaux utilisent un rayon de 500px à 9999px (pilule complète), les boutons de lecture circulaires utilisent un rayon de 50 %, et les champs de recherche sont des pilules de 500px. Combiné à de lourdes ombres (`rgba(0,0,0,0.5) 0px 8px 24px`) sur les éléments surélevés et un unique combo bordure-ombre en incrustation (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), il en résulte une interface qui ressemble à un appareil audio premium — tactile, arrondie et conçue pour le toucher.
|
||||
|
||||
**Caractéristiques Clés :**
|
||||
- Thème sombre quasi-noir immersif (`#121212`–`#1f1f1f`) — l'UI disparaît derrière le contenu
|
||||
- Vert Spotify (`#1ed760`) comme accent de marque singulier — jamais décoratif, toujours fonctionnel
|
||||
- Famille de polices SpotifyMixUI/CircularSp avec prise en charge des scripts mondiaux
|
||||
- Boutons en pilule (500px–9999px) et contrôles circulaires (50 %) — arrondis, optimisés pour le tactile
|
||||
- Libellés de boutons en majuscules avec large espacement des lettres (1.4px–2px)
|
||||
- Ombres prononcées sur les éléments surélevés (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Couleurs sémantiques : rouge négatif (`#f3727f`), orange d'avertissement (`#ffa42b`), bleu d'annonce (`#539df5`)
|
||||
- Les pochettes d'albums comme principale source de couleur — l'UI est achromatique par conception
|
||||
|
||||
## 2. Palette de Couleurs & Rôles
|
||||
|
||||
### Marque Principale
|
||||
- **Vert Spotify** (`#1ed760`) : Accent de marque principal — boutons de lecture, états actifs, CTA
|
||||
- **Quasi-Noir** (`#121212`) : Surface de fond la plus profonde
|
||||
- **Surface Sombre** (`#181818`) : Cartes, conteneurs, surfaces surélevées
|
||||
- **Sombre Moyen** (`#1f1f1f`) : Fonds de boutons, surfaces interactives
|
||||
|
||||
### Texte
|
||||
- **Blanc** (`#ffffff`) : `--text-base`, texte principal
|
||||
- **Argent** (`#b3b3b3`) : Texte secondaire, libellés atténués, navigation inactive
|
||||
- **Blanc Cassé** (`#cbcbcb`) : Texte secondaire légèrement plus lumineux
|
||||
- **Clair** (`#fdfdfd`) : Quasi-blanc pour l'emphase maximale
|
||||
|
||||
### Sémantique
|
||||
- **Rouge Négatif** (`#f3727f`) : `--text-negative`, états d'erreur
|
||||
- **Orange d'Avertissement** (`#ffa42b`) : `--text-warning`, états d'avertissement
|
||||
- **Bleu d'Annonce** (`#539df5`) : `--text-announcement`, états d'information
|
||||
|
||||
### Surface & Bordure
|
||||
- **Carte Sombre** (`#252525`) : Surface de carte surélevée
|
||||
- **Carte Moyenne** (`#272727`) : Surface de carte alternative
|
||||
- **Gris Bordure** (`#4d4d4d`) : Bordures de boutons sur fond sombre
|
||||
- **Bordure Claire** (`#7c7c7c`) : Bordures de boutons contournés, liens atténués
|
||||
- **Séparateur** (`#b3b3b3`) : Lignes de séparation
|
||||
- **Surface Claire** (`#eeeeee`) : Boutons en mode clair (rare)
|
||||
- **Bordure Vert Spotify** (`#1db954`) : Variante de bordure accent vert
|
||||
|
||||
### Ombres
|
||||
- **Prononcée** (`rgba(0,0,0,0.5) 0px 8px 24px`) : Dialogues, menus, panneaux surélevés
|
||||
- **Moyenne** (`rgba(0,0,0,0.3) 0px 8px 8px`) : Cartes, menus déroulants
|
||||
- **Bordure en Incrustation** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`) : Combo bordure-ombre pour les champs de saisie
|
||||
|
||||
## 3. Règles Typographiques
|
||||
|
||||
### Familles de Polices
|
||||
- **Titre** : `SpotifyMixUITitle`, replis : `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **UI / Corps** : `SpotifyMixUI`, même pile de repli
|
||||
|
||||
### Hiérarchie
|
||||
|
||||
| Rôle | Police | Taille | Graisse | Hauteur de ligne | Espacement des lettres | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Titre de section | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Graisse de titre gras |
|
||||
| En-tête principal | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (serré) | normal | En-têtes de section semi-gras |
|
||||
| Corps Gras | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Texte mis en emphase |
|
||||
| Corps | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Corps standard |
|
||||
| Bouton Majuscule | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (serré) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Bouton | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Bouton standard |
|
||||
| Lien Nav Gras | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
|
||||
| Lien Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Navigation inactive |
|
||||
| Légende Gras | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Métadonnées en gras |
|
||||
| Légende | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Métadonnées |
|
||||
| Petit Gras | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Étiquettes, compteurs |
|
||||
| Petit | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Texte fin |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Texte le plus petit |
|
||||
|
||||
### Principes
|
||||
- **Binaire gras/normal** : La plupart des textes sont soit en 700 (gras) soit en 400 (normal), avec le 600 utilisé avec parcimonie. Cela crée une hiérarchie visuelle claire par contraste de graisse plutôt que par variation de taille.
|
||||
- **Boutons en majuscules comme système** : Les libellés de boutons utilisent les majuscules + un large espacement des lettres (1.4px–2px), créant une « voix d'étiquette » systématique distincte du texte de contenu.
|
||||
- **Taille compacte** : La plage va de 10px à 24px — plus étroite que la plupart des systèmes. La typographie de Spotify est compacte et fonctionnelle, conçue pour parcourir des playlists, pas pour lire des articles.
|
||||
- **Prise en charge des scripts mondiaux** : La pile de repli étendue (arabe, hébreu, cyrillique, grec, dévanagari, CJK) reflète la présence de Spotify sur 180+ marchés.
|
||||
|
||||
## 4. Styles des Composants
|
||||
|
||||
### Boutons
|
||||
|
||||
**Pilule Sombre**
|
||||
- Fond : `#1f1f1f`
|
||||
- Texte : `#ffffff` ou `#b3b3b3`
|
||||
- Rembourrage : 8px 16px
|
||||
- Rayon : 9999px (pilule complète)
|
||||
- Utilisation : Pilules de navigation, actions secondaires
|
||||
|
||||
**Grande Pilule Sombre**
|
||||
- Fond : `#181818`
|
||||
- Texte : `#ffffff`
|
||||
- Rembourrage : 0px 43px
|
||||
- Rayon : 500px
|
||||
- Utilisation : Boutons de navigation principale de l'application
|
||||
|
||||
**Pilule Claire**
|
||||
- Fond : `#eeeeee`
|
||||
- Texte : `#181818`
|
||||
- Rayon : 500px
|
||||
- Utilisation : CTA en mode clair (consentement aux cookies, marketing)
|
||||
|
||||
**Pilule Contournée**
|
||||
- Fond : transparent
|
||||
- Texte : `#ffffff`
|
||||
- Bordure : `1px solid #7c7c7c`
|
||||
- Rembourrage : 4px 16px 4px 36px (asymétrique pour l'icône)
|
||||
- Rayon : 9999px
|
||||
- Utilisation : Boutons Suivre, actions secondaires
|
||||
|
||||
**Lecture Circulaire**
|
||||
- Fond : `#1f1f1f`
|
||||
- Texte : `#ffffff`
|
||||
- Rembourrage : 12px
|
||||
- Rayon : 50 % (cercle)
|
||||
- Utilisation : Contrôles lecture/pause
|
||||
|
||||
### Cartes & Conteneurs
|
||||
- Fond : `#181818` ou `#1f1f1f`
|
||||
- Rayon : 6px–8px
|
||||
- Pas de bordures visibles sur la plupart des cartes
|
||||
- Survol : légère clarification du fond
|
||||
- Ombre : `rgba(0,0,0,0.3) 0px 8px 8px` sur les éléments surélevés
|
||||
|
||||
### Champs de Saisie
|
||||
- Champ de recherche : fond `#1f1f1f`, texte `#ffffff`
|
||||
- Rayon : 500px (pilule)
|
||||
- Rembourrage : 12px 96px 12px 48px (tenant compte de l'icône)
|
||||
- Focus : la bordure devient `#000000`, contour `1px solid`
|
||||
|
||||
### Navigation
|
||||
- Barre latérale sombre avec SpotifyMixUI 14px graisse 700 pour actif, 400 pour inactif
|
||||
- `#b3b3b3` couleur atténuée pour les éléments inactifs, `#ffffff` pour les actifs
|
||||
- Boutons d'icônes circulaires (rayon 50 %)
|
||||
- Logo Spotify en haut à gauche en vert
|
||||
|
||||
## 5. Principes de Mise en Page
|
||||
|
||||
### Système d'Espacement
|
||||
- Unité de base : 8px
|
||||
- Échelle : 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Grille & Conteneur
|
||||
- Barre latérale (fixe) + zone de contenu principale
|
||||
- Cartes d'albums/playlists en grille
|
||||
- Barre de lecture en cours pleine largeur en bas
|
||||
- La zone de contenu responsive occupe l'espace restant
|
||||
|
||||
### Philosophie des Espaces Blancs
|
||||
- **Compression sombre** : Spotify condense le contenu de façon dense — les grilles de playlists, les listes de pistes et la navigation sont toutes très rapprochées. Le fond sombre offre un repos visuel entre les éléments sans nécessiter de grands espaces.
|
||||
- **Densité de contenu plutôt qu'espace de respiration** : C'est une application, pas un site marketing. Chaque pixel est au service de l'expérience d'écoute.
|
||||
|
||||
### Échelle des Rayons de Bordure
|
||||
- Minimal (2px) : Badges, étiquettes explicites
|
||||
- Subtil (4px) : Champs de saisie, petits éléments
|
||||
- Standard (6px) : Conteneurs de pochettes d'albums, cartes
|
||||
- Confortable (8px) : Sections, dialogues
|
||||
- Moyen (10px–20px) : Panneaux, éléments superposés
|
||||
- Large (100px) : Grands boutons en pilule
|
||||
- Pilule (500px) : Boutons principaux, champ de recherche
|
||||
- Pilule Complète (9999px) : Pilules de navigation, recherche
|
||||
- Cercle (50 %) : Boutons de lecture, avatars, icônes
|
||||
|
||||
## 6. Profondeur & Élévation
|
||||
|
||||
| Niveau | Traitement | Utilisation |
|
||||
|-------|-----------|-----|
|
||||
| Base (Niveau 0) | Fond `#121212` | Couche la plus profonde, fond de page |
|
||||
| Surface (Niveau 1) | `#181818` ou `#1f1f1f` | Cartes, barre latérale, conteneurs |
|
||||
| Surélevé (Niveau 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menus déroulants, cartes au survol |
|
||||
| Dialogue (Niveau 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modales, superpositions, menus |
|
||||
| Incrustation (Bordure) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordures de champs de saisie |
|
||||
|
||||
**Philosophie des Ombres** : Spotify utilise des ombres particulièrement prononcées pour une application à thème sombre. L'ombre à opacité 0.5 avec 24px de flou crée un effet dramatique de « flottement dans l'obscurité » pour les dialogues et menus, tandis que l'opacité 0.3 à 8px de flou offre un soulèvement de carte plus subtil. La combinaison unique bordure-ombre en incrustation sur les champs de saisie crée une qualité tactile et encastrée.
|
||||
|
||||
## 7. À Faire & À Éviter
|
||||
|
||||
### À Faire
|
||||
- Utiliser des fonds quasi-noirs (`#121212`–`#1f1f1f`) — profondeur par variation de teinte
|
||||
- Appliquer le Vert Spotify (`#1ed760`) uniquement pour les contrôles de lecture, les états actifs et les CTA principaux
|
||||
- Utiliser la forme en pilule (500px–9999px) pour tous les boutons — circulaire (50 %) pour les contrôles de lecture
|
||||
- Appliquer les majuscules + large espacement des lettres (1.4px–2px) sur les libellés de boutons
|
||||
- Garder la typographie compacte (plage 10px–24px) — c'est une application, pas un magazine
|
||||
- Utiliser des ombres prononcées (opacité 0.3–0.5) pour les éléments surélevés sur fonds sombres
|
||||
- Laisser les pochettes d'albums apporter la couleur — l'UI elle-même est achromatique
|
||||
|
||||
### À Éviter
|
||||
- Ne pas utiliser le Vert Spotify de façon décorative ou en fond — il est uniquement fonctionnel
|
||||
- Ne pas utiliser de fonds clairs pour les surfaces principales — l'immersion sombre est fondamentale
|
||||
- Ne pas ignorer la géométrie pilule/cercle sur les boutons — les boutons carrés brisent l'identité
|
||||
- Ne pas utiliser des ombres fines/subtiles — sur fonds sombres, les ombres doivent être prononcées pour être visibles
|
||||
- Ne pas ajouter de couleurs de marque supplémentaires — vert + gris achromatiques est la palette complète
|
||||
- Ne pas utiliser des interlignes souples — la typographie de Spotify est compacte et dense
|
||||
- Ne pas exposer des bordures grises brutes — utiliser des bordures à base d'ombres ou en incrustation
|
||||
|
||||
## 8. Comportement Responsive
|
||||
|
||||
### Points de Rupture
|
||||
| Nom | Largeur | Changements Clés |
|
||||
|------|-------|-------------|
|
||||
| Mobile Petit | <425px | Mise en page mobile compacte |
|
||||
| Mobile | 425–576px | Mobile standard |
|
||||
| Tablette | 576–768px | Grille à 2 colonnes |
|
||||
| Grande Tablette | 768–896px | Mise en page élargie |
|
||||
| Petit Bureau | 896–1024px | Barre latérale visible |
|
||||
| Bureau | 1024–1280px | Mise en page bureau complète |
|
||||
| Grand Bureau | >1280px | Grille élargie |
|
||||
|
||||
### Stratégie de Réduction
|
||||
- Barre latérale : complète → réduite → masquée
|
||||
- Grille d'albums : 5 colonnes → 3 → 2 → 1
|
||||
- Barre de lecture en cours : maintenue à toutes les tailles
|
||||
- Recherche : champ en pilule maintenu, la largeur s'adapte
|
||||
- Navigation : barre latérale → barre inférieure sur mobile
|
||||
|
||||
## 9. Guide de Prompt pour Agent
|
||||
|
||||
### Référence Rapide des Couleurs
|
||||
- Fond : Quasi-Noir (`#121212`)
|
||||
- Surface : Carte Sombre (`#181818`)
|
||||
- Texte : Blanc (`#ffffff`)
|
||||
- Texte secondaire : Argent (`#b3b3b3`)
|
||||
- Accent : Vert Spotify (`#1ed760`)
|
||||
- Bordure : `#4d4d4d`
|
||||
- Erreur : Rouge Négatif (`#f3727f`)
|
||||
|
||||
### Exemples de Prompts de Composants
|
||||
- "Créer une carte sombre : fond `#181818`, rayon 8px. Titre en SpotifyMixUI 16px graisse 700, texte blanc. Sous-titre en 14px graisse 400, `#b3b3b3`. Ombre `rgba(0,0,0,0.3) 0px 8px 8px` au survol."
|
||||
- "Concevoir un bouton en pilule : fond `#1f1f1f`, texte blanc, rayon 9999px, rembourrage 8px 16px. SpotifyMixUI 14px graisse 700, majuscules, espacement des lettres 1.4px."
|
||||
- "Construire un bouton de lecture circulaire : fond Vert Spotify (`#1ed760`), icône `#000000`, rayon 50 %, rembourrage 12px."
|
||||
- "Créer un champ de recherche : fond `#1f1f1f`, texte blanc, rayon 500px, rembourrage 12px 48px. Bordure en incrustation : `rgb(124,124,124) 0px 0px 0px 1px inset`."
|
||||
- "Concevoir une barre latérale de navigation : fond `#121212`. Éléments actifs : 14px graisse 700, blanc. Inactifs : 14px graisse 400, `#b3b3b3`."
|
||||
|
||||
### Guide d'Itération
|
||||
1. Commencer avec `#121212` — tout vit dans l'obscurité quasi-noire
|
||||
2. Vert Spotify uniquement pour les éléments fonctionnels (lecture, actif, CTA)
|
||||
3. Mettre en pilule tout — 500px pour les grands, 9999px pour les petits, 50 % pour les circulaires
|
||||
4. Majuscules + large tracking sur les boutons — la voix d'étiquette systématique
|
||||
5. Ombres prononcées (opacité 0.3–0.5) pour l'élévation — les ombres légères sont invisibles sur fond sombre
|
||||
6. Les pochettes d'albums apportent toute la couleur — l'UI reste achromatique
|
||||
@@ -0,0 +1,249 @@
|
||||
# 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
|
||||
@@ -0,0 +1,249 @@
|
||||
# Sistema di Design Ispirato a Spotify
|
||||
|
||||
> Category: Media e Consumer
|
||||
> Streaming musicale. Verde vibrante su sfondo scuro, tipografia decisa, guidato dall'arte degli album.
|
||||
|
||||
## 1. Tema Visivo e Atmosfera
|
||||
|
||||
L'interfaccia web di Spotify è un music player scuro e immersivo che avvolge gli ascoltatori in un bozzolo quasi nero (`#121212`, `#181818`, `#1f1f1f`), dove l'arte degli album e i contenuti diventano la principale fonte di colore. La filosofia di design è "content-first darkness" — l'interfaccia si ritira nell'ombra affinché musica, podcast e playlist possano risplendere. Ogni superficie è una tonalità di antracite, creando un ambiente teatrale in cui il solo vero colore proviene dall'iconico Spotify Green (`#1ed760`) e dalle copertine degli album stessi.
|
||||
|
||||
La tipografia utilizza SpotifyMixUI e SpotifyMixUITitle — font proprietari della famiglia CircularSp (Circular di Lineto, personalizzato per Spotify) con un ampio stack di fallback che include font arabi, ebraici, cirillici, greci, Devanagari e CJK, a riflesso della portata globale di Spotify. Il sistema tipografico è compatto e funzionale: 700 (bold) per l'enfasi e la navigazione, 600 (semibold) per l'enfasi secondaria e 400 (regular) per il corpo del testo. I pulsanti usano il maiuscolo con letter-spacing positivo (1.4px–2px) per una qualità sistematica da etichetta.
|
||||
|
||||
Ciò che distingue Spotify è la sua geometria a pillola e cerchio. I pulsanti primari usano un raggio da 500px a 9999px (pillola completa), i pulsanti circolari di play usano un raggio del 50%, e gli input di ricerca sono pillole da 500px. Combinando ombre pesanti (`rgba(0,0,0,0.5) 0px 8px 24px`) sugli elementi elevati con un'esclusiva combinazione di bordo inset-shadow (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), il risultato è un'interfaccia che ricorda un dispositivo audio premium — tattile, arrotondata e costruita per il tocco.
|
||||
|
||||
**Caratteristiche Principali:**
|
||||
- Tema scuro immersivo quasi nero (`#121212`–`#1f1f1f`) — l'interfaccia scompare dietro al contenuto
|
||||
- Spotify Green (`#1ed760`) come unico accento di brand — mai decorativo, sempre funzionale
|
||||
- Famiglia di font SpotifyMixUI/CircularSp con supporto per scritture globali
|
||||
- Pulsanti a pillola (500px–9999px) e controlli circolari (50%) — arrotondati, ottimizzati per il tocco
|
||||
- Etichette dei pulsanti in maiuscolo con ampio letter-spacing (1.4px–2px)
|
||||
- Ombre pesanti sugli elementi elevati (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Colori semantici: rosso negativo (`#f3727f`), arancione di avviso (`#ffa42b`), blu di annuncio (`#539df5`)
|
||||
- L'arte degli album come fonte primaria di colore — l'interfaccia è acromatica per design
|
||||
|
||||
## 2. Palette Colori e Ruoli
|
||||
|
||||
### Brand Primario
|
||||
- **Spotify Green** (`#1ed760`): Accento primario del brand — pulsanti play, stati attivi, CTA
|
||||
- **Quasi Nero** (`#121212`): Superficie di sfondo più profonda
|
||||
- **Superficie Scura** (`#181818`): Card, contenitori, superfici elevate
|
||||
- **Medio Scuro** (`#1f1f1f`): Sfondi di pulsanti, superfici interattive
|
||||
|
||||
### Testo
|
||||
- **Bianco** (`#ffffff`): `--text-base`, testo primario
|
||||
- **Argento** (`#b3b3b3`): Testo secondario, etichette attenuate, nav inattiva
|
||||
- **Quasi Bianco** (`#cbcbcb`): Testo secondario leggermente più luminoso
|
||||
- **Chiaro** (`#fdfdfd`): Quasi bianco puro per la massima enfasi
|
||||
|
||||
### Semantici
|
||||
- **Rosso Negativo** (`#f3727f`): `--text-negative`, stati di errore
|
||||
- **Arancione di Avviso** (`#ffa42b`): `--text-warning`, stati di avviso
|
||||
- **Blu di Annuncio** (`#539df5`): `--text-announcement`, stati informativi
|
||||
|
||||
### Superficie e Bordo
|
||||
- **Card Scura** (`#252525`): Superficie di card elevata
|
||||
- **Card Media** (`#272727`): Superficie di card alternativa
|
||||
- **Grigio Bordo** (`#4d4d4d`): Bordi dei pulsanti su sfondo scuro
|
||||
- **Bordo Chiaro** (`#7c7c7c`): Bordi di pulsanti con contorno, link attenuati
|
||||
- **Separatore** (`#b3b3b3`): Linee divisorie
|
||||
- **Superficie Chiara** (`#eeeeee`): Pulsanti in modalità chiara (raro)
|
||||
- **Bordo Spotify Green** (`#1db954`): Variante di bordo con accento verde
|
||||
|
||||
### Ombre
|
||||
- **Pesante** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialoghi, menu, pannelli elevati
|
||||
- **Media** (`rgba(0,0,0,0.3) 0px 8px 8px`): Card, dropdown
|
||||
- **Bordo Inset** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Combinazione bordo-ombra per gli input
|
||||
|
||||
## 3. Regole Tipografiche
|
||||
|
||||
### Famiglie di Font
|
||||
- **Titolo**: `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 / Corpo**: `SpotifyMixUI`, stesso stack di fallback
|
||||
|
||||
### Gerarchia
|
||||
|
||||
| Ruolo | Font | Dimensione | Peso | Altezza Riga | Letter Spacing | Note |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Titolo di Sezione | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Peso titolo bold |
|
||||
| Intestazione Feature | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (compatto) | normal | Intestazioni sezione semibold |
|
||||
| Corpo Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Testo enfatizzato |
|
||||
| Corpo | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Corpo standard |
|
||||
| Pulsante Maiuscolo | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (compatto) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Pulsante | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Pulsante standard |
|
||||
| Link Nav Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigazione |
|
||||
| Link Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Nav inattiva |
|
||||
| Didascalia Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadati bold |
|
||||
| Didascalia | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadati |
|
||||
| Piccolo Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tag, contatori |
|
||||
| Piccolo | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Testo fine |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Testo minimo |
|
||||
|
||||
### Principi
|
||||
- **Binario bold/regular**: La maggior parte del testo è 700 (bold) o 400 (regular), con il 600 usato con parsimonia. Questo crea una chiara gerarchia visiva tramite il contrasto di peso piuttosto che la variazione di dimensione.
|
||||
- **Pulsanti in maiuscolo come sistema**: Le etichette dei pulsanti usano il maiuscolo + ampio letter-spacing (1.4px–2px), creando una voce "etichetta" sistematica distinta dal testo dei contenuti.
|
||||
- **Dimensioni compatte**: L'intervallo va da 10px a 24px — più ristretto della maggior parte dei sistemi. La tipografia di Spotify è compatta e funzionale, progettata per scorrere le playlist, non per leggere articoli.
|
||||
- **Supporto per scritture globali**: L'esteso stack di fallback (arabo, ebraico, cirillico, greco, Devanagari, CJK) riflette la presenza di Spotify in oltre 180 mercati.
|
||||
|
||||
## 4. Stili dei Componenti
|
||||
|
||||
### Pulsanti
|
||||
|
||||
**Pillola Scura**
|
||||
- Background: `#1f1f1f`
|
||||
- Testo: `#ffffff` o `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Raggio: 9999px (pillola completa)
|
||||
- Uso: Pillole di navigazione, azioni secondarie
|
||||
|
||||
**Pillola Scura Grande**
|
||||
- Background: `#181818`
|
||||
- Testo: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Raggio: 500px
|
||||
- Uso: Pulsanti di navigazione principali dell'app
|
||||
|
||||
**Pillola Chiara**
|
||||
- Background: `#eeeeee`
|
||||
- Testo: `#181818`
|
||||
- Raggio: 500px
|
||||
- Uso: CTA in modalità chiara (consenso cookie, marketing)
|
||||
|
||||
**Pillola con Contorno**
|
||||
- Background: trasparente
|
||||
- Testo: `#ffffff`
|
||||
- Bordo: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asimmetrico per icona)
|
||||
- Raggio: 9999px
|
||||
- Uso: Pulsanti Segui, azioni secondarie
|
||||
|
||||
**Play Circolare**
|
||||
- Background: `#1f1f1f`
|
||||
- Testo: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Raggio: 50% (cerchio)
|
||||
- Uso: Controlli play/pausa
|
||||
|
||||
### Card e Contenitori
|
||||
- Background: `#181818` o `#1f1f1f`
|
||||
- Raggio: 6px–8px
|
||||
- Nessun bordo visibile sulla maggior parte delle card
|
||||
- Hover: leggero schiarimento dello sfondo
|
||||
- Ombra: `rgba(0,0,0,0.3) 0px 8px 8px` sugli elementi elevati
|
||||
|
||||
### Input
|
||||
- Input di ricerca: sfondo `#1f1f1f`, testo `#ffffff`
|
||||
- Raggio: 500px (pillola)
|
||||
- Padding: 12px 96px 12px 48px (consapevole dell'icona)
|
||||
- Focus: il bordo diventa `#000000`, outline `1px solid`
|
||||
|
||||
### Navigazione
|
||||
- Barra laterale scura con SpotifyMixUI 14px peso 700 per gli elementi attivi, 400 per quelli inattivi
|
||||
- `#b3b3b3` colore attenuato per gli elementi inattivi, `#ffffff` per quelli attivi
|
||||
- Pulsanti icona circolari (raggio 50%)
|
||||
- Logo Spotify in alto a sinistra in verde
|
||||
|
||||
## 5. Principi di Layout
|
||||
|
||||
### Sistema di Spaziatura
|
||||
- Unità base: 8px
|
||||
- Scala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Griglia e Contenitore
|
||||
- Barra laterale (fissa) + area contenuto principale
|
||||
- Card album/playlist basate su griglia
|
||||
- Barra "ora in riproduzione" a larghezza piena in basso
|
||||
- L'area contenuto responsive occupa lo spazio rimanente
|
||||
|
||||
### Filosofia degli Spazi Bianchi
|
||||
- **Compressione scura**: Spotify addensa i contenuti — griglie di playlist, elenchi di tracce e navigazione sono tutti a spaziatura ravvicinata. Lo sfondo scuro fornisce riposo visivo tra gli elementi senza necessitare di grandi spazi.
|
||||
- **Densità dei contenuti prima del respiro**: Questa è un'app, non un sito di marketing. Ogni pixel serve l'esperienza di ascolto.
|
||||
|
||||
### Scala dei Raggi dei Bordi
|
||||
- Minimo (2px): Badge, tag espliciti
|
||||
- Sottile (4px): Input, elementi piccoli
|
||||
- Standard (6px): Contenitori di copertine album, card
|
||||
- Confortevole (8px): Sezioni, dialoghi
|
||||
- Medio (10px–20px): Pannelli, elementi overlay
|
||||
- Grande (100px): Pulsanti a pillola grandi
|
||||
- Pillola (500px): Pulsanti primari, input di ricerca
|
||||
- Pillola Completa (9999px): Pillole di navigazione, ricerca
|
||||
- Cerchio (50%): Pulsanti play, avatar, icone
|
||||
|
||||
## 6. Profondità ed Elevazione
|
||||
|
||||
| Livello | Trattamento | Uso |
|
||||
|-------|-----------|-----|
|
||||
| Base (Livello 0) | Sfondo `#121212` | Strato più profondo, sfondo della pagina |
|
||||
| Superficie (Livello 1) | `#181818` o `#1f1f1f` | Card, barra laterale, contenitori |
|
||||
| Elevato (Livello 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menu a tendina, card al passaggio del mouse |
|
||||
| Dialogo (Livello 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modali, overlay, menu |
|
||||
| Inset (Bordo) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordi degli input |
|
||||
|
||||
**Filosofia delle Ombre**: Spotify utilizza ombre notevolmente pesanti per un'app a tema scuro. L'ombra con opacità 0.5 a 24px di blur crea un effetto drammatico di "fluttuazione nel buio" per dialoghi e menu, mentre quella con opacità 0.3 a 8px di blur fornisce un sollevamento più sottile per le card. L'esclusiva combinazione di bordo inset-shadow sugli input crea una qualità tattile e incassata.
|
||||
|
||||
## 7. Cosa Fare e Cosa Non Fare
|
||||
|
||||
### Fare
|
||||
- Usare sfondi quasi neri (`#121212`–`#1f1f1f`) — profondità tramite variazione di tonalità
|
||||
- Applicare Spotify Green (`#1ed760`) solo per i controlli di riproduzione, gli stati attivi e le CTA primarie
|
||||
- Usare la forma a pillola (500px–9999px) per tutti i pulsanti — circolare (50%) per i controlli play
|
||||
- Applicare maiuscolo + ampio letter-spacing (1.4px–2px) sulle etichette dei pulsanti
|
||||
- Mantenere la tipografia compatta (intervallo 10px–24px) — questa è un'app, non una rivista
|
||||
- Usare ombre pesanti (opacità 0.3–0.5) per gli elementi elevati su sfondi scuri
|
||||
- Lasciare che l'arte degli album fornisca il colore — l'interfaccia stessa è acromatica
|
||||
|
||||
### Non Fare
|
||||
- Non usare Spotify Green in modo decorativo o sugli sfondi — è solo funzionale
|
||||
- Non usare sfondi chiari per le superfici primarie — l'immersione nel buio è fondamentale
|
||||
- Non omettere la geometria a pillola/cerchio sui pulsanti — i pulsanti squadrati spezzano l'identità
|
||||
- Non usare ombre sottili/leggere — su sfondi scuri, le ombre devono essere pesanti per essere visibili
|
||||
- Non aggiungere ulteriori colori di brand — verde + grigi acromatici è la palette completa
|
||||
- Non usare interlinee rilassate — la tipografia di Spotify è compatta e densa
|
||||
- Non esporre bordi grigi grezzi — usare invece bordi basati su ombre o bordi inset
|
||||
|
||||
## 8. Comportamento Responsive
|
||||
|
||||
### Breakpoint
|
||||
| Nome | Larghezza | Modifiche Principali |
|
||||
|------|-------|-------------|
|
||||
| Mobile Piccolo | <425px | Layout mobile compatto |
|
||||
| Mobile | 425–576px | Mobile standard |
|
||||
| Tablet | 576–768px | Griglia a 2 colonne |
|
||||
| Tablet Grande | 768–896px | Layout espanso |
|
||||
| Desktop Piccolo | 896–1024px | Barra laterale visibile |
|
||||
| Desktop | 1024–1280px | Layout desktop completo |
|
||||
| Desktop Grande | >1280px | Griglia espansa |
|
||||
|
||||
### Strategia di Collasso
|
||||
- Barra laterale: completa → ridotta → nascosta
|
||||
- Griglia album: 5 colonne → 3 → 2 → 1
|
||||
- Barra "ora in riproduzione": mantenuta a tutte le dimensioni
|
||||
- Ricerca: input a pillola mantenuto, la larghezza si adatta
|
||||
- Navigazione: barra laterale → barra inferiore su mobile
|
||||
|
||||
## 9. Guida al Prompt per l'Agente
|
||||
|
||||
### Riferimento Rapido ai Colori
|
||||
- Sfondo: Quasi Nero (`#121212`)
|
||||
- Superficie: Card Scura (`#181818`)
|
||||
- Testo: Bianco (`#ffffff`)
|
||||
- Testo secondario: Argento (`#b3b3b3`)
|
||||
- Accento: Spotify Green (`#1ed760`)
|
||||
- Bordo: `#4d4d4d`
|
||||
- Errore: Rosso Negativo (`#f3727f`)
|
||||
|
||||
### Esempi di Prompt per Componenti
|
||||
- "Crea una card scura: sfondo `#181818`, raggio 8px. Titolo a 16px SpotifyMixUI peso 700, testo bianco. Sottotitolo a 14px peso 400, `#b3b3b3`. Ombra `rgba(0,0,0,0.3) 0px 8px 8px` al passaggio del mouse."
|
||||
- "Progetta un pulsante a pillola: sfondo `#1f1f1f`, testo bianco, raggio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, maiuscolo, letter-spacing 1.4px."
|
||||
- "Costruisci un pulsante play circolare: sfondo Spotify Green (`#1ed760`), icona `#000000`, raggio 50%, padding 12px."
|
||||
- "Crea un input di ricerca: sfondo `#1f1f1f`, testo bianco, raggio 500px, padding 12px 48px. Bordo inset: `rgb(124,124,124) 0px 0px 0px 1px inset`."
|
||||
- "Progetta la barra laterale di navigazione: sfondo `#121212`. Elementi attivi: 14px peso 700, bianco. Inattivi: 14px peso 400, `#b3b3b3`."
|
||||
|
||||
### Guida all'Iterazione
|
||||
1. Inizia con `#121212` — tutto vive nell'oscurità quasi nera
|
||||
2. Spotify Green solo per evidenziazioni funzionali (play, attivo, CTA)
|
||||
3. Usa la pillola ovunque — 500px per le grandi, 9999px per le piccole, 50% per le circolari
|
||||
4. Maiuscolo + ampia spaziatura sui pulsanti — la voce sistematica da etichetta
|
||||
5. Ombre pesanti (opacità 0.3–0.5) per l'elevazione — le ombre leggere sono invisibili sul scuro
|
||||
6. L'arte degli album fornisce tutto il colore — l'interfaccia rimane acromatica
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspired by 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 のradius（フルピル）、円形の再生ボタンは 50% のradius、検索入力は 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
|
||||
- **Near Black**（`#121212`）：最も深い背景サーフェス
|
||||
- **Dark Surface**（`#181818`）：カード、コンテナ、浮き上がったサーフェス
|
||||
- **Mid Dark**（`#1f1f1f`）：ボタン背景、インタラクティブサーフェス
|
||||
|
||||
### テキスト
|
||||
- **White**（`#ffffff`）：`--text-base`、プライマリテキスト
|
||||
- **Silver**（`#b3b3b3`）：セカンダリテキスト、ミュートラベル、非アクティブナビ
|
||||
- **Near White**（`#cbcbcb`）：わずかに明るいセカンダリテキスト
|
||||
- **Light**（`#fdfdfd`）：最大の強調に使うほぼ純白
|
||||
|
||||
### セマンティック
|
||||
- **Negative Red**（`#f3727f`）：`--text-negative`、エラー状態
|
||||
- **Warning Orange**（`#ffa42b`）：`--text-warning`、警告状態
|
||||
- **Announcement Blue**（`#539df5`）：`--text-announcement`、情報状態
|
||||
|
||||
### サーフェス＆ボーダー
|
||||
- **Dark Card**（`#252525`）：浮き上がったカードサーフェス
|
||||
- **Mid Card**（`#272727`）：代替カードサーフェス
|
||||
- **Border Gray**（`#4d4d4d`）：ダーク背景上のボタンボーダー
|
||||
- **Light Border**（`#7c7c7c`）：アウトラインボタンのボーダー、ミュートリンク
|
||||
- **Separator**（`#b3b3b3`）：区切り線
|
||||
- **Light Surface**（`#eeeeee`）：ライトモードのボタン（まれ）
|
||||
- **Spotify Green Border**（`#1db954`）：グリーンアクセントボーダーのバリアント
|
||||
|
||||
### シャドウ
|
||||
- **Heavy**（`rgba(0,0,0,0.5) 0px 8px 24px`）：ダイアログ、メニュー、浮き上がったパネル
|
||||
- **Medium**（`rgba(0,0,0,0.3) 0px 8px 8px`）：カード、ドロップダウン
|
||||
- **Inset Border**（`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`）：入力欄のボーダーシャドウ組み合わせ
|
||||
|
||||
## 3. タイポグラフィルール
|
||||
|
||||
### フォントファミリー
|
||||
- **Title**：`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 / Body**：`SpotifyMixUI`、同じフォールバックスタック
|
||||
|
||||
### 階層
|
||||
|
||||
| 役割 | フォント | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | ボールドタイトルウェイト |
|
||||
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (タイト) | normal | セミボールドのセクション見出し |
|
||||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | 強調テキスト |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | 標準本文 |
|
||||
| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (タイト) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | 標準ボタン |
|
||||
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | ナビゲーション |
|
||||
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 非アクティブナビ |
|
||||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | ボールドメタデータ |
|
||||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | メタデータ |
|
||||
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | タグ、カウント |
|
||||
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | 細かい注記 |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | 最小テキスト |
|
||||
|
||||
### 原則
|
||||
- **ボールド／レギュラーの二項対立**：テキストのほとんどは 700（ボールド）か 400（レギュラー）で、600 はわずかに使用します。サイズ変化ではなくウェイトコントラストによって、明確な視覚的階層を生み出します。
|
||||
- **システムとしての大文字ボタン**：ボタンラベルは大文字 + 広いレタースペーシング（1.4px〜2px）を使用し、コンテンツテキストとは区別された系統的な「ラベル」のような声質を作り出します。
|
||||
- **コンパクトなサイジング**：範囲は 10px〜24px——多くのシステムより狭い範囲です。Spotifyのタイポグラフィはコンパクトで機能的であり、記事を読むためではなくプレイリストをスキャンするために設計されています。
|
||||
- **グローバルスクリプトサポート**：広範なフォールバックスタック（アラビア語、ヘブライ語、キリル文字、ギリシャ語、デーヴァナーガリー、CJK）は、Spotify の 180 以上の市場展開を反映しています。
|
||||
|
||||
## 4. コンポーネントスタイリング
|
||||
|
||||
### ボタン
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` または `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px（フルピル）
|
||||
- 用途：ナビゲーションピル、セカンダリアクション
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- 用途：アプリのプライマリナビゲーションボタン
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- 用途：ライトモードの CTA（Cookie 同意、マーケティング）
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px（アイコン用の非対称）
|
||||
- Radius: 9999px
|
||||
- 用途：フォローボタン、セカンダリアクション
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50%（円形）
|
||||
- 用途：再生／一時停止コントロール
|
||||
|
||||
### カード＆コンテナ
|
||||
- Background: `#181818` または `#1f1f1f`
|
||||
- Radius: 6px〜8px
|
||||
- ほとんどのカードには目に見えるボーダーなし
|
||||
- ホバー時：背景がわずかに明るくなる
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px`（浮き上がった状態）
|
||||
|
||||
### 入力欄
|
||||
- 検索入力：`#1f1f1f` 背景、`#ffffff` テキスト
|
||||
- Radius: 500px（ピル）
|
||||
- Padding: 12px 96px 12px 48px（アイコンを考慮）
|
||||
- フォーカス時：ボーダーが `#000000` に変わり、outline `1px solid`
|
||||
|
||||
### ナビゲーション
|
||||
- アクティブに SpotifyMixUI 14px ウェイト 700、非アクティブに 400 を使用するダークサイドバー
|
||||
- 非アクティブアイテムに `#b3b3b3` のミュートカラー、アクティブに `#ffffff`
|
||||
- 円形アイコンボタン（50% radius）
|
||||
- 左上に緑色の Spotify ロゴ
|
||||
|
||||
## 5. レイアウト原則
|
||||
|
||||
### スペーシングシステム
|
||||
- 基本単位：8px
|
||||
- スケール：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、15px、16px、20px
|
||||
|
||||
### グリッド＆コンテナ
|
||||
- サイドバー（固定）＋メインコンテンツエリア
|
||||
- グリッドベースのアルバム／プレイリストカード
|
||||
- 下部に全幅の再生中バー
|
||||
- レスポンシブなコンテンツエリアが残りのスペースを埋める
|
||||
|
||||
### 余白の哲学
|
||||
- **ダーク圧縮**：Spotify はコンテンツを高密度に詰め込みます——プレイリストグリッド、トラックリスト、ナビゲーションはすべて密にスペーシングされています。ダーク背景が大きなギャップなしに要素間の視覚的な休憩を提供します。
|
||||
- **余裕より情報密度**：これはアプリであり、マーケティングサイトではありません。すべてのピクセルがリスニング体験のために機能します。
|
||||
|
||||
### ボーダー半径スケール
|
||||
- Minimal（2px）：バッジ、明示的なタグ
|
||||
- Subtle（4px）：入力欄、小さな要素
|
||||
- Standard（6px）：アルバムアートコンテナ、カード
|
||||
- Comfortable（8px）：セクション、ダイアログ
|
||||
- Medium（10px〜20px）：パネル、オーバーレイ要素
|
||||
- Large（100px）：大型ピルボタン
|
||||
- Pill（500px）：プライマリボタン、検索入力
|
||||
- Full Pill（9999px）：ナビゲーションピル、検索
|
||||
- Circle（50%）：再生ボタン、アバター、アイコン
|
||||
|
||||
## 6. 奥行き＆エレベーション
|
||||
|
||||
| レベル | 処理 | 用途 |
|
||||
|-------|-----------|-----|
|
||||
| Base (Level 0) | `#121212` 背景 | 最も深い層、ページ背景 |
|
||||
| Surface (Level 1) | `#181818` または `#1f1f1f` | カード、サイドバー、コンテナ |
|
||||
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | ドロップダウンメニュー、ホバーカード |
|
||||
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | モーダル、オーバーレイ、メニュー |
|
||||
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | 入力欄のボーダー |
|
||||
|
||||
**シャドウの哲学**：Spotify はダークテーマのアプリとしては際立って重いシャドウを使用しています。24px ブラーでの 0.5 不透明度シャドウは、ダイアログやメニューに「暗闇に浮かぶ」ような劇的な効果を与えます。一方、8px ブラーでの 0.3 不透明度はより繊細なカードの浮き上がりを表現します。入力欄のユニークなインセットボーダーシャドウの組み合わせは、奥まったような触感を生み出します。
|
||||
|
||||
## 7. すべきこと・してはいけないこと
|
||||
|
||||
### すべきこと
|
||||
- ほぼ黒の背景（`#121212`〜`#1f1f1f`）を使用する——濃淡の変化で奥行きを表現
|
||||
- Spotify Green（`#1ed760`）は再生コントロール、アクティブ状態、プライマリ CTA にのみ適用する
|
||||
- すべてのボタンにピル形状（500px〜9999px）を使用する——再生コントロールには円形（50%）
|
||||
- ボタンラベルに大文字 + 広いレタースペーシング（1.4px〜2px）を適用する
|
||||
- タイポグラフィはコンパクトに保つ（10px〜24px の範囲）——これはアプリであり、雑誌ではない
|
||||
- 浮き上がった要素にはダーク背景上で重いシャドウ（0.3〜0.5 不透明度）を使用する
|
||||
- アルバムアートが色を提供する——UI 自体はアクロマティックに
|
||||
|
||||
### してはいけないこと
|
||||
- Spotify Green を装飾的に、または背景に使用しない——機能的な用途にのみ
|
||||
- プライマリサーフェスにライト背景を使用しない——ダークへの没入がコアである
|
||||
- ボタンのピル／円形のジオメトリを省略しない——四角いボタンはアイデンティティを壊す
|
||||
- 薄い／繊細なシャドウを使用しない——ダーク背景では、シャドウは視認性のために重くする必要がある
|
||||
- 追加のブランドカラーを加えない——グリーン＋アクロマティックなグレーが完全なパレット
|
||||
- ゆったりした行高を使用しない——Spotifyのタイポグラフィはコンパクトで高密度
|
||||
- 生のグレーボーダーをそのまま見せない——シャドウベースまたはインセットボーダーを使用する
|
||||
|
||||
## 8. レスポンシブ挙動
|
||||
|
||||
### ブレークポイント
|
||||
| 名称 | 幅 | 主な変化 |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | コンパクトモバイルレイアウト |
|
||||
| Mobile | 425–576px | 標準モバイル |
|
||||
| Tablet | 576–768px | 2カラムグリッド |
|
||||
| Tablet Large | 768–896px | 拡張レイアウト |
|
||||
| Desktop Small | 896–1024px | サイドバー表示 |
|
||||
| Desktop | 1024–1280px | フルデスクトップレイアウト |
|
||||
| Large Desktop | >1280px | 拡張グリッド |
|
||||
|
||||
### 折りたたみ戦略
|
||||
- サイドバー：全表示→折りたたみ→非表示
|
||||
- アルバムグリッド：5カラム→3→2→1
|
||||
- 再生中バー：全サイズで表示を維持
|
||||
- 検索：ピル入力を維持、幅を調整
|
||||
- ナビゲーション：サイドバー→モバイルではボトムバー
|
||||
|
||||
## 9. エージェントプロンプトガイド
|
||||
|
||||
### クイックカラーリファレンス
|
||||
- Background: Near Black（`#121212`）
|
||||
- Surface: Dark Card（`#181818`）
|
||||
- Text: White（`#ffffff`）
|
||||
- Secondary text: Silver（`#b3b3b3`）
|
||||
- Accent: Spotify Green（`#1ed760`）
|
||||
- Border: `#4d4d4d`
|
||||
- Error: Negative Red（`#f3727f`）
|
||||
|
||||
### コンポーネントプロンプト例
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### イテレーションガイド
|
||||
1. `#121212` から始める——すべてがほぼ黒の暗闇の中に存在する
|
||||
2. Spotify Green は機能的なハイライトにのみ使用（再生、アクティブ、CTA）
|
||||
3. すべてをピルに——大きなものは 500px、小さなものは 9999px、円形には 50%
|
||||
4. ボタンは大文字 + 広いトラッキング——系統的なラベルの声質
|
||||
5. 重いシャドウ（0.3〜0.5 不透明度）でエレベーションを表現——暗い背景では薄いシャドウは見えない
|
||||
6. アルバムアートがすべての色を提供する——UI はアクロマティックを保つ
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspired by Spotify
|
||||
|
||||
> Category: 미디어 & 소비자
|
||||
> 음악 스트리밍. 어두운 배경 위의 선명한 녹색, 굵은 서체, 앨범 아트 중심.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Spotify의 웹 인터페이스는 어두운 몰입형 음악 플레이어로, 청취자를 거의 검은색에 가까운 공간(`#121212`, `#181818`, `#1f1f1f`)으로 감싸 앨범 아트와 콘텐츠가 주된 색의 원천이 되도록 합니다. 설계 철학은 "콘텐츠 우선의 어둠(content-first darkness)"입니다. UI는 그림자 속으로 물러나고, 음악과 팟캐스트, 플레이리스트가 빛나게 됩니다. 모든 표면이 짙은 회색 계열의 색조를 띠어 극장 같은 환경을 만들어내며, 유일한 진짜 색채는 상징적인 Spotify Green(`#1ed760`)과 앨범 아트워크 자체에서 나옵니다.
|
||||
|
||||
타이포그래피는 SpotifyMixUI와 SpotifyMixUITitle을 사용합니다. 이 폰트들은 CircularSp 계열(Lineto의 Circular를 Spotify 용으로 커스터마이징한 폰트)의 독점 서체로, 아랍어, 히브리어, 키릴 문자, 그리스어, 데바나가리, CJK 폰트를 포함하는 광범위한 폴백 스택을 갖추고 있으며, 이는 Spotify의 글로벌 도달 범위를 반영합니다. 타입 시스템은 간결하고 기능적입니다. 강조와 내비게이션에는 700(bold), 보조 강조에는 600(semibold), 본문에는 400(regular)을 사용합니다. 버튼은 대문자와 양수 자간(1.4px–2px)을 활용해 체계적인 레이블 느낌을 줍니다.
|
||||
|
||||
Spotify를 특별하게 만드는 요소는 알약(pill) 형태와 원형 기하학입니다. 주요 버튼은 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. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Spotify Green** (`#1ed760`): 주요 브랜드 강조색 — 재생 버튼, 활성 상태, CTA
|
||||
- **Near Black** (`#121212`): 가장 깊은 배경 표면
|
||||
- **Dark Surface** (`#181818`): 카드, 컨테이너, 고도감 있는 표면
|
||||
- **Mid Dark** (`#1f1f1f`): 버튼 배경, 인터랙티브 표면
|
||||
|
||||
### Text
|
||||
- **White** (`#ffffff`): `--text-base`, 주 텍스트
|
||||
- **Silver** (`#b3b3b3`): 보조 텍스트, 흐릿한 레이블, 비활성 내비게이션
|
||||
- **Near White** (`#cbcbcb`): 약간 밝은 보조 텍스트
|
||||
- **Light** (`#fdfdfd`): 최대 강조를 위한 순백에 가까운 색
|
||||
|
||||
### Semantic
|
||||
- **Negative Red** (`#f3727f`): `--text-negative`, 오류 상태
|
||||
- **Warning Orange** (`#ffa42b`): `--text-warning`, 경고 상태
|
||||
- **Announcement Blue** (`#539df5`): `--text-announcement`, 정보 상태
|
||||
|
||||
### Surface & Border
|
||||
- **Dark Card** (`#252525`): 고도감 있는 카드 표면
|
||||
- **Mid Card** (`#272727`): 대체 카드 표면
|
||||
- **Border Gray** (`#4d4d4d`): 어두운 배경 위의 버튼 테두리
|
||||
- **Light Border** (`#7c7c7c`): 아웃라인 버튼 테두리, 흐릿한 링크
|
||||
- **Separator** (`#b3b3b3`): 구분선
|
||||
- **Light Surface** (`#eeeeee`): 라이트 모드 버튼(드물게 사용)
|
||||
- **Spotify Green Border** (`#1db954`): 녹색 강조 테두리 변형
|
||||
|
||||
### Shadows
|
||||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): 다이얼로그, 메뉴, 고도감 있는 패널
|
||||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): 카드, 드롭다운
|
||||
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): 입력창 테두리-그림자 조합
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Title**: `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 / Body**: `SpotifyMixUI`, 동일한 폴백 스택
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | 굵은 타이틀 웨이트 |
|
||||
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | 섹션 제목용 세미볼드 |
|
||||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | 강조 텍스트 |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | 표준 본문 |
|
||||
| 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 | 표준 버튼 |
|
||||
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | 내비게이션 |
|
||||
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 비활성 내비게이션 |
|
||||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | 굵은 메타데이터 |
|
||||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 메타데이터 |
|
||||
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | 태그, 카운트 |
|
||||
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | 작은 글씨 |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | 가장 작은 텍스트 |
|
||||
|
||||
### Principles
|
||||
- **볼드/레귤러 이분법**: 대부분의 텍스트는 700(bold) 또는 400(regular)이며, 600은 드물게 사용됩니다. 크기 변화가 아닌 굵기 대비를 통해 명확한 시각적 위계를 만들어냅니다.
|
||||
- **시스템으로서의 대문자 버튼**: 버튼 레이블은 대문자와 넓은 자간(1.4px–2px)을 사용해, 콘텐츠 텍스트와 구별되는 체계적인 "레이블" 어조를 만들어냅니다.
|
||||
- **간결한 크기**: 범위가 10px–24px으로, 대부분의 시스템보다 좁습니다. Spotify의 타이포그래피는 간결하고 기능적이며, 기사를 읽는 것이 아니라 플레이리스트를 훑어보도록 설계되어 있습니다.
|
||||
- **글로벌 스크립트 지원**: 광범위한 폴백 스택(아랍어, 히브리어, 키릴 문자, 그리스어, 데바나가리, CJK)은 Spotify의 180개 이상의 시장 도달 범위를 반영합니다.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: 내비게이션 알약 버튼, 보조 액션
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Use: 앱의 주요 내비게이션 버튼
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Use: 라이트 모드 CTA(쿠키 동의, 마케팅)
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (아이콘을 위한 비대칭 패딩)
|
||||
- Radius: 9999px
|
||||
- Use: 팔로우 버튼, 보조 액션
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (circle)
|
||||
- Use: 재생/일시정지 컨트롤
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- 대부분의 카드에는 테두리가 보이지 않음
|
||||
- Hover: 배경이 약간 밝아짐
|
||||
- Shadow: 고도감 있는 요소에 `rgba(0,0,0,0.3) 0px 8px 8px`
|
||||
|
||||
### Inputs
|
||||
- 검색 입력창: `#1f1f1f` 배경, `#ffffff` 텍스트
|
||||
- Radius: 500px (pill)
|
||||
- Padding: 12px 96px 12px 48px (아이콘 인식형)
|
||||
- Focus: 테두리가 `#000000`으로 변하고, `1px solid` 아웃라인 적용
|
||||
|
||||
### Navigation
|
||||
- 활성 상태에는 SpotifyMixUI 14px 굵기 700, 비활성 상태에는 400을 사용하는 어두운 사이드바
|
||||
- 비활성 항목에는 `#b3b3b3` 흐릿한 색상, 활성 항목에는 `#ffffff`
|
||||
- 원형 아이콘 버튼(50% 반지름)
|
||||
- 왼쪽 상단의 녹색 Spotify 로고
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- 기본 단위: 8px
|
||||
- 스케일: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Grid & Container
|
||||
- 사이드바(고정) + 메인 콘텐츠 영역
|
||||
- 그리드 기반의 앨범/플레이리스트 카드
|
||||
- 하단에 전체 너비의 현재 재생 중 바
|
||||
- 반응형 콘텐츠 영역이 나머지 공간을 채움
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **다크 압축(Dark compression)**: Spotify는 콘텐츠를 촘촘하게 배치합니다. 플레이리스트 그리드, 트랙 목록, 내비게이션 모두 촘촘하게 간격이 맞춰져 있습니다. 어두운 배경이 큰 간격 없이도 요소 사이에 시각적 휴식을 제공합니다.
|
||||
- **여백보다 콘텐츠 밀도 우선**: 이것은 앱이지, 마케팅 사이트가 아닙니다. 모든 픽셀은 청취 경험을 위해 존재합니다.
|
||||
|
||||
### Border Radius Scale
|
||||
- 최소(2px): 뱃지, 명시적 태그
|
||||
- 미묘함(4px): 입력창, 작은 요소
|
||||
- 표준(6px): 앨범 아트 컨테이너, 카드
|
||||
- 편안함(8px): 섹션, 다이얼로그
|
||||
- 중간(10px–20px): 패널, 오버레이 요소
|
||||
- 대형(100px): 대형 알약 버튼
|
||||
- 알약(500px): 주요 버튼, 검색 입력창
|
||||
- 완전 알약(9999px): 내비게이션 알약, 검색
|
||||
- 원형(50%): 재생 버튼, 아바타, 아이콘
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Base (Level 0) | `#121212` background | 가장 깊은 레이어, 페이지 배경 |
|
||||
| Surface (Level 1) | `#181818` or `#1f1f1f` | 카드, 사이드바, 컨테이너 |
|
||||
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | 드롭다운 메뉴, 호버 카드 |
|
||||
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | 모달, 오버레이, 메뉴 |
|
||||
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | 입력창 테두리 |
|
||||
|
||||
**Shadow Philosophy**: Spotify는 다크 테마 앱치고 눈에 띄게 무거운 그림자를 사용합니다. 24px 블러의 0.5 불투명도 그림자는 다이얼로그와 메뉴에 극적인 "어둠 속에 떠 있는" 효과를 만들어내고, 8px 블러의 0.3 불투명도 그림자는 보다 섬세한 카드 부양감을 제공합니다. 입력창의 고유한 인셋 테두리-그림자 조합은 오목하게 파인 촉각적 느낌을 만들어냅니다.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- 거의 검은색에 가까운 배경(`#121212`–`#1f1f1f`)을 사용하세요 — 명암 변화를 통한 깊이감 표현
|
||||
- Spotify Green(`#1ed760`)은 재생 컨트롤, 활성 상태, 주요 CTA에만 적용하세요
|
||||
- 모든 버튼에 알약 형태(500px–9999px)를 사용하고, 재생 컨트롤에는 원형(50%)을 사용하세요
|
||||
- 버튼 레이블에 대문자와 넓은 자간(1.4px–2px)을 적용하세요
|
||||
- 타이포그래피를 간결하게 유지하세요(10px–24px 범위) — 이것은 앱이지 잡지가 아닙니다
|
||||
- 어두운 배경의 고도감 있는 요소에 무거운 그림자(`0.3–0.5 opacity`)를 사용하세요
|
||||
- 앨범 아트가 색채를 제공하도록 하세요 — UI 자체는 무채색을 유지합니다
|
||||
|
||||
### Don't
|
||||
- Spotify Green을 장식용으로 사용하거나 배경에 적용하지 마세요 — 기능적 목적으로만 사용해야 합니다
|
||||
- 주요 표면에 밝은 배경을 사용하지 마세요 — 어두운 몰입감이 핵심입니다
|
||||
- 버튼에 알약/원형 형태를 건너뛰지 마세요 — 사각형 버튼은 아이덴티티를 깨뜨립니다
|
||||
- 얇거나 미묘한 그림자를 사용하지 마세요 — 어두운 배경에서 그림자는 보이려면 무거워야 합니다
|
||||
- 추가적인 브랜드 색상을 넣지 마세요 — 녹색과 무채색 회색이 완전한 팔레트입니다
|
||||
- 느슨한 행간을 사용하지 마세요 — Spotify의 타이포그래피는 간결하고 촘촘합니다
|
||||
- 날것의 회색 테두리를 노출하지 마세요 — 그림자 기반 또는 인셋 테두리를 사용하세요
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | 컴팩트 모바일 레이아웃 |
|
||||
| Mobile | 425–576px | 표준 모바일 |
|
||||
| Tablet | 576–768px | 2열 그리드 |
|
||||
| Tablet Large | 768–896px | 확장된 레이아웃 |
|
||||
| Desktop Small | 896–1024px | 사이드바 노출 |
|
||||
| Desktop | 1024–1280px | 전체 데스크톱 레이아웃 |
|
||||
| Large Desktop | >1280px | 확장된 그리드 |
|
||||
|
||||
### Collapsing Strategy
|
||||
- 사이드바: 전체 표시 → 축소 → 숨김
|
||||
- 앨범 그리드: 5열 → 3열 → 2열 → 1열
|
||||
- 현재 재생 중 바: 모든 크기에서 유지
|
||||
- 검색: 알약 입력창 유지, 너비 조정
|
||||
- 내비게이션: 모바일에서 사이드바 → 하단 바
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Near Black (`#121212`)
|
||||
- Surface: Dark Card (`#181818`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Secondary text: Silver (`#b3b3b3`)
|
||||
- Accent: Spotify Green (`#1ed760`)
|
||||
- Border: `#4d4d4d`
|
||||
- Error: Negative Red (`#f3727f`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Iteration Guide
|
||||
1. #121212에서 시작하세요 — 모든 것이 거의 검은색의 어둠 속에 존재합니다
|
||||
2. Spotify Green은 기능적 하이라이트(재생, 활성, CTA)에만 사용합니다
|
||||
3. 모든 것을 알약 형태로 만드세요 — 대형에는 500px, 소형에는 9999px, 원형에는 50%
|
||||
4. 버튼에는 대문자와 넓은 자간을 적용하세요 — 체계적인 레이블 어조를 위해
|
||||
5. 고도감 표현에는 무거운 그림자(0.3–0.5 불투명도)를 사용하세요 — 어두운 배경에서 가벼운 그림자는 보이지 않습니다
|
||||
6. 앨범 아트가 모든 색채를 제공합니다 — UI는 무채색을 유지합니다
|
||||
@@ -0,0 +1,249 @@
|
||||
# Ontwerpsysteem geïnspireerd op Spotify
|
||||
|
||||
> Category: Media & Consument
|
||||
> Muziekstreaming. Levendig groen op donker, vette typografie, albumhoes-gedreven.
|
||||
|
||||
## 1. Visueel thema & sfeer
|
||||
|
||||
De webinterface van Spotify is een donkere, meeslepende muziekspeler die luisteraars omhult in een bijna-zwarte cocon (`#121212`, `#181818`, `#1f1f1f`), waarin albumhoezen en content de primaire kleurenbron worden. De ontwerpfilosofie is "content-first duisternis" — de UI trekt zich terug in de schaduw zodat muziek, podcasts en afspeellijsten kunnen stralen. Elk oppervlak is een tint antraciet, waardoor een bioscoopachtige omgeving ontstaat waar de enige echte kleur afkomstig is van het iconische Spotify-groen (`#1ed760`) en de albumhoezen zelf.
|
||||
|
||||
De typografie maakt gebruik van SpotifyMixUI en SpotifyMixUITitle — eigen lettertypen uit de CircularSp-familie (Circular van Lineto, aangepast voor Spotify) met een uitgebreide fallback-stack die Arabisch, Hebreeuws, Cyrillisch, Grieks, Devanagari en CJK-lettertypen bevat, als weerspiegeling van het mondiale bereik van Spotify. Het typografiesysteem is compact en functioneel: 700 (vet) voor nadruk en navigatie, 600 (halfvet) voor secundaire nadruk en 400 (normaal) voor de bodytekst. Knoppen gebruiken hoofdletters met positieve letterafstand (1.4px–2px) voor een systematische, labelachtige uitstraling.
|
||||
|
||||
Wat Spotify onderscheidt, is de pil-en-cirkel-geometrie. Primaire knoppen gebruiken een radius van 500px–9999px (volledige pil), ronde afspeelknoppen gebruiken een radius van 50% en zoekinvoervelden zijn 500px-pillen. In combinatie met zware schaduwen (`rgba(0,0,0,0.5) 0px 8px 24px`) op verheven elementen en een unieke inset-rand-schaduwcombinatie (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`) is het resultaat een interface die aanvoelt als een hoogwaardig audioapparaat — tastbaar, afgerond en gebouwd voor aanraakbediening.
|
||||
|
||||
**Kernkenmerken:**
|
||||
- Meeslepend donker thema in bijna-zwart (`#121212`–`#1f1f1f`) — de UI verdwijnt achter de content
|
||||
- Spotify-groen (`#1ed760`) als enkelvoudig merkaccent — nooit decoratief, altijd functioneel
|
||||
- Lettertypenset SpotifyMixUI/CircularSp met ondersteuning voor wereldwijde schriftsoorten
|
||||
- Pilknoppen (500px–9999px) en ronde bedieningselementen (50%) — afgerond, geoptimaliseerd voor aanraking
|
||||
- Knooplabels in hoofdletters met brede letterafstand (1.4px–2px)
|
||||
- Zware schaduwen op verheven elementen (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Semantische kleuren: negatief rood (`#f3727f`), waarschuwingsoranje (`#ffa42b`), aankondigingsblauw (`#539df5`)
|
||||
- Albumhoes als primaire kleurenbron — de UI is bewust achromatisch
|
||||
|
||||
## 2. Kleurenpalet & rollen
|
||||
|
||||
### Primair merk
|
||||
- **Spotify-groen** (`#1ed760`): Primair merkaccent — afspeelknoppen, actieve staten, CTA's
|
||||
- **Bijna-zwart** (`#121212`): Diepste achtergrondoppervlak
|
||||
- **Donker oppervlak** (`#181818`): Kaarten, containers, verheven oppervlakken
|
||||
- **Middonker** (`#1f1f1f`): Knoopachtergronden, interactieve oppervlakken
|
||||
|
||||
### Tekst
|
||||
- **Wit** (`#ffffff`): `--text-base`, primaire tekst
|
||||
- **Zilver** (`#b3b3b3`): Secundaire tekst, gedempte labels, inactieve navigatie
|
||||
- **Bijna-wit** (`#cbcbcb`): Iets helderdere secundaire tekst
|
||||
- **Licht** (`#fdfdfd`): Bijna-zuiver wit voor maximale nadruk
|
||||
|
||||
### Semantisch
|
||||
- **Negatief rood** (`#f3727f`): `--text-negative`, foutmeldingstoestanden
|
||||
- **Waarschuwingsoranje** (`#ffa42b`): `--text-warning`, waarschuwingstoestanden
|
||||
- **Aankondigingsblauw** (`#539df5`): `--text-announcement`, informatietoestanden
|
||||
|
||||
### Oppervlak & rand
|
||||
- **Donkere kaart** (`#252525`): Verheven kaartoppervlak
|
||||
- **Middelste kaart** (`#272727`): Alternatief kaartoppervlak
|
||||
- **Randgrijs** (`#4d4d4d`): Knopranden op donker
|
||||
- **Lichte rand** (`#7c7c7c`): Omlijnd knopranden, gedempte links
|
||||
- **Scheidingslijn** (`#b3b3b3`): Dividerlijnen
|
||||
- **Licht oppervlak** (`#eeeeee`): Lichte-modus-knoppen (zeldzaam)
|
||||
- **Spotify-groene rand** (`#1db954`): Groene accentrandvariant
|
||||
|
||||
### Schaduwen
|
||||
- **Zwaar** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialoogvensters, menu's, verheven panelen
|
||||
- **Middel** (`rgba(0,0,0,0.3) 0px 8px 8px`): Kaarten, dropdowns
|
||||
- **Inset-rand** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Invoer-rand-schaduwcombinatie
|
||||
|
||||
## 3. Typografieregels
|
||||
|
||||
### Lettertypenfamilies
|
||||
- **Titel**: `SpotifyMixUITitle`, fallbacks: `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`, zelfde fallback-stack
|
||||
|
||||
### Hiërarchie
|
||||
|
||||
| Rol | Lettertype | Grootte | Gewicht | Regelafstand | Letterafstand | Opmerkingen |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Sectietitel | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Vetgedrukt titelgewicht |
|
||||
| Feature-kop | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (krap) | normal | Halfvette sectiekoppen |
|
||||
| Body vet | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Benadrukte tekst |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standaard bodytekst |
|
||||
| Knop hoofdletters | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (krap) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Knop | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standaard knop |
|
||||
| Navigatielink vet | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigatie |
|
||||
| Navigatielink | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactieve navigatie |
|
||||
| Bijschrift vet | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Vetgedrukte metadata |
|
||||
| Bijschrift | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
|
||||
| Klein vet | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, telwaarden |
|
||||
| Klein | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Kleine druk |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Kleinste tekst |
|
||||
|
||||
### Principes
|
||||
- **Vet/normaal-binair**: De meeste tekst is 700 (vet) of 400 (normaal), met 700 spaarzaam gebruikt. Dit creëert een duidelijke visuele hiërarchie door gewichtscontrast in plaats van maatvariatatie.
|
||||
- **Hoofdletterknoppen als systeem**: Knooplabels gebruiken hoofdletters + brede letterafstand (1.4px–2px), waardoor een systematische "label"-stem ontstaat die zich onderscheidt van contenttekst.
|
||||
- **Compacte maten**: Het bereik is 10px–24px — kleiner dan de meeste systemen. Spotify's typografie is compact en functioneel, ontworpen voor het scannen van afspeellijsten, niet voor het lezen van artikelen.
|
||||
- **Wereldwijde schriftondersteuning**: De uitgebreide fallback-stack (Arabisch, Hebreeuws, Cyrillisch, Grieks, Devanagari, CJK) weerspiegelt het bereik van Spotify in 180+ markten.
|
||||
|
||||
## 4. Componentstijlen
|
||||
|
||||
### Knoppen
|
||||
|
||||
**Donkere pil**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (full pill)
|
||||
- Gebruik: Navigatiepillen, secundaire acties
|
||||
|
||||
**Grote donkere pil**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Gebruik: Primaire app-navigatieknoppen
|
||||
|
||||
**Lichte pil**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Gebruik: Lichte-modus-CTA's (cookietoestemming, marketing)
|
||||
|
||||
**Omlijnd pil**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asymmetrisch voor icoon)
|
||||
- Radius: 9999px
|
||||
- Gebruik: Volgknoppen, secundaire acties
|
||||
|
||||
**Ronde afspeelknop**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (cirkel)
|
||||
- Gebruik: Afspelen/pauzebediening
|
||||
|
||||
### Kaarten & containers
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- Geen zichtbare randen op de meeste kaarten
|
||||
- Hover: lichte achtergrondverheldering
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` op verheven elementen
|
||||
|
||||
### Invoervelden
|
||||
- Zoekinvoer: achtergrond `#1f1f1f`, tekst `#ffffff`
|
||||
- Radius: 500px (pil)
|
||||
- Padding: 12px 96px 12px 48px (icoonbewust)
|
||||
- Focus: rand wordt `#000000`, outline `1px solid`
|
||||
|
||||
### Navigatie
|
||||
- Donkere zijbalk met SpotifyMixUI 14px gewicht 700 voor actief, 400 voor inactief
|
||||
- Gedempte kleur `#b3b3b3` voor inactieve items, `#ffffff` voor actief
|
||||
- Ronde icoónknoppen (50% radius)
|
||||
- Spotify-logo linksboven in groen
|
||||
|
||||
## 5. Lay-outprincipes
|
||||
|
||||
### Spatiëringssysteem
|
||||
- Basiseenheid: 8px
|
||||
- Schaal: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Raster & container
|
||||
- Zijbalk (vast) + hoofdcontentgebied
|
||||
- Rastergebaseerde album-/afspeellijstkaarten
|
||||
- Volledige breedte nu-afspelende balk onderaan
|
||||
- Responsief contentgebied vult de resterende ruimte
|
||||
|
||||
### Witruimtefilosofie
|
||||
- **Donkere compressie**: Spotify pakt content dicht — afspeellijstrasters, tracklijsten en navigatie zijn allemaal krap gespatieerd. De donkere achtergrond biedt visuele rust tussen elementen zonder dat grote tussenruimten nodig zijn.
|
||||
- **Contentdichtheid boven ademruimte**: Dit is een app, geen marketingsite. Elke pixel dient de luisterervaring.
|
||||
|
||||
### Afgeronde-hoekenschaal
|
||||
- Minimaal (2px): Badges, expliciete tags
|
||||
- Subtiel (4px): Invoervelden, kleine elementen
|
||||
- Standaard (6px): Albumhoescontainers, kaarten
|
||||
- Comfortabel (8px): Secties, dialoogvensters
|
||||
- Middel (10px–20px): Panelen, overlay-elementen
|
||||
- Groot (100px): Grote pilknoppen
|
||||
- Pil (500px): Primaire knoppen, zoekinvoer
|
||||
- Volledige pil (9999px): Navigatiepillen, zoeken
|
||||
- Cirkel (50%): Afspeelknoppen, avatars, iconen
|
||||
|
||||
## 6. Diepte & elevatie
|
||||
|
||||
| Niveau | Behandeling | Gebruik |
|
||||
|-------|-----------|-----|
|
||||
| Basis (Niveau 0) | Achtergrond `#121212` | Diepste laag, paginaachtergrond |
|
||||
| Oppervlak (Niveau 1) | `#181818` or `#1f1f1f` | Kaarten, zijbalk, containers |
|
||||
| Verheven (Niveau 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdownmenu's, hoverkaarten |
|
||||
| Dialoog (Niveau 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menu's |
|
||||
| Inset (rand) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Invoergranden |
|
||||
|
||||
**Schaduwfilosofie**: Spotify gebruikt opvallend zware schaduwen voor een donkere app. De schaduw met 0.5 dekking bij 24px vervaging creëert een dramatisch "zwevend in duisternis"-effect voor dialoogvensters en menu's, terwijl de 0.3 dekking bij 8px vervaging een subtielere kaartlift biedt. De unieke inset-rand-schaduwcombinatie op invoervelden creëert een verzonken, tastbare kwaliteit.
|
||||
|
||||
## 7. Wel en niet doen
|
||||
|
||||
### Wel doen
|
||||
- Gebruik bijna-zwarte achtergronden (`#121212`–`#1f1f1f`) — diepte door tintenvariatie
|
||||
- Pas Spotify-groen (`#1ed760`) alleen toe voor afspeelbediening, actieve staten en primaire CTA's
|
||||
- Gebruik de pilvorm (500px–9999px) voor alle knoppen — cirkel (50%) voor afspeelbediening
|
||||
- Pas hoofdletters + brede letterafstand (1.4px–2px) toe op knooplabels
|
||||
- Houd typografie compact (bereik 10px–24px) — dit is een app, geen magazine
|
||||
- Gebruik zware schaduwen (`0.3–0.5 dekking`) voor verheven elementen op donkere achtergronden
|
||||
- Laat de albumhoes kleur leveren — de UI zelf is achromatisch
|
||||
|
||||
### Niet doen
|
||||
- Gebruik Spotify-groen niet decoratief of als achtergrondkleur — het is uitsluitend functioneel
|
||||
- Gebruik geen lichte achtergronden voor primaire oppervlakken — de donkere onderdompeling is essentieel
|
||||
- Sla de pil-/cirkelgeometrie op knoppen niet over — vierkante knoppen breken de identiteit
|
||||
- Gebruik geen dunne/subtiele schaduwen — op donkere achtergronden moeten schaduwen zwaar zijn om zichtbaar te zijn
|
||||
- Voeg geen extra merkkleuren toe — groen + achromatische grijstinten vormen het volledige palet
|
||||
- Gebruik geen ruime regelafstanden — Spotify's typografie is compact en dicht
|
||||
- Stel geen onbewerkte grijze randen bloot — gebruik in plaats daarvan schaduw- of inset-randen
|
||||
|
||||
## 8. Responsief gedrag
|
||||
|
||||
### Breekpunten
|
||||
| Naam | Breedte | Belangrijkste wijzigingen |
|
||||
|------|-------|-------------|
|
||||
| Mobiel klein | <425px | Compact mobiel lay-out |
|
||||
| Mobiel | 425–576px | Standaard mobiel |
|
||||
| Tablet | 576–768px | 2-kolomsraster |
|
||||
| Tablet groot | 768–896px | Uitgebreid lay-out |
|
||||
| Desktop klein | 896–1024px | Zijbalk zichtbaar |
|
||||
| Desktop | 1024–1280px | Volledig desktopindeling |
|
||||
| Groot bureaublad | >1280px | Uitgebreid raster |
|
||||
|
||||
### Inklappingstrategie
|
||||
- Zijbalk: volledig → ingeklapt → verborgen
|
||||
- Albumraster: 5 kolommen → 3 → 2 → 1
|
||||
- Nu-afspelende balk: behouden op alle schermformaten
|
||||
- Zoeken: pilinvoer behouden, breedte past aan
|
||||
- Navigatie: zijbalk → onderste balk op mobiel
|
||||
|
||||
## 9. Agent-promptgids
|
||||
|
||||
### Snelle kleurverwijzing
|
||||
- Achtergrond: Bijna-zwart (`#121212`)
|
||||
- Oppervlak: Donkere kaart (`#181818`)
|
||||
- Tekst: Wit (`#ffffff`)
|
||||
- Secundaire tekst: Zilver (`#b3b3b3`)
|
||||
- Accent: Spotify-groen (`#1ed760`)
|
||||
- Rand: `#4d4d4d`
|
||||
- Fout: Negatief rood (`#f3727f`)
|
||||
|
||||
### Voorbeeldcomponentprompts
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Iteratiegids
|
||||
1. Begin met #121212 — alles bevindt zich in bijna-zwarte duisternis
|
||||
2. Spotify-groen alleen voor functionele markeringen (afspelen, actief, CTA)
|
||||
3. Maak alles een pil — 500px voor groot, 9999px voor klein, 50% voor cirkelvormig
|
||||
4. Hoofdletters + brede spatiëring op knoppen — de systematische labelstijl
|
||||
5. Zware schaduwen (0.3–0.5 dekking) voor elevatie — lichte schaduwen zijn onzichtbaar op donker
|
||||
6. De albumhoes levert alle kleur — de UI blijft achromatisch
|
||||
@@ -0,0 +1,249 @@
|
||||
# System Projektowania Inspirowany Spotify
|
||||
|
||||
> Kategoria: Media i Konsument
|
||||
> Streaming muzyczny. Intensywna zieleń na ciemnym tle, pogrubiona typografia, okładki albumów jako główne źródło koloru.
|
||||
|
||||
## 1. Motyw Wizualny i Atmosfera
|
||||
|
||||
Interfejs webowy Spotify to ciemny, wciągający odtwarzacz muzyczny, który otacza słuchacza niemal czarnym kokonem (`#121212`, `#181818`, `#1f1f1f`), w którym okładki albumów i treści stają się głównym źródłem koloru. Filozofia projektowania to „ciemność treści na pierwszym miejscu" — interfejs użytkownika ustępuje w cień, by muzyka, podcasty i playlisty mogły się wyróżnić. Każda powierzchnia jest odcieniem węgla, tworząc teatralne środowisko, w którym jedynym prawdziwym kolorem jest charakterystyczna Zieleń Spotify (`#1ed760`) oraz okładki albumów.
|
||||
|
||||
Typografia korzysta z fontów SpotifyMixUI i SpotifyMixUITitle — zastrzeżonych krojów z rodziny CircularSp (Circular firmy Lineto, dostosowany dla Spotify), z rozbudowanym zestawem czcionek zastępczych obejmującym fonty arabskie, hebrajskie, cyrylicę, grec, dewanagari i CJK, co odzwierciedla globalny zasięg Spotify. System typograficzny jest kompaktowy i funkcjonalny: 700 (pogrubiony) do wyróżnień i nawigacji, 600 (półpogrubiony) do drugorzędnych wyróżnień oraz 400 (zwykły) do treści. Przyciski stosują tekst pisany wielkimi literami z dodatnim odstępem między znakami (1,4px–2px), nadając im systematyczny, etykietowy charakter.
|
||||
|
||||
To, co wyróżnia Spotify, to geometria pigułek i kół. Główne przyciski mają promień 500px–9999px (pełna pigułka), okrągłe przyciski odtwarzania mają promień 50%, a pola wyszukiwania to pigułki 500px. W połączeniu z wyraźnymi cieniami (`rgba(0,0,0,0.5) 0px 8px 24px`) na uniesionych elementach i unikalną kombinacją cieniu obramowania wewnętrznego (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), efektem jest interfejs przypominający luksuriosowe urządzenie audio — dotykowy, zaokrąglony i stworzony do obsługi dotykiem.
|
||||
|
||||
**Kluczowe Cechy:**
|
||||
- Niemal czarny, wciągający ciemny motyw (`#121212`–`#1f1f1f`) — interfejs znika za treścią
|
||||
- Zieleń Spotify (`#1ed760`) jako jedyny akcent marki — nigdy dekoracyjny, zawsze funkcjonalny
|
||||
- Rodzina czcionek SpotifyMixUI/CircularSp z obsługą globalnych systemów pisma
|
||||
- Przyciski w kształcie pigułki (500px–9999px) i okrągłe elementy sterowania (50%) — zaokrąglone, zoptymalizowane pod dotyk
|
||||
- Etykiety przycisków pisane wielkimi literami z szerokim odstępem między znakami (1,4px–2px)
|
||||
- Wyraźne cienie na uniesionych elementach (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Kolory semantyczne: czerwony negatywny (`#f3727f`), pomarańczowy ostrzegawczy (`#ffa42b`), niebieski informacyjny (`#539df5`)
|
||||
- Okładki albumów jako główne źródło koloru — interfejs jest z założenia achromatyczny
|
||||
|
||||
## 2. Paleta Kolorów i Role
|
||||
|
||||
### Główna Marka
|
||||
- **Zieleń Spotify** (`#1ed760`): Główny akcent marki — przyciski odtwarzania, stany aktywne, CTA
|
||||
- **Niemal Czarny** (`#121212`): Najgłębsza powierzchnia tła
|
||||
- **Ciemna Powierzchnia** (`#181818`): Karty, kontenery, uniesione powierzchnie
|
||||
- **Średnio Ciemny** (`#1f1f1f`): Tła przycisków, interaktywne powierzchnie
|
||||
|
||||
### Tekst
|
||||
- **Biały** (`#ffffff`): `--text-base`, tekst główny
|
||||
- **Srebrny** (`#b3b3b3`): Tekst drugorzędny, wyciszone etykiety, nieaktywna nawigacja
|
||||
- **Niemal Biały** (`#cbcbcb`): Nieco jaśniejszy tekst drugorzędny
|
||||
- **Jasny** (`#fdfdfd`): Niemal czysty biały dla maksymalnego wyróżnienia
|
||||
|
||||
### Semantyczne
|
||||
- **Czerwony Negatywny** (`#f3727f`): `--text-negative`, stany błędów
|
||||
- **Pomarańczowy Ostrzegawczy** (`#ffa42b`): `--text-warning`, stany ostrzeżeń
|
||||
- **Niebieski Informacyjny** (`#539df5`): `--text-announcement`, stany informacyjne
|
||||
|
||||
### Powierzchnie i Obramowania
|
||||
- **Ciemna Karta** (`#252525`): Uniesiona powierzchnia karty
|
||||
- **Średnia Karta** (`#272727`): Alternatywna powierzchnia karty
|
||||
- **Szare Obramowanie** (`#4d4d4d`): Obramowania przycisków na ciemnym tle
|
||||
- **Jasne Obramowanie** (`#7c7c7c`): Obramowania przycisków z konturem, wyciszone linki
|
||||
- **Separator** (`#b3b3b3`): Linie podziału
|
||||
- **Jasna Powierzchnia** (`#eeeeee`): Przyciski trybu jasnego (rzadko stosowane)
|
||||
- **Obramowanie w Zieleni Spotify** (`#1db954`): Wariant akcentu zielonego obramowania
|
||||
|
||||
### Cienie
|
||||
- **Wyraźny** (`rgba(0,0,0,0.5) 0px 8px 24px`): Okna dialogowe, menu, uniesione panele
|
||||
- **Średni** (`rgba(0,0,0,0.3) 0px 8px 8px`): Karty, rozwijane listy
|
||||
- **Wewnętrzne Obramowanie** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Kombinacja cień–obramowanie dla pól wejściowych
|
||||
|
||||
## 3. Zasady Typografii
|
||||
|
||||
### Rodziny Czcionek
|
||||
- **Tytuł**: `SpotifyMixUITitle`, czcionki zastępcze: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **UI / Treść**: `SpotifyMixUI`, ten sam zestaw czcionek zastępczych
|
||||
|
||||
### Hierarchia
|
||||
|
||||
| Rola | Czcionka | Rozmiar | Grubość | Wysokość linii | Odstęp liter | Uwagi |
|
||||
|------|----------|---------|---------|----------------|--------------|-------|
|
||||
| Tytuł sekcji | SpotifyMixUITitle | 24px (1.50rem) | 700 | normalny | normalny | Pogrubiony nagłówek |
|
||||
| Nagłówek wyróżniony | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (ciasny) | normalny | Półpogrubione nagłówki sekcji |
|
||||
| Treść pogrubiona | SpotifyMixUI | 16px (1.00rem) | 700 | normalny | normalny | Wyróżniony tekst |
|
||||
| Treść | SpotifyMixUI | 16px (1.00rem) | 400 | normalny | normalny | Standardowa treść |
|
||||
| Przycisk wielkie litery | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (ciasny) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Przycisk | SpotifyMixUI | 14px (0.88rem) | 700 | normalny | 0.14px | Standardowy przycisk |
|
||||
| Nawigacja pogrubiona | SpotifyMixUI | 14px (0.88rem) | 700 | normalny | normalny | Nawigacja |
|
||||
| Nawigacja | SpotifyMixUI | 14px (0.88rem) | 400 | normalny | normalny | Nieaktywna nawigacja |
|
||||
| Podpis pogrubiony | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normalny | Pogrubione metadane |
|
||||
| Podpis | SpotifyMixUI | 14px (0.88rem) | 400 | normalny | normalny | Metadane |
|
||||
| Mały pogrubiony | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normalny | Tagi, liczniki |
|
||||
| Mały | SpotifyMixUI | 12px (0.75rem) | 400 | normalny | normalny | Drobny druk |
|
||||
| Znacznik | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normalny | `text-transform: capitalize` |
|
||||
| Mikro | SpotifyMixUI | 10px (0.63rem) | 400 | normalny | normalny | Najmniejszy tekst |
|
||||
|
||||
### Zasady
|
||||
- **Dychotomia pogrubiony/zwykły**: Większość tekstu ma grubość 700 (pogrubiony) lub 400 (zwykły), a 600 stosowany jest oszczędnie. Tworzy to wyraźną hierarchię wizualną przez kontrast grubości, a nie rozmiarów.
|
||||
- **Wielkie litery na przyciskach jako system**: Etykiety przycisków stosują wielkie litery + szeroki odstęp między znakami (1,4px–2px), nadając im systematyczny, „etykietowy" głos odróżniający się od tekstu treści.
|
||||
- **Kompaktowe rozmiary**: Zakres to 10px–24px — węższy niż w większości systemów. Typografia Spotify jest kompaktowa i funkcjonalna, zaprojektowana do skanowania playlist, nie czytania artykułów.
|
||||
- **Obsługa globalnych systemów pisma**: Rozbudowany zestaw czcionek zastępczych (arabski, hebrajski, cyrylica, grecki, dewanagari, CJK) odzwierciedla zasięg Spotify obejmujący ponad 180 rynków.
|
||||
|
||||
## 4. Style Komponentów
|
||||
|
||||
### Przyciski
|
||||
|
||||
**Ciemna Pigułka**
|
||||
- Tło: `#1f1f1f`
|
||||
- Tekst: `#ffffff` lub `#b3b3b3`
|
||||
- Wypełnienie: 8px 16px
|
||||
- Promień: 9999px (pełna pigułka)
|
||||
- Zastosowanie: Pigułki nawigacyjne, drugorzędne akcje
|
||||
|
||||
**Duża Ciemna Pigułka**
|
||||
- Tło: `#181818`
|
||||
- Tekst: `#ffffff`
|
||||
- Wypełnienie: 0px 43px
|
||||
- Promień: 500px
|
||||
- Zastosowanie: Główne przyciski nawigacji aplikacji
|
||||
|
||||
**Jasna Pigułka**
|
||||
- Tło: `#eeeeee`
|
||||
- Tekst: `#181818`
|
||||
- Promień: 500px
|
||||
- Zastosowanie: CTA trybu jasnego (zgoda na pliki cookie, marketing)
|
||||
|
||||
**Konturowa Pigułka**
|
||||
- Tło: przezroczyste
|
||||
- Tekst: `#ffffff`
|
||||
- Obramowanie: `1px solid #7c7c7c`
|
||||
- Wypełnienie: 4px 16px 4px 36px (asymetryczne dla ikony)
|
||||
- Promień: 9999px
|
||||
- Zastosowanie: Przyciski obserwowania, drugorzędne akcje
|
||||
|
||||
**Okrągły Odtwarzacz**
|
||||
- Tło: `#1f1f1f`
|
||||
- Tekst: `#ffffff`
|
||||
- Wypełnienie: 12px
|
||||
- Promień: 50% (okrąg)
|
||||
- Zastosowanie: Elementy sterowania odtwarzaniem/pauzą
|
||||
|
||||
### Karty i Kontenery
|
||||
- Tło: `#181818` lub `#1f1f1f`
|
||||
- Promień: 6px–8px
|
||||
- Brak widocznych obramowań na większości kart
|
||||
- Najechanie: niewielkie rozjaśnienie tła
|
||||
- Cień: `rgba(0,0,0,0.3) 0px 8px 8px` na uniesionych elementach
|
||||
|
||||
### Pola Wejściowe
|
||||
- Pole wyszukiwania: tło `#1f1f1f`, tekst `#ffffff`
|
||||
- Promień: 500px (pigułka)
|
||||
- Wypełnienie: 12px 96px 12px 48px (z uwzględnieniem ikony)
|
||||
- Fokus: obramowanie zmienia się na `#000000`, kontur `1px solid`
|
||||
|
||||
### Nawigacja
|
||||
- Ciemny pasek boczny ze SpotifyMixUI 14px, grubość 700 dla aktywnych i 400 dla nieaktywnych
|
||||
- `#b3b3b3` wyciszony kolor dla nieaktywnych elementów, `#ffffff` dla aktywnych
|
||||
- Okrągłe przyciski ikonowe (promień 50%)
|
||||
- Logo Spotify w lewym górnym rogu w kolorze zielonym
|
||||
|
||||
## 5. Zasady Układu
|
||||
|
||||
### System Odstępów
|
||||
- Jednostka bazowa: 8px
|
||||
- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Siatka i Kontener
|
||||
- Pasek boczny (stały) + główny obszar treści
|
||||
- Karty albumów/playlist oparte na siatce
|
||||
- Pasek aktualnie odtwarzanego na pełną szerokość u dołu
|
||||
- Responsywny obszar treści wypełniający pozostałą przestrzeń
|
||||
|
||||
### Filozofia Białej Przestrzeni
|
||||
- **Ciemna kompresja**: Spotify zagęszcza treści — siatki playlist, listy utworów i nawigacja są ciasno rozmieszczone. Ciemne tło zapewnia wizualny odpoczynek między elementami bez konieczności stosowania dużych odstępów.
|
||||
- **Gęstość treści zamiast oddechu**: To aplikacja, nie strona marketingowa. Każdy piksel służy doświadczeniu słuchania.
|
||||
|
||||
### Skala Promieni Narożników
|
||||
- Minimalny (2px): Znaczniki, tagi eksplicytne
|
||||
- Subtelny (4px): Pola wejściowe, małe elementy
|
||||
- Standardowy (6px): Kontenery okładek albumów, karty
|
||||
- Komfortowy (8px): Sekcje, okna dialogowe
|
||||
- Średni (10px–20px): Panele, elementy nakładkowe
|
||||
- Duży (100px): Duże przyciski w kształcie pigułki
|
||||
- Pigułka (500px): Główne przyciski, pole wyszukiwania
|
||||
- Pełna Pigułka (9999px): Pigułki nawigacyjne, wyszukiwanie
|
||||
- Koło (50%): Przyciski odtwarzania, awatary, ikony
|
||||
|
||||
## 6. Głębia i Uniesienie
|
||||
|
||||
| Poziom | Zastosowanie | Użycie |
|
||||
|--------|-------------|--------|
|
||||
| Baza (Poziom 0) | Tło `#121212` | Najgłębsza warstwa, tło strony |
|
||||
| Powierzchnia (Poziom 1) | `#181818` lub `#1f1f1f` | Karty, pasek boczny, kontenery |
|
||||
| Uniesiony (Poziom 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Rozwijane menu, karty po najechaniu |
|
||||
| Okno Dialogowe (Poziom 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modale, nakładki, menu |
|
||||
| Wewnętrzny (Obramowanie) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Obramowania pól wejściowych |
|
||||
|
||||
**Filozofia Cieni**: Spotify stosuje wyjątkowo wyraźne cienie jak na aplikację z ciemnym motywem. Cień o kryciu 0,5 i rozmyciu 24px tworzy dramatyczny efekt „unoszenia się w ciemności" dla okien dialogowych i menu, podczas gdy krycie 0,3 i rozmycie 8px zapewnia subtelniejsze uniesienie kart. Unikalna kombinacja wewnętrznego cienia obramowania w polach wejściowych nadaje im wgłębiony, dotykowy charakter.
|
||||
|
||||
## 7. Należy i Nie Należy
|
||||
|
||||
### Należy
|
||||
- Używać niemal czarnych teł (`#121212`–`#1f1f1f`) — głębia przez wariacje odcienia
|
||||
- Stosować Zieleń Spotify (`#1ed760`) wyłącznie do elementów sterowania odtwarzaniem, stanów aktywnych i głównych CTA
|
||||
- Używać kształtu pigułki (500px–9999px) dla wszystkich przycisków — okrągłego (50%) dla elementów sterowania odtwarzaniem
|
||||
- Stosować wielkie litery + szeroki odstęp między znakami (1,4px–2px) na etykietach przycisków
|
||||
- Utrzymywać typografię kompaktową (zakres 10px–24px) — to aplikacja, nie magazyn
|
||||
- Używać wyraźnych cieni (krycie 0,3–0,5) dla uniesionych elementów na ciemnym tle
|
||||
- Pozwolić okładkom albumów dostarczać koloru — sam interfejs jest achromatyczny
|
||||
|
||||
### Nie Należy
|
||||
- Nie używać Zieleni Spotify dekoracyjnie ani na tłach — służy wyłącznie funkcjom
|
||||
- Nie używać jasnych teł dla głównych powierzchni — ciemne zanurzenie jest kluczowe
|
||||
- Nie pomijać geometrii pigułek/kół na przyciskach — kwadratowe przyciski niszczą tożsamość marki
|
||||
- Nie używać cienkich/subtelnych cieni — na ciemnym tle cienie muszą być wyraźne, by były widoczne
|
||||
- Nie dodawać dodatkowych kolorów marki — zieleń + achromatyczne szarości to kompletna paleta
|
||||
- Nie używać luźnych wysokości linii — typografia Spotify jest kompaktowa i gęsta
|
||||
- Nie eksponować surowych szarych obramowań — zamiast tego używać obramowań opartych na cieniach lub wewnętrznych
|
||||
|
||||
## 8. Zachowanie Responsywne
|
||||
|
||||
### Punkty Przełamania
|
||||
| Nazwa | Szerokość | Kluczowe Zmiany |
|
||||
|-------|-----------|-----------------|
|
||||
| Mały Mobilny | <425px | Kompaktowy układ mobilny |
|
||||
| Mobilny | 425–576px | Standardowy mobilny |
|
||||
| Tablet | 576–768px | Siatka 2-kolumnowa |
|
||||
| Duży Tablet | 768–896px | Rozszerzony układ |
|
||||
| Mały Desktop | 896–1024px | Widoczny pasek boczny |
|
||||
| Desktop | 1024–1280px | Pełny układ desktopowy |
|
||||
| Duży Desktop | >1280px | Rozszerzona siatka |
|
||||
|
||||
### Strategia Składania
|
||||
- Pasek boczny: pełny → zwinięty → ukryty
|
||||
- Siatka albumów: 5 kolumn → 3 → 2 → 1
|
||||
- Pasek aktualnie odtwarzanego: zachowany we wszystkich rozmiarach
|
||||
- Wyszukiwanie: pole pigułkowe zachowane, szerokość dostosowywana
|
||||
- Nawigacja: pasek boczny → dolny pasek na urządzeniach mobilnych
|
||||
|
||||
## 9. Przewodnik po Promptach Agenta
|
||||
|
||||
### Szybka Paleta Kolorów
|
||||
- Tło: Niemal Czarny (`#121212`)
|
||||
- Powierzchnia: Ciemna Karta (`#181818`)
|
||||
- Tekst: Biały (`#ffffff`)
|
||||
- Tekst drugorzędny: Srebrny (`#b3b3b3`)
|
||||
- Akcent: Zieleń Spotify (`#1ed760`)
|
||||
- Obramowanie: `#4d4d4d`
|
||||
- Błąd: Czerwony Negatywny (`#f3727f`)
|
||||
|
||||
### Przykładowe Prompty do Komponentów
|
||||
- "Utwórz ciemną kartę: tło #181818, promień 8px. Tytuł 16px SpotifyMixUI grubość 700, biały tekst. Podtytuł 14px grubość 400, #b3b3b3. Cień rgba(0,0,0,0.3) 0px 8px 8px po najechaniu."
|
||||
- "Zaprojektuj przycisk pigułkę: tło #1f1f1f, biały tekst, promień 9999px, wypełnienie 8px 16px. SpotifyMixUI 14px grubość 700, wielkie litery, odstęp między znakami 1.4px."
|
||||
- "Zbuduj okrągły przycisk odtwarzania: tło Zieleń Spotify (#1ed760), ikona #000000, promień 50%, wypełnienie 12px."
|
||||
- "Utwórz pole wyszukiwania: tło #1f1f1f, biały tekst, promień 500px, wypełnienie 12px 48px. Wewnętrzne obramowanie: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Zaprojektuj nawigacyjny pasek boczny: tło #121212. Aktywne elementy: 14px grubość 700, biały. Nieaktywne: 14px grubość 400, #b3b3b3."
|
||||
|
||||
### Przewodnik po Iteracjach
|
||||
1. Zacznij od #121212 — wszystko żyje w niemal czarnej ciemności
|
||||
2. Zieleń Spotify tylko do funkcjonalnych wyróżnień (odtwarzanie, aktywne, CTA)
|
||||
3. Pigułkuj wszystko — 500px dla dużych, 9999px dla małych, 50% dla okrągłych
|
||||
4. Wielkie litery + szeroki tracking na przyciskach — systematyczny głos etykiety
|
||||
5. Wyraźne cienie (krycie 0,3–0,5) do uniesienia — jasne cienie są niewidoczne na ciemnym tle
|
||||
6. Okładki albumów dostarczają całego koloru — interfejs pozostaje achromatyczny
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspirado no Spotify
|
||||
|
||||
> Category: Mídia & Consumidor
|
||||
> Streaming de música. Verde vibrante sobre fundo escuro, tipografia marcante, guiado pela arte dos álbuns.
|
||||
|
||||
## 1. Tema Visual & Atmosfera
|
||||
|
||||
A interface web do Spotify é um player de música escuro e imersivo que envolve os ouvintes em um casulo quase negro (`#121212`, `#181818`, `#1f1f1f`), onde a arte dos álbuns e o conteúdo se tornam a principal fonte de cor. A filosofia de design é "escuridão com o conteúdo em primeiro lugar" — a UI recua para as sombras para que a música, os podcasts e as playlists possam brilhar. Cada superfície é um tom de carvão, criando um ambiente semelhante a um cinema onde a única cor real vem do icônico Spotify Green (`#1ed760`) e da própria arte dos álbuns.
|
||||
|
||||
A tipografia usa SpotifyMixUI e SpotifyMixUITitle — fontes proprietárias da família CircularSp (Circular da Lineto, personalizada para o Spotify) com uma ampla pilha de fallback que inclui fontes árabes, hebraicas, cirílicas, gregas, devanágaris e CJK, refletindo o alcance global do Spotify. O sistema tipográfico é compacto e funcional: 700 (bold) para ênfase e navegação, 600 (semibold) para ênfase secundária e 400 (regular) para o corpo. Os botões usam maiúsculas com espaçamento positivo entre letras (1.4px–2px) para uma qualidade sistemática e semelhante a rótulos.
|
||||
|
||||
O que distingue o Spotify é sua geometria de pílulas e círculos. Os botões primários usam raio de 500px–9999px (pílula completa), os botões circulares de play usam raio de 50% e os campos de busca são pílulas de 500px. Combinados com sombras pesadas (`rgba(0,0,0,0.5) 0px 8px 24px`) em elementos elevados e uma combinação única de inset border-shadow (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), o resultado é uma interface que parece um dispositivo de áudio premium — tátil, arredondada e construída para o toque.
|
||||
|
||||
**Características Principais:**
|
||||
- Tema escuro e imersivo quase negro (`#121212`–`#1f1f1f`) — a UI desaparece atrás do conteúdo
|
||||
- Spotify Green (`#1ed760`) como único destaque da marca — nunca decorativo, sempre funcional
|
||||
- Família de fontes SpotifyMixUI/CircularSp com suporte a scripts globais
|
||||
- Botões em pílula (500px–9999px) e controles circulares (50%) — arredondados, otimizados para toque
|
||||
- Rótulos de botões em maiúsculas com espaçamento amplo entre letras (1.4px–2px)
|
||||
- Sombras pesadas em elementos elevados (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Cores semânticas: vermelho negativo (`#f3727f`), laranja de aviso (`#ffa42b`), azul de anúncio (`#539df5`)
|
||||
- Arte dos álbuns como fonte primária de cor — a UI é acromática por design
|
||||
|
||||
## 2. Paleta de Cores & Funções
|
||||
|
||||
### Marca Principal
|
||||
- **Spotify Green** (`#1ed760`): Destaque principal da marca — botões de play, estados ativos, CTAs
|
||||
- **Near Black** (`#121212`): Superfície de fundo mais profunda
|
||||
- **Dark Surface** (`#181818`): Cards, contêineres, superfícies elevadas
|
||||
- **Mid Dark** (`#1f1f1f`): Fundos de botões, superfícies interativas
|
||||
|
||||
### Texto
|
||||
- **White** (`#ffffff`): `--text-base`, texto principal
|
||||
- **Silver** (`#b3b3b3`): Texto secundário, rótulos silenciados, navegação inativa
|
||||
- **Near White** (`#cbcbcb`): Texto secundário ligeiramente mais brilhante
|
||||
- **Light** (`#fdfdfd`): Quase branco puro para ênfase máxima
|
||||
|
||||
### Semântico
|
||||
- **Negative Red** (`#f3727f`): `--text-negative`, estados de erro
|
||||
- **Warning Orange** (`#ffa42b`): `--text-warning`, estados de aviso
|
||||
- **Announcement Blue** (`#539df5`): `--text-announcement`, estados informativos
|
||||
|
||||
### Superfície & Borda
|
||||
- **Dark Card** (`#252525`): Superfície de card elevado
|
||||
- **Mid Card** (`#272727`): Superfície alternativa de card
|
||||
- **Border Gray** (`#4d4d4d`): Bordas de botões sobre fundo escuro
|
||||
- **Light Border** (`#7c7c7c`): Bordas de botões com contorno, links silenciados
|
||||
- **Separator** (`#b3b3b3`): Linhas divisórias
|
||||
- **Light Surface** (`#eeeeee`): Botões em modo claro (uso raro)
|
||||
- **Spotify Green Border** (`#1db954`): Variante de borda com destaque verde
|
||||
|
||||
### Sombras
|
||||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Diálogos, menus, painéis elevados
|
||||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns
|
||||
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Combinação de borda e sombra para inputs
|
||||
|
||||
## 3. Regras de Tipografia
|
||||
|
||||
### Famílias de Fontes
|
||||
- **Título**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **UI / Corpo**: `SpotifyMixUI`, mesma pilha de fallback
|
||||
|
||||
### Hierarquia
|
||||
|
||||
| Função | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento de Letras | Observações |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Título de Seção | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Peso bold para título |
|
||||
| Cabeçalho de Destaque | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (compacto) | normal | Cabeçalhos de seção semibold |
|
||||
| Corpo Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Texto enfatizado |
|
||||
| Corpo | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Corpo padrão |
|
||||
| Botão Maiúsculas | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (compacto) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Botão | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Botão padrão |
|
||||
| Link de Nav Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navegação |
|
||||
| Link de Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Nav inativa |
|
||||
| Legenda Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadados em bold |
|
||||
| Legenda | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadados |
|
||||
| Pequeno Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, contagens |
|
||||
| Pequeno | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Letras miúdas |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Texto mínimo |
|
||||
|
||||
### Princípios
|
||||
- **Binário bold/regular**: A maior parte do texto é 700 (bold) ou 400 (regular), com 600 usado com moderação. Isso cria uma hierarquia visual clara por contraste de peso, não por variação de tamanho.
|
||||
- **Botões em maiúsculas como sistema**: Rótulos de botões usam maiúsculas + espaçamento amplo entre letras (1.4px–2px), criando uma "voz de rótulo" sistemática, distinta do texto de conteúdo.
|
||||
- **Tamanho compacto**: O intervalo é de 10px–24px — mais estreito do que a maioria dos sistemas. A tipografia do Spotify é compacta e funcional, projetada para percorrer playlists, não para ler artigos.
|
||||
- **Suporte a scripts globais**: A ampla pilha de fallback (árabe, hebraico, cirílico, grego, devanágari, CJK) reflete o alcance do Spotify em mais de 180 mercados.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botões
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (pílula completa)
|
||||
- Uso: Pílulas de navegação, ações secundárias
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Uso: Botões de navegação principal do app
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Uso: CTAs em modo claro (consentimento de cookies, marketing)
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (assimétrico para ícone)
|
||||
- Radius: 9999px
|
||||
- Uso: Botões de seguir, ações secundárias
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (círculo)
|
||||
- Uso: Controles de play/pause
|
||||
|
||||
### Cards & Contêineres
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- Sem bordas visíveis na maioria dos cards
|
||||
- Hover: leve clareamento do background
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` nos elevados
|
||||
|
||||
### Inputs
|
||||
- Input de busca: background `#1f1f1f`, texto `#ffffff`
|
||||
- Radius: 500px (pílula)
|
||||
- Padding: 12px 96px 12px 48px (considerando ícone)
|
||||
- Focus: borda se torna `#000000`, outline `1px solid`
|
||||
|
||||
### Navegação
|
||||
- Sidebar escura com SpotifyMixUI 14px peso 700 para ativo, 400 para inativo
|
||||
- Cor silenciada `#b3b3b3` para itens inativos, `#ffffff` para ativos
|
||||
- Botões de ícone circulares (raio 50%)
|
||||
- Logo do Spotify no canto superior esquerdo em verde
|
||||
|
||||
## 5. Princípios de Layout
|
||||
|
||||
### Sistema de Espaçamento
|
||||
- Unidade base: 8px
|
||||
- Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Grade & Contêiner
|
||||
- Sidebar (fixa) + área de conteúdo principal
|
||||
- Cards de álbuns/playlists em grade
|
||||
- Barra de reprodução atual em largura total na parte inferior
|
||||
- Área de conteúdo responsiva preenche o espaço restante
|
||||
|
||||
### Filosofia de Espaço em Branco
|
||||
- **Compressão escura**: O Spotify empacota o conteúdo de forma densa — grades de playlists, listas de faixas e navegação têm espaçamento apertado. O fundo escuro proporciona descanso visual entre os elementos sem precisar de grandes espaços.
|
||||
- **Densidade de conteúdo em vez de respiro**: Este é um app, não um site de marketing. Cada pixel serve à experiência de escuta.
|
||||
|
||||
### Escala de Border Radius
|
||||
- Mínimo (2px): Badges, tags explícitas
|
||||
- Sutil (4px): Inputs, elementos pequenos
|
||||
- Padrão (6px): Contêineres de arte de álbum, cards
|
||||
- Confortável (8px): Seções, diálogos
|
||||
- Médio (10px–20px): Painéis, elementos de overlay
|
||||
- Grande (100px): Botões grandes em pílula
|
||||
- Pílula (500px): Botões primários, input de busca
|
||||
- Pílula Completa (9999px): Pílulas de navegação, busca
|
||||
- Círculo (50%): Botões de play, avatares, ícones
|
||||
|
||||
## 6. Profundidade & Elevação
|
||||
|
||||
| Nível | Tratamento | Uso |
|
||||
|-------|-----------|-----|
|
||||
| Base (Nível 0) | Background `#121212` | Camada mais profunda, fundo da página |
|
||||
| Superfície (Nível 1) | `#181818` or `#1f1f1f` | Cards, sidebar, contêineres |
|
||||
| Elevado (Nível 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menus dropdown, hover cards |
|
||||
| Diálogo (Nível 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modais, overlays, menus |
|
||||
| Inset (Borda) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Bordas de inputs |
|
||||
|
||||
**Filosofia de Sombras**: O Spotify usa sombras notavelmente pesadas para um app com tema escuro. A sombra de opacidade 0.5 com blur de 24px cria um efeito dramático de "flutuando na escuridão" para diálogos e menus, enquanto a opacidade 0.3 com blur de 8px proporciona uma elevação mais sutil para cards. A combinação única de inset border-shadow nos inputs cria uma qualidade entalhada e tátil.
|
||||
|
||||
## 7. O Que Fazer e Não Fazer
|
||||
|
||||
### Faça
|
||||
- Use fundos quase negros (`#121212`–`#1f1f1f`) — profundidade por variação de tonalidade
|
||||
- Aplique Spotify Green (`#1ed760`) apenas em controles de play, estados ativos e CTAs primários
|
||||
- Use o formato pílula (500px–9999px) em todos os botões — circular (50%) para controles de play
|
||||
- Aplique maiúsculas + espaçamento amplo entre letras (1.4px–2px) nos rótulos de botões
|
||||
- Mantenha a tipografia compacta (intervalo de 10px–24px) — isto é um app, não uma revista
|
||||
- Use sombras pesadas (`opacidade 0.3–0.5`) para elementos elevados em fundos escuros
|
||||
- Deixe a arte dos álbuns fornecer cor — a UI em si é acromática
|
||||
|
||||
### Não Faça
|
||||
- Não use Spotify Green decorativamente ou em fundos — ele é apenas funcional
|
||||
- Não use fundos claros para superfícies primárias — a imersão no escuro é essencial
|
||||
- Não ignore a geometria de pílula/círculo nos botões — botões quadrados quebram a identidade
|
||||
- Não use sombras finas/sutis — em fundos escuros, as sombras precisam ser pesadas para serem visíveis
|
||||
- Não adicione cores de marca adicionais — verde + cinzas acromáticos é a paleta completa
|
||||
- Não use alturas de linha relaxadas — a tipografia do Spotify é compacta e densa
|
||||
- Não exponha bordas cinzas brutas — use bordas baseadas em sombra ou inset em vez disso
|
||||
|
||||
## 8. Comportamento Responsivo
|
||||
|
||||
### Breakpoints
|
||||
| Nome | Largura | Principais Mudanças |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Layout mobile compacto |
|
||||
| Mobile | 425–576px | Mobile padrão |
|
||||
| Tablet | 576–768px | Grade de 2 colunas |
|
||||
| Tablet Large | 768–896px | Layout expandido |
|
||||
| Desktop Small | 896–1024px | Sidebar visível |
|
||||
| Desktop | 1024–1280px | Layout desktop completo |
|
||||
| Large Desktop | >1280px | Grade expandida |
|
||||
|
||||
### Estratégia de Colapso
|
||||
- Sidebar: completa → recolhida → oculta
|
||||
- Grade de álbuns: 5 colunas → 3 → 2 → 1
|
||||
- Barra de reprodução atual: mantida em todos os tamanhos
|
||||
- Busca: input em pílula mantido, largura se ajusta
|
||||
- Navegação: sidebar → barra inferior no mobile
|
||||
|
||||
## 9. Guia de Prompts para Agentes
|
||||
|
||||
### Referência Rápida de Cores
|
||||
- Background: Near Black (`#121212`)
|
||||
- Surface: Dark Card (`#181818`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Texto secundário: Silver (`#b3b3b3`)
|
||||
- Destaque: Spotify Green (`#1ed760`)
|
||||
- Border: `#4d4d4d`
|
||||
- Erro: Negative Red (`#f3727f`)
|
||||
|
||||
### Exemplos de Prompts de Componentes
|
||||
- "Crie um card escuro: background #181818, raio 8px. Título em 16px SpotifyMixUI peso 700, texto branco. Subtítulo em 14px peso 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px no hover."
|
||||
- "Crie um botão pílula: background #1f1f1f, texto branco, raio 9999px, padding 8px 16px. 14px SpotifyMixUI peso 700, maiúsculas, letter-spacing 1.4px."
|
||||
- "Crie um botão circular de play: background Spotify Green (#1ed760), ícone #000000, raio 50%, padding 12px."
|
||||
- "Crie um input de busca: background #1f1f1f, texto branco, raio 500px, padding 12px 48px. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Crie uma sidebar de navegação: background #121212. Itens ativos: 14px peso 700, branco. Inativos: 14px peso 400, #b3b3b3."
|
||||
|
||||
### Guia de Iteração
|
||||
1. Comece com #121212 — tudo vive na escuridão quase negra
|
||||
2. Spotify Green apenas para destaques funcionais (play, ativo, CTA)
|
||||
3. Tudo em pílula — 500px para grandes, 9999px para pequenos, 50% para circulares
|
||||
4. Maiúsculas + rastreamento amplo nos botões — a voz sistemática de rótulo
|
||||
5. Sombras pesadas (opacidade 0.3–0.5) para elevação — sombras leves são invisíveis no escuro
|
||||
6. A arte dos álbuns fornece toda a cor — a UI permanece acromática
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspired by Spotify
|
||||
|
||||
> Category: Медиа и потребительские сервисы
|
||||
> Музыкальный стриминг. Насыщенный зелёный на тёмном фоне, жирная типографика, обложки альбомов как главный источник цвета.
|
||||
|
||||
## 1. Визуальная тема и атмосфера
|
||||
|
||||
Веб-интерфейс Spotify — это тёмный, погружающий музыкальный плеер, окутывающий слушателя почти чёрным коконом (`#121212`, `#181818`, `#1f1f1f`), где обложки альбомов и контент становятся основным источником цвета. Философия дизайна — «контент в темноте» — UI уходит в тень, чтобы музыка, подкасты и плейлисты могли светиться. Каждая поверхность — оттенок тёмно-серого, создающий театральную среду, где единственный настоящий цвет исходит от культового Spotify Green (`#1ed760`) и самих обложек альбомов.
|
||||
|
||||
Типографика использует SpotifyMixUI и SpotifyMixUITitle — проприетарные шрифты из семейства CircularSp (Circular от Lineto, адаптированный для Spotify) с широким стеком запасных шрифтов, включающим арабский, иврит, кириллический, греческий, деванагари и CJK-шрифты — отражение глобального охвата Spotify. Система типографики компактна и функциональна: 700 (bold) — для акцентов и навигации, 600 (semibold) — для второстепенного выделения, 400 (regular) — для основного текста. Кнопки используют верхний регистр с положительным межбуквенным расстоянием (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`) получается интерфейс, ощущающийся как премиальное аудиоустройство — тактильный, округлый и созданный для касания.
|
||||
|
||||
**Ключевые характеристики:**
|
||||
- Погружающая тёмная тема почти чёрного оттенка (`#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
|
||||
- **Near Black** (`#121212`): Самая глубокая фоновая поверхность
|
||||
- **Dark Surface** (`#181818`): Карточки, контейнеры, приподнятые поверхности
|
||||
- **Mid Dark** (`#1f1f1f`): Фоны кнопок, интерактивные поверхности
|
||||
|
||||
### Текст
|
||||
- **White** (`#ffffff`): `--text-base`, основной текст
|
||||
- **Silver** (`#b3b3b3`): Вторичный текст, приглушённые метки, неактивная навигация
|
||||
- **Near White** (`#cbcbcb`): Немного более яркий вторичный текст
|
||||
- **Light** (`#fdfdfd`): Почти чисто-белый для максимального акцента
|
||||
|
||||
### Семантические
|
||||
- **Negative Red** (`#f3727f`): `--text-negative`, состояния ошибок
|
||||
- **Warning Orange** (`#ffa42b`): `--text-warning`, состояния предупреждений
|
||||
- **Announcement Blue** (`#539df5`): `--text-announcement`, информационные состояния
|
||||
|
||||
### Поверхности и рамки
|
||||
- **Dark Card** (`#252525`): Приподнятая поверхность карточки
|
||||
- **Mid Card** (`#272727`): Альтернативная поверхность карточки
|
||||
- **Border Gray** (`#4d4d4d`): Рамки кнопок на тёмном фоне
|
||||
- **Light Border** (`#7c7c7c`): Рамки кнопок с обводкой, приглушённые ссылки
|
||||
- **Separator** (`#b3b3b3`): Разделительные линии
|
||||
- **Light Surface** (`#eeeeee`): Кнопки в светлом режиме (редко)
|
||||
- **Spotify Green Border** (`#1db954`): Вариант зелёного акцентного бордера
|
||||
|
||||
### Тени
|
||||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Диалоги, меню, приподнятые панели
|
||||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Карточки, выпадающие списки
|
||||
- **Inset Border** (`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 (tight) | normal | Полужирные заголовки разделов |
|
||||
| Жирный основной текст | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Акцентированный текст |
|
||||
| Основной текст | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Стандартный текст |
|
||||
| Кнопка в верхнем регистре | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 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 (bold) или 400 (regular), 600 используется умеренно. Это создаёт чёткую визуальную иерархию через контраст насыщенности, а не вариацию размера.
|
||||
- **Кнопки в верхнем регистре как система**: Метки кнопок используют верхний регистр + широкое межбуквенное расстояние (1.4px–2px), создавая систематичный «лейбл»-голос, отличный от контентного текста.
|
||||
- **Компактность размеров**: Диапазон 10px–24px — уже, чем у большинства систем. Типографика Spotify компактна и функциональна, создана для просмотра плейлистов, а не чтения статей.
|
||||
- **Поддержка глобальных систем письма**: Обширный стек запасных шрифтов (арабский, иврит, кириллица, греческий, деванагари, CJK) отражает присутствие Spotify на 180+ рынках.
|
||||
|
||||
## 4. Стилизация компонентов
|
||||
|
||||
### Кнопки
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` или `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (полная «таблетка»)
|
||||
- Применение: навигационные «таблетки», второстепенные действия
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Применение: основные кнопки навигации приложения
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Применение: CTA в светлом режиме (согласие на куки, маркетинг)
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (асимметрично для иконки)
|
||||
- Radius: 9999px
|
||||
- Применение: кнопки подписки, второстепенные действия
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (круг)
|
||||
- Применение: элементы управления воспроизведением/паузой
|
||||
|
||||
### Карточки и контейнеры
|
||||
- Background: `#181818` или `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- На большинстве карточек видимые рамки отсутствуют
|
||||
- Hover: незначительное осветление фона
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` на приподнятых элементах
|
||||
|
||||
### Поля ввода
|
||||
- Поле поиска: фон `#1f1f1f`, текст `#ffffff`
|
||||
- Radius: 500px (таблетка)
|
||||
- Padding: 12px 96px 12px 48px (с учётом иконки)
|
||||
- Focus: рамка становится `#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` | Выпадающие меню, hover-карточки |
|
||||
| Диалог (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Модальные окна, оверлеи, меню |
|
||||
| Вставной (Border) | `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 opacity`) для приподнятых элементов на тёмных фонах
|
||||
- Позволять обложкам альбомов обеспечивать цвет — сам UI ахроматичен
|
||||
|
||||
### Не делать
|
||||
- Не использовать Spotify Green декоративно или в качестве фона — он только функциональный
|
||||
- Не использовать светлые фоны для основных поверхностей — тёмное погружение принципиально
|
||||
- Не пропускать геометрию «таблетки» и круга на кнопках — прямоугольные кнопки ломают идентичность
|
||||
- Не использовать тонкие/едва заметные тени — на тёмных фонах тени должны быть глубокими, чтобы быть видимыми
|
||||
- Не добавлять дополнительные фирменные цвета — зелёный + ахроматические серые — полная палитра
|
||||
- Не использовать свободные межстрочные интервалы — типографика Spotify компактна и плотна
|
||||
- Не показывать голые серые рамки — использовать рамки на основе теней или вставные рамки
|
||||
|
||||
## 8. Адаптивное поведение
|
||||
|
||||
### Точки перехода
|
||||
| Название | Ширина | Ключевые изменения |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Компактный мобильный макет |
|
||||
| Mobile | 425–576px | Стандартный мобильный |
|
||||
| Tablet | 576–768px | Двухколоночная сетка |
|
||||
| Tablet Large | 768–896px | Расширенный макет |
|
||||
| Desktop Small | 896–1024px | Боковая панель видна |
|
||||
| Desktop | 1024–1280px | Полный десктопный макет |
|
||||
| Large Desktop | >1280px | Расширенная сетка |
|
||||
|
||||
### Стратегия сворачивания
|
||||
- Боковая панель: полная → свёрнутая → скрытая
|
||||
- Сетка альбомов: 5 колонок → 3 → 2 → 1
|
||||
- Панель «сейчас играет»: сохраняется при любом размере
|
||||
- Поиск: поле-«таблетка» сохраняется, ширина регулируется
|
||||
- Навигация: боковая панель → нижняя панель на мобильных
|
||||
|
||||
## 9. Руководство для агентных промптов
|
||||
|
||||
### Быстрый справочник по цветам
|
||||
- Background: Near Black (`#121212`)
|
||||
- Surface: Dark Card (`#181818`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Secondary text: Silver (`#b3b3b3`)
|
||||
- Accent: Spotify Green (`#1ed760`)
|
||||
- Border: `#4d4d4d`
|
||||
- Error: Negative Red (`#f3727f`)
|
||||
|
||||
### Примеры промптов для компонентов
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Руководство по итерации
|
||||
1. Начните с #121212 — всё живёт в почти чёрной темноте
|
||||
2. Spotify Green только для функциональных акцентов (воспроизведение, активные состояния, CTA)
|
||||
3. Везде «таблетки» — 500px для крупных, 9999px для мелких, 50% для круглых
|
||||
4. Верхний регистр + широкий трекинг на кнопках — систематичный лейбл-голос
|
||||
5. Глубокие тени (0.3–0.5 opacity) для высоты — светлые тени невидимы на тёмном
|
||||
6. Обложки альбомов обеспечивают весь цвет — UI остаётся ахроматичным
|
||||
@@ -0,0 +1,249 @@
|
||||
# Spotify'dan İlham Alan Tasarım Sistemi
|
||||
|
||||
> Category: Medya ve Tüketici
|
||||
> Müzik akışı. Koyu zemin üzerinde canlı yeşil, kalın yazı tipi, albüm kapağı odaklı.
|
||||
|
||||
## 1. Görsel Tema ve Atmosfer
|
||||
|
||||
Spotify'ın web arayüzü, dinleyicileri neredeyse siyah bir koza (`#121212`, `#181818`, `#1f1f1f`) içinde saran koyu ve sürükleyici bir müzik oynatıcısıdır; burada albüm kapakları ve içerik rengin birincil kaynağı haline gelir. Tasarım felsefesi "içerik önce karanlık"tır — arayüz gölgeye çekilir, böylece müzik, podcast'ler ve çalma listeleri parlamaya başlar. Her yüzey bir kömür tonudur; bu sayede müziğin ikonik Spotify Yeşili (`#1ed760`) ve albüm kapağından gelen tek gerçek rengin parladığı tiyatro benzeri bir ortam yaratılır.
|
||||
|
||||
Yazı tipi sistemi SpotifyMixUI ve SpotifyMixUITitle'ı kullanır — Spotify için özelleştirilmiş CircularSp ailesinden (Lineto tarafından Circular, Spotify için uyarlanmıştır) özel fontlar; Arapça, İbranice, Kiril, Yunan, Devanagari ve CJK fontlarını içeren kapsamlı bir geri dönüş yığını ile birlikte Spotify'ın küresel erişimini yansıtır. Tür sistemi kompakt ve işlevseldir: vurgu ve navigasyon için 700 (kalın), ikincil vurgu için 600 (yarı kalın) ve gövde için 400 (normal). Düğmeler sistematik, etiket benzeri bir kalite için büyük harf ve pozitif harf aralığı (1.4px–2px) kullanır.
|
||||
|
||||
Spotify'ı ayırt eden özellik hap ve daire geometrisidir. Birincil düğmeler 500px–9999px yarıçap (tam hap), dairesel oynat düğmeleri %50 yarıçap ve arama girişleri 500px hap kullanır. Yükseltilmiş elementlerdeki ağır gölgeler (`rgba(0,0,0,0.5) 0px 8px 24px`) ve benzersiz iç içe geçmiş kenarlık-gölge kombinasyonu (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`) ile birlikte ortaya çıkan arayüz, premium bir ses cihazı gibi hissettirir — dokunsal, yuvarlak ve dokunuşa göre tasarlanmış.
|
||||
|
||||
**Temel Özellikler:**
|
||||
- Neredeyse siyah sürükleyici koyu tema (`#121212`–`#1f1f1f`) — arayüz içeriğin arkasına çekilir
|
||||
- Tekil marka aksanı olarak Spotify Yeşili (`#1ed760`) — hiçbir zaman dekoratif, her zaman işlevsel
|
||||
- Küresel yazı tipi desteğiyle SpotifyMixUI/CircularSp font ailesi
|
||||
- Hap düğmeler (500px–9999px) ve dairesel kontroller (%50) — yuvarlak, dokunuşa optimize
|
||||
- Geniş harf aralığıyla (1.4px–2px) büyük harf düğme etiketleri
|
||||
- Yükseltilmiş elementlerde ağır gölgeler (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Anlamsal renkler: negatif kırmızı (`#f3727f`), uyarı turuncusu (`#ffa42b`), duyuru mavisi (`#539df5`)
|
||||
- Birincil renk kaynağı olarak albüm kapağı — arayüz tasarım gereği akromatik
|
||||
|
||||
## 2. Renk Paleti ve Rolleri
|
||||
|
||||
### Birincil Marka
|
||||
- **Spotify Yeşili** (`#1ed760`): Birincil marka aksanı — oynat düğmeleri, aktif durumlar, harekete geçirici mesajlar
|
||||
- **Neredeyse Siyah** (`#121212`): En derin arka plan yüzeyi
|
||||
- **Koyu Yüzey** (`#181818`): Kartlar, konteynerler, yükseltilmiş yüzeyler
|
||||
- **Orta Koyu** (`#1f1f1f`): Düğme arka planları, etkileşimli yüzeyler
|
||||
|
||||
### Metin
|
||||
- **Beyaz** (`#ffffff`): `--text-base`, birincil metin
|
||||
- **Gümüş** (`#b3b3b3`): İkincil metin, soluk etiketler, pasif navigasyon
|
||||
- **Neredeyse Beyaz** (`#cbcbcb`): Biraz daha parlak ikincil metin
|
||||
- **Açık** (`#fdfdfd`): Maksimum vurgu için saf beyaza yakın
|
||||
|
||||
### Anlamsal
|
||||
- **Negatif Kırmızı** (`#f3727f`): `--text-negative`, hata durumları
|
||||
- **Uyarı Turuncusu** (`#ffa42b`): `--text-warning`, uyarı durumları
|
||||
- **Duyuru Mavisi** (`#539df5`): `--text-announcement`, bilgi durumları
|
||||
|
||||
### Yüzey ve Kenarlık
|
||||
- **Koyu Kart** (`#252525`): Yükseltilmiş kart yüzeyi
|
||||
- **Orta Kart** (`#272727`): Alternatif kart yüzeyi
|
||||
- **Kenarlık Grisi** (`#4d4d4d`): Koyu zemin üzerinde düğme kenarlıkları
|
||||
- **Açık Kenarlık** (`#7c7c7c`): Çerçeveli düğme kenarlıkları, soluk bağlantılar
|
||||
- **Ayırıcı** (`#b3b3b3`): Bölücü çizgiler
|
||||
- **Açık Yüzey** (`#eeeeee`): Açık mod düğmeleri (nadir)
|
||||
- **Spotify Yeşili Kenarlık** (`#1db954`): Yeşil aksan kenarlık varyantı
|
||||
|
||||
### Gölgeler
|
||||
- **Ağır** (`rgba(0,0,0,0.5) 0px 8px 24px`): Diyaloglar, menüler, yükseltilmiş paneller
|
||||
- **Orta** (`rgba(0,0,0,0.3) 0px 8px 8px`): Kartlar, açılır menüler
|
||||
- **İç Kenarlık** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Giriş kenarlık-gölge kombinasyonu
|
||||
|
||||
## 3. Tipografi Kuralları
|
||||
|
||||
### Font Aileleri
|
||||
- **Başlık**: `SpotifyMixUITitle`, geri dönüş seçenekleri: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **Arayüz / Gövde**: `SpotifyMixUI`, aynı geri dönüş yığını
|
||||
|
||||
### Hiyerarşi
|
||||
|
||||
| Rol | Font | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Bölüm Başlığı | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Kalın başlık ağırlığı |
|
||||
| Öne Çıkan Başlık | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (sıkı) | normal | Yarı kalın bölüm başlıkları |
|
||||
| Gövde Kalın | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Vurgulu metin |
|
||||
| Gövde | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standart gövde |
|
||||
| Büyük Harf Düğme | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (sıkı) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Düğme | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standart düğme |
|
||||
| Navigasyon Bağlantısı Kalın | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigasyon |
|
||||
| Navigasyon Bağlantısı | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Pasif navigasyon |
|
||||
| Altyazı Kalın | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Kalın meta verisi |
|
||||
| Altyazı | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Meta verisi |
|
||||
| Küçük Kalın | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Etiketler, sayımlar |
|
||||
| Küçük | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | İnce baskı |
|
||||
| Rozet | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Mikro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | En küçük metin |
|
||||
|
||||
### İlkeler
|
||||
- **Kalın/normal ikili**: Metnin büyük çoğunluğu ya 700 (kalın) ya da 400 (normal) olup 600 ölçülü biçimde kullanılır. Bu, boyut varyasyonu yerine ağırlık kontrastı aracılığıyla net bir görsel hiyerarşi yaratır.
|
||||
- **Sistem olarak büyük harf düğmeler**: Düğme etiketleri büyük harf ve geniş harf aralığı (1.4px–2px) kullanır; bu da içerik metninden farklı, sistematik bir "etiket" sesi oluşturur.
|
||||
- **Kompakt boyutlandırma**: Aralık 10px–24px — çoğu sistemden daha dar. Spotify'ın tipi kompakt ve işlevseldir; makale okumak için değil, çalma listelerini taramak için tasarlanmıştır.
|
||||
- **Küresel yazı tipi desteği**: Kapsamlı geri dönüş yığını (Arapça, İbranice, Kiril, Yunan, Devanagari, CJK) Spotify'ın 180'den fazla pazardaki erişimini yansıtır.
|
||||
|
||||
## 4. Bileşen Stilleri
|
||||
|
||||
### Düğmeler
|
||||
|
||||
**Koyu Hap**
|
||||
- Arka plan: `#1f1f1f`
|
||||
- Metin: `#ffffff` veya `#b3b3b3`
|
||||
- Dolgu: 8px 16px
|
||||
- Yarıçap: 9999px (tam hap)
|
||||
- Kullanım: Navigasyon hapları, ikincil eylemler
|
||||
|
||||
**Koyu Büyük Hap**
|
||||
- Arka plan: `#181818`
|
||||
- Metin: `#ffffff`
|
||||
- Dolgu: 0px 43px
|
||||
- Yarıçap: 500px
|
||||
- Kullanım: Birincil uygulama navigasyon düğmeleri
|
||||
|
||||
**Açık Hap**
|
||||
- Arka plan: `#eeeeee`
|
||||
- Metin: `#181818`
|
||||
- Yarıçap: 500px
|
||||
- Kullanım: Açık mod harekete geçirici mesajları (çerez onayı, pazarlama)
|
||||
|
||||
**Çerçeveli Hap**
|
||||
- Arka plan: şeffaf
|
||||
- Metin: `#ffffff`
|
||||
- Kenarlık: `1px solid #7c7c7c`
|
||||
- Dolgu: 4px 16px 4px 36px (simge için asimetrik)
|
||||
- Yarıçap: 9999px
|
||||
- Kullanım: Takip düğmeleri, ikincil eylemler
|
||||
|
||||
**Dairesel Oynat**
|
||||
- Arka plan: `#1f1f1f`
|
||||
- Metin: `#ffffff`
|
||||
- Dolgu: 12px
|
||||
- Yarıçap: %50 (daire)
|
||||
- Kullanım: Oynat/duraklat kontrolleri
|
||||
|
||||
### Kartlar ve Konteynerler
|
||||
- Arka plan: `#181818` veya `#1f1f1f`
|
||||
- Yarıçap: 6px–8px
|
||||
- Çoğu kartta görünür kenarlık yok
|
||||
- Üzerine gelince: hafif arka plan aydınlanması
|
||||
- Gölge: yükseltilmiş üzerinde `rgba(0,0,0,0.3) 0px 8px 8px`
|
||||
|
||||
### Girişler
|
||||
- Arama girişi: `#1f1f1f` arka plan, `#ffffff` metin
|
||||
- Yarıçap: 500px (hap)
|
||||
- Dolgu: 12px 96px 12px 48px (simge farkındalıklı)
|
||||
- Odak: kenarlık `#000000` olur, dış çizgi `1px solid`
|
||||
|
||||
### Navigasyon
|
||||
- Aktif için SpotifyMixUI 14px ağırlık 700, pasif için 400 ile koyu kenar çubuğu
|
||||
- Pasif öğeler için `#b3b3b3` soluk rengi, aktif için `#ffffff`
|
||||
- Dairesel simge düğmeleri (%50 yarıçap)
|
||||
- Sol üstte yeşil renkte Spotify logosu
|
||||
|
||||
## 5. Düzen İlkeleri
|
||||
|
||||
### Boşluk Sistemi
|
||||
- Temel birim: 8px
|
||||
- Ölçek: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Izgara ve Konteyner
|
||||
- Kenar çubuğu (sabit) + ana içerik alanı
|
||||
- Izgara tabanlı albüm/çalma listesi kartları
|
||||
- Altta tam genişlikte şu an çalıyor çubuğu
|
||||
- Kalan alanı dolduran duyarlı içerik alanı
|
||||
|
||||
### Beyaz Alan Felsefesi
|
||||
- **Koyu sıkıştırma**: Spotify içeriği yoğun bir şekilde paketler — çalma listesi ızgaraları, parça listeleri ve navigasyon sıkı bir şekilde yerleştirilmiştir. Koyu arka plan, büyük boşluklara gerek kalmadan öğeler arasında görsel dinlenme sağlar.
|
||||
- **Nefes alma alanı yerine içerik yoğunluğu**: Bu bir uygulama, pazarlama sitesi değil. Her piksel dinleme deneyimine hizmet eder.
|
||||
|
||||
### Köşe Yarıçapı Ölçeği
|
||||
- Minimal (2px): Rozetler, açık etiketler
|
||||
- İnce (4px): Girişler, küçük öğeler
|
||||
- Standart (6px): Albüm kapağı konteynerleri, kartlar
|
||||
- Rahat (8px): Bölümler, diyaloglar
|
||||
- Orta (10px–20px): Paneller, katman öğeleri
|
||||
- Büyük (100px): Büyük hap düğmeler
|
||||
- Hap (500px): Birincil düğmeler, arama girişi
|
||||
- Tam Hap (9999px): Navigasyon hapları, arama
|
||||
- Daire (%50): Oynat düğmeleri, avatarlar, simgeler
|
||||
|
||||
## 6. Derinlik ve Yükseklik
|
||||
|
||||
| Seviye | Uygulama | Kullanım |
|
||||
|-------|-----------|-----|
|
||||
| Taban (Seviye 0) | `#121212` arka plan | En derin katman, sayfa arka planı |
|
||||
| Yüzey (Seviye 1) | `#181818` veya `#1f1f1f` | Kartlar, kenar çubuğu, konteynerler |
|
||||
| Yükseltilmiş (Seviye 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Açılır menüler, üzerine gelince kartlar |
|
||||
| Diyalog (Seviye 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Kalıplar, katmanlar, menüler |
|
||||
| İç Kenarlık | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Giriş kenarlıkları |
|
||||
|
||||
**Gölge Felsefesi**: Spotify, koyu temalı bir uygulama için oldukça ağır gölgeler kullanır. 24px bulanıklıkta 0.5 opaklık gölgesi, diyaloglar ve menüler için dramatik bir "karanlıkta yüzme" etkisi yaratırken 8px bulanıklıkta 0.3 opaklık daha ince bir kart kaldırma sağlar. Girişlerdeki benzersiz iç kenarlık-gölge kombinasyonu içe gömülü, dokunsal bir kalite yaratır.
|
||||
|
||||
## 7. Yapılması ve Yapılmaması Gerekenler
|
||||
|
||||
### Yapılması Gerekenler
|
||||
- Neredeyse siyah arka planlar kullanın (`#121212`–`#1f1f1f`) — gölge varyasyonuyla derinlik
|
||||
- Spotify Yeşilini (`#1ed760`) yalnızca oynat kontrolleri, aktif durumlar ve birincil harekete geçirici mesajlar için uygulayın
|
||||
- Tüm düğmeler için hap şekli (500px–9999px) kullanın — oynat kontrolleri için dairesel (%50)
|
||||
- Düğme etiketlerine büyük harf ve geniş harf aralığı (1.4px–2px) uygulayın
|
||||
- Tipografiyi kompakt tutun (10px–24px aralığı) — bu bir uygulama, dergi değil
|
||||
- Koyu arka planlardaki yükseltilmiş öğeler için ağır gölgeler kullanın (0.3–0.5 opaklık)
|
||||
- Albüm kapağının renk sağlamasına izin verin — arayüzün kendisi akromatik
|
||||
|
||||
### Yapılmaması Gerekenler
|
||||
- Spotify Yeşilini dekoratif amaçlarla veya arka planlarda kullanmayın — yalnızca işlevseldir
|
||||
- Birincil yüzeyler için açık arka planlar kullanmayın — koyu sürükleyicilik temeldir
|
||||
- Düğmelerdeki hap/daire geometrisini atlamayın — kare düğmeler kimliği bozar
|
||||
- İnce/hafif gölgeler kullanmayın — koyu arka planlarda gölgelerin görünür olması için ağır olması gerekir
|
||||
- Ek marka renkleri eklemeyin — yeşil ve akromatik griler tam palettir
|
||||
- Rahat satır yükseklikleri kullanmayın — Spotify tipografisi kompakt ve yoğundur
|
||||
- Ham gri kenarlıkları açıkta bırakmayın — bunun yerine gölge tabanlı veya iç kenarlıklar kullanın
|
||||
|
||||
## 8. Duyarlı Davranış
|
||||
|
||||
### Kırılma Noktaları
|
||||
| Ad | Genişlik | Temel Değişiklikler |
|
||||
|------|-------|-------------|
|
||||
| Küçük Mobil | <425px | Kompakt mobil düzeni |
|
||||
| Mobil | 425–576px | Standart mobil |
|
||||
| Tablet | 576–768px | 2 sütunlu ızgara |
|
||||
| Büyük Tablet | 768–896px | Genişletilmiş düzen |
|
||||
| Küçük Masaüstü | 896–1024px | Kenar çubuğu görünür |
|
||||
| Masaüstü | 1024–1280px | Tam masaüstü düzeni |
|
||||
| Büyük Masaüstü | >1280px | Genişletilmiş ızgara |
|
||||
|
||||
### Daraltma Stratejisi
|
||||
- Kenar çubuğu: tam → daraltılmış → gizli
|
||||
- Albüm ızgarası: 5 sütun → 3 → 2 → 1
|
||||
- Şu an çalıyor çubuğu: tüm boyutlarda korunur
|
||||
- Arama: hap girişi korunur, genişlik ayarlanır
|
||||
- Navigasyon: kenar çubuğu → mobilede alt çubuk
|
||||
|
||||
## 9. Ajan Komut Kılavuzu
|
||||
|
||||
### Hızlı Renk Referansı
|
||||
- Arka plan: Neredeyse Siyah (`#121212`)
|
||||
- Yüzey: Koyu Kart (`#181818`)
|
||||
- Metin: Beyaz (`#ffffff`)
|
||||
- İkincil metin: Gümüş (`#b3b3b3`)
|
||||
- Aksan: Spotify Yeşili (`#1ed760`)
|
||||
- Kenarlık: `#4d4d4d`
|
||||
- Hata: Negatif Kırmızı (`#f3727f`)
|
||||
|
||||
### Örnek Bileşen Komutları
|
||||
- "Koyu kart oluştur: `#181818` arka plan, 8px yarıçap. Başlık 16px SpotifyMixUI ağırlık 700, beyaz metin. Alt başlık 14px ağırlık 400, `#b3b3b3`. Üzerine gelince `rgba(0,0,0,0.3) 0px 8px 8px` gölgesi."
|
||||
- "Hap düğme tasarla: `#1f1f1f` arka plan, beyaz metin, 9999px yarıçap, 8px 16px dolgu. 14px SpotifyMixUI ağırlık 700, büyük harf, harf aralığı 1.4px."
|
||||
- "Dairesel oynat düğmesi oluştur: Spotify Yeşili (`#1ed760`) arka plan, `#000000` simgesi, %50 yarıçap, 12px dolgu."
|
||||
- "Arama girişi oluştur: `#1f1f1f` arka plan, beyaz metin, 500px yarıçap, 12px 48px dolgu. İç kenarlık: `rgb(124,124,124) 0px 0px 0px 1px inset`."
|
||||
- "Navigasyon kenar çubuğu tasarla: `#121212` arka plan. Aktif öğeler: 14px ağırlık 700, beyaz. Pasif: 14px ağırlık 400, `#b3b3b3`."
|
||||
|
||||
### Yineleme Kılavuzu
|
||||
1. `#121212` ile başlayın — her şey neredeyse siyah karanlıkta yaşar
|
||||
2. Yalnızca işlevsel vurgular için Spotify Yeşili (oynat, aktif, harekete geçirici mesaj)
|
||||
3. Her şeyi hap yapın — büyükler için 500px, küçükler için 9999px, dairesel için %50
|
||||
4. Düğmelerde büyük harf ve geniş izleme — sistematik etiket sesi
|
||||
5. Yükseklik için ağır gölgeler (0.3–0.5 opaklık) — koyu zeminde hafif gölgeler görünmez
|
||||
6. Albüm kapağı tüm rengi sağlar — arayüz akromatik kalır
|
||||
@@ -0,0 +1,249 @@
|
||||
# Система дизайну натхненна Spotify
|
||||
|
||||
> Category: Медіа та споживачі
|
||||
> Музичний стримінг. Яскравий зелений на темному тлі, жирний шрифт, акцент на обкладинках альбомів.
|
||||
|
||||
## 1. Візуальна тема та атмосфера
|
||||
|
||||
Веб-інтерфейс Spotify — це темний, занурюючий музичний плеєр, що огортає слухачів майже чорним коконом (`#121212`, `#181818`, `#1f1f1f`), де обкладинки альбомів і контент стають основним джерелом кольору. Філософія дизайну — «темрява на першому місці для контенту» — інтерфейс відступає в тінь, щоб музика, подкасти і плейлисти могли сяяти. Кожна поверхня є відтінком вугілля, що створює театральне середовище, де єдиний справжній колір — це іконічний зелений Spotify (`#1ed760`) і самі обкладинки альбомів.
|
||||
|
||||
Типографіка використовує SpotifyMixUI та SpotifyMixUITitle — власні шрифти з сімейства CircularSp (Circular від Lineto, адаптований для 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`) результатом є інтерфейс, що нагадує преміальний аудіопристрій — тактильний, округлий і розроблений для дотику.
|
||||
|
||||
**Ключові характеристики:**
|
||||
- Темна занурювальна тема майже чорного кольору (`#121212`–`#1f1f1f`) — інтерфейс зникає за контентом
|
||||
- Зелений Spotify (`#1ed760`) як єдиний акцент бренду — ніколи декоративний, завжди функціональний
|
||||
- Шрифтове сімейство SpotifyMixUI/CircularSp із підтримкою глобальних шрифтів
|
||||
- Кнопки-таблетки (500px–9999px) і кругові елементи керування (50%) — округлі, оптимізовані для дотику
|
||||
- Підписи кнопок у верхньому регістрі з широким міжлітерним інтервалом (1.4px–2px)
|
||||
- Важкі тіні на піднятих елементах (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Семантичні кольори: негативний червоний (`#f3727f`), попереджувальний помаранчевий (`#ffa42b`), інформаційний синій (`#539df5`)
|
||||
- Обкладинка альбому як основне джерело кольору — інтерфейс за задумом ахроматичний
|
||||
|
||||
## 2. Кольорова палітра та ролі
|
||||
|
||||
### Основний бренд
|
||||
- **Зелений Spotify** (`#1ed760`): Основний акцент бренду — кнопки відтворення, активні стани, заклики до дії
|
||||
- **Майже чорний** (`#121212`): Найглибша фонова поверхня
|
||||
- **Темна поверхня** (`#181818`): Картки, контейнери, піднятi поверхні
|
||||
- **Середньо-темний** (`#1f1f1f`): Фони кнопок, інтерактивні поверхні
|
||||
|
||||
### Текст
|
||||
- **Білий** (`#ffffff`): `--text-base`, основний текст
|
||||
- **Сріблястий** (`#b3b3b3`): Вторинний текст, приглушені підписи, неактивна навігація
|
||||
- **Майже білий** (`#cbcbcb`): Трохи яскравіший вторинний текст
|
||||
- **Світлий** (`#fdfdfd`): Близький до чисто білого для максимального акценту
|
||||
|
||||
### Семантичні
|
||||
- **Негативний червоний** (`#f3727f`): `--text-negative`, стани помилок
|
||||
- **Попереджувальний помаранчевий** (`#ffa42b`): `--text-warning`, стани попереджень
|
||||
- **Інформаційний синій** (`#539df5`): `--text-announcement`, інформаційні стани
|
||||
|
||||
### Поверхня та рамка
|
||||
- **Темна картка** (`#252525`): Підняти поверхня картки
|
||||
- **Середня картка** (`#272727`): Альтернативна поверхня картки
|
||||
- **Сірий рамки** (`#4d4d4d`): Рамки кнопок на темному тлі
|
||||
- **Світла рамка** (`#7c7c7c`): Контурні рамки кнопок, приглушені посилання
|
||||
- **Роздільник** (`#b3b3b3`): Лінії-роздільники
|
||||
- **Світла поверхня** (`#eeeeee`): Кнопки світлого режиму (рідко)
|
||||
- **Зелена рамка Spotify** (`#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`
|
||||
- **Інтерфейс / Основний текст**: `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
|
||||
- Використання: Заклики до дії у світлому режимі (згода на куки, маркетинг)
|
||||
|
||||
**Контурна таблетка**
|
||||
- Фон: прозорий
|
||||
- Текст: `#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`, контур `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. Глибина та підйом
|
||||
|
||||
| Рівень | Обробка | Використання |
|
||||
|-------|-----------|-----|
|
||||
| Базовий (рівень 0) | Фон `#121212` | Найглибший шар, фон сторінки |
|
||||
| Поверхня (рівень 1) | `#181818` або `#1f1f1f` | Картки, бічна панель, контейнери |
|
||||
| Піднятий (рівень 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Випадаючі меню, картки при наведенні |
|
||||
| Діалог (рівень 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 (`#1ed760`) лише для елементів керування відтворенням, активних станів і основних закликів до дії
|
||||
- Використовуйте форму таблетки (500px–9999px) для всіх кнопок — кругову (50%) для елементів керування відтворенням
|
||||
- Застосовуйте верхній регістр і широкий міжлітерний інтервал (1.4px–2px) на підписах кнопок
|
||||
- Зберігайте компактну типографіку (діапазон 10px–24px) — це застосунок, а не журнал
|
||||
- Використовуйте важкі тіні (непрозорість 0.3–0.5) для піднятих елементів на темних фонах
|
||||
- Дозвольте обкладинці альбому надавати колір — сам інтерфейс ахроматичний
|
||||
|
||||
### Чого не робити
|
||||
- Не використовуйте зелений Spotify декоративно або на фонах — він лише функціональний
|
||||
- Не використовуйте світлі фони для основних поверхонь — темне занурення є ключовим
|
||||
- Не пропускайте геометрію таблетки/кола на кнопках — квадратні кнопки руйнують ідентичність
|
||||
- Не використовуйте тонкі/легкі тіні — на темних фонах тіні мають бути важкими, щоб бути видимими
|
||||
- Не додавайте додаткові кольори бренду — зелений і ахроматичні сірі становлять повну палітру
|
||||
- Не використовуйте збільшену висоту рядка — типографіка Spotify компактна й щільна
|
||||
- Не відкривайте прості сірі рамки — замість цього використовуйте тіньові або вставлені рамки
|
||||
|
||||
## 8. Адаптивна поведінка
|
||||
|
||||
### Контрольні точки
|
||||
| Назва | Ширина | Ключові зміни |
|
||||
|------|-------|-------------|
|
||||
| Малий мобільний | <425px | Компактний мобільний макет |
|
||||
| Мобільний | 425–576px | Стандартний мобільний |
|
||||
| Планшет | 576–768px | Сітка з 2 колонок |
|
||||
| Великий планшет | 768–896px | Розширений макет |
|
||||
| Малий десктоп | 896–1024px | Бічна панель видима |
|
||||
| Десктоп | 1024–1280px | Повний десктоп макет |
|
||||
| Великий десктоп | >1280px | Розширена сітка |
|
||||
|
||||
### Стратегія згортання
|
||||
- Бічна панель: повна → згорнута → прихована
|
||||
- Сітка альбомів: 5 колонок → 3 → 2 → 1
|
||||
- Рядок «зараз грає»: зберігається на всіх розмірах
|
||||
- Пошук: поле-таблетка зберігається, ширина регулюється
|
||||
- Навігація: бічна панель → нижня панель на мобільному
|
||||
|
||||
## 9. Посібник для агентів
|
||||
|
||||
### Швидкий довідник кольорів
|
||||
- Фон: Майже чорний (`#121212`)
|
||||
- Поверхня: Темна картка (`#181818`)
|
||||
- Текст: Білий (`#ffffff`)
|
||||
- Вторинний текст: Сріблястий (`#b3b3b3`)
|
||||
- Акцент: Зелений Spotify (`#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 (`#1ed760`), іконка `#000000`, радіус 50%, відступ 12px.»
|
||||
- «Створіть поле пошуку: фон `#1f1f1f`, білий текст, радіус 500px, відступ 12px 48px. Вставлена рамка: `rgb(124,124,124) 0px 0px 0px 1px inset`.»
|
||||
- «Спроектуйте навігаційну бічну панель: фон `#121212`. Активні елементи: 14px насиченість 700, білий. Неактивні: 14px насиченість 400, `#b3b3b3`.»
|
||||
|
||||
### Посібник з ітерацій
|
||||
1. Починайте з `#121212` — все існує в майже чорній темряві
|
||||
2. Зелений Spotify лише для функціональних виділень (відтворення, активний, заклик до дії)
|
||||
3. Усе у формі таблетки — 500px для великих, 9999px для малих, 50% для кругових
|
||||
4. Верхній регістр і широке трекінг на кнопках — систематичний голос ярлика
|
||||
5. Важкі тіні (непрозорість 0.3–0.5) для підйому — легкі тіні невидимі на темному тлі
|
||||
6. Обкладинка альбому надає весь колір — інтерфейс залишається ахроматичним
|
||||
@@ -0,0 +1,249 @@
|
||||
# Hệ Thống Thiết Kế Lấy Cảm Hứng từ Spotify
|
||||
|
||||
> Category: Truyền thông & Tiêu dùng
|
||||
> Phát nhạc trực tuyến. Xanh lá nổi bật trên nền tối, chữ đậm, lấy ảnh bìa album làm trung tâm.
|
||||
|
||||
## 1. Chủ Đề Thị Giác & Bầu Không Khí
|
||||
|
||||
Giao diện web của Spotify là một trình phát nhạc tối, đắm chìm, bao bọc người nghe trong lớp màu gần đen (`#121212`, `#181818`, `#1f1f1f`) — nơi ảnh bìa album và nội dung trở thành nguồn màu sắc chủ đạo. Triết lý thiết kế là "bóng tối ưu tiên nội dung" — giao diện lùi vào bóng tối để âm nhạc, podcast và danh sách phát có thể tỏa sáng. Mọi bề mặt đều là một sắc thái than chì, tạo nên môi trường giống như rạp hát, nơi màu sắc thật duy nhất đến từ Spotify Green huyền thoại (`#1ed760`) và chính ảnh bìa album.
|
||||
|
||||
Phông chữ sử dụng SpotifyMixUI và SpotifyMixUITitle — các phông chữ độc quyền thuộc họ CircularSp (Circular của Lineto, được tùy chỉnh cho Spotify) với bộ dự phòng mở rộng bao gồm các phông chữ Ả Rập, Hebrew, Cyrillic, Hy Lạp, Devanagari và CJK, phản ánh tầm vươn toàn cầu của Spotify. Hệ thống chữ gọn gàng và thực dụng: 700 (đậm) cho điểm nhấn và điều hướng, 600 (semi-đậm) cho điểm nhấn phụ, và 400 (thường) cho nội dung thân. Các nút dùng chữ hoa với khoảng cách ký tự dương (1.4px–2px) tạo nên phong cách nhãn mác có hệ thống.
|
||||
|
||||
Điều tạo nên sự khác biệt của Spotify là hình học viên thuốc và vòng tròn. Các nút chính sử dụng bán kính 500px–9999px (viên thuốc đầy đủ), nút phát hình tròn dùng bán kính 50%, và ô tìm kiếm là hình viên thuốc 500px. Kết hợp với đổ bóng nặng (`rgba(0,0,0,0.5) 0px 8px 24px`) trên các phần tử nổi và tổ hợp viền đổ bóng inset độc đáo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), kết quả là một giao diện cảm giác như thiết bị âm thanh cao cấp — có chiều sâu xúc giác, bo tròn, và được tạo ra để chạm.
|
||||
|
||||
**Đặc Điểm Nổi Bật:**
|
||||
- Chủ đề tối đắm chìm gần đen (`#121212`–`#1f1f1f`) — giao diện biến mất phía sau nội dung
|
||||
- Spotify Green (`#1ed760`) là điểm nhấn thương hiệu duy nhất — không bao giờ trang trí, luôn có chức năng
|
||||
- Họ phông chữ SpotifyMixUI/CircularSp với hỗ trợ chữ viết toàn cầu
|
||||
- Nút viên thuốc (500px–9999px) và điều khiển hình tròn (50%) — bo tròn, tối ưu cho chạm
|
||||
- Nhãn nút chữ hoa với khoảng cách ký tự rộng (1.4px–2px)
|
||||
- Đổ bóng nặng trên các phần tử nổi (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Màu ngữ nghĩa: đỏ âm (`#f3727f`), cam cảnh báo (`#ffa42b`), xanh thông báo (`#539df5`)
|
||||
- Ảnh bìa album là nguồn màu sắc chính — giao diện bản thân không có màu sắc theo thiết kế
|
||||
|
||||
## 2. Bảng Màu & Vai Trò
|
||||
|
||||
### Thương Hiệu Chính
|
||||
- **Spotify Green** (`#1ed760`): Điểm nhấn thương hiệu chính — nút phát, trạng thái hoạt động, CTA
|
||||
- **Gần Đen** (`#121212`): Bề mặt nền sâu nhất
|
||||
- **Bề Mặt Tối** (`#181818`): Thẻ, container, bề mặt nổi
|
||||
- **Tối Trung** (`#1f1f1f`): Nền nút, bề mặt tương tác
|
||||
|
||||
### Chữ
|
||||
- **Trắng** (`#ffffff`): `--text-base`, chữ chính
|
||||
- **Bạc** (`#b3b3b3`): Chữ phụ, nhãn mờ, điều hướng không hoạt động
|
||||
- **Gần Trắng** (`#cbcbcb`): Chữ phụ sáng hơn một chút
|
||||
- **Sáng** (`#fdfdfd`): Gần trắng thuần cho nhấn mạnh tối đa
|
||||
|
||||
### Ngữ Nghĩa
|
||||
- **Đỏ Âm** (`#f3727f`): `--text-negative`, trạng thái lỗi
|
||||
- **Cam Cảnh Báo** (`#ffa42b`): `--text-warning`, trạng thái cảnh báo
|
||||
- **Xanh Thông Báo** (`#539df5`): `--text-announcement`, trạng thái thông tin
|
||||
|
||||
### Bề Mặt & Viền
|
||||
- **Thẻ Tối** (`#252525`): Bề mặt thẻ nổi
|
||||
- **Thẻ Trung** (`#272727`): Bề mặt thẻ thay thế
|
||||
- **Xám Viền** (`#4d4d4d`): Viền nút trên nền tối
|
||||
- **Viền Sáng** (`#7c7c7c`): Viền nút có đường viền, liên kết mờ
|
||||
- **Đường Phân Cách** (`#b3b3b3`): Đường chia
|
||||
- **Bề Mặt Sáng** (`#eeeeee`): Nút chế độ sáng (hiếm)
|
||||
- **Viền Spotify Green** (`#1db954`): Biến thể viền xanh lá nhấn
|
||||
|
||||
### Đổ Bóng
|
||||
- **Nặng** (`rgba(0,0,0,0.5) 0px 8px 24px`): Hộp thoại, menu, panel nổi
|
||||
- **Trung Bình** (`rgba(0,0,0,0.3) 0px 8px 8px`): Thẻ, dropdown
|
||||
- **Viền Inset** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Tổ hợp viền-đổ bóng cho ô nhập
|
||||
|
||||
## 3. Quy Tắc Chữ
|
||||
|
||||
### Họ Phông Chữ
|
||||
- **Tiêu Đề**: `SpotifyMixUITitle`, dự phòng: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **Giao Diện / Thân**: `SpotifyMixUI`, cùng bộ dự phòng
|
||||
|
||||
### Phân Cấp
|
||||
|
||||
| Vai trò | Phông | Cỡ | Độ đậm | Chiều cao dòng | Khoảng cách ký tự | Ghi chú |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Tiêu đề phần | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Độ đậm tiêu đề |
|
||||
| Đầu mục tính năng | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (chặt) | normal | Đầu mục phần semi-đậm |
|
||||
| Thân Đậm | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Chữ nhấn mạnh |
|
||||
| Thân | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Thân chuẩn |
|
||||
| Nút Chữ Hoa | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (chặt) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Nút | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Nút chuẩn |
|
||||
| Liên Kết Nav Đậm | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Điều hướng |
|
||||
| Liên Kết Nav | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Điều hướng không hoạt động |
|
||||
| Chú Thích Đậm | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Metadata đậm |
|
||||
| Chú Thích | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
|
||||
| Nhỏ Đậm | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Thẻ nhãn, số đếm |
|
||||
| Nhỏ | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Chữ tinh |
|
||||
| Huy hiệu | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Siêu nhỏ | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Chữ nhỏ nhất |
|
||||
|
||||
### Nguyên Tắc
|
||||
- **Nhị phân đậm/thường**: Hầu hết chữ đều là 700 (đậm) hoặc 400 (thường), 600 được dùng hạn chế. Điều này tạo ra phân cấp thị giác rõ ràng thông qua tương phản độ đậm thay vì biến thiên kích thước.
|
||||
- **Nút chữ hoa như một hệ thống**: Nhãn nút dùng chữ hoa + khoảng cách ký tự rộng (1.4px–2px), tạo nên giọng điệu "nhãn" có hệ thống, khác biệt với chữ nội dung.
|
||||
- **Cỡ chữ gọn gàng**: Phạm vi là 10px–24px — hẹp hơn hầu hết các hệ thống. Chữ của Spotify gọn gàng và thực dụng, thiết kế để quét qua danh sách phát, không phải để đọc bài viết.
|
||||
- **Hỗ trợ chữ viết toàn cầu**: Bộ dự phòng mở rộng (Ả Rập, Hebrew, Cyrillic, Hy Lạp, Devanagari, CJK) phản ánh tầm phủ hơn 180 thị trường của Spotify.
|
||||
|
||||
## 4. Kiểu Dáng Thành Phần
|
||||
|
||||
### Nút
|
||||
|
||||
**Viên Thuốc Tối**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (viên thuốc đầy đủ)
|
||||
- Dùng: Viên thuốc điều hướng, hành động phụ
|
||||
|
||||
**Viên Thuốc Tối Lớn**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Dùng: Nút điều hướng ứng dụng chính
|
||||
|
||||
**Viên Thuốc Sáng**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Dùng: CTA chế độ sáng (đồng ý cookie, marketing)
|
||||
|
||||
**Viên Thuốc Có Đường Viền**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (bất đối xứng cho biểu tượng)
|
||||
- Radius: 9999px
|
||||
- Dùng: Nút theo dõi, hành động phụ
|
||||
|
||||
**Phát Hình Tròn**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (hình tròn)
|
||||
- Dùng: Điều khiển phát/dừng
|
||||
|
||||
### Thẻ & Container
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- Không có viền nhìn thấy trên hầu hết các thẻ
|
||||
- Hover: nền sáng lên nhẹ
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` khi nổi
|
||||
|
||||
### Ô Nhập
|
||||
- Ô tìm kiếm: nền `#1f1f1f`, chữ `#ffffff`
|
||||
- Radius: 500px (viên thuốc)
|
||||
- Padding: 12px 96px 12px 48px (tính toán cho biểu tượng)
|
||||
- Focus: viền đổi thành `#000000`, outline `1px solid`
|
||||
|
||||
### Điều Hướng
|
||||
- Thanh bên tối với SpotifyMixUI 14px độ đậm 700 cho đang hoạt động, 400 cho không hoạt động
|
||||
- Màu mờ `#b3b3b3` cho mục không hoạt động, `#ffffff` cho đang hoạt động
|
||||
- Nút biểu tượng hình tròn (bán kính 50%)
|
||||
- Logo Spotify góc trên bên trái màu xanh lá
|
||||
|
||||
## 5. Nguyên Tắc Bố Cục
|
||||
|
||||
### Hệ Thống Khoảng Cách
|
||||
- Đơn vị cơ bản: 8px
|
||||
- Thang đo: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Lưới & Container
|
||||
- Thanh bên (cố định) + vùng nội dung chính
|
||||
- Thẻ album/danh sách phát dạng lưới
|
||||
- Thanh đang phát đầy chiều rộng ở dưới cùng
|
||||
- Vùng nội dung responsive lấp đầy khoảng trống còn lại
|
||||
|
||||
### Triết Lý Khoảng Trắng
|
||||
- **Nén tối**: Spotify đóng gói nội dung dày đặc — lưới danh sách phát, danh sách bài hát và điều hướng đều được sắp xếp chặt chẽ. Nền tối tạo khoảng nghỉ thị giác giữa các phần tử mà không cần khoảng trống lớn.
|
||||
- **Mật độ nội dung hơn khoảng thở**: Đây là ứng dụng, không phải trang marketing. Mỗi pixel phục vụ trải nghiệm nghe nhạc.
|
||||
|
||||
### Thang Độ Bo Góc
|
||||
- Tối thiểu (2px): Huy hiệu, thẻ nhãn explicit
|
||||
- Tinh tế (4px): Ô nhập, phần tử nhỏ
|
||||
- Chuẩn (6px): Container ảnh bìa album, thẻ
|
||||
- Thoải mái (8px): Phần, hộp thoại
|
||||
- Trung bình (10px–20px): Panel, phần tử overlay
|
||||
- Lớn (100px): Nút viên thuốc lớn
|
||||
- Viên thuốc (500px): Nút chính, ô tìm kiếm
|
||||
- Viên thuốc đầy đủ (9999px): Viên thuốc điều hướng, tìm kiếm
|
||||
- Hình tròn (50%): Nút phát, avatar, biểu tượng
|
||||
|
||||
## 6. Chiều Sâu & Độ Nổi
|
||||
|
||||
| Cấp | Xử lý | Dùng |
|
||||
|-------|-----------|-----|
|
||||
| Cơ sở (Cấp 0) | nền `#121212` | Lớp sâu nhất, nền trang |
|
||||
| Bề mặt (Cấp 1) | `#181818` or `#1f1f1f` | Thẻ, thanh bên, container |
|
||||
| Nổi (Cấp 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Menu dropdown, thẻ hover |
|
||||
| Hộp thoại (Cấp 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modal, overlay, menu |
|
||||
| Inset (Viền) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Viền ô nhập |
|
||||
|
||||
**Triết Lý Đổ Bóng**: Spotify sử dụng đổ bóng đáng kể nặng cho ứng dụng chủ đề tối. Đổ bóng độ mờ 0.5 với blur 24px tạo hiệu ứng "nổi trong bóng tối" ấn tượng cho hộp thoại và menu, trong khi độ mờ 0.3 với blur 8px tạo nâng thẻ tinh tế hơn. Tổ hợp viền đổ bóng inset độc đáo trên các ô nhập tạo chất lượng lõm vào, có xúc giác.
|
||||
|
||||
## 7. Nên và Không Nên
|
||||
|
||||
### Nên
|
||||
- Dùng nền gần đen (`#121212`–`#1f1f1f`) — chiều sâu qua biến thiên sắc thái
|
||||
- Áp dụng Spotify Green (`#1ed760`) chỉ cho điều khiển phát, trạng thái hoạt động và CTA chính
|
||||
- Dùng hình viên thuốc (500px–9999px) cho tất cả nút — hình tròn (50%) cho điều khiển phát
|
||||
- Áp dụng chữ hoa + khoảng cách ký tự rộng (1.4px–2px) trên nhãn nút
|
||||
- Giữ chữ gọn gàng (phạm vi 10px–24px) — đây là ứng dụng, không phải tạp chí
|
||||
- Dùng đổ bóng nặng (`0.3–0.5 opacity`) cho các phần tử nổi trên nền tối
|
||||
- Để ảnh bìa album cung cấp màu sắc — bản thân giao diện không có màu sắc
|
||||
|
||||
### Không Nên
|
||||
- Không dùng Spotify Green trang trí hoặc trên nền — nó chỉ có chức năng
|
||||
- Không dùng nền sáng cho bề mặt chính — sự đắm chìm tối là cốt lõi
|
||||
- Không bỏ qua hình học viên thuốc/hình tròn trên nút — nút vuông phá vỡ nhận diện
|
||||
- Không dùng đổ bóng mỏng/tinh tế — trên nền tối, đổ bóng cần nặng để có thể thấy
|
||||
- Không thêm màu thương hiệu bổ sung — xanh lá + xám achromatic là bảng màu đầy đủ
|
||||
- Không dùng chiều cao dòng thoải mái — chữ của Spotify gọn gàng và dày đặc
|
||||
- Không để lộ viền xám thô — thay vào đó dùng viền dựa trên đổ bóng hoặc inset
|
||||
|
||||
## 8. Hành Vi Responsive
|
||||
|
||||
### Breakpoint
|
||||
| Tên | Chiều rộng | Thay đổi chính |
|
||||
|------|-------|-------------|
|
||||
| Mobile Nhỏ | <425px | Bố cục mobile gọn |
|
||||
| Mobile | 425–576px | Mobile chuẩn |
|
||||
| Tablet | 576–768px | Lưới 2 cột |
|
||||
| Tablet Lớn | 768–896px | Bố cục mở rộng |
|
||||
| Desktop Nhỏ | 896–1024px | Thanh bên hiển thị |
|
||||
| Desktop | 1024–1280px | Bố cục desktop đầy đủ |
|
||||
| Desktop Lớn | >1280px | Lưới mở rộng |
|
||||
|
||||
### Chiến Lược Thu Gọn
|
||||
- Thanh bên: đầy đủ → thu gọn → ẩn
|
||||
- Lưới album: 5 cột → 3 → 2 → 1
|
||||
- Thanh đang phát: duy trì ở mọi kích thước
|
||||
- Tìm kiếm: ô nhập viên thuốc duy trì, chiều rộng điều chỉnh
|
||||
- Điều hướng: thanh bên → thanh dưới trên mobile
|
||||
|
||||
## 9. Hướng Dẫn Prompt cho Agent
|
||||
|
||||
### Tham Chiếu Màu Nhanh
|
||||
- Background: Gần Đen (`#121212`)
|
||||
- Surface: Thẻ Tối (`#181818`)
|
||||
- Text: Trắng (`#ffffff`)
|
||||
- Chữ phụ: Bạc (`#b3b3b3`)
|
||||
- Nhấn: Spotify Green (`#1ed760`)
|
||||
- Viền: `#4d4d4d`
|
||||
- Lỗi: Đỏ Âm (`#f3727f`)
|
||||
|
||||
### Ví Dụ Prompt Thành Phần
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Hướng Dẫn Lặp
|
||||
1. Bắt đầu với #121212 — mọi thứ tồn tại trong bóng tối gần đen
|
||||
2. Spotify Green chỉ cho điểm nhấn chức năng (phát, hoạt động, CTA)
|
||||
3. Viên thuốc hóa mọi thứ — 500px cho lớn, 9999px cho nhỏ, 50% cho hình tròn
|
||||
4. Chữ hoa + tracking rộng trên nút — giọng điệu nhãn có hệ thống
|
||||
5. Đổ bóng nặng (độ mờ 0.3–0.5) cho độ nổi — đổ bóng nhẹ vô hình trên nền tối
|
||||
6. Ảnh bìa album cung cấp tất cả màu sắc — giao diện luôn không có màu sắc
|
||||
@@ -0,0 +1,249 @@
|
||||
# 以 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`。"
|
||||
|
||||
### 迭代指南
|
||||
1. 從 `#121212` 開始——所有內容存在於近純黑的黑暗之中
|
||||
2. Spotify Green 僅用於功能性高亮（播放、啟用狀態、CTA）
|
||||
3. 所有按鈕做成膠囊——大型用 500px，小型用 9999px，圓形用 50%
|
||||
4. 按鈕標籤使用全大寫加寬字距——系統性的標籤語調
|
||||
5. 高層元素使用重陰影（0.3–0.5 不透明度）——淺色陰影在深色背景上不可見
|
||||
6. 專輯封面提供所有色彩——UI 本身保持無彩色
|
||||
@@ -0,0 +1,249 @@
|
||||
# 受 Spotify 启发的设计系统
|
||||
|
||||
> Category: 媒体与消费者
|
||||
> 音乐流媒体。深色背景上的鲜明绿色、粗犷字体、以专辑封面为视觉核心。
|
||||
|
||||
## 1. 视觉主题与氛围
|
||||
|
||||
Spotify 的 Web 界面是一个沉浸式的深色音乐播放器，将听众包裹在近黑色的空间（`#121212`、`#181818`、`#1f1f1f`）中，专辑封面与内容成为色彩的主要来源。其设计理念是"内容优先的黑暗感"——UI 退入阴影，让音乐、播客和播放列表得以发光。每一个界面层次都是深浅不一的炭灰色，营造出剧院般的氛围，唯一真正的色彩来自标志性的 Spotify 绿（`#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`），最终呈现出一个如同高端音频设备般的界面——触感圆润，专为触控而生。
|
||||
|
||||
**核心特征：**
|
||||
- 近黑色沉浸式深色主题（`#121212`–`#1f1f1f`）——UI 隐退于内容之后
|
||||
- Spotify 绿（`#1ed760`）作为唯一品牌强调色——从不装饰性使用，始终功能性呈现
|
||||
- SpotifyMixUI/CircularSp 字族，支持全球文字系统
|
||||
- 胶囊按钮（500px–9999px）与圆形控件（50%）——圆润、触控优化
|
||||
- 按钮标签全大写搭配宽字间距（1.4px–2px）
|
||||
- 悬浮元素上的重阴影（`rgba(0,0,0,0.5) 0px 8px 24px`）
|
||||
- 语义色：负面红（`#f3727f`）、警告橙（`#ffa42b`）、通告蓝（`#539df5`）
|
||||
- 专辑封面是主要色彩来源——UI 本身在设计上保持无彩色
|
||||
|
||||
## 2. 色彩规范
|
||||
|
||||
### 主品牌色
|
||||
- **Spotify 绿**（`#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 绿边框**（`#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 通知、营销页面）
|
||||
|
||||
**描边胶囊**
|
||||
- 背景：透明
|
||||
- 文字：`#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 绿色 Logo
|
||||
|
||||
## 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 绿（`#1ed760`）用于播放控件、激活状态和主要 CTA
|
||||
- 所有按钮使用胶囊形（500px–9999px），播放控件使用圆形（50%）
|
||||
- 按钮标签使用全大写加宽字间距（1.4px–2px）
|
||||
- 保持紧凑的字号（10px–24px 范围）——这是应用，不是杂志
|
||||
- 对深色背景上的悬浮元素使用重阴影（0.3–0.5 不透明度）
|
||||
- 让专辑封面提供色彩——UI 本身保持无彩色
|
||||
|
||||
### 避免
|
||||
- 不要将 Spotify 绿用作装饰或背景——它仅作功能性使用
|
||||
- 不要将浅色背景用于主要表面——深色沉浸感是核心体验
|
||||
- 不要在按钮上跳过胶囊/圆形的几何语言——方形按钮会破坏品牌识别
|
||||
- 不要使用细弱的阴影——在深色背景上，阴影必须足够重才能显现
|
||||
- 不要添加额外的品牌色——绿色加无彩灰阶就是完整的色板
|
||||
- 不要使用宽松的行高——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 绿（`#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 绿（`#1ed760`）背景，`#000000` 图标，50% 圆角，12px 内边距。"
|
||||
- "创建搜索输入框：`#1f1f1f` 背景，白色文字，500px 圆角，12px 48px 内边距。内嵌边框：rgb(124,124,124) 0px 0px 0px 1px inset。"
|
||||
- "设计导航侧边栏：`#121212` 背景。激活项：14px 字重 700，白色。非激活项：14px 字重 400，`#b3b3b3`。"
|
||||
|
||||
### 迭代指南
|
||||
1. 从 `#121212` 开始——一切都生活在近黑的黑暗中
|
||||
2. Spotify 绿仅用于功能性高亮（播放、激活、CTA）
|
||||
3. 胶囊化一切——大型用 500px，小型用 9999px，圆形控件用 50%
|
||||
4. 按钮使用全大写加宽字间距——这是系统性的标签声调
|
||||
5. 使用重阴影（0.3–0.5 不透明度）表达层级——轻阴影在深色背景上不可见
|
||||
6. 专辑封面提供所有色彩——UI 保持无彩色
|
||||
@@ -0,0 +1,249 @@
|
||||
# Design System Inspired by Spotify
|
||||
|
||||
> Category: Media & Consumer
|
||||
> Music streaming. Vibrant green on dark, bold type, album-art-driven.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.
|
||||
|
||||
The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.
|
||||
|
||||
What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content
|
||||
- Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional
|
||||
- SpotifyMixUI/CircularSp font family with global script support
|
||||
- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
|
||||
- Uppercase button labels with wide letter-spacing (1.4px–2px)
|
||||
- Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)
|
||||
- Album art as the primary color source — the UI is achromatic by design
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Spotify Green** (`#1ed760`): Primary brand accent — play buttons, active states, CTAs
|
||||
- **Near Black** (`#121212`): Deepest background surface
|
||||
- **Dark Surface** (`#181818`): Cards, containers, elevated surfaces
|
||||
- **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces
|
||||
|
||||
### Text
|
||||
- **White** (`#ffffff`): `--text-base`, primary text
|
||||
- **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav
|
||||
- **Near White** (`#cbcbcb`): Slightly brighter secondary text
|
||||
- **Light** (`#fdfdfd`): Near-pure white for maximum emphasis
|
||||
|
||||
### Semantic
|
||||
- **Negative Red** (`#f3727f`): `--text-negative`, error states
|
||||
- **Warning Orange** (`#ffa42b`): `--text-warning`, warning states
|
||||
- **Announcement Blue** (`#539df5`): `--text-announcement`, info states
|
||||
|
||||
### Surface & Border
|
||||
- **Dark Card** (`#252525`): Elevated card surface
|
||||
- **Mid Card** (`#272727`): Alternate card surface
|
||||
- **Border Gray** (`#4d4d4d`): Button borders on dark
|
||||
- **Light Border** (`#7c7c7c`): Outlined button borders, muted links
|
||||
- **Separator** (`#b3b3b3`): Divider lines
|
||||
- **Light Surface** (`#eeeeee`): Light-mode buttons (rare)
|
||||
- **Spotify Green Border** (`#1db954`): Green accent border variant
|
||||
|
||||
### Shadows
|
||||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels
|
||||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns
|
||||
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Title**: `SpotifyMixUITitle`, fallbacks: `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`, same fallback stack
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |
|
||||
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |
|
||||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |
|
||||
| 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 | Standard button |
|
||||
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
|
||||
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |
|
||||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |
|
||||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
|
||||
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |
|
||||
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |
|
||||
|
||||
### Principles
|
||||
- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.
|
||||
- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.
|
||||
- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.
|
||||
- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Navigation pills, secondary actions
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Use: Primary app navigation buttons
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Use: Light-mode CTAs (cookie consent, marketing)
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asymmetric for icon)
|
||||
- Radius: 9999px
|
||||
- Use: Follow buttons, secondary actions
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (circle)
|
||||
- Use: Play/pause controls
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- No visible borders on most cards
|
||||
- Hover: slight background lightening
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated
|
||||
|
||||
### Inputs
|
||||
- Search input: `#1f1f1f` background, `#ffffff` text
|
||||
- Radius: 500px (pill)
|
||||
- Padding: 12px 96px 12px 48px (icon-aware)
|
||||
- Focus: border becomes `#000000`, outline `1px solid`
|
||||
|
||||
### Navigation
|
||||
- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive
|
||||
- `#b3b3b3` muted color for inactive items, `#ffffff` for active
|
||||
- Circular icon buttons (50% radius)
|
||||
- Spotify logo top-left in green
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Grid & Container
|
||||
- Sidebar (fixed) + main content area
|
||||
- Grid-based album/playlist cards
|
||||
- Full-width now-playing bar at bottom
|
||||
- Responsive content area fills remaining space
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.
|
||||
- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Badges, explicit tags
|
||||
- Subtle (4px): Inputs, small elements
|
||||
- Standard (6px): Album art containers, cards
|
||||
- Comfortable (8px): Sections, dialogs
|
||||
- Medium (10px–20px): Panels, overlay elements
|
||||
- Large (100px): Large pill buttons
|
||||
- Pill (500px): Primary buttons, search input
|
||||
- Full Pill (9999px): Navigation pills, search
|
||||
- Circle (50%): Play buttons, avatars, icons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Base (Level 0) | `#121212` background | Deepest layer, page background |
|
||||
| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |
|
||||
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |
|
||||
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |
|
||||
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |
|
||||
|
||||
**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic "floating in darkness" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation
|
||||
- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs
|
||||
- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
|
||||
- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
|
||||
- Keep typography compact (10px–24px range) — this is an app, not a magazine
|
||||
- Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds
|
||||
- Let album art provide color — the UI itself is achromatic
|
||||
|
||||
### Don't
|
||||
- Don't use Spotify Green decoratively or on backgrounds — it's functional only
|
||||
- Don't use light backgrounds for primary surfaces — the dark immersion is core
|
||||
- Don't skip the pill/circle geometry on buttons — square buttons break the identity
|
||||
- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
|
||||
- Don't add additional brand colors — green + achromatic grays is the complete palette
|
||||
- Don't use relaxed line-heights — Spotify's typography is compact and dense
|
||||
- Don't expose raw gray borders — use shadow-based or inset borders instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Compact mobile layout |
|
||||
| Mobile | 425–576px | Standard mobile |
|
||||
| Tablet | 576–768px | 2-column grid |
|
||||
| Tablet Large | 768–896px | Expanded layout |
|
||||
| Desktop Small | 896–1024px | Sidebar visible |
|
||||
| Desktop | 1024–1280px | Full desktop layout |
|
||||
| Large Desktop | >1280px | Expanded grid |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Sidebar: full → collapsed → hidden
|
||||
- Album grid: 5 columns → 3 → 2 → 1
|
||||
- Now-playing bar: maintained at all sizes
|
||||
- Search: pill input maintained, width adjusts
|
||||
- Navigation: sidebar → bottom bar on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Near Black (`#121212`)
|
||||
- Surface: Dark Card (`#181818`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Secondary text: Silver (`#b3b3b3`)
|
||||
- Accent: Spotify Green (`#1ed760`)
|
||||
- Border: `#4d4d4d`
|
||||
- Error: Negative Red (`#f3727f`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with #121212 — everything lives in near-black darkness
|
||||
2. Spotify Green for functional highlights only (play, active, CTA)
|
||||
3. Pill everything — 500px for large, 9999px for small, 50% for circular
|
||||
4. Uppercase + wide tracking on buttons — the systematic label voice
|
||||
5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark
|
||||
6. Album art provides all the color — the UI stays achromatic
|
||||
@@ -0,0 +1,32 @@
|
||||
# Spotify Usage
|
||||
|
||||
Design System 2.0 package guide for OpenDesign agents and reviewers.
|
||||
|
||||
## Read Order
|
||||
|
||||
1. Read this file first to understand the package contract.
|
||||
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
|
||||
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
|
||||
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
|
||||
5. Inspect `preview/` pages when a visual sanity check is useful.
|
||||
|
||||
## Design Highlights
|
||||
|
||||
- Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content
|
||||
- Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional
|
||||
- SpotifyMixUI/CircularSp font family with global script support
|
||||
- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
|
||||
|
||||
## Do
|
||||
|
||||
- Preserve the schema token names exactly so cross-brand switching stays reliable.
|
||||
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
|
||||
- Reuse component groups from `components.manifest.json` before inventing new controls.
|
||||
- Treat `source/` files as audit evidence for the bundled fixture backfill.
|
||||
|
||||
## Avoid
|
||||
|
||||
- Avoid raw hex values outside the copied `:root` token block.
|
||||
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
|
||||
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
|
||||
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
|
||||
@@ -0,0 +1,365 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/spotify. Every visible
|
||||
value comes from tokens.css. Spotify's signature moves: near-black
|
||||
immersive surfaces, Spotify Green (#1ed760) for play/active/CTA only,
|
||||
full-pill and circular geometry, uppercase button labels with wide tracking."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--muted: #b3b3b3;
|
||||
--meta: #cbcbcb;
|
||||
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--accent: #1ed760;
|
||||
--accent-on: #000000;
|
||||
--accent-hover: #1db954;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
|
||||
--success: #1ed760;
|
||||
--warn: #ffa42b;
|
||||
--danger: #f3727f;
|
||||
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--text-xs: 10px;
|
||||
--text-sm: 12px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: normal;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 40px;
|
||||
--section-y-phone: 24px;
|
||||
|
||||
--radius-sm: 9999px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border-soft); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ─────────────────────────── */
|
||||
h1, h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 { font-size: var(--text-2xl); }
|
||||
h2 { font-size: var(--text-2xl); }
|
||||
h3 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: 1.30;
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
}
|
||||
p { margin: 0; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); color: var(--muted); }
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
|
||||
/* ─── Buttons — full pill; uppercase + wide tracking on labels. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm); /* 9999px full pill */
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
opacity var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Standard dark pill. */
|
||||
.btn-dark {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
}
|
||||
.btn-dark:hover { background: #2a2a2a; }
|
||||
/* Outlined pill. */
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 16px 4px 36px;
|
||||
}
|
||||
/* Uppercase CTA label variant. */
|
||||
.btn-upper {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* Green circular play button. */
|
||||
.btn-play {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-play:hover { background: var(--accent-hover); transform: scale(1.04); }
|
||||
|
||||
/* ─── Nav pill ───────────────────────────── */
|
||||
.nav-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
text-decoration: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.nav-pill.active { background: var(--surface-warm); }
|
||||
.nav-pill:hover { background: #2a2a2a; }
|
||||
|
||||
/* ─── Track row ──────────────────────────── */
|
||||
.track-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
cursor: pointer;
|
||||
}
|
||||
.track-row:hover { background: rgba(255, 255, 255, 0.1); }
|
||||
.track-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-warm);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.track-info { flex: 1; min-width: 0; }
|
||||
.track-name { font-size: var(--text-base); font-weight: 400; color: var(--fg); }
|
||||
.track-artist { font-size: var(--text-sm); color: var(--muted); }
|
||||
.track-duration { font-size: var(--text-sm); color: var(--muted); font-tabular-nums: tabular-nums; }
|
||||
|
||||
/* ─── Card ───────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
transition: background-color var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover { background: #202020; box-shadow: var(--elev-raised); }
|
||||
|
||||
/* ─── Layout ─────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-8);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.album-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@media (max-width: 1023px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (max-width: 639px) { .album-grid { grid-template-columns: 1fr 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; align-items: center; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<h1>Music for everyone.</h1>
|
||||
<p class="body-muted" style="font-size:var(--text-base);margin-top:var(--space-3)">
|
||||
Millions of songs and podcasts. No credit card needed.
|
||||
Dark immersion — the UI recedes so content can glow.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-play" aria-label="Play">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./tokens.css" class="btn btn-dark btn-upper">Get Spotify free</a>
|
||||
<a href="./DESIGN.md" class="btn btn-outline">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div class="card stack-4">
|
||||
<p style="font-size:var(--text-sm);font-weight:700;color:var(--fg)">Now playing</p>
|
||||
<div class="track-row" style="padding:0">
|
||||
<div class="track-thumb" style="background:var(--accent);color:#000;font-size:24px">♪</div>
|
||||
<div class="track-info">
|
||||
<p class="track-name">design-systems/tokens</p>
|
||||
<p class="track-artist">OpenDesign · 2026</p>
|
||||
</div>
|
||||
<span class="track-duration">3:22</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES / PLAYLIST -->
|
||||
<section data-od-id="features">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)">
|
||||
<h2>Recent picks</h2>
|
||||
<a href="#" style="font-size:var(--text-sm);font-weight:700;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:1.4px">Show all</a>
|
||||
</div>
|
||||
|
||||
<div class="album-grid">
|
||||
<div class="card stack-3">
|
||||
<div style="width:100%;aspect-ratio:1;background:linear-gradient(135deg,#5e6ad2,#1ed760);border-radius:var(--radius-md);margin-bottom:var(--space-3)"></div>
|
||||
<p style="font-weight:700;font-size:var(--text-base)">Token Fixtures</p>
|
||||
<p class="body-sm">Brand oracle collection</p>
|
||||
</div>
|
||||
<div class="card stack-3">
|
||||
<div style="width:100%;aspect-ratio:1;background:linear-gradient(135deg,#f54e00,#cf2d56);border-radius:var(--radius-md);margin-bottom:var(--space-3)"></div>
|
||||
<p style="font-weight:700;font-size:var(--text-base)">Cursor Sessions</p>
|
||||
<p class="body-sm">Warm cream meets code</p>
|
||||
</div>
|
||||
<div class="card stack-3">
|
||||
<div style="width:100%;aspect-ratio:1;background:linear-gradient(135deg,#10a37f,#0d0d0d);border-radius:var(--radius-md);margin-bottom:var(--space-3)"></div>
|
||||
<p style="font-weight:700;font-size:var(--text-base)">OpenAI Calm</p>
|
||||
<p class="body-sm">Research lab dressed public</p>
|
||||
</div>
|
||||
<div class="card stack-3">
|
||||
<div style="width:100%;aspect-ratio:1;background:linear-gradient(135deg,#0969da,#1a7f37);border-radius:var(--radius-md);margin-bottom:var(--space-3)"></div>
|
||||
<p style="font-weight:700;font-size:var(--text-base)">GitHub Primer</p>
|
||||
<p class="body-sm">Density over decoration</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TRACKS -->
|
||||
<section data-od-id="tracks">
|
||||
<h2 style="margin-bottom:var(--space-5)">Track list</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-1)">
|
||||
<div class="track-row">
|
||||
<span style="color:var(--muted);font-size:var(--text-sm);width:16px;text-align:right">1</span>
|
||||
<div class="track-thumb">🎵</div>
|
||||
<div class="track-info">
|
||||
<p class="track-name">tokens.css</p>
|
||||
<p class="track-artist">notion · design-systems</p>
|
||||
</div>
|
||||
<span class="track-duration">4:12</span>
|
||||
</div>
|
||||
<div class="track-row">
|
||||
<span style="color:var(--accent);font-size:var(--text-sm);width:16px;text-align:right">▶</span>
|
||||
<div class="track-thumb" style="background:linear-gradient(135deg,#5e6ad2,#191a1b)">🎸</div>
|
||||
<div class="track-info">
|
||||
<p class="track-name" style="color:var(--accent)">components.html</p>
|
||||
<p class="track-artist">linear-app · design-systems</p>
|
||||
</div>
|
||||
<span class="track-duration">3:55</span>
|
||||
</div>
|
||||
<div class="track-row">
|
||||
<span style="color:var(--muted);font-size:var(--text-sm);width:16px;text-align:right">3</span>
|
||||
<div class="track-thumb">🎹</div>
|
||||
<div class="track-info">
|
||||
<p class="track-name">DESIGN.md</p>
|
||||
<p class="track-artist">github · design-systems</p>
|
||||
</div>
|
||||
<span class="track-duration">2:48</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,385 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "spotify",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "Spotify — reference components",
|
||||
"description": "Reference fixture for design-systems/spotify. Every visible value comes from tokens.css. Spotify's signature moves: near-black immersive surfaces, Spotify Green (#1ed760) for play/active/CTA only, full-pill and circular geometry, uppercase button labels with wide tracking.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 40,
|
||||
"classCount": 20,
|
||||
"elementCount": 17
|
||||
},
|
||||
"tokens": {
|
||||
"declared": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"referenced": [
|
||||
"--accent",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--fg",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-md",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--accent-active",
|
||||
"--danger",
|
||||
"--elev-flat",
|
||||
"--elev-ring",
|
||||
"--fg-2",
|
||||
"--font-mono",
|
||||
"--meta",
|
||||
"--radius-lg",
|
||||
"--radius-pill",
|
||||
"--space-12",
|
||||
"--success",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".album-grid",
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-dark",
|
||||
".btn-dark:hover",
|
||||
".btn-outline",
|
||||
".btn-play",
|
||||
".btn-play:hover",
|
||||
".btn-upper",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card:hover",
|
||||
".container",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".icon",
|
||||
".nav-pill",
|
||||
".nav-pill:hover",
|
||||
".nav-pill.active",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".track-artist",
|
||||
".track-duration",
|
||||
".track-info",
|
||||
".track-name",
|
||||
".track-row",
|
||||
".track-row:hover",
|
||||
".track-thumb",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"body",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"album-grid",
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-dark",
|
||||
"btn-outline",
|
||||
"btn-play",
|
||||
"btn-upper",
|
||||
"card",
|
||||
"container",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"track-artist",
|
||||
"track-duration",
|
||||
"track-info",
|
||||
"track-name",
|
||||
"track-row",
|
||||
"track-thumb"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"aside",
|
||||
"body",
|
||||
"div",
|
||||
"h1",
|
||||
"h2",
|
||||
"head",
|
||||
"html",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"path",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"svg",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-dark",
|
||||
".btn-dark:hover",
|
||||
".btn-outline",
|
||||
".btn-play",
|
||||
".btn-play:hover",
|
||||
".btn-upper",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-dark",
|
||||
"btn-outline",
|
||||
"btn-play",
|
||||
"btn-upper"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--accent-hover",
|
||||
"--focus-ring"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card:hover"
|
||||
],
|
||||
"classes": [
|
||||
"card"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--elev-raised"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".icon"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"svg"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg",
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-2xl",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".nav-pill",
|
||||
".nav-pill:hover",
|
||||
".nav-pill.active",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"album-grid",
|
||||
"container",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-4",
|
||||
"--surface-warm"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 4,
|
||||
"pixelValues": 26,
|
||||
"hardcodedFontFamilies": 4
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"format": "od-design-tokens/v1",
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"source": {
|
||||
"tokensCss": "tokens.css",
|
||||
"tokenContractReport": "source/token-contract.report.json"
|
||||
},
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#121212",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:35"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#181818",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:36"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#1f1f1f",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:40"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#fdfdfd",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:41"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#b3b3b3",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:42"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#cbcbcb",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:43"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#4d4d4d",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:46"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#1ed760",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:50"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#000000",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#1db954",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 10%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1ed760",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:56"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#ffa42b",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:57"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f3727f",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:58"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"SpotifyMixUITitle\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:61"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"SpotifyMixUI\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:62"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
"type": "fontFamily",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:63"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "10px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:68"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:69"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:70"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "18px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:72"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:73"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:74"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:75"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.50",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:80"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.00",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:81"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "normal",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:82"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:86"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:87"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:88"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:89"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:90"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:91"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:92"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:93"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "64px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:96"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "40px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:97"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:103"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:104"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:105"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:106"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:111"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "rgba(0, 0, 0, 0.3) 0px 8px 8px",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(30, 215, 96, 0.4)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:115"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:119"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:125"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:126"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "spotify",
|
||||
"name": "Spotify",
|
||||
"category": "Media & Consumer",
|
||||
"description": "Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
|
||||
"source": {
|
||||
"type": "bundled",
|
||||
"origin": "OpenDesign curated bundled fixture"
|
||||
},
|
||||
"files": {
|
||||
"design": "DESIGN.md",
|
||||
"tokens": "tokens.css",
|
||||
"designTokens": "design-tokens.json",
|
||||
"tailwind": "tailwind-v4.css",
|
||||
"components": "components.html"
|
||||
},
|
||||
"usage": "USAGE.md",
|
||||
"componentsManifest": "components.manifest.json",
|
||||
"importMode": "normalized",
|
||||
"craft": {
|
||||
"applies": [],
|
||||
"suggested": [
|
||||
"color",
|
||||
"accessibility-baseline"
|
||||
],
|
||||
"exemptions": []
|
||||
},
|
||||
"preview": {
|
||||
"dir": "preview",
|
||||
"pages": [
|
||||
{
|
||||
"path": "preview/colors.html",
|
||||
"role": "colors",
|
||||
"title": "Colors"
|
||||
},
|
||||
{
|
||||
"path": "preview/typography.html",
|
||||
"role": "typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "preview/spacing.html",
|
||||
"role": "spacing",
|
||||
"title": "Spacing"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceFiles": {
|
||||
"evidence": "source/evidence.md",
|
||||
"tokens": "source/tokens.source.json",
|
||||
"report": "source/token-contract.report.json"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify colors</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
|
||||
.color { height: 88px; background: var(--value); }
|
||||
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
|
||||
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Color roles</h1>
|
||||
|
||||
<section class="grid">
|
||||
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
|
||||
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
|
||||
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
|
||||
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
|
||||
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
|
||||
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
|
||||
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
|
||||
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
|
||||
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify spacing</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
|
||||
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
|
||||
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Spacing and radius</h1>
|
||||
|
||||
<section class="stack">
|
||||
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
|
||||
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
|
||||
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
|
||||
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
|
||||
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
|
||||
</section>
|
||||
<section class="radii">
|
||||
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
|
||||
<article style="border-radius: var(--radius-md)">--radius-md</article>
|
||||
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
|
||||
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify typography</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
|
||||
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
|
||||
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
|
||||
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Typography</h1>
|
||||
|
||||
<section class="type-stack">
|
||||
<p class="eyebrow">Media & Consumer</p>
|
||||
<h2>Display sample for Spotify</h2>
|
||||
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
|
||||
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
# Spotify Source Evidence
|
||||
|
||||
## Source Scope
|
||||
|
||||
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
|
||||
It does not claim a fresh crawl of the original upstream brand repository or website.
|
||||
|
||||
## Included Fixture Files
|
||||
|
||||
- design-systems/spotify/DESIGN.md
|
||||
- design-systems/spotify/tokens.css
|
||||
- design-systems/spotify/components.html
|
||||
|
||||
## Token Contract
|
||||
|
||||
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
|
||||
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#121212",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:35"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#181818",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:36"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#1f1f1f",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:40"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#fdfdfd",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:41"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#b3b3b3",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:42"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#cbcbcb",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:43"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "#4d4d4d",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:46"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#1ed760",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:50"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#000000",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "#1db954",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 10%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#1ed760",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:56"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#ffa42b",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:57"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#f3727f",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:58"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"SpotifyMixUITitle\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:61"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"SpotifyMixUI\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:62"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:63"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "10px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:68"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:69"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:70"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "18px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:72"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:73"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:74"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:75"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.50",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:80"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.00",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:81"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "normal",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:82"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:86"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:87"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:88"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"layer": "A2",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:89"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"layer": "A2",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:90"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"layer": "A2",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:91"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"layer": "A2",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:92"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"layer": "A2",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:93"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "64px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:96"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "40px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:97"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:103"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "6px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:104"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:105"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:106"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"layer": "A2",
|
||||
"value": "none",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:111"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "rgba(0, 0, 0, 0.3) 0px 8px 8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px rgba(30, 215, 96, 0.4)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:115"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "150ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"layer": "A2",
|
||||
"value": "200ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:119"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "ease",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1280px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:125"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:126"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "spotify",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#121212",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:35"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#181818",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:36"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#1f1f1f",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:37"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#ffffff",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:40"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#fdfdfd",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:41"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#b3b3b3",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:42"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#cbcbcb",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:43"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#4d4d4d",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:46"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:47"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#1ed760",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:50"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#000000",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:51"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#1db954",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:52"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 10%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:53"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1ed760",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:56"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#ffa42b",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:57"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f3727f",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:58"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"SpotifyMixUITitle\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:61"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"SpotifyMixUI\", \"CircularSp\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:62"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:63"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "10px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:68"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:69"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:70"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "18px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:71"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:72"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:73"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:74"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:75"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.50",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:80"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.00",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:81"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "normal",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:82"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:86"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:87"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:88"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:89"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:90"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:91"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:92"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:93"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "64px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:96"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "40px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:97"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:98"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:103"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:104"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:105"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:106"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:110"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:111"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "rgba(0, 0, 0, 0.3) 0px 8px 8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:112"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(30, 215, 96, 0.4)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:115"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:118"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:119"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:120"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:123"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:124"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:125"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:126"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Deck module</p>
|
||||
<h1>Spotify Executive deck</h1>
|
||||
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Pitch deck</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Email module</p>
|
||||
<h1>Spotify Email module</h1>
|
||||
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Email</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Form module</p>
|
||||
<h1>Spotify Capture form</h1>
|
||||
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Form page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Landing module</p>
|
||||
<h1>Spotify Launch narrative</h1>
|
||||
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Landing page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Newsletter module</p>
|
||||
<h1>Spotify Editorial issue</h1>
|
||||
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Newsletter</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Poster module</p>
|
||||
<h1>Spotify Campaign poster</h1>
|
||||
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Poster</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="Spotify" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<p class="eyebrow">Media & Consumer</p>
|
||||
<h1>Spotify system assets</h1>
|
||||
<p class="lead">Generated preview modules for bundled official presets.</p>
|
||||
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
|
||||
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
|
||||
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
|
||||
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
|
||||
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
|
||||
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
|
||||
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
|
||||
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Media & Consumer system</p>
|
||||
<h1>Spotify component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spotify - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1ed760;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
--accent-hover: #1db954;
|
||||
--accent-on: #000000;
|
||||
--bg: #121212;
|
||||
--border: #4d4d4d;
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #f3727f;
|
||||
--ease-standard: ease;
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: #fdfdfd;
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--meta: #cbcbcb;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #b3b3b3;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 9999px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 40px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1ed760;
|
||||
--surface: #181818;
|
||||
--surface-warm: #1f1f1f;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 24px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 12px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 10px;
|
||||
--tracking-display: normal;
|
||||
--warn: #ffa42b;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #121212;
|
||||
--od-surface: #181818;
|
||||
--od-text: #ffffff;
|
||||
--od-muted: #b3b3b3;
|
||||
--od-border: #4d4d4d;
|
||||
--od-accent: #1ed760;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Media & Consumer system</p>
|
||||
<h1>Spotify component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Spotify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#1ed760",
|
||||
"colorPrimaryBg": "#1f1f1f",
|
||||
"colorPrimaryHover": "#1db954",
|
||||
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 10%)",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 6
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-warm: var(--surface-warm);
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-2: var(--fg-2);
|
||||
--color-muted: var(--muted);
|
||||
--color-meta: var(--meta);
|
||||
--color-border: var(--border);
|
||||
--color-border-soft: var(--border-soft);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-on: var(--accent-on);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-active: var(--accent-active);
|
||||
--color-success: var(--success);
|
||||
--color-warn: var(--warn);
|
||||
--color-danger: var(--danger);
|
||||
--font-display: var(--font-display);
|
||||
--font-body: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
--font-mono: var(--font-mono);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--leading-body: var(--leading-body);
|
||||
--leading-tight: var(--leading-tight);
|
||||
--tracking-display: var(--tracking-display);
|
||||
--spacing-1: var(--space-1);
|
||||
--spacing-2: var(--space-2);
|
||||
--spacing-3: var(--space-3);
|
||||
--spacing-4: var(--space-4);
|
||||
--spacing-5: var(--space-5);
|
||||
--spacing-6: var(--space-6);
|
||||
--spacing-8: var(--space-8);
|
||||
--spacing-12: var(--space-12);
|
||||
--spacing-section-desktop: var(--section-y-desktop);
|
||||
--spacing-section-tablet: var(--section-y-tablet);
|
||||
--spacing-section-phone: var(--section-y-phone);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-pill: var(--radius-pill);
|
||||
--shadow-flat: var(--elev-flat);
|
||||
--shadow-ring: var(--elev-ring);
|
||||
--shadow-raised: var(--elev-raised);
|
||||
--shadow-focus-ring: var(--focus-ring);
|
||||
--duration-fast: var(--motion-fast);
|
||||
--duration-base: var(--motion-base);
|
||||
--ease-standard: var(--ease-standard);
|
||||
--container-max: var(--container-max);
|
||||
--spacing-container-desktop: var(--container-gutter-desktop);
|
||||
--spacing-container-tablet: var(--container-gutter-tablet);
|
||||
--spacing-container-phone: var(--container-gutter-phone);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/spotify/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Spotify" brand — near-black immersive
|
||||
* dark theme, vibrant green accent, bold type, album-art-driven.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Content-first darkness — three-step charcoal ladder (#121212 deepest
|
||||
* → #181818 cards → #1f1f1f buttons) where the UI recedes so album
|
||||
* art and playlists can glow; achromatic chrome by design.
|
||||
* 2. SpotifyMixUI/CircularSp family at bold (700) / semibold (600) /
|
||||
* regular (400); uppercase button labels with wide letter-spacing
|
||||
* (1.4px–2px) create a systematic label voice; compact 10–24px range.
|
||||
* 3. Spotify Green (#1ed760) as the singular functional accent —
|
||||
* exclusively for play controls, active states, and primary CTAs;
|
||||
* never decorative; full-pill (500px–9999px) or circular (50%) geometry.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #121212 (near-black deepest); --surface: #181818 (cards).
|
||||
* - --surface-warm: #1f1f1f (button bg / interactive surfaces).
|
||||
* - --fg: #ffffff (white — primary text on dark).
|
||||
* - --fg-2: #fdfdfd (near-pure white — maximum emphasis).
|
||||
* - --muted: #b3b3b3 (silver — secondary text, inactive nav).
|
||||
* - --meta: #cbcbcb (near-white secondary body text).
|
||||
* - --border: #4d4d4d; --border-soft: rgba(255,255,255,0.1).
|
||||
* - --accent: #1ed760 (Spotify Green — play/active/CTA).
|
||||
* - --accent-on: #000000 (black text on green).
|
||||
* - --tracking-display: normal (titles use uppercase + wide tracking inline).
|
||||
* - --leading-tight: 1.00 (section title line-height).
|
||||
* - --radius-sm: 9999px (full pill); --radius-md: 6px (cards/containers).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #121212; /* near-black — deepest background */
|
||||
--surface: #181818; /* cards, sidebar, containers */
|
||||
--surface-warm: #1f1f1f; /* button bg / interactive surfaces */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #ffffff; /* primary text — white on dark */
|
||||
--fg-2: #fdfdfd; /* near-pure white — maximum emphasis */
|
||||
--muted: #b3b3b3; /* silver — secondary, inactive nav */
|
||||
--meta: #cbcbcb; /* slightly brighter secondary text */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: #4d4d4d; /* button borders on dark */
|
||||
--border-soft: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #1ed760; /* Spotify Green — functional only */
|
||||
--accent-on: #000000; /* black text on green */
|
||||
--accent-hover: #1db954; /* green border variant on hover */
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 10%);
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #1ed760; /* green — completion, active */
|
||||
--warn: #ffa42b; /* warning orange */
|
||||
--danger: #f3727f; /* negative red — error states */
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
--font-display: "SpotifyMixUITitle", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "SpotifyMixUI", "CircularSp", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography.
|
||||
* Spotify's compact range: 10px–24px. The schema spine maps key stops.
|
||||
* No display hero larger than 24px; this is an app, not a magazine. */
|
||||
--text-xs: 10px; /* micro / badge */
|
||||
--text-sm: 12px; /* small — tags, counts */
|
||||
--text-base: 16px; /* body bold / body regular */
|
||||
--text-lg: 18px; /* feature heading — semibold */
|
||||
--text-xl: 20px; /* section sub-heading */
|
||||
--text-2xl: 24px; /* section title — SpotifyMixUITitle */
|
||||
--text-3xl: 24px; /* same tier — max useful display size */
|
||||
--text-4xl: 24px; /* Spotify caps at 24px in the schema */
|
||||
|
||||
/* Leading + tracking.
|
||||
* Compact and dense — this is an app built for scanning playlists.
|
||||
* Button labels are uppercase + 1.4px–2px tracking (set inline in CSS). */
|
||||
--leading-body: 1.50;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: normal;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 8px base unit per DESIGN.md §Spacing System. Compact scale. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — dark compression; density over breathing room. */
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 40px;
|
||||
--section-y-phone: 24px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* Pill everything — 9999px for navigation pills, 500px for large pill
|
||||
buttons, 6px for album art and card containers. */
|
||||
--radius-sm: 9999px; /* full pill — buttons/navigation */
|
||||
--radius-md: 6px; /* cards, album art containers */
|
||||
--radius-lg: 8px; /* dialogs, panels */
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* Heavy shadows needed on dark — 0.3–0.5 opacity for visibility. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 8px 8px;
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
--focus-ring: 0 0 0 3px rgba(30, 215, 96, 0.4);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user