④段整套同步（六节 ＋ 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,168 @@
|
||||
# نظام تصميم مستوحى من Discord
|
||||
|
||||
> Category: إنتاجية وبرمجيات كخدمة
|
||||
> منصة صوت ومحادثة. ألوان بنفسجية-زرقاء عميقة، واجهات داكنة في المقام الأول، مع لمسات مرحة للألوان المميزة.
|
||||
|
||||
## 1. السمة البصرية والأجواء العامة
|
||||
|
||||
صُمّم منتج Discord للأمسيات وجلسات الألعاب الجماعية والمحادثات الصوتية، لذا فإن الواجهة بأكملها تعتمد على الأسلوب الداكن أولاً. القماش الافتراضي هو `Background Primary` العميق (`#313338` للسمة الفاتحة، `#1e1f22` للسمة الداكنة)، مع أعمدة المحادثة المرتّبة فوق ظلال أفتح أو أغمق قليلاً للدلالة على القنوات والمواضيع الفرعية واللوحات الجانبية. اللون المميز **Blurple** (`#5865f2`) محجوز للعلامة التجارية وعناصر الحث الرئيسية على الإجراء والإشارات وعناصر "أنت" — يُستخدم بتحفّظ ليبرز على خلفية الألوان المحايدة الخافتة.
|
||||
|
||||
الخط المستخدم هو **gg sans** (بديل Discord المخصص لـ Whitney) للنصوص وعناصر الواجهة، بأشكال هندسية مستديرة تبدو ودية مع الحفاظ على القابلية للقراءة في الأحجام الصغيرة التي يتطلبها تطبيق المحادثة. تتدرج العناوين بشكل تصاعدي؛ وصفوف المحادثة متقاربة (4–8 بكسل بين مجموعات الرسائل) بحيث تبدو ساعات التمرير قابلة للمسح البصري.
|
||||
|
||||
لغة الأشكال مستديرة لكنها ليست منتفخة كالبالونات: نصف قطر 8 بكسل للبطاقات، و4 بكسل للحقول، وأشكال حبة كاملة لشارات الحالة والعلامات. تظهر أيقونات الخوادم كمربعات مستديرة بحجم 48 بكسل تتحول إلى دوائر عند التحويم — لمسة حركية صغيرة أصبحت جزءاً من هوية العلامة التجارية.
|
||||
|
||||
**الخصائص الرئيسية:**
|
||||
- واجهات داكنة أولاً: `#1e1f22` / `#2b2d31` / `#313338` (عمق بثلاث مستويات)
|
||||
- اللون البنفسجي-الأزرق `#5865f2` بوصفه اللون المشبع الوحيد في واجهة المحادثة
|
||||
- خط gg sans (بأسلوب Whitney) لجميع النصوص — ودي وهندسي ومحايد
|
||||
- أيقونات خوادم مربعة مستديرة (نصف قطر 16 بكسل) تتحول إلى دوائر عند التحويم
|
||||
- تباعد ضيق بين صفوف المحادثة، مع مساحة داخلية سخية للألواح الجانبية
|
||||
- نقاط الحالة: أخضر للمتصل، أصفر للخامل، أحمر لعدم الإزعاج، رمادي لغير المتصل
|
||||
- فواصل 1 بكسل محسوبة بدقة بكسلية بلون أبيض خافت ذو شفافية منخفضة
|
||||
|
||||
## 2. لوحة الألوان وأدوارها
|
||||
|
||||
### الأساسية
|
||||
- **Blurple** (`#5865f2`): اللون الأساسي للعلامة التجارية، عنصر الحث الرئيسي، تمييز الإشارات.
|
||||
- **Blurple Hover** (`#4752c4`): حالة التحويم والتنشيط للون Blurple.
|
||||
- **Blurple Soft** (`#7289da`): اللون البنفسجي-الأزرق القديم، لون تمييز ثانوي في مواد التسويق.
|
||||
|
||||
### السطوح (السمة الداكنة — الافتراضية)
|
||||
- **Background Tertiary** (`#1e1f22`): شريط قائمة الخوادم، أعمق خلفية.
|
||||
- **Background Secondary** (`#2b2d31`): الشريط الجانبي للقنوات، الشريط الجانبي للإعدادات.
|
||||
- **Background Primary** (`#313338`): واجهة المحادثة، عمود الرسائل.
|
||||
- **Background Floating** (`#111214`): النوافذ المنبثقة العائمة، تلميحات الأدوات، الإكمال التلقائي.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): طبقة التحويم فوق الصفوف.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): الصف النشط.
|
||||
|
||||
### السطوح (السمة الفاتحة)
|
||||
- **Light Bg Primary** (`#ffffff`): واجهة المحادثة في السمة الفاتحة.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): الشريط الجانبي في السمة الفاتحة.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): أعمق سطح فاتح.
|
||||
|
||||
### النصوص
|
||||
- **Header Primary** (`#f2f3f5`): عناوين القنوات وعناوين النوافذ المشروطة في السمة الداكنة.
|
||||
- **Header Secondary** (`#b5bac1`): عناوين خافتة.
|
||||
- **Text Normal** (`#dbdee1`): نص الجسم في السمة الداكنة — أبرد قليلاً من الأبيض الخالص.
|
||||
- **Text Muted** (`#949ba4`): الطوابع الزمنية وأسماء الخوادم والبيانات الوصفية الثانوية.
|
||||
- **Text Link** (`#00a8fc`): الروابط التشعبية في الرسائل — أزرق سماوي، مختلف عن Blurple.
|
||||
- **Channels Default** (`#80848e`): اسم القناة غير النشطة في الشريط الجانبي.
|
||||
|
||||
### الحالة والدلالات
|
||||
- **Status Online** (`#23a55a`): نقطة الاتصال، حالات النجاح.
|
||||
- **Status Idle** (`#f0b232`): نقطة الخمول، الغياب.
|
||||
- **Status DND** (`#f23f43`): عدم الإزعاج، يُستخدم أيضاً كلون أحمر للإجراءات التدميرية.
|
||||
- **Status Streaming** (`#593695`): البنفسجي لحالة "البث".
|
||||
- **Status Offline** (`#80848e`): الرمادي لحالة عدم الاتصال.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): طبقة بنفسجية-زرقاء خفيفة على صفوف @الإشارة.
|
||||
|
||||
### الحدود والفواصل
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): الفاصل القياسي في السمة الداكنة.
|
||||
- **Border Subtle** (`#3f4147`): فاصل صلب للبطاقات.
|
||||
|
||||
## 3. قواعد الطباعة
|
||||
|
||||
### عائلة الخطوط
|
||||
- **النص / الواجهة / العناوين**: `gg sans`، مع الخطوط الاحتياطية: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **العرض (قديم / Whitney)**: `Whitney`، مع الخط الاحتياطي: `gg sans`
|
||||
- **الكود / الخط أحادي العرض**: `"gg mono"`، مع الخطوط الاحتياطية: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### التسلسل الهرمي
|
||||
|
||||
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | بطل التسويق |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | عناوين الإعدادات/الملف الشخصي |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`، عنوان القناة |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | نص المحادثة القياسي |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | مؤلف الرسالة |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "اليوم الساعة 4:32 م" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | صفوف قائمة القنوات |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | عنوان الخادم |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | نص الحالة، علامة التعديل |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | `كود` مضمّن |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | كتلة ```ثلاثي الأسوار``` |
|
||||
|
||||
### المبادئ
|
||||
- **الهندسة الودية**: يحل gg sans محل Whitney بنهايات مستديرة على a/g/s — تسعى العلامة التجارية إلى الدفء دون المساس بوضوح القراءة.
|
||||
- **التباين بالوزن لا باللون**: يأتي التسلسل الهرمي من تدرجات الوزن 400→500→600→700→800؛ تبقى الواجهة محايدة.
|
||||
- **نص الجسم 16 بكسل**: لا تنخفض رسائل المحادثة عن 16 بكسل. تأتي الكثافة من ارتفاع السطر (1.375)، وليس حجم الخط.
|
||||
|
||||
## 4. تنسيقات المكونات
|
||||
|
||||
### الأزرار
|
||||
|
||||
**الأساسي**
|
||||
- الخلفية: `#5865f2`
|
||||
- النص: `#ffffff`
|
||||
- الحشو: 8px 16px
|
||||
- نصف القطر: 4px
|
||||
- التحويم: `#4752c4`
|
||||
- الاستخدام: عناصر الحث الرئيسية، "متابعة"، "الانضمام إلى الخادم"
|
||||
|
||||
**الثانوي**
|
||||
- الخلفية: `#4e5058`
|
||||
- النص: `#ffffff`
|
||||
- الحشو: 8px 16px
|
||||
- نصف القطر: 4px
|
||||
- التحويم: `#6d6f78`
|
||||
|
||||
**الثالثي / الخفي (بأسلوب الرابط)**
|
||||
- الخلفية: transparent
|
||||
- النص: `#dbdee1`
|
||||
- التحويم: نص مسطّر، بدون تغيير في الخلفية
|
||||
|
||||
**التدمير**
|
||||
- الخلفية: `#da373c`
|
||||
- النص: `#ffffff`
|
||||
- التحويم: `#a12d2f`
|
||||
|
||||
### حقول الإدخال
|
||||
- الخلفية: `#1e1f22`
|
||||
- النص: `#dbdee1`
|
||||
- الحد: 1px solid `#1e1f22`
|
||||
- نصف القطر: 4px
|
||||
- الحشو: 10px 12px
|
||||
- التركيز: حد بلون `#5865f2`
|
||||
|
||||
### أيقونات الخوادم
|
||||
- الحجم: 48×48 بكسل
|
||||
- نصف القطر: 16 بكسل (مربع مستدير) افتراضياً؛ ينتقل إلى 50% عند التحويم والتنشيط.
|
||||
- الحالة النشطة: حبة بيضاء عرضها 4 بكسل على الحافة اليسرى من عمود الأيقونات.
|
||||
|
||||
### نقاط الحالة
|
||||
- الحجم: 10×10 بكسل
|
||||
- الحد: 3px solid background-tertiary (يخلق تأثير "الشق")
|
||||
- الموضع: أسفل يمين الصورة الرمزية.
|
||||
|
||||
### البطاقات / التضمينات
|
||||
- الخلفية: `#2b2d31` (داكن) أو `#f2f3f5` (فاتح)
|
||||
- الحد الأيسر: 4px solid لون تمييز التضمين.
|
||||
- نصف القطر: 4px
|
||||
- الحشو: 8px 16px
|
||||
|
||||
### حبة الإشارة
|
||||
- الخلفية: `rgba(88, 101, 242, 0.3)`
|
||||
- النص: `#c9cdfb`
|
||||
- الحشو: 0 2px
|
||||
- نصف القطر: 3px
|
||||
|
||||
## 5. التباعد والتخطيط
|
||||
|
||||
- **الوحدة الأساسية**: 4 بكسل. السلّم: 4، 8، 12، 16، 20، 24، 32، 40.
|
||||
- **شريط الخوادم**: عرضه 72 بكسل، ثابت.
|
||||
- **الشريط الجانبي للقنوات**: عرضه 240 بكسل.
|
||||
- **قائمة الأعضاء**: عرضها 240 بكسل على سطح المكتب.
|
||||
- **عمود المحادثة**: مرن، بحد أدنى 380 بكسل.
|
||||
|
||||
## 6. الحركة والانتقالات
|
||||
|
||||
- **المدة**: 200 مللي ثانية للتحويم؛ 350 مللي ثانية لتحول الأيقونة إلى دائرة؛ 80 مللي ثانية لتلاشي تلميح الأداة.
|
||||
- **التسهيل**: `cubic-bezier(0.215, 0.61, 0.355, 1)` لتحول الأيقونة (سريع ثم استقرار).
|
||||
- **نبضة الإشعار**: 1.4 ثانية ease-in-out infinite على مؤشر الإشارة غير المقروءة.
|
||||
|
||||
## 7. ضوابط الاستخدام
|
||||
|
||||
- احتفظ بالغلاف الداكن والكثافة المدمجة وتسلسل إجراءات اللون Blurple معاً؛ استخدام Blurple في تخطيط تسويقي فاتح يكسر الإحساس بمنتج Discord.
|
||||
- ابنِ الواجهات كثيفة التنقل حول الأشرطة والألواح الجانبية وأعمدة المحادثة، بدلاً من البطاقات الزخرفية المنعزلة.
|
||||
- استخدم لغة الأيقونة المربعة المستديرة ونقطة الحالة عند تمثيل الأشخاص أو الخوادم أو الحضور النشط.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Produktivität & SaaS
|
||||
> Sprach-/Chat-Plattform. Tiefes Blurple, dunkle Oberflächen, verspielter Akzent-Charakter.
|
||||
|
||||
## 1. Visuelles Thema & Atmosphäre
|
||||
|
||||
Discords Produkt ist für Abende, Raids und Gruppensprache ausgelegt — daher sind alle Oberflächen konsequent dunkel gestaltet. Die Standardfläche ist das tiefe `Background Primary` (`#313338` helles Design, `#1e1f22` dunkles Design), wobei Chat-Spalten auf leicht helleren oder dunkleren Tönen geschichtet werden, um Kanäle, Threads und Seitenpanels zu kennzeichnen. Das charakteristische **Blurple** (`#5865f2`) ist dem Markenzeichen, primären CTAs, Erwähnungen und dem Eigenzuordnungs-Affordance vorbehalten — sparsam eingesetzt, damit es gegen die gedämpften Neutraltöne heraussticht.
|
||||
|
||||
Die Typografie setzt auf **gg sans** (Discords individuellen Whitney-Ersatz) für Fließtext und Benutzeroberfläche, mit abgerundeten geometrischen Formen, die zugänglich wirken, aber in den kleinen Größen, die ein Chat-Client erfordert, lesbar bleiben. Überschriften skalieren inkrementell; Chat-Zeilen sind eng gefasst (4–8px zwischen Nachrichtengruppen), damit ein stundenlanges Scrollen nach oben übersichtlich bleibt.
|
||||
|
||||
Die Formensprache ist abgerundet, aber nicht ballonweich: 8px Radien auf Karten, 4px auf Eingabefeldern, vollständige Pillen auf Status-Badges und Tags. Server werden als abgerundete quadratische Avatare mit 48px dargestellt, die beim Hover zu Kreisen werden — eine kleine Bewegung, die Teil der Markenidentität geworden ist.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dunkle Oberflächen: `#1e1f22` / `#2b2d31` / `#313338` (3-stufige Tiefe)
|
||||
- Blurple `#5865f2` als einziger gesättigter Akzent auf der Chat-Oberfläche
|
||||
- gg sans (Whitney-Stil) für alle Texte — freundlich, geometrisch, neutral
|
||||
- Abgerundete quadratische Server-Avatare (16px Radius), die beim Hover in Kreise wechseln
|
||||
- Enger Chat-Zeilenabstand, großzügige Polsterung in Seitenpanels
|
||||
- Status-Punkte: grün online, gelb abwesend, rot nicht stören, grau offline
|
||||
- Pixel-exakte 1px-Trennlinien in dezenten Off-White-Tönen mit geringem Alpha
|
||||
|
||||
## 2. Farbpalette & Rollen
|
||||
|
||||
### Primär
|
||||
- **Blurple** (`#5865f2`): Markenfarbe, primäre CTA, Erwähnungs-Hervorhebung.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/Aktiv-Zustand für Blurple.
|
||||
- **Blurple Soft** (`#7289da`): Legacy-Blurple, sekundärer Akzent im Marketing.
|
||||
|
||||
### Oberfläche (Dunkles Design — Standard)
|
||||
- **Background Tertiary** (`#1e1f22`): Server-Listen-Leiste, tiefster Hintergrund.
|
||||
- **Background Secondary** (`#2b2d31`): Kanal-Seitenleiste, Einstellungs-Seitenleiste.
|
||||
- **Background Primary** (`#313338`): Chat-Oberfläche, Nachrichtenspalte.
|
||||
- **Background Floating** (`#111214`): Schwebende Popovers, Tooltips, Autovervollständigung.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover-Überlagerung auf Zeilen.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Aktive Zeile.
|
||||
|
||||
### Oberfläche (Helles Design)
|
||||
- **Light Bg Primary** (`#ffffff`): Chat-Oberfläche im hellen Design.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Seitenleiste im hellen Design.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Tiefste helle Oberfläche.
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): Kanal-Header, Modal-Titel im dunklen Design.
|
||||
- **Header Secondary** (`#b5bac1`): Gedämpfte Header.
|
||||
- **Text Normal** (`#dbdee1`): Fließtext im dunklen Design — leicht kühler als reines Weiß.
|
||||
- **Text Muted** (`#949ba4`): Zeitstempel, Server-Namen, sekundäre Metadaten.
|
||||
- **Text Link** (`#00a8fc`): Hyperlinks in Nachrichten — Himmelblau, unterscheidbar von Blurple.
|
||||
- **Channels Default** (`#80848e`): Inaktiver Kanalname in der Seitenleiste.
|
||||
|
||||
### Status & Semantisch
|
||||
- **Status Online** (`#23a55a`): Online-Punkt, Erfolgszustände.
|
||||
- **Status Idle** (`#f0b232`): Abwesend-Punkt, Away-Status.
|
||||
- **Status DND** (`#f23f43`): Nicht stören, dient auch als destruktives Rot.
|
||||
- **Status Streaming** (`#593695`): „Streaming"-Lila.
|
||||
- **Status Offline** (`#80848e`): Offline-Grau.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Softer Blurple-Schimmer auf @mention-Zeilen.
|
||||
|
||||
### Rahmen & Trennlinien
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standard-Trennlinie im dunklen Design.
|
||||
- **Border Subtle** (`#3f4147`): Feste Trennlinie für Karten.
|
||||
|
||||
## 3. Typografie-Regeln
|
||||
|
||||
### Schriftfamilie
|
||||
- **Body / UI / Headings**: `gg sans`, mit Fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (Legacy / Whitney)**: `Whitney`, mit Fallback: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, mit Fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchie
|
||||
|
||||
| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Zeichenabstand | Hinweise |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing-Hero |
|
||||
| Seitenüberschrift | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Einstellungs-/Profil-Titel |
|
||||
| Kanalname | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, Kanal-Header |
|
||||
| Nachrichtentext | gg sans | 16px (1rem) | 400 | 1.375 | normal | Normaler Chat-Text |
|
||||
| Benutzername | gg sans | 16px (1rem) | 500 | 1.25 | normal | Verfasser einer Nachricht |
|
||||
| Zeitstempel | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | „Heute um 16:32 Uhr" |
|
||||
| Seitenleisten-Kanal | gg sans | 16px (1rem) | 500 | 1.25 | normal | Zeilen der Kanalliste |
|
||||
| Server-Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Server-Header |
|
||||
| Bildunterschrift / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Statustext, Bearbeitungs-Tag |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline-`Code` |
|
||||
| Code-Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```dreifach-umzäunter``` Block |
|
||||
|
||||
### Grundsätze
|
||||
- **Freundliche Geometrie**: gg sans ersetzt Whitney mit abgerundeten Abschlüssen bei a/g/s — die Marke möchte Wärme vermitteln, ohne die Lesbarkeit zu beeinträchtigen.
|
||||
- **Gewichtskontrast statt Farbkontrast**: Hierarchie entsteht durch Gewichtsschritte 400→500→600→700→800; die Oberfläche bleibt neutral.
|
||||
- **16px Fließtext**: Chat-Nachrichten werden nicht unter 16px verkleinert. Dichte entsteht durch Zeilenhöhe (1.375), nicht durch Schriftgröße.
|
||||
|
||||
## 4. Komponentenstile
|
||||
|
||||
### Schaltflächen
|
||||
|
||||
**Primär**
|
||||
- Hintergrund: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Innenabstand: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Verwendung: Primäre CTAs, „Weiter", „Server beitreten"
|
||||
|
||||
**Sekundär**
|
||||
- Hintergrund: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Innenabstand: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiär / Dezent (Link-Stil)**
|
||||
- Hintergrund: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: Text unterstrichen, kein Hintergrundwechsel
|
||||
|
||||
**Destruktiv**
|
||||
- Hintergrund: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Eingabefelder
|
||||
- Hintergrund: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Rahmen: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Innenabstand: 10px 12px
|
||||
- Fokus: Rahmen `#5865f2`
|
||||
|
||||
### Server-Avatare
|
||||
- Größe: 48×48px
|
||||
- Radius: 16px (abgerundetes Quadrat) standardmäßig; wechselt beim Hover und im aktiven Zustand zu 50%.
|
||||
- Aktiver Zustand: 4px weiße Pille an der linken Kante der Symbol-Spalte.
|
||||
|
||||
### Status-Punkte
|
||||
- Größe: 10×10px
|
||||
- Rahmen: 3px solid background-tertiary (erzeugt den „Einschnitt"-Effekt)
|
||||
- Position: unten rechts am Avatar.
|
||||
|
||||
### Karten / Einbettungen
|
||||
- Hintergrund: `#2b2d31` (dunkel) oder `#f2f3f5` (hell)
|
||||
- Linker Rahmen: 4px solid Einbettungs-Akzentfarbe.
|
||||
- Radius: 4px
|
||||
- Innenabstand: 8px 16px
|
||||
|
||||
### Erwähnungs-Pille
|
||||
- Hintergrund: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Innenabstand: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Abstände & Layout
|
||||
|
||||
- **Basiseinheit**: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Server-Leiste**: 72px breit, fest.
|
||||
- **Kanal-Seitenleiste**: 240px breit.
|
||||
- **Mitgliederliste**: 240px breit auf Desktop.
|
||||
- **Chat-Spalte**: fluid, min. 380px.
|
||||
|
||||
## 6. Animation
|
||||
|
||||
- **Dauer**: 200ms für Hover; 350ms für die Avatar-Kreis-Verwandlung; 80ms für Tooltip-Einblendung.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` für die Avatar-Verwandlung (schneller Einstieg, dann Einpendeln).
|
||||
- **Benachrichtigungs-Puls**: 1,4s ease-in-out infinite auf dem Ungelesen-Erwähnungs-Indikator.
|
||||
|
||||
## 7. Verwendungsrichtlinien
|
||||
|
||||
- Die dunkle Hülle, kompakte Dichte und Blurple-Aktionshierarchie gemeinsam beibehalten; Blurple auf einem hellen Marketing-Layout wirkt dem Discord-Produktgefühl entgegen.
|
||||
- Navigationsintensive Oberflächen um Leisten, Seitenleisten und Chat-Spalten strukturieren statt um isolierte dekorative Karten.
|
||||
- Die abgerundete quadratische Avatar- und Status-Punkt-Sprache verwenden, wenn Personen, Server oder aktive Präsenz dargestellt werden.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Sistema de Diseño Inspirado en Discord
|
||||
|
||||
> Categoría: Productividad y SaaS
|
||||
> Plataforma de voz y chat. Blurple profundo, superficies oscuras de base, momentos de acento lúdicos.
|
||||
|
||||
## 1. Tema Visual y Atmósfera
|
||||
|
||||
El producto de Discord está diseñado para las noches, las incursiones y las llamadas grupales, por lo que toda la interfaz es oscura de base. El lienzo predeterminado es el profundo `Background Primary` (`#313338` tema claro, `#1e1f22` tema oscuro), con columnas de chat superpuestas en tonos ligeramente más claros u oscuros para diferenciar canales, hilos y paneles laterales. El icónico **Blurple** (`#5865f2`) está reservado para el logotipo de la marca, los CTAs primarios, las menciones y el indicador de "tú" — usado con moderación para que resalte sobre los neutros apagados.
|
||||
|
||||
La tipografía usa **gg sans** (el reemplazo personalizado de Whitney de Discord) para el texto de la interfaz, con formas geométricas redondeadas que resultan accesibles sin perder legibilidad en los tamaños pequeños que exige un cliente de chat. Los encabezados aumentan de forma incremental; las filas del chat son compactas (4–8px entre grupos de mensajes) para que horas de historial resulten fáciles de escanear.
|
||||
|
||||
El lenguaje de formas es redondeado pero no globoso: radios de 8px en las tarjetas, 4px en los campos, píldoras completas en las insignias de estado y etiquetas. Los servidores son avatares cuadrados redondeados de 48px que se convierten en círculos al pasar el cursor — un pequeño detalle de movimiento que se ha convertido en parte de la identidad de la marca.
|
||||
|
||||
**Características Clave:**
|
||||
- Superficies oscuras de base: `#1e1f22` / `#2b2d31` / `#313338` (profundidad en 3 niveles)
|
||||
- Blurple `#5865f2` como único acento saturado en la superficie del chat
|
||||
- gg sans (estilo Whitney) para todo el texto — amigable, geométrico y neutro
|
||||
- Avatares de servidor cuadrados redondeados (radio 16px) que se convierten en círculos al pasar el cursor
|
||||
- Espaciado compacto en las filas del chat, relleno generoso en los paneles laterales
|
||||
- Puntos de estado: verde para conectado, amarillo para ausente, rojo para no molestar, gris para desconectado
|
||||
- Divisores de 1px alineados al píxel en blanco apagado con baja opacidad
|
||||
|
||||
## 2. Paleta de Colores y Roles
|
||||
|
||||
### Primario
|
||||
- **Blurple** (`#5865f2`): Primario de marca, CTA principal, resaltado de menciones.
|
||||
- **Blurple Hover** (`#4752c4`): Estado hover/activo del blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple heredado, acento secundario en marketing.
|
||||
|
||||
### Superficie (Tema Oscuro — predeterminado)
|
||||
- **Background Tertiary** (`#1e1f22`): Barra de servidores, fondo más profundo.
|
||||
- **Background Secondary** (`#2b2d31`): Barra lateral de canales, barra lateral de ajustes.
|
||||
- **Background Primary** (`#313338`): Superficie del chat, columna de mensajes.
|
||||
- **Background Floating** (`#111214`): Popovers flotantes, tooltips, autocompletar.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Superposición hover en filas.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Fila activa.
|
||||
|
||||
### Superficie (Tema Claro)
|
||||
- **Light Bg Primary** (`#ffffff`): Superficie del chat en tema claro.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Barra lateral en tema claro.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Superficie clara más profunda.
|
||||
|
||||
### Texto
|
||||
- **Header Primary** (`#f2f3f5`): Encabezados de canal, títulos de modal en tema oscuro.
|
||||
- **Header Secondary** (`#b5bac1`): Encabezados apagados.
|
||||
- **Text Normal** (`#dbdee1`): Texto de cuerpo en tema oscuro — ligeramente más frío que el blanco puro.
|
||||
- **Text Muted** (`#949ba4`): Marcas de tiempo, nombres de servidor, metadatos secundarios.
|
||||
- **Text Link** (`#00a8fc`): Hipervínculos en mensajes — azul cielo, diferenciado del blurple.
|
||||
- **Channels Default** (`#80848e`): Nombre de canal inactivo en la barra lateral.
|
||||
|
||||
### Estado y Semántica
|
||||
- **Status Online** (`#23a55a`): Punto de conectado, estados de éxito.
|
||||
- **Status Idle** (`#f0b232`): Punto de ausente, alejado.
|
||||
- **Status DND** (`#f23f43`): No molestar, también funciona como rojo destructivo.
|
||||
- **Status Streaming** (`#593695`): Morado de "transmitiendo".
|
||||
- **Status Offline** (`#80848e`): Gris de desconectado.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Suave tono blurple en filas con @mención.
|
||||
|
||||
### Borde y Divisor
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Divisor estándar en oscuro.
|
||||
- **Border Subtle** (`#3f4147`): Divisor sólido para tarjetas.
|
||||
|
||||
## 3. Reglas Tipográficas
|
||||
|
||||
### Familia de Fuentes
|
||||
- **Cuerpo / UI / Encabezados**: `gg sans`, con fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (heredado / Whitney)**: `Whitney`, con fallback: `gg sans`
|
||||
- **Código / Mono**: `"gg mono"`, con fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Jerarquía
|
||||
|
||||
| Rol | Fuente | Tamaño | Peso | Altura de Línea | Espaciado de Letras | Notas |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero de marketing |
|
||||
| Encabezado de Página | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Títulos de ajustes/perfil |
|
||||
| Nombre de Canal | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, encabezado del canal |
|
||||
| Cuerpo del Mensaje | gg sans | 16px (1rem) | 400 | 1.375 | normal | Texto estándar del chat |
|
||||
| Nombre de Usuario | gg sans | 16px (1rem) | 500 | 1.25 | normal | Autor de un mensaje |
|
||||
| Marca de Tiempo | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Hoy a las 4:32 PM" |
|
||||
| Canal de Barra Lateral | gg sans | 16px (1rem) | 500 | 1.25 | normal | Filas de la lista de canales |
|
||||
| Nombre del Servidor | gg sans | 16px (1rem) | 600 | 1.25 | normal | Encabezado del servidor |
|
||||
| Leyenda / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Texto de estado, etiqueta editado |
|
||||
| Código en Línea | gg mono | 0.875em | 400 | inherit | normal | `code` en línea |
|
||||
| Bloque de Código | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Bloque ```con triple acento grave``` |
|
||||
|
||||
### Principios
|
||||
- **Geometría amigable**: gg sans reemplaza a Whitney con terminales redondeados en a/g/s — la marca busca calidez sin sacrificar la legibilidad.
|
||||
- **Contraste de peso sobre contraste de color**: la jerarquía proviene de los pasos de peso 400→500→600→700→800; la superficie permanece neutral.
|
||||
- **Cuerpo de 16px**: los mensajes del chat no se reducen por debajo de 16px. La densidad proviene de la altura de línea (1.375), no del tamaño de fuente.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botones
|
||||
|
||||
**Primario**
|
||||
- Fondo: `#5865f2`
|
||||
- Texto: `#ffffff`
|
||||
- Relleno: 8px 16px
|
||||
- Radio: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Uso: CTAs primarios, "Continuar", "Unirse al Servidor"
|
||||
|
||||
**Secundario**
|
||||
- Fondo: `#4e5058`
|
||||
- Texto: `#ffffff`
|
||||
- Relleno: 8px 16px
|
||||
- Radio: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Terciario / Sutil (estilo enlace)**
|
||||
- Fondo: transparent
|
||||
- Texto: `#dbdee1`
|
||||
- Hover: texto subrayado, sin cambio de fondo
|
||||
|
||||
**Destructivo**
|
||||
- Fondo: `#da373c`
|
||||
- Texto: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Campos de Entrada
|
||||
- Fondo: `#1e1f22`
|
||||
- Texto: `#dbdee1`
|
||||
- Borde: 1px solid `#1e1f22`
|
||||
- Radio: 4px
|
||||
- Relleno: 10px 12px
|
||||
- Foco: borde `#5865f2`
|
||||
|
||||
### Avatares de Servidor
|
||||
- Tamaño: 48×48px
|
||||
- Radio: 16px (cuadrado redondeado) por defecto; transiciona a 50% en hover y activo.
|
||||
- Estado activo: píldora blanca de 4px en el borde izquierdo de la columna de iconos.
|
||||
|
||||
### Puntos de Estado
|
||||
- Tamaño: 10×10px
|
||||
- Borde: 3px solid background-tertiary (crea el efecto de "muesca")
|
||||
- Posición: esquina inferior derecha del avatar.
|
||||
|
||||
### Tarjetas / Embeds
|
||||
- Fondo: `#2b2d31` (oscuro) o `#f2f3f5` (claro)
|
||||
- Borde izquierdo: 4px solid color de acento del embed.
|
||||
- Radio: 4px
|
||||
- Relleno: 8px 16px
|
||||
|
||||
### Píldora de Mención
|
||||
- Fondo: `rgba(88, 101, 242, 0.3)`
|
||||
- Texto: `#c9cdfb`
|
||||
- Relleno: 0 2px
|
||||
- Radio: 3px
|
||||
|
||||
## 5. Espaciado y Maquetación
|
||||
|
||||
- **Unidad base**: 4px. Escala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Barra de servidores**: 72px de ancho, fija.
|
||||
- **Barra lateral de canales**: 240px de ancho.
|
||||
- **Lista de miembros**: 240px de ancho en escritorio.
|
||||
- **Columna de chat**: fluida, mínimo 380px.
|
||||
|
||||
## 6. Movimiento
|
||||
|
||||
- **Duración**: 200ms para hover; 350ms para la transformación de avatar a círculo; 80ms para el desvanecimiento del tooltip.
|
||||
- **Aceleración**: `cubic-bezier(0.215, 0.61, 0.355, 1)` para la transformación del avatar (rápida al inicio, luego se asienta).
|
||||
- **Pulso de notificación**: 1.4s ease-in-out infinite en el indicador de mención no leída.
|
||||
|
||||
## 7. Restricciones de Uso
|
||||
|
||||
- Mantén juntos la carcasa oscura, la densidad compacta y la jerarquía de acción en blurple; usar blurple en una maquetación de marketing con fondo claro rompe la sensación del producto Discord.
|
||||
- Mantén las superficies con mucha navegación estructuradas alrededor de barras, barras laterales y columnas de chat en lugar de tarjetas decorativas aisladas.
|
||||
- Usa el avatar cuadrado redondeado y el lenguaje de puntos de estado cuando representes personas, servidores o presencia activa.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Productivité & SaaS
|
||||
> Plateforme de messagerie et de chat vocal. Blurple profond, surfaces prioritairement sombres, moments d'accent enjoués.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Le produit Discord est conçu pour les soirées, les raids et les sessions de chat vocal en groupe — l'ensemble de la surface est donc prioritairement sombre. Le canevas par défaut est le profond `Background Primary` (`#313338` thème clair, `#1e1f22` thème sombre), avec des colonnes de chat superposées sur des teintes légèrement plus claires ou plus foncées pour distinguer les canaux, les fils de discussion et les panneaux latéraux. Le **Blurple** signature (`#5865f2`) est réservé à la marque, aux CTA principaux, aux mentions et à l'affordance « vous » — utilisé avec parcimonie pour qu'il ressorte sur les neutres atténués.
|
||||
|
||||
La typographie utilise **gg sans** (le Whitney-replacement personnalisé de Discord) pour le corps du texte et l'interface, avec des formes géométriques arrondies qui paraissent accueillantes tout en restant lisibles aux petites tailles qu'exige un client de messagerie. Les titres augmentent progressivement ; les lignes de chat sont serrées (4–8px entre les groupes de messages) pour que des heures de défilement restent facilement parcourables.
|
||||
|
||||
Le langage des formes est arrondi sans être excessivement doux : rayons de 8px sur les cartes, 4px sur les champs de saisie, pilules complètes sur les badges de statut et les étiquettes. Les serveurs sont des avatars carrés arrondis de 48px qui se transforment en cercles au survol — un détail d'animation qui fait désormais partie de l'identité de la marque.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Surfaces prioritairement sombres : `#1e1f22` / `#2b2d31` / `#313338` (profondeur en 3 niveaux)
|
||||
- Blurple `#5865f2` comme seul accent saturé dans la surface de chat
|
||||
- gg sans (style Whitney) pour tous les textes — convivial, géométrique, neutre
|
||||
- Avatars de serveur en carré arrondi (rayon 16px) qui se transforment en cercles au survol
|
||||
- Espacement serré entre les lignes de chat, rembourrage généreux dans les panneaux latéraux
|
||||
- Points de statut : vert en ligne, jaune inactif, rouge ne pas déranger, gris hors ligne
|
||||
- Séparateurs de 1px alignés sur la grille de pixels, en blanc cassé à faible opacité
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Blurple** (`#5865f2`): Couleur principale de la marque, CTA principal, mise en évidence des mentions.
|
||||
- **Blurple Hover** (`#4752c4`): Survol/actif pour le blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple hérité, accent secondaire dans le marketing.
|
||||
|
||||
### Surface (Dark Theme — default)
|
||||
- **Background Tertiary** (`#1e1f22`): Rail de la liste des serveurs, arrière-plan le plus profond.
|
||||
- **Background Secondary** (`#2b2d31`): Barre latérale des canaux, barre latérale des paramètres.
|
||||
- **Background Primary** (`#313338`): Surface de chat, colonne des messages.
|
||||
- **Background Floating** (`#111214`): Popovers flottants, infobulles, autocomplétion.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Superposition de survol sur les lignes.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Ligne active.
|
||||
|
||||
### Surface (Light Theme)
|
||||
- **Light Bg Primary** (`#ffffff`): Surface de chat en thème clair.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Barre latérale en thème clair.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Surface claire la plus profonde.
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): En-têtes de canaux, titres de modales en thème sombre.
|
||||
- **Header Secondary** (`#b5bac1`): En-têtes atténués.
|
||||
- **Text Normal** (`#dbdee1`): Corps du texte en thème sombre — légèrement plus froid que le blanc pur.
|
||||
- **Text Muted** (`#949ba4`): Horodatages, noms de serveurs, métadonnées secondaires.
|
||||
- **Text Link** (`#00a8fc`): Hyperliens dans les messages — bleu ciel, distinct du blurple.
|
||||
- **Channels Default** (`#80848e`): Nom du canal inactif dans la barre latérale.
|
||||
|
||||
### Status & Semantic
|
||||
- **Status Online** (`#23a55a`): Point en ligne, états de succès.
|
||||
- **Status Idle** (`#f0b232`): Point inactif, absent.
|
||||
- **Status DND** (`#f23f43`): Ne pas déranger, sert également de rouge destructif.
|
||||
- **Status Streaming** (`#593695`): Violet « En direct ».
|
||||
- **Status Offline** (`#80848e`): Gris hors ligne.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Légère teinte blurple sur les lignes de @mention.
|
||||
|
||||
### Border & Divider
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Séparateur standard en thème sombre.
|
||||
- **Border Subtle** (`#3f4147`): Séparateur solide pour les cartes.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI / Headings**: `gg sans`, avec repli : `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (legacy / Whitney)**: `Whitney`, avec repli : `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, avec repli : `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero marketing |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Titres paramètres/profil |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, en-tête de canal |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Texte de chat standard |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Auteur d'un message |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | « Aujourd'hui à 16:32 » |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Lignes de la liste des canaux |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | En-tête du serveur |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Texte de statut, balise modifiée |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | `code` en ligne |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Bloc ```triple-backtick``` |
|
||||
|
||||
### Principles
|
||||
- **Géométrie conviviale** : gg sans remplace Whitney avec des terminaisons arrondies sur a/g/s — la marque recherche la chaleur sans sacrifier la lisibilité.
|
||||
- **Contraste par les graisses plutôt que par les couleurs** : la hiérarchie repose sur les paliers de graisse 400→500→600→700→800 ; la surface reste neutre.
|
||||
- **Corps à 16px** : les messages de chat ne descendent pas en dessous de 16px. La densité vient de l'interligne (1.375), pas de la taille de police.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Utilisation : CTA principaux, « Continuer », « Rejoindre le serveur »
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle (Link-style)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: texte souligné, pas de changement d'arrière-plan
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Server Avatars
|
||||
- Size: 48×48px
|
||||
- Radius: 16px (carré arrondi) par défaut ; passe à 50% au survol et à l'état actif.
|
||||
- État actif : pilule blanche de 4px sur le bord gauche de la colonne d'icônes.
|
||||
|
||||
### Status Dots
|
||||
- Size: 10×10px
|
||||
- Border: 3px solid background-tertiary (crée l'effet d'« encoche »)
|
||||
- Position: en bas à droite de l'avatar.
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31` (sombre) ou `#f2f3f5` (clair)
|
||||
- Bordure gauche: 4px solid couleur d'accent de l'embed.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Unité de base** : 4px. Échelle : 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Rail des serveurs** : 72px de large, fixe.
|
||||
- **Barre latérale des canaux** : 240px de large.
|
||||
- **Liste des membres** : 240px de large sur ordinateur de bureau.
|
||||
- **Colonne de chat** : fluide, minimum 380px.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Durée** : 200ms pour le survol ; 350ms pour la morphose avatar en cercle ; 80ms pour l'apparition de l'infobulle.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` pour la morphose de l'avatar (départ vif puis stabilisation).
|
||||
- **Impulsion de notification** : 1.4s ease-in-out infinite sur l'indicateur de mention non lue.
|
||||
|
||||
## 7. Usage Guardrails
|
||||
|
||||
- Conserver ensemble l'enveloppe sombre, la densité compacte et la hiérarchie d'actions en blurple ; utiliser le blurple sur une mise en page marketing à fond clair rompt l'identité produit de Discord.
|
||||
- Structurer les surfaces à forte navigation autour de rails, de barres latérales et de colonnes de chat plutôt que de cartes décoratives isolées.
|
||||
- Utiliser le langage avatar carré arrondi et point de statut pour représenter des personnes, des serveurs ou une présence active.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Sistem Desain Terinspirasi dari Discord
|
||||
|
||||
> Category: Produktivitas & SaaS
|
||||
> Platform suara / obrolan. Ungu biru yang dalam, permukaan dark-first, momen aksen yang menyenangkan.
|
||||
|
||||
## 1. Tema Visual & Atmosfer
|
||||
|
||||
Produk Discord dirancang untuk malam hari, sesi raid, dan percakapan suara berkelompok — sehingga seluruh tampilan mengutamakan mode gelap. Kanvas default adalah `Background Primary` yang dalam (`#313338` tema terang, `#1e1f22` tema gelap), dengan kolom obrolan yang berlapis di atas warna yang sedikit lebih terang atau lebih gelap untuk menandakan saluran, utas, dan panel samping. **Blurple** (`#5865f2`) yang khas dikhususkan untuk merek, CTA utama, sebutan, dan affordance "Anda" — digunakan secara hemat agar menonjol di antara warna netral yang redup.
|
||||
|
||||
Tipografi menggunakan **gg sans** (pengganti Whitney kustom Discord) untuk teks dan antarmuka, dengan bentuk geometris membulat yang terasa ramah namun tetap terbaca pada ukuran kecil yang dibutuhkan klien obrolan. Heading meningkat secara bertahap; baris obrolan dibuat rapat (4–8px di antara grup pesan) agar guliran berjam-jam tetap mudah dipindai.
|
||||
|
||||
Bahasa bentuk terasa membulat namun tidak terlalu lunak: radius 8px pada kartu, 4px pada input, pil penuh pada lencana status dan tag. Server menggunakan avatar kotak membulat berukuran 48px yang berubah menjadi lingkaran saat hover — sebuah gerakan kecil yang telah menjadi bagian dari identitas merek.
|
||||
|
||||
**Karakteristik Utama:**
|
||||
- Permukaan dark-first: `#1e1f22` / `#2b2d31` / `#313338` (kedalaman 3 langkah)
|
||||
- Blurple `#5865f2` sebagai satu-satunya aksen jenuh di permukaan obrolan
|
||||
- gg sans (gaya Whitney) untuk semua teks — ramah, geometris, netral
|
||||
- Avatar server kotak membulat (radius 16px) yang berubah menjadi lingkaran saat hover
|
||||
- Spasi baris obrolan yang rapat, padding panel samping yang lega
|
||||
- Titik status: hijau online, kuning idle, merah dnd, abu-abu offline
|
||||
- Pemisah 1px yang sejajar piksel dalam warna putih redup dengan alpha rendah
|
||||
|
||||
## 2. Palet Warna & Perannya
|
||||
|
||||
### Primer
|
||||
- **Blurple** (`#5865f2`): Merek utama, CTA utama, sorotan sebutan.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/aktif untuk blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple warisan, aksen sekunder dalam pemasaran.
|
||||
|
||||
### Permukaan (Tema Gelap — default)
|
||||
- **Background Tertiary** (`#1e1f22`): Rel daftar server, latar belakang paling dalam.
|
||||
- **Background Secondary** (`#2b2d31`): Bilah sisi saluran, bilah sisi pengaturan.
|
||||
- **Background Primary** (`#313338`): Permukaan obrolan, kolom pesan.
|
||||
- **Background Floating** (`#111214`): Popover mengambang, tooltip, pelengkapan otomatis.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Lapisan hover pada baris.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Baris aktif.
|
||||
|
||||
### Permukaan (Tema Terang)
|
||||
- **Light Bg Primary** (`#ffffff`): Permukaan obrolan dalam tema terang.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Bilah sisi dalam tema terang.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Permukaan terang paling dalam.
|
||||
|
||||
### Teks
|
||||
- **Header Primary** (`#f2f3f5`): Header saluran, judul modal dalam tema gelap.
|
||||
- **Header Secondary** (`#b5bac1`): Header yang diredam.
|
||||
- **Text Normal** (`#dbdee1`): Teks isi dalam tema gelap — sedikit lebih dingin dari putih murni.
|
||||
- **Text Muted** (`#949ba4`): Cap waktu, nama server, metadata sekunder.
|
||||
- **Text Link** (`#00a8fc`): Hyperlink dalam pesan — biru langit, berbeda dari blurple.
|
||||
- **Channels Default** (`#80848e`): Nama saluran tidak aktif di bilah sisi.
|
||||
|
||||
### Status & Semantik
|
||||
- **Status Online** (`#23a55a`): Titik online, status sukses.
|
||||
- **Status Idle** (`#f0b232`): Titik idle, tidak di tempat.
|
||||
- **Status DND** (`#f23f43`): Jangan ganggu, juga berfungsi sebagai merah destruktif.
|
||||
- **Status Streaming** (`#593695`): Ungu "Streaming".
|
||||
- **Status Offline** (`#80848e`): Abu-abu offline.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Lapisan blurple lembut pada baris @sebutan.
|
||||
|
||||
### Batas & Pemisah
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Pemisah standar dalam mode gelap.
|
||||
- **Border Subtle** (`#3f4147`): Pemisah solid untuk kartu.
|
||||
|
||||
## 3. Aturan Tipografi
|
||||
|
||||
### Keluarga Font
|
||||
- **Isi / UI / Heading**: `gg sans`, dengan fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (warisan / Whitney)**: `Whitney`, dengan fallback: `gg sans`
|
||||
- **Kode / Mono**: `"gg mono"`, dengan fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarki
|
||||
|
||||
| Peran | Font | Ukuran | Bobot | Tinggi Baris | Jarak Huruf | Catatan |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero pemasaran |
|
||||
| Heading Halaman | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Judul pengaturan/profil |
|
||||
| Nama Saluran | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, header saluran |
|
||||
| Isi Pesan | gg sans | 16px (1rem) | 400 | 1.375 | normal | Teks obrolan standar |
|
||||
| Nama Pengguna | gg sans | 16px (1rem) | 500 | 1.25 | normal | Penulis pesan |
|
||||
| Cap Waktu | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Hari ini pukul 4:32 PM" |
|
||||
| Saluran Bilah Sisi | gg sans | 16px (1rem) | 500 | 1.25 | normal | Baris daftar saluran |
|
||||
| Nama Server | gg sans | 16px (1rem) | 600 | 1.25 | normal | Header server |
|
||||
| Keterangan / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Teks status, tag yang telah diedit |
|
||||
| Kode Inline | gg mono | 0.875em | 400 | inherit | normal | `code` inline |
|
||||
| Blok Kode | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Blok ```tiga-pagar``` |
|
||||
|
||||
### Prinsip
|
||||
- **Geometri yang ramah**: gg sans menggantikan Whitney dengan terminal membulat pada a/g/s — merek menginginkan kehangatan tanpa mengorbankan keterbacaan.
|
||||
- **Kontras bobot daripada kontras warna**: hierarki berasal dari langkah bobot 400→500→600→700→800; permukaan tetap netral.
|
||||
- **Isi 16px**: pesan obrolan tidak menyusut di bawah 16px. Kepadatan berasal dari tinggi baris (1.375), bukan ukuran font.
|
||||
|
||||
## 4. Gaya Komponen
|
||||
|
||||
### Tombol
|
||||
|
||||
**Primer**
|
||||
- Latar belakang: `#5865f2`
|
||||
- Teks: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Gunakan untuk: CTA utama, "Lanjutkan", "Bergabung ke Server"
|
||||
|
||||
**Sekunder**
|
||||
- Latar belakang: `#4e5058`
|
||||
- Teks: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tersier / Halus (Gaya tautan)**
|
||||
- Latar belakang: transparan
|
||||
- Teks: `#dbdee1`
|
||||
- Hover: teks bergaris bawah, tidak ada perubahan latar belakang
|
||||
|
||||
**Bahaya**
|
||||
- Latar belakang: `#da373c`
|
||||
- Teks: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Input
|
||||
- Latar belakang: `#1e1f22`
|
||||
- Teks: `#dbdee1`
|
||||
- Batas: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Fokus: batas `#5865f2`
|
||||
|
||||
### Avatar Server
|
||||
- Ukuran: 48×48px
|
||||
- Radius: 16px (kotak membulat) secara default; bertransisi ke 50% saat hover dan aktif.
|
||||
- Status aktif: pil putih 4px di tepi kiri kolom ikon.
|
||||
|
||||
### Titik Status
|
||||
- Ukuran: 10×10px
|
||||
- Batas: 3px solid background-tertiary (menciptakan efek "takik")
|
||||
- Posisi: kanan bawah avatar.
|
||||
|
||||
### Kartu / Sematan
|
||||
- Latar belakang: `#2b2d31` (gelap) atau `#f2f3f5` (terang)
|
||||
- Batas kiri: 4px solid warna aksen sematan.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Pil Sebutan
|
||||
- Latar belakang: `rgba(88, 101, 242, 0.3)`
|
||||
- Teks: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spasi & Tata Letak
|
||||
|
||||
- **Unit dasar**: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Rel server**: lebar 72px, tetap.
|
||||
- **Bilah sisi saluran**: lebar 240px.
|
||||
- **Daftar anggota**: lebar 240px di desktop.
|
||||
- **Kolom obrolan**: fluid, minimal 380px.
|
||||
|
||||
## 6. Gerak
|
||||
|
||||
- **Durasi**: 200ms untuk hover; 350ms untuk morph lingkaran avatar; 80ms untuk fade tooltip.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` untuk morph avatar (cepat lalu menetap).
|
||||
- **Denyut notifikasi**: 1.4s ease-in-out infinite pada indikator sebutan belum dibaca.
|
||||
|
||||
## 7. Panduan Penggunaan
|
||||
|
||||
- Pertahankan tampilan gelap, kepadatan kompak, dan hierarki aksi blurple secara bersamaan; menggunakan blurple pada tata letak pemasaran bergaya terang akan merusak nuansa produk Discord.
|
||||
- Jaga permukaan yang banyak navigasi tetap terstruktur di sekitar rel, bilah sisi, dan kolom obrolan daripada kartu dekoratif yang terisolasi.
|
||||
- Gunakan bahasa avatar kotak membulat dan titik status saat merepresentasikan orang, server, atau kehadiran aktif.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Produttività e SaaS
|
||||
> Piattaforma vocale e di chat. Blurple intenso, superfici dark-first, momenti d'accento giocosi.
|
||||
|
||||
## 1. Tema Visivo e Atmosfera
|
||||
|
||||
Il prodotto Discord è progettato per serate, raid e chat vocali di gruppo — quindi l'intera superficie è dark-first. La canvas predefinita è il profondo `Background Primary` (`#313338` tema chiaro, `#1e1f22` tema scuro), con colonne di chat stratificate su tonalità leggermente più chiare o più scure per indicare canali, thread e pannelli laterali. Il caratteristico **Blurple** (`#5865f2`) è riservato al marchio, alle CTA primarie, alle menzioni e all'indicatore "tu" — usato con parsimonia per risaltare sui neutri attenuati.
|
||||
|
||||
La tipografia è **gg sans** (il sostituto personalizzato di Whitney di Discord) per il testo e il chrome, con forme geometriche arrotondate che risultano accessibili pur mantenendo la leggibilità alle piccole dimensioni richieste da un client di chat. I titoli scalano in modo incrementale; le righe di chat sono compatte (4–8px tra i gruppi di messaggi) affinché ore di scorrimento risultino facilmente analizzabili.
|
||||
|
||||
Il linguaggio delle forme è arrotondato ma non morbido come un palloncino: raggio di 8px sulle card, 4px sugli input, pillole complete su badge di stato e tag. I server hanno avatar con angoli arrotondati da 48px che si trasformano in cerchi al passaggio del mouse — un piccolo dettaglio in movimento che è diventato parte dell'identità del brand.
|
||||
|
||||
**Caratteristiche Chiave:**
|
||||
- Superfici dark-first: `#1e1f22` / `#2b2d31` / `#313338` (profondità a 3 livelli)
|
||||
- Blurple `#5865f2` come unico accento saturo nella superficie di chat
|
||||
- gg sans (stile Whitney) per tutto il testo — amichevole, geometrico, neutro
|
||||
- Avatar dei server a quadrato arrotondato (raggio 16px) che si trasformano in cerchi al passaggio del mouse
|
||||
- Spaziatura compatta tra le righe di chat, padding generoso nel pannello laterale
|
||||
- Indicatori di stato: verde online, giallo inattivo, rosso non disturbare, grigio offline
|
||||
- Divisori da 1px allineati al pixel in bianco attenuato a bassa opacità
|
||||
|
||||
## 2. Palette Colori e Ruoli
|
||||
|
||||
### Primari
|
||||
- **Blurple** (`#5865f2`): Primario del brand, CTA primaria, evidenziazione delle menzioni.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/attivo per il blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple legacy, accento secondario nel marketing.
|
||||
|
||||
### Superficie (Tema Scuro — predefinito)
|
||||
- **Background Tertiary** (`#1e1f22`): Barra lista server, sfondo più profondo.
|
||||
- **Background Secondary** (`#2b2d31`): Barra laterale canali, barra laterale impostazioni.
|
||||
- **Background Primary** (`#313338`): Superficie di chat, colonna messaggi.
|
||||
- **Background Floating** (`#111214`): Popover flottanti, tooltip, completamento automatico.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Overlay hover sulle righe.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Riga attiva.
|
||||
|
||||
### Superficie (Tema Chiaro)
|
||||
- **Light Bg Primary** (`#ffffff`): Superficie di chat nel tema chiaro.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Barra laterale nel tema chiaro.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Superficie chiara più profonda.
|
||||
|
||||
### Testo
|
||||
- **Header Primary** (`#f2f3f5`): Intestazioni dei canali, titoli modali nel tema scuro.
|
||||
- **Header Secondary** (`#b5bac1`): Intestazioni attenuate.
|
||||
- **Text Normal** (`#dbdee1`): Testo corpo nel tema scuro — leggermente più freddo del bianco puro.
|
||||
- **Text Muted** (`#949ba4`): Timestamp, nomi server, metadati secondari.
|
||||
- **Text Link** (`#00a8fc`): Hyperlink nei messaggi — blu cielo, distinto dal blurple.
|
||||
- **Channels Default** (`#80848e`): Nome canale inattivo nella barra laterale.
|
||||
|
||||
### Stato e Semantica
|
||||
- **Status Online** (`#23a55a`): Indicatore online, stati di successo.
|
||||
- **Status Idle** (`#f0b232`): Indicatore inattivo, assente.
|
||||
- **Status DND** (`#f23f43`): Non disturbare, utilizzato anche come rosso distruttivo.
|
||||
- **Status Streaming** (`#593695`): Viola "in streaming".
|
||||
- **Status Offline** (`#80848e`): Grigio offline.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Sfondo blurple tenue sulle righe con @menzione.
|
||||
|
||||
### Bordo e Divisori
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Divisore standard nel tema scuro.
|
||||
- **Border Subtle** (`#3f4147`): Divisore solido per le card.
|
||||
|
||||
## 3. Regole Tipografiche
|
||||
|
||||
### Famiglia di Font
|
||||
- **Corpo / UI / Intestazioni**: `gg sans`, con fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (legacy / Whitney)**: `Whitney`, con fallback: `gg sans`
|
||||
- **Codice / Mono**: `"gg mono"`, con fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Gerarchia
|
||||
|
||||
| Ruolo | Font | Dimensione | Peso | Altezza riga | Spaziatura lettere | Note |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero marketing |
|
||||
| Intestazione pagina | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Titoli impostazioni/profilo |
|
||||
| Nome canale | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, intestazione canale |
|
||||
| Corpo messaggio | gg sans | 16px (1rem) | 400 | 1.375 | normal | Testo chat standard |
|
||||
| Nome utente | gg sans | 16px (1rem) | 500 | 1.25 | normal | Autore di un messaggio |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Oggi alle 16:32" |
|
||||
| Canale barra laterale | gg sans | 16px (1rem) | 500 | 1.25 | normal | Righe lista canali |
|
||||
| Nome server | gg sans | 16px (1rem) | 600 | 1.25 | normal | Intestazione server |
|
||||
| Didascalia / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Testo di stato, tag modificato |
|
||||
| Codice inline | gg mono | 0.875em | 400 | inherit | normal | `code` inline |
|
||||
| Blocco codice | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Blocco ```triple-fenced``` |
|
||||
|
||||
### Principi
|
||||
- **Geometria amichevole**: gg sans sostituisce Whitney con terminali arrotondati su a/g/s — il brand vuole calore senza compromettere la leggibilità.
|
||||
- **Contrasto di peso anziché di colore**: la gerarchia si ottiene tramite passaggi di peso 400→500→600→700→800; la superficie rimane neutra.
|
||||
- **Corpo a 16px**: i messaggi di chat non scendono sotto i 16px. La densità si ottiene tramite l'altezza della riga (1.375), non la dimensione del font.
|
||||
|
||||
## 4. Stili dei Componenti
|
||||
|
||||
### Bottoni
|
||||
|
||||
**Primario**
|
||||
- Background: `#5865f2`
|
||||
- Testo: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Raggio: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Utilizzo: CTA primarie, "Continua", "Unisciti al Server"
|
||||
|
||||
**Secondario**
|
||||
- Background: `#4e5058`
|
||||
- Testo: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Raggio: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Terziario / Sottile (stile link)**
|
||||
- Background: transparent
|
||||
- Testo: `#dbdee1`
|
||||
- Hover: testo sottolineato, nessun cambiamento di sfondo
|
||||
|
||||
**Pericoloso**
|
||||
- Background: `#da373c`
|
||||
- Testo: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Input
|
||||
- Background: `#1e1f22`
|
||||
- Testo: `#dbdee1`
|
||||
- Bordo: 1px solid `#1e1f22`
|
||||
- Raggio: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: bordo `#5865f2`
|
||||
|
||||
### Avatar dei Server
|
||||
- Dimensione: 48×48px
|
||||
- Raggio: 16px (quadrato arrotondato) per impostazione predefinita; transizione a 50% al passaggio del mouse e in stato attivo.
|
||||
- Stato attivo: pillola bianca da 4px sul bordo sinistro della colonna icone.
|
||||
|
||||
### Indicatori di Stato
|
||||
- Dimensione: 10×10px
|
||||
- Bordo: 3px solid background-tertiary (crea l'effetto "tacca")
|
||||
- Posizione: in basso a destra dell'avatar.
|
||||
|
||||
### Card / Embed
|
||||
- Background: `#2b2d31` (scuro) o `#f2f3f5` (chiaro)
|
||||
- Bordo sinistro: 4px solid colore accento dell'embed.
|
||||
- Raggio: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Pillola di Menzione
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Testo: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Raggio: 3px
|
||||
|
||||
## 5. Spaziatura e Layout
|
||||
|
||||
- **Unità base**: 4px. Scala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Barra server**: larghezza 72px, fissa.
|
||||
- **Barra laterale canali**: larghezza 240px.
|
||||
- **Lista membri**: larghezza 240px su desktop.
|
||||
- **Colonna chat**: fluida, min 380px.
|
||||
|
||||
## 6. Animazione
|
||||
|
||||
- **Durata**: 200ms per hover; 350ms per la trasformazione in cerchio dell'avatar; 80ms per la comparsa del tooltip.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` per la trasformazione dell'avatar (scatto iniziale poi assestamento).
|
||||
- **Pulsazione notifica**: 1.4s ease-in-out infinite sull'indicatore di menzione non letta.
|
||||
|
||||
## 7. Linee Guida d'Uso
|
||||
|
||||
- Preservare insieme il guscio scuro, la densità compatta e la gerarchia delle azioni blurple; usare il blurple su un layout marketing in stile chiaro rompe la sensazione del prodotto Discord.
|
||||
- Mantenere le superfici con navigazione complessa strutturate attorno a barre, barre laterali e colonne di chat, anziché card decorative isolate.
|
||||
- Utilizzare il linguaggio degli avatar a quadrato arrotondato e degli indicatori di stato per rappresentare persone, server o presenza attiva.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Discordにインスパイアされたデザインシステム
|
||||
|
||||
> Category: 生産性・SaaS
|
||||
> ボイス／チャットプラットフォーム。深みのあるブラープル、ダークファーストのサーフェス、遊び心あるアクセント。
|
||||
|
||||
## 1. ビジュアルテーマと雰囲気
|
||||
|
||||
Discordのプロダクトは、夜のセッション、レイド、グループボイス通話のために設計されているため、全体のサーフェスはダークファーストで構成されています。デフォルトのキャンバスは深みのある `Background Primary`（ライトテーマ: `#313338`、ダークテーマ: `#1e1f22`）で、チャットカラムはチャンネル・スレッド・サイドパネルを区別するため、わずかに明るいまたは暗いシェードで重ね合わされています。シグネチャーカラーの **Blurple**（`#5865f2`）はブランドマーク、主要CTA、メンション、「自分」を示すアフォーダンスのみに使用され、落ち着いたニュートラルな背景の中で際立つよう、控えめに用いられています。
|
||||
|
||||
タイポグラフィには **gg sans**（DiscordのカスタムWhitneyの後継フォント）が使用されており、丸みを帯びたジオメトリック形状がチャットクライアントに求められる小さなサイズでも親しみやすく、かつ読みやすい印象を与えます。見出しは段階的にサイズが上がり、チャット行の間隔は詰め気味（メッセージグループ間4〜8px）で、長時間のスクロールでも見渡しやすく設計されています。
|
||||
|
||||
形状言語は丸みを帯びつつも、膨らんだ印象は持ちません。カードは角丸8px、インプットは4px、ステータスバッジやタグには全円のピルを使用しています。サーバーアバターは48pxの角丸スクエアで、ホバー時に円形に変化するアニメーションは、ブランドアイデンティティの一部となっています。
|
||||
|
||||
**主な特徴:**
|
||||
- ダークファーストサーフェス: `#1e1f22` / `#2b2d31` / `#313338`（3段階の深度）
|
||||
- チャットサーフェスの唯一の彩度あるアクセントとしての Blurple `#5865f2`
|
||||
- 全テキストに gg sans（Whitneyスタイル）— フレンドリー、ジオメトリック、ニュートラル
|
||||
- ホバー時に円形へスナップする角丸スクエアのサーバーアバター（角丸16px）
|
||||
- チャット行の詰めたスペーシングと、サイドパネルの余裕あるパディング
|
||||
- ステータスドット: 緑でオンライン、黄でアイドル、赤でDND、グレーでオフライン
|
||||
- 低アルファの淡いオフホワイトによるピクセルスナップ1px区切り線
|
||||
|
||||
## 2. カラーパレットとその役割
|
||||
|
||||
### プライマリ
|
||||
- **Blurple** (`#5865f2`): ブランドプライマリ、主要CTA、メンションハイライト。
|
||||
- **Blurple Hover** (`#4752c4`): Blurpleのホバー／アクティブ状態。
|
||||
- **Blurple Soft** (`#7289da`): レガシーBlurple、マーケティングでのセカンダリアクセント。
|
||||
|
||||
### サーフェス（ダークテーマ — デフォルト）
|
||||
- **Background Tertiary** (`#1e1f22`): サーバーリストレール、最も深い背景。
|
||||
- **Background Secondary** (`#2b2d31`): チャンネルサイドバー、設定サイドバー。
|
||||
- **Background Primary** (`#313338`): チャットサーフェス、メッセージカラム。
|
||||
- **Background Floating** (`#111214`): フローティングポップオーバー、ツールチップ、オートコンプリート。
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): 行のホバーオーバーレイ。
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): アクティブ行。
|
||||
|
||||
### サーフェス（ライトテーマ）
|
||||
- **Light Bg Primary** (`#ffffff`): ライトテーマのチャットサーフェス。
|
||||
- **Light Bg Secondary** (`#f2f3f5`): ライトテーマのサイドバー。
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): 最も深いライトサーフェス。
|
||||
|
||||
### テキスト
|
||||
- **Header Primary** (`#f2f3f5`): ダークテーマのチャンネルヘッダー、モーダルタイトル。
|
||||
- **Header Secondary** (`#b5bac1`): ミュートされたヘッダー。
|
||||
- **Text Normal** (`#dbdee1`): ダークテーマの本文テキスト — 純白よりわずかにクールな色調。
|
||||
- **Text Muted** (`#949ba4`): タイムスタンプ、サーバー名、セカンダリメタデータ。
|
||||
- **Text Link** (`#00a8fc`): メッセージ内のハイパーリンク — スカイブルー、Blurpleとは異なる色。
|
||||
- **Channels Default** (`#80848e`): サイドバーの非アクティブチャンネル名。
|
||||
|
||||
### ステータスとセマンティクス
|
||||
- **Status Online** (`#23a55a`): オンラインドット、成功状態。
|
||||
- **Status Idle** (`#f0b232`): アイドルドット、離席中。
|
||||
- **Status DND** (`#f23f43`): 取り込み中、破壊的操作の赤としても使用。
|
||||
- **Status Streaming** (`#593695`): 「配信中」パープル。
|
||||
- **Status Offline** (`#80848e`): オフライングレー。
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @メンション行への淡いBlurpleウォッシュ。
|
||||
|
||||
### ボーダーと区切り線
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): ダークテーマの標準区切り線。
|
||||
- **Border Subtle** (`#3f4147`): カード用ソリッド区切り線。
|
||||
|
||||
## 3. タイポグラフィルール
|
||||
|
||||
### フォントファミリー
|
||||
- **本文 / UI / 見出し**: `gg sans`、フォールバック: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **ディスプレイ（レガシー / Whitney）**: `Whitney`、フォールバック: `gg sans`
|
||||
- **コード / 等幅**: `"gg mono"`、フォールバック: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### 階層
|
||||
|
||||
| 役割 | フォント | サイズ | ウェイト | 行の高さ | 字間 | 備考 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | マーケティングヒーロー |
|
||||
| ページ見出し | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 設定・プロフィールタイトル |
|
||||
| チャンネル名 | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`、チャンネルヘッダー |
|
||||
| メッセージ本文 | gg sans | 16px (1rem) | 400 | 1.375 | normal | 標準チャットテキスト |
|
||||
| ユーザー名 | gg sans | 16px (1rem) | 500 | 1.25 | normal | メッセージの送信者 |
|
||||
| タイムスタンプ | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
|
||||
| サイドバーチャンネル | gg sans | 16px (1rem) | 500 | 1.25 | normal | チャンネルリスト行 |
|
||||
| サーバー名 | gg sans | 16px (1rem) | 600 | 1.25 | normal | サーバーヘッダー |
|
||||
| キャプション / メタ | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | ステータステキスト、編集済みタグ |
|
||||
| インラインコード | gg mono | 0.875em | 400 | inherit | normal | インライン `code` |
|
||||
| コードブロック | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```三重フェンス``` ブロック |
|
||||
|
||||
### 原則
|
||||
- **フレンドリーなジオメトリー**: gg sans はWhitneyの後継として、a/g/sの文字に丸みのある字形を採用 — ブランドは読みやすさを損なわない温かみを求めています。
|
||||
- **色のコントラストよりウェイトのコントラスト**: 階層は400→500→600→700→800のウェイトステップで表現し、サーフェスはニュートラルに保ちます。
|
||||
- **16pxの本文**: チャットメッセージは16px未満に縮小しません。情報密度はフォントサイズではなく行の高さ（1.375）で調整します。
|
||||
|
||||
## 4. コンポーネントスタイリング
|
||||
|
||||
### ボタン
|
||||
|
||||
**プライマリ**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- 用途: 主要CTA、「続行」、「サーバーに参加」
|
||||
|
||||
**セカンダリ**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**ターシャリ / サトル（リンクスタイル）**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: テキストに下線、背景色変化なし
|
||||
|
||||
**デンジャー**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### インプット
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- フォーカス時: border `#5865f2`
|
||||
|
||||
### サーバーアバター
|
||||
- サイズ: 48×48px
|
||||
- Radius: デフォルト16px（角丸スクエア）、ホバー時およびアクティブ時に50%へ遷移。
|
||||
- アクティブ状態: アイコンカラムの左端に4pxのホワイトピル。
|
||||
|
||||
### ステータスドット
|
||||
- サイズ: 10×10px
|
||||
- Border: 3px solid background-tertiary（「ノッチ」効果を生成）
|
||||
- 位置: アバターの右下。
|
||||
|
||||
### カード / 埋め込み
|
||||
- Background: `#2b2d31`（ダーク）または `#f2f3f5`（ライト）
|
||||
- 左ボーダー: 4px solid 埋め込みアクセントカラー。
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### メンションピル
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. スペーシングとレイアウト
|
||||
|
||||
- **基本単位**: 4px。スケール: 4, 8, 12, 16, 20, 24, 32, 40。
|
||||
- **サーバーレール**: 幅72px、固定。
|
||||
- **チャンネルサイドバー**: 幅240px。
|
||||
- **メンバーリスト**: デスクトップで幅240px。
|
||||
- **チャットカラム**: 可変、最小380px。
|
||||
|
||||
## 6. モーション
|
||||
|
||||
- **デュレーション**: ホバーは200ms、アバターの円形変形は350ms、ツールチップのフェードは80ms。
|
||||
- **イージング**: アバター変形には `cubic-bezier(0.215, 0.61, 0.355, 1)`（素早く動いて落ち着く）。
|
||||
- **通知パルス**: 未読メンションインジケーターに1.4s ease-in-out infinite。
|
||||
|
||||
## 7. 使用上のガイドライン
|
||||
|
||||
- ダークシェル、コンパクトな情報密度、Blurpleのアクション階層は一体として保持すること。ライトなマーケティングスタイルのレイアウトにBlurpleを使用すると、Discordプロダクトの雰囲気が崩れます。
|
||||
- ナビゲーションが多いサーフェスは、孤立した装飾的なカードではなく、レール・サイドバー・チャットカラムを中心に構成すること。
|
||||
- 人物・サーバー・アクティブなプレゼンスを表す際には、角丸スクエアアバターとステータスドットの言語を使用すること。
|
||||
@@ -0,0 +1,168 @@
|
||||
# Discord에서 영감받은 디자인 시스템
|
||||
|
||||
> Category: 생산성 및 SaaS
|
||||
> 음성/채팅 플랫폼. 짙은 블러플, 다크 우선 서피스, 포인트 액센트.
|
||||
|
||||
## 1. 비주얼 테마 & 분위기
|
||||
|
||||
Discord의 제품은 야간 플레이, 레이드, 그룹 음성 통화를 위해 설계되었으므로 전체 서피스는 다크 우선입니다. 기본 캔버스는 짙은 `Background Primary`(`#313338` 라이트 테마, `#1e1f22` 다크 테마)이며, 채널·스레드·사이드 패널을 구분하기 위해 채팅 컬럼은 약간 밝거나 어두운 음영으로 겹겹이 쌓여 있습니다. 시그니처 **블러플**(`#5865f2`)은 브랜드 마크, 주요 CTA, 멘션, "나" 어포던스에만 사용되며, 절제된 뉴트럴 톤 위에서 도드라지도록 아낌없이 아껴 씁니다.
|
||||
|
||||
타이포그래피는 산문과 크롬 UI에 **gg sans**(Discord의 커스텀 Whitney 대체 서체)를 사용하며, 채팅 클라이언트에서 요구하는 작은 크기에서도 친근하면서 가독성이 유지되는 둥근 기하학적 형태를 갖습니다. 헤딩은 단계별로 점진적으로 커지고, 채팅 행 간격은 촘촘하게(메시지 그룹 사이 4–8px) 유지되어 몇 시간치 스크롤백도 빠르게 훑어볼 수 있습니다.
|
||||
|
||||
형태 언어는 둥글지만 풍선처럼 부드럽지는 않습니다. 카드에는 8px 반경, 입력 필드에는 4px 반경, 상태 배지와 태그에는 완전한 필 모양을 사용합니다. 서버 아이콘은 48px 크기의 둥근 사각형 아바타이며 호버 시 원으로 변형되는데, 이 작은 모션이 브랜드 아이덴티티의 일부가 되었습니다.
|
||||
|
||||
**주요 특성:**
|
||||
- 다크 우선 서피스: `#1e1f22` / `#2b2d31` / `#313338` (3단계 깊이)
|
||||
- 채팅 서피스의 유일한 채도 높은 액센트인 블러플 `#5865f2`
|
||||
- 모든 텍스트에 gg sans (Whitney 스타일) — 친근하고 기하학적이며 중립적
|
||||
- 호버 시 원으로 전환되는 둥근 사각형 서버 아바타 (16px 반경)
|
||||
- 촘촘한 채팅 행 간격, 여유로운 사이드 패널 패딩
|
||||
- 상태 점: 초록색 온라인, 노란색 자리 비움, 빨간색 방해 금지, 회색 오프라인
|
||||
- 낮은 알파값의 은은한 오프화이트 1px 픽셀 스냅 구분선
|
||||
|
||||
## 2. 색상 팔레트 & 역할
|
||||
|
||||
### 프라이머리
|
||||
- **블러플** (`#5865f2`): 브랜드 프라이머리, 주요 CTA, 멘션 하이라이트.
|
||||
- **블러플 호버** (`#4752c4`): 블러플의 호버/활성 상태.
|
||||
- **블러플 소프트** (`#7289da`): 레거시 블러플, 마케팅 보조 액센트.
|
||||
|
||||
### 서피스 (다크 테마 — 기본)
|
||||
- **Background Tertiary** (`#1e1f22`): 서버 목록 레일, 가장 깊은 배경.
|
||||
- **Background Secondary** (`#2b2d31`): 채널 사이드바, 설정 사이드바.
|
||||
- **Background Primary** (`#313338`): 채팅 서피스, 메시지 컬럼.
|
||||
- **Background Floating** (`#111214`): 플로팅 팝오버, 툴팁, 자동완성.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): 행 위의 호버 오버레이.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): 활성 행.
|
||||
|
||||
### 서피스 (라이트 테마)
|
||||
- **Light Bg Primary** (`#ffffff`): 라이트 테마의 채팅 서피스.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): 라이트 테마의 사이드바.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): 가장 깊은 라이트 서피스.
|
||||
|
||||
### 텍스트
|
||||
- **Header Primary** (`#f2f3f5`): 다크 테마의 채널 헤더, 모달 제목.
|
||||
- **Header Secondary** (`#b5bac1`): 음소거된 헤더.
|
||||
- **Text Normal** (`#dbdee1`): 다크 테마 본문 텍스트 — 순수 흰색보다 약간 차갑습니다.
|
||||
- **Text Muted** (`#949ba4`): 타임스탬프, 서버 이름, 보조 메타데이터.
|
||||
- **Text Link** (`#00a8fc`): 메시지 내 하이퍼링크 — 블러플과 구별되는 하늘색.
|
||||
- **Channels Default** (`#80848e`): 사이드바의 비활성 채널 이름.
|
||||
|
||||
### 상태 & 시맨틱
|
||||
- **Status Online** (`#23a55a`): 온라인 점, 성공 상태.
|
||||
- **Status Idle** (`#f0b232`): 자리 비움 점, 부재 중.
|
||||
- **Status DND** (`#f23f43`): 방해 금지, 파괴적 동작의 빨간색으로도 사용.
|
||||
- **Status Streaming** (`#593695`): "스트리밍" 보라색.
|
||||
- **Status Offline** (`#80848e`): 오프라인 회색.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @멘션 행의 은은한 블러플 워시.
|
||||
|
||||
### 테두리 & 구분선
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): 다크 테마의 표준 구분선.
|
||||
- **Border Subtle** (`#3f4147`): 카드용 솔리드 구분선.
|
||||
|
||||
## 3. 타이포그래피 규칙
|
||||
|
||||
### 글꼴 패밀리
|
||||
- **본문 / UI / 헤딩**: `gg sans`, 폴백: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **디스플레이 (레거시 / Whitney)**: `Whitney`, 폴백: `gg sans`
|
||||
- **코드 / 모노**: `"gg mono"`, 폴백: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### 계층 구조
|
||||
|
||||
| 역할 | 글꼴 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 마케팅 히어로 |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 설정/프로필 제목 |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, 채널 헤더 |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 표준 채팅 텍스트 |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 메시지 작성자 |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 채널 목록 행 |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 서버 헤더 |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 상태 텍스트, 수정 태그 |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 인라인 `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```삼중 펜스``` 블록 |
|
||||
|
||||
### 원칙
|
||||
- **친근한 기하학**: gg sans는 a/g/s의 둥근 터미널로 Whitney를 대체합니다 — 브랜드는 가독성을 해치지 않으면서 따뜻함을 추구합니다.
|
||||
- **색상 대비보다 굵기 대비**: 계층 구조는 400→500→600→700→800 굵기 단계로 표현되며 서피스는 뉴트럴을 유지합니다.
|
||||
- **16px 본문**: 채팅 메시지는 16px 아래로 줄어들지 않습니다. 밀도는 글꼴 크기가 아닌 줄 높이(1.375)로 조절합니다.
|
||||
|
||||
## 4. 컴포넌트 스타일링
|
||||
|
||||
### 버튼
|
||||
|
||||
**프라이머리**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- 사용처: 주요 CTA, "계속하기", "서버 참가"
|
||||
|
||||
**세컨더리**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**터셔리 / 서틀 (링크 스타일)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: 텍스트 밑줄 표시, 배경 변화 없음
|
||||
|
||||
**위험**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### 입력 필드
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- 포커스: border `#5865f2`
|
||||
|
||||
### 서버 아바타
|
||||
- 크기: 48×48px
|
||||
- 반경: 기본값 16px (둥근 사각형); 호버 및 활성 상태에서 50%로 전환.
|
||||
- 활성 상태: 아이콘 컬럼 왼쪽 가장자리에 4px 흰색 필 표시.
|
||||
|
||||
### 상태 점
|
||||
- 크기: 10×10px
|
||||
- 테두리: 3px solid background-tertiary ("노치" 효과 생성)
|
||||
- 위치: 아바타 우하단.
|
||||
|
||||
### 카드 / 임베드
|
||||
- Background: `#2b2d31` (다크) 또는 `#f2f3f5` (라이트)
|
||||
- 왼쪽 테두리: 4px solid 임베드 액센트 색상.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### 멘션 필
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. 간격 & 레이아웃
|
||||
|
||||
- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **서버 레일**: 너비 72px, 고정.
|
||||
- **채널 사이드바**: 너비 240px.
|
||||
- **멤버 목록**: 데스크톱에서 너비 240px.
|
||||
- **채팅 컬럼**: 유동적, 최소 380px.
|
||||
|
||||
## 6. 모션
|
||||
|
||||
- **지속 시간**: 호버 200ms; 아바타 원형 변형 350ms; 툴팁 페이드 80ms.
|
||||
- **이징**: 아바타 변형에 `cubic-bezier(0.215, 0.61, 0.355, 1)` (빠르게 시작 후 안착).
|
||||
- **알림 펄스**: 읽지 않은 멘션 인디케이터에 1.4s ease-in-out infinite.
|
||||
|
||||
## 7. 사용 가이드라인
|
||||
|
||||
- 다크 쉘, 촘촘한 밀도, 블러플 액션 계층 구조를 함께 유지하세요. 밝은 마케팅 스타일 레이아웃에 블러플을 사용하면 Discord 제품의 느낌이 무너집니다.
|
||||
- 내비게이션이 많은 서피스는 독립적인 장식용 카드보다 레일, 사이드바, 채팅 컬럼 중심으로 구성하세요.
|
||||
- 사람, 서버, 또는 활성 현재 상태를 나타낼 때는 둥근 사각형 아바타와 상태 점 언어를 사용하세요.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Ontwerpsysteem geïnspireerd door Discord
|
||||
|
||||
> Category: Productiviteit & SaaS
|
||||
> Spraak- en chatplatform. Diep blurple, donkere basisoppervlakken, speelse accentmomenten.
|
||||
|
||||
## 1. Visueel thema & sfeer
|
||||
|
||||
Discord's product is ontworpen voor avonduren, raids en groepsgesprekken — daardoor is het gehele interface donker als standaard. Het standaard canvas is het diepe `Background Primary` (`#313338` licht thema, `#1e1f22` donker thema), met chatkolommen gelaagd op iets lichtere of donkerdere tinten om kanalen, threads en zijpanelen te onderscheiden. Het kenmerkende **Blurple** (`#5865f2`) is gereserveerd voor het merkteken, primaire CTA's, vermeldingen en de "jij"-aanduiding — spaarzaam ingezet zodat het opvalt tegen de gedempte neutralen.
|
||||
|
||||
Typografie is **gg sans** (Discord's aangepaste Whitney-vervanger) voor lopende tekst en chrome, met afgeronde geometrische vormen die vriendelijk aanvoelen maar toch leesbaar blijven op de kleine lettergroottes die een chatclient vereist. Koppen worden geleidelijk groter; chatrijen zijn compact (4–8px tussen berichtgroepen) zodat uren terugscrolwerk overzichtelijk blijft.
|
||||
|
||||
De vormtaal is afgerond maar niet ballonzacht: 8px radii op kaarten, 4px op invoervelden, volledige pill-vormen op statusbadges en tags. Servers zijn afgerond-vierkante avatars van 48px die bij hover veranderen in cirkels — een subtiele animatie die onderdeel is geworden van de merkidentiteit.
|
||||
|
||||
**Belangrijkste kenmerken:**
|
||||
- Donkere basisoppervlakken: `#1e1f22` / `#2b2d31` / `#313338` (3-traps diepte)
|
||||
- Blurple `#5865f2` als enig verzadigd accent in het chatoppervlak
|
||||
- gg sans (Whitney-stijl) voor alle tekst — vriendelijk, geometrisch, neutraal
|
||||
- Afgerond-vierkante server-avatars (16px radius) die bij hover snappen naar cirkels
|
||||
- Compacte rijspatiëring voor chat, royale opvulling voor zijpanelen
|
||||
- Statusdots: groen online, geel inactief, rood niet-storen, grijs offline
|
||||
- Pixelnauwkeurige 1px-scheidingslijnen in subtiel gebroken wit met lage alpha
|
||||
|
||||
## 2. Kleurenpalet & rollen
|
||||
|
||||
### Primair
|
||||
- **Blurple** (`#5865f2`): Merkprimair, primaire CTA, vermelding-highlight.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/actief voor blurple.
|
||||
- **Blurple Soft** (`#7289da`): Oud blurple, secundair accent in marketing.
|
||||
|
||||
### Oppervlak (donker thema — standaard)
|
||||
- **Background Tertiary** (`#1e1f22`): Serverlijstrail, diepste achtergrond.
|
||||
- **Background Secondary** (`#2b2d31`): Kanaalsidebar, instellingssidebar.
|
||||
- **Background Primary** (`#313338`): Chatoppervlak, berichtenkolom.
|
||||
- **Background Floating** (`#111214`): Zwevende popovers, tooltips, automatisch aanvullen.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover-overlay op rijen.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Actieve rij.
|
||||
|
||||
### Oppervlak (licht thema)
|
||||
- **Light Bg Primary** (`#ffffff`): Chatoppervlak in licht thema.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Sidebar in licht thema.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Diepste lichte oppervlak.
|
||||
|
||||
### Tekst
|
||||
- **Header Primary** (`#f2f3f5`): Kanaalkoppen, modaltitels in donker thema.
|
||||
- **Header Secondary** (`#b5bac1`): Gedempte koppen.
|
||||
- **Text Normal** (`#dbdee1`): Bodytekst in donker thema — iets koeler dan puur wit.
|
||||
- **Text Muted** (`#949ba4`): Tijdstempels, servernamen, secundaire metadata.
|
||||
- **Text Link** (`#00a8fc`): Hyperlinks in berichten — hemelsblauw, onderscheidend van blurple.
|
||||
- **Channels Default** (`#80848e`): Inactieve kanaalnaam in sidebar.
|
||||
|
||||
### Status & semantisch
|
||||
- **Status Online** (`#23a55a`): Online-dot, succestoestanden.
|
||||
- **Status Idle** (`#f0b232`): Inactief-dot, afwezig.
|
||||
- **Status DND** (`#f23f43`): Niet-storen, ook gebruikt als destructief rood.
|
||||
- **Status Streaming** (`#593695`): "Streaming"-paars.
|
||||
- **Status Offline** (`#80848e`): Offline-grijs.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Zachte blurple-gloed op @vermelding-rijen.
|
||||
|
||||
### Rand & scheidingslijn
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standaard scheidingslijn in donker.
|
||||
- **Border Subtle** (`#3f4147`): Effen scheidingslijn voor kaarten.
|
||||
|
||||
## 3. Typografieregels
|
||||
|
||||
### Lettertypefamilie
|
||||
- **Body / UI / Koppen**: `gg sans`, met fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (oud / Whitney)**: `Whitney`, met fallback: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, met fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hiërarchie
|
||||
|
||||
| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand | Opmerkingen |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing hero |
|
||||
| Paginakop | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Instellingen-/profieltitels |
|
||||
| Kanaalnaam | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, kanaalkoptekst |
|
||||
| Berichttekst | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standaard chattekst |
|
||||
| Gebruikersnaam | gg sans | 16px (1rem) | 500 | 1.25 | normal | Auteur van een bericht |
|
||||
| Tijdstempel | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Vandaag om 16:32" |
|
||||
| Sidebar-kanaal | gg sans | 16px (1rem) | 500 | 1.25 | normal | Kanaalslijstrijen |
|
||||
| Servernaam | gg sans | 16px (1rem) | 600 | 1.25 | normal | Serverkopregel |
|
||||
| Bijschrift / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Statustekst, bewerkt-label |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline `code` |
|
||||
| Codeblok | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```driedubbel-omheind``` blok |
|
||||
|
||||
### Principes
|
||||
- **Vriendelijke geometrie**: gg sans vervangt Whitney met afgeronde uiteinden op a/g/s — het merk wil warmte zonder leesbaarheid op te offeren.
|
||||
- **Gewichtscontrast boven kleurcontrast**: hiërarchie komt voort uit gewichtsstappen 400→500→600→700→800; het oppervlak blijft neutraal.
|
||||
- **16px bodytekst**: chatberichten krimpen niet onder 16px. Dichtheid komt van regelhoogte (1.375), niet van lettergrootte.
|
||||
|
||||
## 4. Componentstijlen
|
||||
|
||||
### Knoppen
|
||||
|
||||
**Primair**
|
||||
- Achtergrond: `#5865f2`
|
||||
- Tekst: `#ffffff`
|
||||
- Opvulling: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Gebruik: Primaire CTA's, "Doorgaan", "Server joinen"
|
||||
|
||||
**Secundair**
|
||||
- Achtergrond: `#4e5058`
|
||||
- Tekst: `#ffffff`
|
||||
- Opvulling: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiair / Subtiel (linkstijl)**
|
||||
- Achtergrond: transparant
|
||||
- Tekst: `#dbdee1`
|
||||
- Hover: tekst onderstreept, geen achtergrondverandering
|
||||
|
||||
**Gevaarlijk**
|
||||
- Achtergrond: `#da373c`
|
||||
- Tekst: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Invoervelden
|
||||
- Achtergrond: `#1e1f22`
|
||||
- Tekst: `#dbdee1`
|
||||
- Rand: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Opvulling: 10px 12px
|
||||
- Focus: rand `#5865f2`
|
||||
|
||||
### Server-avatars
|
||||
- Grootte: 48×48px
|
||||
- Radius: 16px (afgerond vierkant) standaard; gaat bij hover en actief over naar 50%.
|
||||
- Actieve toestand: 4px witte pill aan de linkerrand van de icoonskolom.
|
||||
|
||||
### Statusdots
|
||||
- Grootte: 10×10px
|
||||
- Rand: 3px solid background-tertiary (creëert het "inkeping"-effect)
|
||||
- Positie: rechtsonder op de avatar.
|
||||
|
||||
### Kaarten / Insluitingen
|
||||
- Achtergrond: `#2b2d31` (donker) of `#f2f3f5` (licht)
|
||||
- Linkerrand: 4px solid insluiting-accentkleur.
|
||||
- Radius: 4px
|
||||
- Opvulling: 8px 16px
|
||||
|
||||
### Vermelding-pill
|
||||
- Achtergrond: `rgba(88, 101, 242, 0.3)`
|
||||
- Tekst: `#c9cdfb`
|
||||
- Opvulling: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spatiëring & lay-out
|
||||
|
||||
- **Basiseenheid**: 4px. Schaal: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Serverrail**: 72px breed, vast.
|
||||
- **Kanaalsidebar**: 240px breed.
|
||||
- **Ledenlijst**: 240px breed op desktop.
|
||||
- **Chatkolom**: fluid, minimaal 380px.
|
||||
|
||||
## 6. Beweging
|
||||
|
||||
- **Duur**: 200ms voor hover; 350ms voor de avatar-cirkelmorfose; 80ms voor tooltip-fade.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` voor de avatarmorfose (vlot aanloopje, dan bezinken).
|
||||
- **Melding-puls**: 1.4s ease-in-out infinite op de indicator voor ongelezen vermeldingen.
|
||||
|
||||
## 7. Gebruiksrichtlijnen
|
||||
|
||||
- Bewaar de donkere schil, compacte dichtheid en blurple-actiehiërarchie gezamenlijk; blurple gebruiken op een lichte, marketingachtige lay-out doorbreekt het Discord-productgevoel.
|
||||
- Houd navigatie-intensieve oppervlakken gestructureerd rondom rails, sidebars en chatkolommen in plaats van geïsoleerde decoratieve kaarten.
|
||||
- Gebruik de afgerond-vierkante avatar en statusdot-taal bij het weergeven van mensen, servers of actieve aanwezigheid.
|
||||
@@ -0,0 +1,168 @@
|
||||
# System Projektowania Inspirowany Discord
|
||||
|
||||
> Category: Produktywność i SaaS
|
||||
> Platforma głosowa i czatowa. Głęboki blurple, ciemne powierzchnie jako baza, żywe akcenty.
|
||||
|
||||
## 1. Temat Wizualny i Atmosfera
|
||||
|
||||
Produkt Discord jest stworzony na wieczorne sesje, rajdy i grupowe rozmowy głosowe — dlatego cała powierzchnia jest ciemna od podstaw. Domyślne tło to głęboki `Background Primary` (`#313338` jasny motyw, `#1e1f22` ciemny motyw), a kolumny czatu są nakładane na nieco jaśniejsze lub ciemniejsze odcienie, by oznaczać kanały, wątki i boczne panele. Charakterystyczny **Blurple** (`#5865f2`) jest zarezerwowany dla znaku marki, głównych CTA, wzmianek i elementu „ty" — stosowany oszczędnie, by wyróżniał się na tle stonowanych neutralów.
|
||||
|
||||
Typografia opiera się na **gg sans** (własnej czcionce Discord zastępującej Whitney) do treści i interfejsu, z zaokrąglonymi geometrycznymi kształtami, które sprawiają wrażenie przyjaznych, a zarazem czytelnych w małych rozmiarach wymaganych przez klienta czatu. Nagłówki rosną stopniowo; wiersze czatu są ścisłe (4–8px między grupami wiadomości), dzięki czemu godziny przewijania historii są łatwe do przeglądania.
|
||||
|
||||
Język kształtów jest zaokrąglony, lecz nie balonowo miękki: promień 8px na kartach, 4px na polach wejściowych, pełne pigułki na odznakach statusu i tagach. Serwery mają awatary w kształcie zaokrąglonych kwadratów o rozmiarze 48px, które po najechaniu kursorem zamieniają się w koła — drobny element animacji, który stał się częścią tożsamości marki.
|
||||
|
||||
**Kluczowe Cechy:**
|
||||
- Ciemne powierzchnie jako baza: `#1e1f22` / `#2b2d31` / `#313338` (3-poziomowa głębia)
|
||||
- Blurple `#5865f2` jako jedyny nasycony akcent na powierzchni czatu
|
||||
- gg sans (styl Whitney) do wszystkich tekstów — przyjazna, geometryczna, neutralna
|
||||
- Awatary serwerów w kształcie zaokrąglonych kwadratów (promień 16px) przeskakujące w koła po najechaniu
|
||||
- Ścisłe odstępy wierszy czatu, hojne wypełnienie bocznych paneli
|
||||
- Kropki statusu: zielona online, żółta idle, czerwona dnd, szara offline
|
||||
- Rozdzielniki 1px wyrównane do piksela w subtelnej bieli przy niskiej przezroczystości
|
||||
|
||||
## 2. Paleta Kolorów i Role
|
||||
|
||||
### Główne
|
||||
- **Blurple** (`#5865f2`): Główny kolor marki, główne CTA, podświetlenie wzmianki.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/aktywny dla blurple.
|
||||
- **Blurple Soft** (`#7289da`): Stary blurple, drugorzędny akcent w marketingu.
|
||||
|
||||
### Powierzchnie (Ciemny Motyw — domyślny)
|
||||
- **Background Tertiary** (`#1e1f22`): Listwa z listą serwerów, najgłębsze tło.
|
||||
- **Background Secondary** (`#2b2d31`): Pasek boczny kanałów, pasek boczny ustawień.
|
||||
- **Background Primary** (`#313338`): Powierzchnia czatu, kolumna wiadomości.
|
||||
- **Background Floating** (`#111214`): Pływające popovers, podpowiedzi, autouzupełnianie.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Nakładka hover na wierszach.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Aktywny wiersz.
|
||||
|
||||
### Powierzchnie (Jasny Motyw)
|
||||
- **Light Bg Primary** (`#ffffff`): Powierzchnia czatu w jasnym motywie.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Pasek boczny w jasnym motywie.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Najgłębsza jasna powierzchnia.
|
||||
|
||||
### Tekst
|
||||
- **Header Primary** (`#f2f3f5`): Nagłówki kanałów, tytuły modali w ciemnym motywie.
|
||||
- **Header Secondary** (`#b5bac1`): Wyciszone nagłówki.
|
||||
- **Text Normal** (`#dbdee1`): Tekst główny w ciemnym motywie — nieco chłodniejszy niż czysta biel.
|
||||
- **Text Muted** (`#949ba4`): Znaczniki czasu, nazwy serwerów, drugorzędne metadane.
|
||||
- **Text Link** (`#00a8fc`): Hiperłącza w wiadomościach — błękitny, odróżniający się od blurple.
|
||||
- **Channels Default** (`#80848e`): Nieaktywna nazwa kanału na pasku bocznym.
|
||||
|
||||
### Status i Znaczenie
|
||||
- **Status Online** (`#23a55a`): Kropka online, stany sukcesu.
|
||||
- **Status Idle** (`#f0b232`): Kropka idle, niedostępny.
|
||||
- **Status DND** (`#f23f43`): Nie przeszkadzać, służy też jako czerwień destrukcyjna.
|
||||
- **Status Streaming** (`#593695`): Fioletowy „Streaming".
|
||||
- **Status Offline** (`#80848e`): Szary offline.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Delikatna warstwa blurple na wierszach z @wzmianką.
|
||||
|
||||
### Obramowania i Rozdzielniki
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standardowy rozdzielnik w ciemnym motywie.
|
||||
- **Border Subtle** (`#3f4147`): Jednolity rozdzielnik dla kart.
|
||||
|
||||
## 3. Zasady Typografii
|
||||
|
||||
### Rodzina Czcionek
|
||||
- **Treść / UI / Nagłówki**: `gg sans`, z fallbackiem: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Wyświetlanie (legacy / Whitney)**: `Whitney`, z fallbackiem: `gg sans`
|
||||
- **Kod / Mono**: `"gg mono"`, z fallbackiem: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchia
|
||||
|
||||
| Rola | Czcionka | Rozmiar | Grubość | Wysokość linii | Odstęp liter | Uwagi |
|
||||
|------|----------|---------|---------|----------------|--------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero marketingowy |
|
||||
| Nagłówek strony | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Tytuły ustawień/profilu |
|
||||
| Nazwa kanału | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, nagłówek kanału |
|
||||
| Treść wiadomości | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standardowy tekst czatu |
|
||||
| Nazwa użytkownika | gg sans | 16px (1rem) | 500 | 1.25 | normal | Autor wiadomości |
|
||||
| Znacznik czasu | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | „Dzisiaj o 16:32" |
|
||||
| Kanał paska bocznego | gg sans | 16px (1rem) | 500 | 1.25 | normal | Wiersze listy kanałów |
|
||||
| Nazwa serwera | gg sans | 16px (1rem) | 600 | 1.25 | normal | Nagłówek serwera |
|
||||
| Podpis / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Tekst statusu, tag edycji |
|
||||
| Kod wbudowany | gg mono | 0.875em | 400 | inherit | normal | Wbudowany `code` |
|
||||
| Blok kodu | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Blok ```potrójnym ogrodzeniem``` |
|
||||
|
||||
### Zasady
|
||||
- **Przyjazna geometria**: gg sans zastępuje Whitney zaokrąglonymi zakończeniami liter a/g/s — marka chce ciepła bez utraty czytelności.
|
||||
- **Kontrast grubości ponad kontrast koloru**: hierarchia pochodzi ze stopni grubości 400→500→600→700→800; powierzchnia pozostaje neutralna.
|
||||
- **Treść 16px**: wiadomości czatu nie zmniejszają się poniżej 16px. Gęstość pochodzi z wysokości linii (1.375), nie z rozmiaru czcionki.
|
||||
|
||||
## 4. Style Komponentów
|
||||
|
||||
### Przyciski
|
||||
|
||||
**Główny**
|
||||
- Tło: `#5865f2`
|
||||
- Tekst: `#ffffff`
|
||||
- Wypełnienie: 8px 16px
|
||||
- Promień: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Użycie: Główne CTA, „Kontynuuj", „Dołącz do serwera"
|
||||
|
||||
**Drugorzędny**
|
||||
- Tło: `#4e5058`
|
||||
- Tekst: `#ffffff`
|
||||
- Wypełnienie: 8px 16px
|
||||
- Promień: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Trzeciorzędny / Subtelny (styl linku)**
|
||||
- Tło: transparent
|
||||
- Tekst: `#dbdee1`
|
||||
- Hover: tekst podkreślony, brak zmiany tła
|
||||
|
||||
**Destrukcyjny**
|
||||
- Tło: `#da373c`
|
||||
- Tekst: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Pola wejściowe
|
||||
- Tło: `#1e1f22`
|
||||
- Tekst: `#dbdee1`
|
||||
- Obramowanie: 1px solid `#1e1f22`
|
||||
- Promień: 4px
|
||||
- Wypełnienie: 10px 12px
|
||||
- Fokus: obramowanie `#5865f2`
|
||||
|
||||
### Awatary Serwerów
|
||||
- Rozmiar: 48×48px
|
||||
- Promień: 16px (zaokrąglony kwadrat) domyślnie; przechodzi do 50% przy hover i aktywnym stanie.
|
||||
- Stan aktywny: biała pigułka 4px na lewej krawędzi kolumny ikon.
|
||||
|
||||
### Kropki Statusu
|
||||
- Rozmiar: 10×10px
|
||||
- Obramowanie: 3px solid background-tertiary (tworzy efekt „wycięcia")
|
||||
- Pozycja: prawy dolny róg awatara.
|
||||
|
||||
### Karty / Osadzenia
|
||||
- Tło: `#2b2d31` (ciemny) lub `#f2f3f5` (jasny)
|
||||
- Lewe obramowanie: 4px solid kolor akcentu osadzenia.
|
||||
- Promień: 4px
|
||||
- Wypełnienie: 8px 16px
|
||||
|
||||
### Pigułka Wzmianki
|
||||
- Tło: `rgba(88, 101, 242, 0.3)`
|
||||
- Tekst: `#c9cdfb`
|
||||
- Wypełnienie: 0 2px
|
||||
- Promień: 3px
|
||||
|
||||
## 5. Odstępy i Układ
|
||||
|
||||
- **Jednostka bazowa**: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Listwa serwerów**: szerokość 72px, stała.
|
||||
- **Pasek boczny kanałów**: szerokość 240px.
|
||||
- **Lista członków**: szerokość 240px na pulpicie.
|
||||
- **Kolumna czatu**: płynna, min 380px.
|
||||
|
||||
## 6. Ruch
|
||||
|
||||
- **Czas trwania**: 200ms dla hover; 350ms dla morfowania awatara w koło; 80ms dla zanikania podpowiedzi.
|
||||
- **Przyspieszenie**: `cubic-bezier(0.215, 0.61, 0.355, 1)` dla morfowania awatara (szybkie, potem ustabilizowanie).
|
||||
- **Pulsowanie powiadomień**: 1.4s ease-in-out infinite na wskaźniku nieprzeczytanej wzmianki.
|
||||
|
||||
## 7. Ograniczenia Użytkowania
|
||||
|
||||
- Zachowaj ciemną powłokę, zwartą gęstość i hierarchię działań blurple razem; użycie blurple na jasnym układzie w stylu marketingowym niszczy klimat produktu Discord.
|
||||
- Utrzymuj powierzchnie o dużej nawigacji zorganizowane wokół listew, pasków bocznych i kolumn czatu, a nie izolowanych dekoracyjnych kart.
|
||||
- Używaj języka zaokrąglonych kwadratowych awatarów i kropek statusu przy reprezentowaniu osób, serwerów lub aktywnej obecności.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Sistema de Design Inspirado no Discord
|
||||
|
||||
> Categoria: Produtividade & SaaS
|
||||
> Plataforma de voz e chat. Blurple intenso, superfícies dark-first, momentos de destaque divertidos.
|
||||
|
||||
## 1. Tema Visual & Atmosfera
|
||||
|
||||
O produto do Discord foi projetado para noites, raids e chamadas em grupo — por isso toda a superfície é dark-first. A tela padrão é o profundo `Background Primary` (`#313338` no tema claro, `#1e1f22` no tema escuro), com colunas de chat sobrepostas em tons ligeiramente mais claros ou escuros para indicar canais, threads e painéis laterais. O icônico **Blurple** (`#5865f2`) é reservado para a marca, CTAs primários, menções e a affordance de "você" — usado com parcimônia para se destacar sobre os neutros suaves.
|
||||
|
||||
A tipografia usa **gg sans** (a fonte customizada do Discord, substituta da Whitney) para texto corrido e interface, com formas geométricas arredondadas que transmitem acolhimento sem comprometer a legibilidade nos tamanhos pequenos que um cliente de chat exige. Os títulos escalam de forma incremental; as linhas de chat são compactas (4–8px entre grupos de mensagens) para que horas de histórico pareçam fáceis de percorrer.
|
||||
|
||||
A linguagem de formas é arredondada, mas não excessivamente suave: raio de 8px nos cards, 4px nos inputs, pílulas completas em badges de status e tags. Os servidores são avatares com bordas arredondadas de 48px que se transformam em círculos ao passar o mouse — um detalhe de animação que se tornou parte da identidade visual da marca.
|
||||
|
||||
**Características-Chave:**
|
||||
- Superfícies dark-first: `#1e1f22` / `#2b2d31` / `#313338` (profundidade em 3 níveis)
|
||||
- Blurple `#5865f2` como único destaque saturado na superfície de chat
|
||||
- gg sans (estilo Whitney) para todo o texto — amigável, geométrica, neutra
|
||||
- Avatares de servidor em quadrado arredondado (raio de 16px) que se transformam em círculos ao passar o mouse
|
||||
- Espaçamento compacto nas linhas de chat, padding generoso no painel lateral
|
||||
- Pontos de status: verde online, amarelo ausente, vermelho não perturbe, cinza offline
|
||||
- Divisores de 1px alinhados ao pixel em off-white com baixa opacidade
|
||||
|
||||
## 2. Paleta de Cores & Papéis
|
||||
|
||||
### Primária
|
||||
- **Blurple** (`#5865f2`): Primária da marca, CTA principal, destaque de menção.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/ativo do blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple legado, destaque secundário em marketing.
|
||||
|
||||
### Superfície (Tema Escuro — padrão)
|
||||
- **Background Tertiary** (`#1e1f22`): Trilho da lista de servidores, plano de fundo mais profundo.
|
||||
- **Background Secondary** (`#2b2d31`): Barra lateral de canais, barra lateral de configurações.
|
||||
- **Background Primary** (`#313338`): Superfície de chat, coluna de mensagens.
|
||||
- **Background Floating** (`#111214`): Popovers flutuantes, tooltips, autocompletar.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Overlay de hover nas linhas.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Linha ativa.
|
||||
|
||||
### Superfície (Tema Claro)
|
||||
- **Light Bg Primary** (`#ffffff`): Superfície de chat no tema claro.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Barra lateral no tema claro.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Superfície clara mais profunda.
|
||||
|
||||
### Texto
|
||||
- **Header Primary** (`#f2f3f5`): Cabeçalhos de canal, títulos de modais no tema escuro.
|
||||
- **Header Secondary** (`#b5bac1`): Cabeçalhos secundários.
|
||||
- **Text Normal** (`#dbdee1`): Texto corrido no tema escuro — ligeiramente mais frio que o branco puro.
|
||||
- **Text Muted** (`#949ba4`): Timestamps, nomes de servidores, metadados secundários.
|
||||
- **Text Link** (`#00a8fc`): Hiperlinks em mensagens — azul céu, distinto do blurple.
|
||||
- **Channels Default** (`#80848e`): Nome de canal inativo na barra lateral.
|
||||
|
||||
### Status & Semântica
|
||||
- **Status Online** (`#23a55a`): Ponto online, estados de sucesso.
|
||||
- **Status Idle** (`#f0b232`): Ponto ausente, away.
|
||||
- **Status DND** (`#f23f43`): Não perturbe; também funciona como vermelho destrutivo.
|
||||
- **Status Streaming** (`#593695`): Roxo de "Transmitindo".
|
||||
- **Status Offline** (`#80848e`): Cinza offline.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Leve camada blurple nas linhas com @menção.
|
||||
|
||||
### Borda & Divisor
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Divisor padrão no tema escuro.
|
||||
- **Border Subtle** (`#3f4147`): Divisor sólido para cards.
|
||||
|
||||
## 3. Regras Tipográficas
|
||||
|
||||
### Família de Fonte
|
||||
- **Corpo / UI / Títulos**: `gg sans`, com fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (legado / Whitney)**: `Whitney`, com fallback: `gg sans`
|
||||
- **Código / Mono**: `"gg mono"`, com fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarquia
|
||||
|
||||
| Papel | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento de Letra | Notas |
|
||||
|-------|-------|---------|------|-----------------|----------------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero de marketing |
|
||||
| Título de Página | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Títulos de configurações/perfil |
|
||||
| Nome de Canal | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, cabeçalho do canal |
|
||||
| Corpo da Mensagem | gg sans | 16px (1rem) | 400 | 1.375 | normal | Texto de chat padrão |
|
||||
| Nome de Usuário | gg sans | 16px (1rem) | 500 | 1.25 | normal | Autor de uma mensagem |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Hoje às 16:32" |
|
||||
| Canal na Barra Lateral | gg sans | 16px (1rem) | 500 | 1.25 | normal | Linhas da lista de canais |
|
||||
| Nome do Servidor | gg sans | 16px (1rem) | 600 | 1.25 | normal | Cabeçalho do servidor |
|
||||
| Legenda / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Texto de status, tag de editado |
|
||||
| Código Inline | gg mono | 0.875em | 400 | inherit | normal | `código` inline |
|
||||
| Bloco de Código | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Bloco ```com três crases``` |
|
||||
|
||||
### Princípios
|
||||
- **Geometria amigável**: gg sans substitui a Whitney com terminais arredondados em a/g/s — a marca busca aconchego sem sacrificar a legibilidade.
|
||||
- **Contraste por peso, não por cor**: a hierarquia vem dos passos de peso 400→500→600→700→800; a superfície permanece neutra.
|
||||
- **Corpo em 16px**: as mensagens de chat não reduzem abaixo de 16px. A densidade vem da altura de linha (1.375), não do tamanho da fonte.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botões
|
||||
|
||||
**Primário**
|
||||
- Fundo: `#5865f2`
|
||||
- Texto: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Raio: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Uso: CTAs primários, "Continuar", "Entrar no Servidor"
|
||||
|
||||
**Secundário**
|
||||
- Fundo: `#4e5058`
|
||||
- Texto: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Raio: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Terciário / Sutil (estilo link)**
|
||||
- Fundo: transparente
|
||||
- Texto: `#dbdee1`
|
||||
- Hover: texto sublinhado, sem mudança de fundo
|
||||
|
||||
**Destrutivo**
|
||||
- Fundo: `#da373c`
|
||||
- Texto: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Fundo: `#1e1f22`
|
||||
- Texto: `#dbdee1`
|
||||
- Borda: 1px solid `#1e1f22`
|
||||
- Raio: 4px
|
||||
- Padding: 10px 12px
|
||||
- Foco: borda `#5865f2`
|
||||
|
||||
### Avatares de Servidor
|
||||
- Tamanho: 48×48px
|
||||
- Raio: 16px (quadrado arredondado) por padrão; transição para 50% ao passar o mouse e no estado ativo.
|
||||
- Estado ativo: pílula branca de 4px na borda esquerda da coluna de ícones.
|
||||
|
||||
### Pontos de Status
|
||||
- Tamanho: 10×10px
|
||||
- Borda: 3px solid background-tertiary (cria o efeito de "entalhe")
|
||||
- Posição: canto inferior direito do avatar.
|
||||
|
||||
### Cards / Embeds
|
||||
- Fundo: `#2b2d31` (escuro) ou `#f2f3f5` (claro)
|
||||
- Borda esquerda: 4px solid cor de destaque do embed.
|
||||
- Raio: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Pílula de Menção
|
||||
- Fundo: `rgba(88, 101, 242, 0.3)`
|
||||
- Texto: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Raio: 3px
|
||||
|
||||
## 5. Espaçamento & Layout
|
||||
|
||||
- **Unidade base**: 4px. Escala: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Trilho de servidores**: 72px de largura, fixo.
|
||||
- **Barra lateral de canais**: 240px de largura.
|
||||
- **Lista de membros**: 240px de largura no desktop.
|
||||
- **Coluna de chat**: fluida, mínimo de 380px.
|
||||
|
||||
## 6. Movimento
|
||||
|
||||
- **Duração**: 200ms para hover; 350ms para a transformação do avatar em círculo; 80ms para o fade do tooltip.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` para a transformação do avatar (rápido e depois suaviza).
|
||||
- **Pulso de notificação**: 1.4s ease-in-out infinite no indicador de menção não lida.
|
||||
|
||||
## 7. Diretrizes de Uso
|
||||
|
||||
- Preserve o shell escuro, a densidade compacta e a hierarquia de ações em blurple em conjunto; usar blurple em um layout de marketing com fundo claro quebra a sensação do produto Discord.
|
||||
- Mantenha as superfícies com navegação intensa estruturadas em trilhos, barras laterais e colunas de chat, em vez de cards decorativos isolados.
|
||||
- Use a linguagem de avatar em quadrado arredondado e ponto de status ao representar pessoas, servidores ou presença ativa.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Продуктивность и SaaS
|
||||
> Платформа для голосового общения и чатов. Глубокий blurple, тёмные поверхности в основе, яркие акцентные моменты.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Продукт Discord создан для вечерних сессий, рейдов и группового голосового общения — поэтому вся поверхность строится на тёмной теме. Базовый холст — глубокий `Background Primary` (`#313338` в светлой теме, `#1e1f22` в тёмной), а колонки чата накладываются поверх чуть более светлых или тёмных оттенков, обозначая каналы, ветки и боковые панели. Фирменный **Blurple** (`#5865f2`) зарезервирован для брендового знака, основных призывов к действию, упоминаний и указателя «вы» — используется экономно, чтобы выделяться на фоне приглушённых нейтральных тонов.
|
||||
|
||||
Типографика — **gg sans** (собственный шрифт Discord, заменивший Whitney): геометрические формы с закруглениями, которые выглядят дружелюбно и при этом остаются читаемыми при мелких размерах, неизбежных в чат-клиенте. Заголовки постепенно увеличиваются в размере; строки чата плотные (4–8px между группами сообщений), чтобы часы прокрутки воспринимались бегло.
|
||||
|
||||
Форм-язык — округлённый, но не «пузырчатый»: радиус 8px у карточек, 4px у полей ввода, полные пилюли у бейджей статуса и тегов. Аватары серверов — квадраты с закругленными углами 48px, трансформирующиеся в круги при наведении — маленькая деталь движения, ставшая частью идентичности бренда.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Тёмные поверхности в основе: `#1e1f22` / `#2b2d31` / `#313338` (3 уровня глубины)
|
||||
- Blurple `#5865f2` — единственный насыщенный акцент в поверхности чата
|
||||
- gg sans (в стиле Whitney) для всего текста — дружелюбный, геометрический, нейтральный
|
||||
- Аватары серверов в виде квадратов с закруглёнными углами (радиус 16px), переходящие в круги при наведении
|
||||
- Плотные строки чата, щедрые отступы боковой панели
|
||||
- Точки статуса: зелёный — в сети, жёлтый — не за компьютером, красный — не беспокоить, серый — не в сети
|
||||
- Разделители 1px, привязанные к пикселям, полупрозрачный почти-белый при низком альфа
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Blurple** (`#5865f2`): Основной брендовый цвет, основной CTA, выделение упоминаний.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/активное состояние для blurple.
|
||||
- **Blurple Soft** (`#7289da`): Устаревший blurple, второстепенный акцент в маркетинге.
|
||||
|
||||
### Surface (тёмная тема — по умолчанию)
|
||||
- **Background Tertiary** (`#1e1f22`): Рейл списка серверов, самый глубокий фон.
|
||||
- **Background Secondary** (`#2b2d31`): Боковая панель каналов, боковая панель настроек.
|
||||
- **Background Primary** (`#313338`): Поверхность чата, колонка сообщений.
|
||||
- **Background Floating** (`#111214`): Плавающие поповеры, подсказки, автодополнение.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Наложение при наведении на строки.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Активная строка.
|
||||
|
||||
### Surface (светлая тема)
|
||||
- **Light Bg Primary** (`#ffffff`): Поверхность чата в светлой теме.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Боковая панель в светлой теме.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Самая глубокая светлая поверхность.
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): Заголовки каналов, заголовки модальных окон в тёмной теме.
|
||||
- **Header Secondary** (`#b5bac1`): Приглушённые заголовки.
|
||||
- **Text Normal** (`#dbdee1`): Основной текст в тёмной теме — чуть холоднее чистого белого.
|
||||
- **Text Muted** (`#949ba4`): Временны́е метки, названия серверов, второстепенные метаданные.
|
||||
- **Text Link** (`#00a8fc`): Гиперссылки в сообщениях — небесно-голубой, отличается от blurple.
|
||||
- **Channels Default** (`#80848e`): Неактивное название канала в боковой панели.
|
||||
|
||||
### Status & Semantic
|
||||
- **Status Online** (`#23a55a`): Точка «в сети», состояния успеха.
|
||||
- **Status Idle** (`#f0b232`): Точка «не за компьютером».
|
||||
- **Status DND** (`#f23f43`): «Не беспокоить», также деструктивный красный.
|
||||
- **Status Streaming** (`#593695`): Фиолетовый «трансляция».
|
||||
- **Status Offline** (`#80848e`): Серый «не в сети».
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Мягкая blurple-заливка строк с @упоминаниями.
|
||||
|
||||
### Border & Divider
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Стандартный разделитель в тёмной теме.
|
||||
- **Border Subtle** (`#3f4147`): Сплошной разделитель для карточек.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI / Headings**: `gg sans`, запасной стек: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (устаревший / Whitney)**: `Whitney`, запасной стек: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, запасной стек: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Маркетинговый герой |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Заголовки настроек/профиля |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, заголовок канала |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Стандартный текст чата |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Автор сообщения |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | «Сегодня в 16:32» |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Строки списка каналов |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Заголовок сервера |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Текст статуса, пометка «изменено» |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Встроенный `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Блок ```triple-fenced``` |
|
||||
|
||||
### Principles
|
||||
- **Дружелюбная геометрия**: gg sans заменяет Whitney закруглёнными концами у a/g/s — бренд стремится к теплоте, не жертвуя читаемостью.
|
||||
- **Контраст через насыщенность, а не цвет**: иерархия задаётся ступенями насыщенности 400→500→600→700→800; поверхность остаётся нейтральной.
|
||||
- **Размер шрифта 16px для основного текста**: сообщения чата не уменьшаются ниже 16px. Плотность достигается за счёт межстрочного интервала (1.375), а не размера шрифта.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Применение: основные CTA, «Продолжить», «Присоединиться к серверу»
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle (Link-style)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: текст подчёркивается, фон не изменяется
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Server Avatars
|
||||
- Size: 48×48px
|
||||
- Radius: 16px (квадрат с закруглёнными углами) по умолчанию; при наведении и в активном состоянии переходит в 50%.
|
||||
- Активное состояние: белая пилюля 4px на левом краю колонки иконок.
|
||||
|
||||
### Status Dots
|
||||
- Size: 10×10px
|
||||
- Border: 3px solid background-tertiary (создаёт эффект «выреза»)
|
||||
- Позиция: нижний правый угол аватара.
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31` (тёмная) или `#f2f3f5` (светлая)
|
||||
- Левая граница: 4px solid, цвет акцента эмбеда.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Базовая единица**: 4px. Шкала: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Рейл серверов**: ширина 72px, фиксированная.
|
||||
- **Боковая панель каналов**: ширина 240px.
|
||||
- **Список участников**: ширина 240px на десктопе.
|
||||
- **Колонка чата**: fluid, минимум 380px.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Длительность**: 200ms для hover; 350ms для трансформации аватара в круг; 80ms для появления подсказки.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` для морфинга аватара (быстрый старт, плавное завершение).
|
||||
- **Пульс уведомлений**: 1.4s ease-in-out infinite на индикаторе непрочитанных упоминаний.
|
||||
|
||||
## 7. Usage Guardrails
|
||||
|
||||
- Сохраняйте тёмную оболочку, компактную плотность и иерархию действий на blurple вместе; использование blurple на светлом маркетинговом макете нарушает ощущение продукта Discord.
|
||||
- Структурируйте поверхности с насыщенной навигацией вокруг рейлов, боковых панелей и колонок чата, а не изолированных декоративных карточек.
|
||||
- Используйте язык квадратных аватаров с закруглёнными углами и точек статуса при отображении людей, серверов или активного присутствия.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Discord'dan İlham Alan Tasarım Sistemi
|
||||
|
||||
> Kategori: Üretkenlik & SaaS
|
||||
> Sesli / sohbet platformu. Derin mor-mavi (blurple), karanlık öncelikli yüzeyler, eğlenceli vurgu anları.
|
||||
|
||||
## 1. Görsel Tema & Atmosfer
|
||||
|
||||
Discord'un ürünü, akşamlar, baskınlar ve grup sesli görüşmeleri için tasarlanmıştır; bu nedenle tüm yüzey karanlık önceliklidir. Varsayılan tuval, derin `Background Primary` (`#313338` açık tema, `#1e1f22` koyu tema) rengidir; kanalları, konuları ve yan panelleri belirtmek için sohbet sütunları biraz daha açık veya koyu tonların üzerine katmanlanır. Karakteristik **Blurple** (`#5865f2`), marka işareti, birincil eylem çağrısı, bahsedilmeler ve "siz" karşılığı için ayrılmıştır — bastırılmış nötrler üzerinde öne çıkması için tutumlu kullanılır.
|
||||
|
||||
Tipografi, düz metin ve arayüz için **gg sans** (Discord'un özel Whitney değişimi) kullanır; yuvarlak geometrik şekiller, bir sohbet istemcisinin gerektirdiği küçük boyutlarda bile erişilebilir ama okunaklı bir his verir. Başlıklar kademeli olarak büyür; sohbet satırları sıkıdır (mesaj grupları arasında 4–8px) bu sayede saatlerce geriye dönük kaydırma taranabilir hissettir.
|
||||
|
||||
Şekil dili yuvarlak ama balon kadar yumuşak değildir: kartlarda 8px, girişlerde 4px köşe yarıçapı, durum rozetleri ve etiketlerde tam hap şekli. Sunucular hover'da dairelere dönüşen 48px boyutunda yuvarlatılmış kare avatarlara sahiptir — markanın kimliğinin bir parçası haline gelmiş küçük bir hareket öğesi.
|
||||
|
||||
**Temel Özellikler:**
|
||||
- Karanlık öncelikli yüzeyler: `#1e1f22` / `#2b2d31` / `#313338` (3 adımlı derinlik)
|
||||
- Sohbet yüzeyindeki tek doymuş vurgu olarak Blurple `#5865f2`
|
||||
- Tüm metinler için gg sans (Whitney stili) — samimi, geometrik, nötr
|
||||
- Hover'da dairelere dönüşen yuvarlatılmış kare sunucu avatarları (16px yarıçap)
|
||||
- Sıkı sohbet satırı boşluğu, geniş yan panel dolgusu
|
||||
- Durum noktaları: çevrimiçi için yeşil, boşta için sarı, rahatsız etme için kırmızı, çevrimdışı için gri
|
||||
- Koyu modda düşük alfa ile ince kırık beyaz tonlarında piksele hizalanmış 1px ayırıcılar
|
||||
|
||||
## 2. Renk Paleti & Roller
|
||||
|
||||
### Birincil
|
||||
- **Blurple** (`#5865f2`): Marka birincili, birincil eylem çağrısı, bahsetme vurgusu.
|
||||
- **Blurple Hover** (`#4752c4`): Blurple için hover/aktif durumu.
|
||||
- **Blurple Soft** (`#7289da`): Eski blurple, pazarlamada ikincil vurgu.
|
||||
|
||||
### Yüzey (Koyu Tema — varsayılan)
|
||||
- **Background Tertiary** (`#1e1f22`): Sunucu listesi rayı, en derin arka plan.
|
||||
- **Background Secondary** (`#2b2d31`): Kanal kenar çubuğu, ayarlar kenar çubuğu.
|
||||
- **Background Primary** (`#313338`): Sohbet yüzeyi, mesaj sütunu.
|
||||
- **Background Floating** (`#111214`): Kayan açılır pencereler, araç ipuçları, otomatik tamamlama.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Satırlarda hover bindirmesi.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Aktif satır.
|
||||
|
||||
### Yüzey (Açık Tema)
|
||||
- **Light Bg Primary** (`#ffffff`): Açık temada sohbet yüzeyi.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Açık temada kenar çubuğu.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): En derin açık yüzey.
|
||||
|
||||
### Metin
|
||||
- **Header Primary** (`#f2f3f5`): Koyu temada kanal başlıkları, modal başlıkları.
|
||||
- **Header Secondary** (`#b5bac1`): Sessiz başlıklar.
|
||||
- **Text Normal** (`#dbdee1`): Koyu temada gövde metni — saf beyazdan biraz daha soğuk.
|
||||
- **Text Muted** (`#949ba4`): Zaman damgaları, sunucu adları, ikincil meta veriler.
|
||||
- **Text Link** (`#00a8fc`): Mesajlardaki köprüler — blurple'dan ayrışan gök mavisi.
|
||||
- **Channels Default** (`#80848e`): Kenar çubuğundaki etkin olmayan kanal adı.
|
||||
|
||||
### Durum & Anlamsal
|
||||
- **Status Online** (`#23a55a`): Çevrimiçi nokta, başarı durumları.
|
||||
- **Status Idle** (`#f0b232`): Boşta nokta, uzakta.
|
||||
- **Status DND** (`#f23f43`): Rahatsız etme, aynı zamanda yıkıcı kırmızı görevi görür.
|
||||
- **Status Streaming** (`#593695`): "Yayın yapıyor" moru.
|
||||
- **Status Offline** (`#80848e`): Çevrimdışı grisi.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @bahsetme satırlarında yumuşak blurple yıkaması.
|
||||
|
||||
### Kenarlık & Ayırıcı
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Koyu modda standart ayırıcı.
|
||||
- **Border Subtle** (`#3f4147`): Kartlar için düz ayırıcı.
|
||||
|
||||
## 3. Tipografi Kuralları
|
||||
|
||||
### Yazı Tipi Ailesi
|
||||
- **Gövde / Arayüz / Başlıklar**: `gg sans`, geri dönüş: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Ekran (eski / Whitney)**: `Whitney`, geri dönüş: `gg sans`
|
||||
- **Kod / Mono**: `"gg mono"`, geri dönüş: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hiyerarşi
|
||||
|
||||
| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Pazarlama hero |
|
||||
| Sayfa Başlığı | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Ayarlar/profil başlıkları |
|
||||
| Kanal Adı | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, kanal başlığı |
|
||||
| Mesaj Gövdesi | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standart sohbet metni |
|
||||
| Kullanıcı Adı | gg sans | 16px (1rem) | 500 | 1.25 | normal | Mesajın yazarı |
|
||||
| Zaman Damgası | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Bugün 16:32'de" |
|
||||
| Kenar Çubuğu Kanalı | gg sans | 16px (1rem) | 500 | 1.25 | normal | Kanal listesi satırları |
|
||||
| Sunucu Adı | gg sans | 16px (1rem) | 600 | 1.25 | normal | Sunucu başlığı |
|
||||
| Altyazı / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Durum metni, düzenlendi etiketi |
|
||||
| Satır İçi Kod | gg mono | 0.875em | 400 | inherit | normal | Satır içi `code` |
|
||||
| Kod Bloğu | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```üçlü çit``` bloğu |
|
||||
|
||||
### İlkeler
|
||||
- **Samimi geometri**: gg sans, a/g/s harflerinde yuvarlak uçlarıyla Whitney'in yerini alır — marka okunabilirliği bozmadan sıcaklık ister.
|
||||
- **Renk kontrastı yerine ağırlık kontrastı**: hiyerarşi 400→500→600→700→800 ağırlık adımlarından gelir; yüzey nötr kalır.
|
||||
- **16px gövde**: sohbet mesajları 16px'in altına düşmez. Yoğunluk yazı tipi boyutundan değil satır yüksekliğinden (1.375) gelir.
|
||||
|
||||
## 4. Bileşen Stillandırmaları
|
||||
|
||||
### Düğmeler
|
||||
|
||||
**Birincil**
|
||||
- Arka Plan: `#5865f2`
|
||||
- Metin: `#ffffff`
|
||||
- Dolgu: 8px 16px
|
||||
- Yarıçap: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Kullanım: Birincil eylem çağrıları, "Devam Et", "Sunucuya Katıl"
|
||||
|
||||
**İkincil**
|
||||
- Arka Plan: `#4e5058`
|
||||
- Metin: `#ffffff`
|
||||
- Dolgu: 8px 16px
|
||||
- Yarıçap: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Üçüncül / İnce (Bağlantı stili)**
|
||||
- Arka Plan: transparent
|
||||
- Metin: `#dbdee1`
|
||||
- Hover: metin altı çizili, arka plan değişmez
|
||||
|
||||
**Tehlike**
|
||||
- Arka Plan: `#da373c`
|
||||
- Metin: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Girişler
|
||||
- Arka Plan: `#1e1f22`
|
||||
- Metin: `#dbdee1`
|
||||
- Kenarlık: 1px solid `#1e1f22`
|
||||
- Yarıçap: 4px
|
||||
- Dolgu: 10px 12px
|
||||
- Odak: kenarlık `#5865f2`
|
||||
|
||||
### Sunucu Avatarları
|
||||
- Boyut: 48×48px
|
||||
- Yarıçap: varsayılan olarak 16px (yuvarlatılmış kare); hover ve aktif durumda %50'ye geçiş yapar.
|
||||
- Aktif durum: ikon sütununun sol kenarında 4px beyaz hap.
|
||||
|
||||
### Durum Noktaları
|
||||
- Boyut: 10×10px
|
||||
- Kenarlık: 3px solid background-tertiary ("çentik" efekti oluşturur)
|
||||
- Konum: avatarın sağ alt köşesi.
|
||||
|
||||
### Kartlar / Gömülü İçerikler
|
||||
- Arka Plan: `#2b2d31` (koyu) veya `#f2f3f5` (açık)
|
||||
- Sol kenarlık: 4px solid gömülü içerik vurgu rengi.
|
||||
- Yarıçap: 4px
|
||||
- Dolgu: 8px 16px
|
||||
|
||||
### Bahsetme Hapı
|
||||
- Arka Plan: `rgba(88, 101, 242, 0.3)`
|
||||
- Metin: `#c9cdfb`
|
||||
- Dolgu: 0 2px
|
||||
- Yarıçap: 3px
|
||||
|
||||
## 5. Boşluk & Düzen
|
||||
|
||||
- **Temel birim**: 4px. Ölçek: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Sunucu rayı**: 72px genişliğinde, sabit.
|
||||
- **Kanal kenar çubuğu**: 240px genişliğinde.
|
||||
- **Üye listesi**: Masaüstünde 240px genişliğinde.
|
||||
- **Sohbet sütunu**: Akışkan, minimum 380px.
|
||||
|
||||
## 6. Hareket
|
||||
|
||||
- **Süre**: Hover için 200ms; avatar daire dönüşümü için 350ms; araç ipucu solması için 80ms.
|
||||
- **Geçiş eğrisi**: Avatar dönüşümü için `cubic-bezier(0.215, 0.61, 0.355, 1)` (hızlı başlar, yerleşir).
|
||||
- **Bildirim titreşimi**: Okunmamış bahsetme göstergesinde 1.4s ease-in-out infinite.
|
||||
|
||||
## 7. Kullanım Kılavuzları
|
||||
|
||||
- Karanlık kabuğu, kompakt yoğunluğu ve blurple eylem hiyerarşisini birlikte koruyun; blurple'ı açık pazarlama stili bir düzende kullanmak Discord ürün hissini bozar.
|
||||
- Gezinti ağırlıklı yüzeyleri yalıtılmış dekoratif kartlar yerine raylar, kenar çubukları ve sohbet sütunları etrafında yapılandırın.
|
||||
- İnsanları, sunucuları veya aktif varlığı temsil ederken yuvarlatılmış kare avatar ve durum noktası dilini kullanın.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Продуктивність і SaaS
|
||||
> Платформа для голосового спілкування та чату. Глибокий блерпл, темні поверхні за замовчуванням, грайливі акцентні моменти.
|
||||
|
||||
## 1. Візуальна тема та атмосфера
|
||||
|
||||
Продукт Discord розроблений для вечорів, рейдів та групових голосових сесій — тому вся поверхня є темною за замовчуванням. Стандартний фон — глибокий `Background Primary` (`#313338` у світлій темі, `#1e1f22` у темній), а колонки чату накладаються на трохи світліші або темніші відтінки для позначення каналів, гілок обговорень і бічних панелей. Фірмовий **Blurple** (`#5865f2`) зарезервований для знаку бренду, основних CTA, згадок та власного ідентифікатора — використовується дозовано, щоб виділятися на тлі приглушених нейтральних тонів.
|
||||
|
||||
Типографіка — **gg sans** (власна заміна Whitney від Discord) для основного тексту та інтерфейсу, із заокругленими геометричними формами, які виглядають доступно, але залишаються зрозумілими за малих розмірів, яких вимагає чат-клієнт. Заголовки збільшуються поступово; рядки чату щільні (4–8px між групами повідомлень), щоб годинний скролбек залишався легким для перегляду.
|
||||
|
||||
Мова форм — заокруглена, але не роздута: радіус 8px для карток, 4px для полів введення, повні овали для значків статусу та теґів. Сервери — аватари у формі заокругленого квадрата розміром 48px, які перетворюються на кола при наведенні — невеликий елемент руху, що став частиною фірмового стилю бренду.
|
||||
|
||||
**Ключові характеристики:**
|
||||
- Темні поверхні за замовчуванням: `#1e1f22` / `#2b2d31` / `#313338` (3 рівні глибини)
|
||||
- Blurple `#5865f2` як єдиний насичений акцент у поверхні чату
|
||||
- gg sans (стиль Whitney) для всього тексту — дружній, геометричний, нейтральний
|
||||
- Аватари серверів у формі заокругленого квадрата (радіус 16px), що перетворюються на кола при наведенні
|
||||
- Щільний міжрядковий інтервал у чаті, великі відступи в бічній панелі
|
||||
- Точки статусу: зелена — онлайн, жовта — відсутній, червона — не турбувати, сіра — офлайн
|
||||
- Роздільники 1px з вирівнюванням по пікселях у приглушеному білому з низькою прозорістю
|
||||
|
||||
## 2. Кольорова палітра та ролі
|
||||
|
||||
### Основні кольори
|
||||
- **Blurple** (`#5865f2`): Основний колір бренду, основний CTA, виділення згадок.
|
||||
- **Blurple Hover** (`#4752c4`): Стан наведення/активний для blurple.
|
||||
- **Blurple Soft** (`#7289da`): Застарілий blurple, другорядний акцент у маркетингу.
|
||||
|
||||
### Поверхня (темна тема — за замовчуванням)
|
||||
- **Background Tertiary** (`#1e1f22`): Панель списку серверів, найглибший фон.
|
||||
- **Background Secondary** (`#2b2d31`): Бічна панель каналів, бічна панель налаштувань.
|
||||
- **Background Primary** (`#313338`): Поверхня чату, колонка повідомлень.
|
||||
- **Background Floating** (`#111214`): Спливаючі елементи, підказки, автодоповнення.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Оверлей наведення на рядки.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Активний рядок.
|
||||
|
||||
### Поверхня (світла тема)
|
||||
- **Light Bg Primary** (`#ffffff`): Поверхня чату у світлій темі.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Бічна панель у світлій темі.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Найглибша світла поверхня.
|
||||
|
||||
### Текст
|
||||
- **Header Primary** (`#f2f3f5`): Заголовки каналів, назви модальних вікон у темній темі.
|
||||
- **Header Secondary** (`#b5bac1`): Приглушені заголовки.
|
||||
- **Text Normal** (`#dbdee1`): Основний текст у темній темі — дещо холодніший за чистий білий.
|
||||
- **Text Muted** (`#949ba4`): Мітки часу, назви серверів, другорядні метадані.
|
||||
- **Text Link** (`#00a8fc`): Гіперпосилання в повідомленнях — небесно-блакитний, відрізняється від blurple.
|
||||
- **Channels Default** (`#80848e`): Назва неактивного каналу в бічній панелі.
|
||||
|
||||
### Статус і семантика
|
||||
- **Status Online** (`#23a55a`): Точка онлайн, стани успіху.
|
||||
- **Status Idle** (`#f0b232`): Точка відсутності, afk.
|
||||
- **Status DND** (`#f23f43`): Не турбувати, також використовується як деструктивний червоний.
|
||||
- **Status Streaming** (`#593695`): Пурпурний колір «трансляції».
|
||||
- **Status Offline** (`#80848e`): Сірий офлайн.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): М'яке blurple-накладення на рядки з @-згадками.
|
||||
|
||||
### Рамки та роздільники
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Стандартний роздільник у темній темі.
|
||||
- **Border Subtle** (`#3f4147`): Суцільний роздільник для карток.
|
||||
|
||||
## 3. Правила типографіки
|
||||
|
||||
### Гарнітура шрифту
|
||||
- **Основний текст / UI / Заголовки**: `gg sans`, з запасним варіантом: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Відображення (застарілий / Whitney)**: `Whitney`, з запасним варіантом: `gg sans`
|
||||
- **Код / Моноширинний**: `"gg mono"`, з запасним варіантом: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Ієрархія
|
||||
|
||||
| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Маркетинговий герой |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Заголовки налаштувань/профілю |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, заголовок каналу |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Стандартний текст чату |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Автор повідомлення |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | «Today at 4:32 PM» |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Рядки списку каналів |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Заголовок сервера |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Текст статусу, мітка редагування |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Вбудований `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Блок ```triple-fenced``` |
|
||||
|
||||
### Принципи
|
||||
- **Дружня геометрія**: gg sans замінює Whitney, маючи заокруглені закінчення символів a/g/s — бренд прагне теплоти без шкоди для читабельності.
|
||||
- **Контраст насиченості замість контрасту кольору**: ієрархія будується на кроках насиченості 400→500→600→700→800; поверхня залишається нейтральною.
|
||||
- **Основний текст 16px**: повідомлення чату не зменшуються нижче 16px. Щільність досягається висотою рядка (1.375), а не розміром шрифту.
|
||||
|
||||
## 4. Стилі компонентів
|
||||
|
||||
### Кнопки
|
||||
|
||||
**Основна**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Використання: основні CTA, «Continue», «Join Server»
|
||||
|
||||
**Другорядна**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Третинна / Прихована (стиль посилання)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: підкреслення тексту, фон не змінюється
|
||||
|
||||
**Деструктивна**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Поля введення
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Аватари серверів
|
||||
- Розмір: 48×48px
|
||||
- Radius: 16px (заокруглений квадрат) за замовчуванням; при наведенні та в активному стані переходить до 50%.
|
||||
- Активний стан: біла овальна смуга 4px по лівому краю колонки іконок.
|
||||
|
||||
### Точки статусу
|
||||
- Розмір: 10×10px
|
||||
- Border: 3px solid background-tertiary (створює ефект «виїмки»)
|
||||
- Позиція: правий нижній кут аватара.
|
||||
|
||||
### Картки / Вставки
|
||||
- Background: `#2b2d31` (темна) або `#f2f3f5` (світла)
|
||||
- Ліва рамка: 4px solid акцентний колір вставки.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Пілюля згадки
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Відступи та макет
|
||||
|
||||
- **Базова одиниця**: 4px. Шкала: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Панель серверів**: 72px, фіксована.
|
||||
- **Бічна панель каналів**: 240px.
|
||||
- **Список учасників**: 240px на десктопі.
|
||||
- **Колонка чату**: рідка, мін. 380px.
|
||||
|
||||
## 6. Анімація
|
||||
|
||||
- **Тривалість**: 200ms для наведення; 350ms для морфінгу аватара в коло; 80ms для появи підказки.
|
||||
- **Пом'якшення**: `cubic-bezier(0.215, 0.61, 0.355, 1)` для морфінгу аватара (різкий початок і плавне завершення).
|
||||
- **Пульс сповіщення**: 1.4s ease-in-out infinite для індикатора непрочитаної згадки.
|
||||
|
||||
## 7. Обмеження використання
|
||||
|
||||
- Зберігайте темну оболонку, компактну щільність та ієрархію дій на основі blurple разом; використання blurple у світлому маркетинговому макеті руйнує відчуття продукту Discord.
|
||||
- Тримайте поверхні з великою кількістю навігаційних елементів структурованими навколо панелей, бічних меню та колонок чату, а не ізольованих декоративних карток.
|
||||
- Використовуйте мову аватарів-заокруглених-квадратів і точок статусу при відображенні людей, серверів або активної присутності.
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Năng suất & SaaS
|
||||
> Nền tảng thoại / chat. Blurple đậm, giao diện ưu tiên tối, điểm nhấn accent vui tươi.
|
||||
|
||||
## 1. Chủ đề Hình ảnh & Không khí
|
||||
|
||||
Sản phẩm của Discord được thiết kế cho những buổi tối, các buổi raid và voice nhóm — do đó toàn bộ giao diện ưu tiên chế độ tối. Canvas mặc định là `Background Primary` sâu (`#313338` chủ đề sáng, `#1e1f22` chủ đề tối), với các cột chat được xếp lớp trên các sắc thái sáng hoặc tối hơn một chút để phân biệt kênh, luồng và bảng bên. **Blurple** đặc trưng (`#5865f2`) được dành riêng cho nhãn hiệu, CTA chính, đề cập và affordance "you" — dùng tiết kiệm để nổi bật so với các màu trung tính đã giảm độ bão hòa.
|
||||
|
||||
Typography dùng **gg sans** (bản thay thế Whitney tùy chỉnh của Discord) cho văn xuôi và chrome, với các hình dạng hình học bo tròn mang lại cảm giác gần gũi nhưng vẫn dễ đọc ở kích thước nhỏ mà ứng dụng chat yêu cầu. Tiêu đề tăng dần từng bước; các hàng chat khít nhau (4–8px giữa các nhóm tin nhắn) để nhiều giờ cuộn lại vẫn dễ dàng quét qua.
|
||||
|
||||
Ngôn ngữ hình dạng bo tròn nhưng không quá mềm mại: bán kính 8px trên thẻ, 4px trên input, viên thuốc đầy đủ trên huy hiệu trạng thái và thẻ. Avatar server là hình vuông bo góc ở 48px, biến thành hình tròn khi hover — một chuyển động nhỏ đã trở thành một phần bản sắc thương hiệu.
|
||||
|
||||
**Đặc điểm chính:**
|
||||
- Giao diện ưu tiên tối: `#1e1f22` / `#2b2d31` / `#313338` (3 cấp độ sâu)
|
||||
- Blurple `#5865f2` là accent bão hòa duy nhất trên bề mặt chat
|
||||
- gg sans (phong cách Whitney) cho toàn bộ văn bản — thân thiện, hình học, trung tính
|
||||
- Avatar server hình vuông bo góc (bán kính 16px) chuyển sang hình tròn khi hover
|
||||
- Khoảng cách hàng chat khít, padding bảng bên rộng rãi
|
||||
- Chấm trạng thái: xanh lá online, vàng idle, đỏ dnd, xám offline
|
||||
- Đường phân cách 1px căn pixel chính xác ở màu trắng nhạt với alpha thấp
|
||||
|
||||
## 2. Bảng màu & Vai trò
|
||||
|
||||
### Màu chính
|
||||
- **Blurple** (`#5865f2`): Màu chính thương hiệu, CTA chính, điểm nổi bật đề cập.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/active cho blurple.
|
||||
- **Blurple Soft** (`#7289da`): Blurple kế thừa, accent phụ trong marketing.
|
||||
|
||||
### Bề mặt (Chủ đề tối — mặc định)
|
||||
- **Background Tertiary** (`#1e1f22`): Thanh danh sách server, nền sâu nhất.
|
||||
- **Background Secondary** (`#2b2d31`): Thanh bên kênh, thanh bên cài đặt.
|
||||
- **Background Primary** (`#313338`): Bề mặt chat, cột tin nhắn.
|
||||
- **Background Floating** (`#111214`): Popover nổi, tooltip, tự động hoàn thành.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Overlay hover trên hàng.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Hàng đang active.
|
||||
|
||||
### Bề mặt (Chủ đề sáng)
|
||||
- **Light Bg Primary** (`#ffffff`): Bề mặt chat trong chủ đề sáng.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Thanh bên trong chủ đề sáng.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Bề mặt sáng sâu nhất.
|
||||
|
||||
### Văn bản
|
||||
- **Header Primary** (`#f2f3f5`): Tiêu đề kênh, tiêu đề modal trong chủ đề tối.
|
||||
- **Header Secondary** (`#b5bac1`): Tiêu đề bị giảm độ nổi bật.
|
||||
- **Text Normal** (`#dbdee1`): Văn bản thân trong chủ đề tối — hơi lạnh hơn trắng thuần.
|
||||
- **Text Muted** (`#949ba4`): Dấu thời gian, tên server, metadata phụ.
|
||||
- **Text Link** (`#00a8fc`): Hyperlink trong tin nhắn — xanh trời, khác biệt với blurple.
|
||||
- **Channels Default** (`#80848e`): Tên kênh không active trong thanh bên.
|
||||
|
||||
### Trạng thái & Ngữ nghĩa
|
||||
- **Status Online** (`#23a55a`): Chấm online, trạng thái thành công.
|
||||
- **Status Idle** (`#f0b232`): Chấm idle, đang vắng.
|
||||
- **Status DND** (`#f23f43`): Không làm phiền, cũng dùng làm màu đỏ hủy.
|
||||
- **Status Streaming** (`#593695`): Màu tím "Streaming".
|
||||
- **Status Offline** (`#80848e`): Màu xám offline.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Lớp phủ blurple nhẹ trên hàng @mention.
|
||||
|
||||
### Đường viền & Phân cách
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Đường phân cách chuẩn trong chủ đề tối.
|
||||
- **Border Subtle** (`#3f4147`): Đường phân cách đặc cho thẻ.
|
||||
|
||||
## 3. Quy tắc Typography
|
||||
|
||||
### Font Family
|
||||
- **Body / UI / Headings**: `gg sans`, fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (kế thừa / Whitney)**: `Whitney`, fallback: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Phân cấp
|
||||
|
||||
| Vai trò | Font | Kích thước | Độ đậm | Line Height | Letter Spacing | Ghi chú |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Hero marketing |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Tiêu đề cài đặt/hồ sơ |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, tiêu đề kênh |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Văn bản chat chuẩn |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Tác giả tin nhắn |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Hàng danh sách kênh |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Tiêu đề server |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Văn bản trạng thái, thẻ đã sửa |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | `code` nội tuyến |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Khối ```triple-fenced``` |
|
||||
|
||||
### Nguyên tắc
|
||||
- **Hình học thân thiện**: gg sans thay Whitney với các đầu chữ bo tròn trên a/g/s — thương hiệu muốn sự ấm áp mà không đánh đổi khả năng đọc.
|
||||
- **Tương phản trọng lượng thay vì tương phản màu sắc**: phân cấp đến từ các bước độ đậm 400→500→600→700→800; bề mặt giữ trung tính.
|
||||
- **Body 16px**: tin nhắn chat không thu nhỏ dưới 16px. Mật độ đến từ line-height (1.375), không phải kích thước font.
|
||||
|
||||
## 4. Kiểu dáng Component
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Dùng cho: CTA chính, "Continue", "Join Server"
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle (kiểu Link)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: gạch chân văn bản, không thay đổi background
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Avatar Server
|
||||
- Kích thước: 48×48px
|
||||
- Radius: 16px (hình vuông bo góc) mặc định; chuyển sang 50% khi hover và active.
|
||||
- Trạng thái active: viên thuốc trắng 4px ở cạnh trái của cột icon.
|
||||
|
||||
### Chấm trạng thái
|
||||
- Kích thước: 10×10px
|
||||
- Border: 3px solid background-tertiary (tạo hiệu ứng "khắc")
|
||||
- Vị trí: góc dưới phải của avatar.
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31` (tối) hoặc `#f2f3f5` (sáng)
|
||||
- Đường viền trái: 4px solid màu accent của embed.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Khoảng cách & Bố cục
|
||||
|
||||
- **Đơn vị cơ bản**: 4px. Tỉ lệ: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Thanh server**: rộng 72px, cố định.
|
||||
- **Thanh bên kênh**: rộng 240px.
|
||||
- **Danh sách thành viên**: rộng 240px trên desktop.
|
||||
- **Cột chat**: linh hoạt, tối thiểu 380px.
|
||||
|
||||
## 6. Chuyển động
|
||||
|
||||
- **Thời lượng**: 200ms cho hover; 350ms cho chuyển đổi avatar sang hình tròn; 80ms cho hiệu ứng mờ dần của tooltip.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` cho chuyển đổi avatar (nhanh rồi ổn định).
|
||||
- **Nhịp đập thông báo**: 1.4s ease-in-out vô hạn trên chỉ báo mention chưa đọc.
|
||||
|
||||
## 7. Hướng dẫn Sử dụng
|
||||
|
||||
- Giữ nguyên vỏ tối, mật độ compact và phân cấp action blurple cùng nhau; sử dụng blurple trên bố cục marketing kiểu sáng sẽ phá vỡ cảm giác sản phẩm Discord.
|
||||
- Giữ các bề mặt nặng về điều hướng được cấu trúc xung quanh các thanh rail, thanh bên và cột chat thay vì các thẻ trang trí độc lập.
|
||||
- Dùng ngôn ngữ avatar hình vuông bo góc và chấm trạng thái khi đại diện cho người, server hoặc sự hiện diện đang hoạt động.
|
||||
@@ -0,0 +1,168 @@
|
||||
# 以 Discord 為靈感的設計系統
|
||||
|
||||
> Category: 生產力與 SaaS
|
||||
> 語音／聊天平台。深邃的靛紫藍、以暗色為主的介面層次，以及活潑的強調色時刻。
|
||||
|
||||
## 1. 視覺主題與氛圍
|
||||
|
||||
Discord 的產品是為夜晚、團隊突襲與群組語音量身打造的，因此整個介面以暗色為基調。預設畫布是深沉的「Background Primary」（淺色主題為 `#313338`，暗色主題為 `#1e1f22`），聊天欄疊加於稍亮或稍暗的層次之上，以區分頻道、討論串與側邊面板。標誌性的 **Blurple**（`#5865f2`）專用於品牌標識、主要 CTA、提及標記與「你自己」的視覺線索——刻意克制地使用，才能在低調的中性色中脫穎而出。
|
||||
|
||||
字型採用 **gg sans**（Discord 的自訂 Whitney 替代字型），圓潤的幾何造型在聊天客戶端所需的小字級下依然親切且易讀。標題逐級遞增；聊天列間距緊湊（訊息群組之間 4–8px），讓大量捲動的紀錄仍保持可掃讀性。
|
||||
|
||||
形狀語言圓潤但不過度軟化：卡片圓角 8px，輸入框 4px，狀態徽章與標籤則使用完整的膠囊形狀。伺服器圖示為 48px 的圓角方形頭像，滑鼠懸停時會變形為圓形——這個細微的動態效果已成為品牌識別的一部分。
|
||||
|
||||
**主要特徵：**
|
||||
- 暗色優先的介面層次：`#1e1f22` / `#2b2d31` / `#313338`（三階深度）
|
||||
- Blurple `#5865f2` 是聊天介面中唯一高飽和度的強調色
|
||||
- gg sans（Whitney 風格）用於所有文字——友善、幾何、中性
|
||||
- 圓角方形伺服器頭像（圓角半徑 16px），懸停時平滑轉為圓形
|
||||
- 聊天列間距緊湊，側邊面板留白充裕
|
||||
- 狀態圓點：綠色代表上線、黃色代表閒置、紅色代表請勿打擾、灰色代表離線
|
||||
- 以低透明度細微米白色繪製的 1px 像素對齊分隔線
|
||||
|
||||
## 2. 色彩調色盤與角色定位
|
||||
|
||||
### 主色
|
||||
- **Blurple**（`#5865f2`）：品牌主色、主要 CTA、提及高亮。
|
||||
- **Blurple Hover**（`#4752c4`）：Blurple 的懸停／啟用狀態。
|
||||
- **Blurple Soft**（`#7289da`）：舊版 Blurple，行銷素材中的次要強調色。
|
||||
|
||||
### 介面層（暗色主題——預設）
|
||||
- **Background Tertiary**（`#1e1f22`）：伺服器列表軌道、最深的背景。
|
||||
- **Background Secondary**（`#2b2d31`）：頻道側邊欄、設定側邊欄。
|
||||
- **Background Primary**（`#313338`）：聊天介面、訊息欄。
|
||||
- **Background Floating**（`#111214`）：浮動彈出層、工具提示、自動補全。
|
||||
- **Background Modifier Hover**（`rgba(78, 80, 88, 0.3)`）：列上的懸停覆蓋層。
|
||||
- **Background Modifier Selected**（`rgba(78, 80, 88, 0.6)`）：已選取的列。
|
||||
|
||||
### 介面層（淺色主題）
|
||||
- **Light Bg Primary**（`#ffffff`）：淺色主題的聊天介面。
|
||||
- **Light Bg Secondary**（`#f2f3f5`）：淺色主題的側邊欄。
|
||||
- **Light Bg Tertiary**（`#e3e5e8`）：最深的淺色介面層。
|
||||
|
||||
### 文字
|
||||
- **Header Primary**（`#f2f3f5`）：暗色主題中的頻道標題、對話框標題。
|
||||
- **Header Secondary**（`#b5bac1`）：較低調的標題。
|
||||
- **Text Normal**（`#dbdee1`）：暗色主題的內文——比純白略帶冷調。
|
||||
- **Text Muted**（`#949ba4`）：時間戳記、伺服器名稱、次要元資料。
|
||||
- **Text Link**（`#00a8fc`）：訊息中的超連結——天空藍，與 Blurple 有明確區隔。
|
||||
- **Channels Default**（`#80848e`）：側邊欄中未啟用的頻道名稱。
|
||||
|
||||
### 狀態與語意色
|
||||
- **Status Online**（`#23a55a`）：上線圓點、成功狀態。
|
||||
- **Status Idle**（`#f0b232`）：閒置圓點、離開狀態。
|
||||
- **Status DND**（`#f23f43`）：請勿打擾，同時作為破壞性動作的紅色。
|
||||
- **Status Streaming**（`#593695`）：「直播中」紫色。
|
||||
- **Status Offline**（`#80848e`）：離線灰色。
|
||||
- **Mention Highlight**（`rgba(88, 101, 242, 0.1)`）：@提及列上的柔和 Blurple 底色。
|
||||
|
||||
### 邊框與分隔線
|
||||
- **Background Modifier Accent**（`rgba(255, 255, 255, 0.06)`）：暗色主題的標準分隔線。
|
||||
- **Border Subtle**（`#3f4147`）：卡片的實線分隔線。
|
||||
|
||||
## 3. 字型規則
|
||||
|
||||
### 字型家族
|
||||
- **內文／UI／標題**：`gg sans`，備用字型：`"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **展示用（舊版／Whitney）**：`Whitney`，備用字型：`gg sans`
|
||||
- **程式碼／等寬**：`"gg mono"`，備用字型：`Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### 層級
|
||||
|
||||
| 角色 | 字型 | 大小 | 字重 | 行高 | 字距 | 備註 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 行銷主視覺 |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 設定／個人資料標題 |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`、頻道標題 |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 標準聊天文字 |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 訊息作者 |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | 「今天 下午 4:32」 |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 頻道列表各列 |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 伺服器標題 |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 狀態文字、已編輯標記 |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 行內 `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```三反引號區塊``` |
|
||||
|
||||
### 原則
|
||||
- **友善的幾何感**：gg sans 以圓潤字形末端取代 Whitney，適用於 a/g/s 等字母——品牌希望傳遞溫度，同時不犧牲易讀性。
|
||||
- **以字重對比取代色彩對比**：層級來自 400→500→600→700→800 的字重遞進；介面層保持中性。
|
||||
- **內文 16px**：聊天訊息不縮小至 16px 以下。密度感來自行高（1.375），而非字級大小。
|
||||
|
||||
## 4. 元件樣式
|
||||
|
||||
### 按鈕
|
||||
|
||||
**主要按鈕**
|
||||
- 背景：`#5865f2`
|
||||
- 文字：`#ffffff`
|
||||
- 內距：8px 16px
|
||||
- 圓角：4px
|
||||
- 懸停：`#4752c4`
|
||||
- 用途：主要 CTA、「繼續」、「加入伺服器」
|
||||
|
||||
**次要按鈕**
|
||||
- 背景：`#4e5058`
|
||||
- 文字：`#ffffff`
|
||||
- 內距：8px 16px
|
||||
- 圓角：4px
|
||||
- 懸停：`#6d6f78`
|
||||
|
||||
**第三層級／低調（連結樣式）**
|
||||
- 背景：transparent
|
||||
- 文字：`#dbdee1`
|
||||
- 懸停：文字加底線，背景不變
|
||||
|
||||
**危險按鈕**
|
||||
- 背景：`#da373c`
|
||||
- 文字：`#ffffff`
|
||||
- 懸停：`#a12d2f`
|
||||
|
||||
### 輸入框
|
||||
- 背景：`#1e1f22`
|
||||
- 文字：`#dbdee1`
|
||||
- 邊框：1px solid `#1e1f22`
|
||||
- 圓角：4px
|
||||
- 內距：10px 12px
|
||||
- 焦點：邊框 `#5865f2`
|
||||
|
||||
### 伺服器頭像
|
||||
- 尺寸：48×48px
|
||||
- 圓角：預設 16px（圓角方形）；懸停與啟用狀態時過渡為 50%。
|
||||
- 啟用狀態：圖示欄左側邊緣有 4px 白色膠囊形指示條。
|
||||
|
||||
### 狀態圓點
|
||||
- 尺寸：10×10px
|
||||
- 邊框：3px solid background-tertiary（製造「缺口」效果）
|
||||
- 位置：頭像右下角。
|
||||
|
||||
### 卡片／嵌入內容
|
||||
- 背景：`#2b2d31`（暗色）或 `#f2f3f5`（淺色）
|
||||
- 左側邊框：4px solid 嵌入強調色。
|
||||
- 圓角：4px
|
||||
- 內距：8px 16px
|
||||
|
||||
### 提及膠囊
|
||||
- 背景：`rgba(88, 101, 242, 0.3)`
|
||||
- 文字：`#c9cdfb`
|
||||
- 內距：0 2px
|
||||
- 圓角：3px
|
||||
|
||||
## 5. 間距與版型
|
||||
|
||||
- **基礎單位**：4px。比例：4、8、12、16、20、24、32、40。
|
||||
- **伺服器軌道**：寬度 72px，固定。
|
||||
- **頻道側邊欄**：寬度 240px。
|
||||
- **成員列表**：桌面版寬度 240px。
|
||||
- **聊天欄**：彈性寬度，最小 380px。
|
||||
|
||||
## 6. 動態效果
|
||||
|
||||
- **時長**：懸停 200ms；頭像圓形變形 350ms；工具提示淡入 80ms。
|
||||
- **緩動函數**：`cubic-bezier(0.215, 0.61, 0.355, 1)` 用於頭像變形（快速啟動後緩慢定位）。
|
||||
- **通知脈衝**：未讀提及指示器以 1.4s ease-in-out infinite 循環。
|
||||
|
||||
## 7. 使用規範
|
||||
|
||||
- 暗色外殼、緊湊的資訊密度與 Blurple 的操作層級必須一起保留；將 Blurple 用於淺色行銷版型會破壞 Discord 產品的整體感。
|
||||
- 導覽密集的介面應以軌道、側邊欄與聊天欄為結構核心，而非使用孤立的裝飾性卡片。
|
||||
- 在呈現人員、伺服器或即時狀態時，請使用圓角方形頭像與狀態圓點的視覺語言。
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: 效率与 SaaS
|
||||
> 语音 / 聊天平台。深蓝紫主色调，深色优先界面，偶有活泼的强调色点缀。
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Discord 的产品专为夜间游戏、团队副本和多人语音而生，因此整个界面以深色为主。默认画布采用深邃的"背景主色"（浅色主题为 `#313338`，深色主题为 `#1e1f22`），聊天栏在略浅或略深的色阶之上层叠，用以区分频道、话题和侧边栏。标志性的**蓝紫色**（`#5865f2`）专用于品牌标志、主要操作按钮、@提及以及"当前用户"的标识——用量克制，使其在灰调中层显眼。
|
||||
|
||||
字体为 **gg sans**（Discord 定制的 Whitney 替代字体），用于正文与界面文字。其圆润的几何形态亲切友好，同时在聊天客户端所需的小字号下仍保持良好的可读性。标题级差适中；聊天行距紧凑（消息组之间仅 4–8px），使长时间滚动历史记录也便于扫读。
|
||||
|
||||
形状语言圆润但不失挺括：卡片圆角为 8px，输入框为 4px，状态徽章和标签为全圆药丸形。服务器头像为 48px 的圆角方形，悬停时变为圆形——这一微小的动效已成为品牌标识的一部分。
|
||||
|
||||
**Key Characteristics:**
|
||||
- 深色优先界面：`#1e1f22` / `#2b2d31` / `#313338`（三层深度）
|
||||
- 蓝紫色 `#5865f2` 是聊天界面中唯一的高饱和强调色
|
||||
- gg sans（Whitney 风格）统一用于所有文字——亲切、几何、中性
|
||||
- 圆角方形服务器头像（圆角半径 16px），悬停时过渡为圆形
|
||||
- 聊天行距紧凑，侧边栏内边距宽松
|
||||
- 状态指示点：绿色在线、黄色空闲、红色免打扰、灰色离线
|
||||
- 低不透明度的细微半白色 1px 像素对齐分割线
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Blurple** (`#5865f2`): 品牌主色、主操作按钮、@提及高亮。
|
||||
- **Blurple Hover** (`#4752c4`): 蓝紫色的悬停 / 激活态。
|
||||
- **Blurple Soft** (`#7289da`): 旧版蓝紫色，营销场景中的次级强调色。
|
||||
|
||||
### Surface（深色主题——默认）
|
||||
- **Background Tertiary** (`#1e1f22`): 服务器列表轨道，最深背景层。
|
||||
- **Background Secondary** (`#2b2d31`): 频道侧边栏、设置侧边栏。
|
||||
- **Background Primary** (`#313338`): 聊天区域、消息列。
|
||||
- **Background Floating** (`#111214`): 浮动弹出层、提示框、自动补全。
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): 行悬停遮罩。
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): 激活行。
|
||||
|
||||
### Surface（浅色主题）
|
||||
- **Light Bg Primary** (`#ffffff`): 浅色主题下的聊天区域。
|
||||
- **Light Bg Secondary** (`#f2f3f5`): 浅色主题下的侧边栏。
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): 浅色主题中最深的表面层。
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): 深色主题下的频道标题和模态框标题。
|
||||
- **Header Secondary** (`#b5bac1`): 次级标题，视觉减弱。
|
||||
- **Text Normal** (`#dbdee1`): 深色主题正文——比纯白略偏冷。
|
||||
- **Text Muted** (`#949ba4`): 时间戳、服务器名称、次要元数据。
|
||||
- **Text Link** (`#00a8fc`): 消息中的超链接——天蓝色，有别于蓝紫色。
|
||||
- **Channels Default** (`#80848e`): 侧边栏中未激活的频道名称。
|
||||
|
||||
### Status & Semantic
|
||||
- **Status Online** (`#23a55a`): 在线状态点、成功状态。
|
||||
- **Status Idle** (`#f0b232`): 空闲状态点、离开。
|
||||
- **Status DND** (`#f23f43`): 免打扰，同时作为破坏性操作的红色。
|
||||
- **Status Streaming** (`#593695`): "直播中"紫色。
|
||||
- **Status Offline** (`#80848e`): 离线灰色。
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @提及行的柔和蓝紫色底色。
|
||||
|
||||
### Border & Divider
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): 深色主题下的标准分割线。
|
||||
- **Border Subtle** (`#3f4147`): 卡片的实线边框。
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **正文 / UI / 标题**: `gg sans`，备用字体：`"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **展示字体（旧版 / Whitney）**: `Whitney`，备用字体：`gg sans`
|
||||
- **代码 / 等宽**: `"gg mono"`，备用字体：`Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 营销主视觉 |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 设置 / 个人资料标题 |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`、频道标题 |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 标准聊天文字 |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 消息作者 |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "今天 16:32" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 频道列表行 |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 服务器标题 |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 状态文字、已编辑标签 |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 行内 `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```triple-fenced``` 代码块 |
|
||||
|
||||
### Principles
|
||||
- **友好的几何形态**：gg sans 以圆润末端替代 Whitney 的 a/g/s 字形——品牌追求亲切感，同时不牺牲可读性。
|
||||
- **字重对比优于颜色对比**：层级通过 400→500→600→700→800 的字重递进来体现；表面色调保持中性。
|
||||
- **正文 16px**：聊天消息字号不低于 16px。信息密度通过行高（1.375）控制，而非缩小字号。
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- 用途：主操作按钮，如"继续"、"加入服务器"
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle（链接样式）**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: 文字加下划线，背景不变
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Server Avatars
|
||||
- Size: 48×48px
|
||||
- Radius: 默认 16px（圆角方形）；悬停和激活时过渡为 50% 圆形。
|
||||
- 激活状态：图标列左侧边缘显示 4px 白色药丸形指示条。
|
||||
|
||||
### Status Dots
|
||||
- Size: 10×10px
|
||||
- Border: 3px solid background-tertiary（形成"缺口"效果）
|
||||
- Position: 头像右下角。
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31`（深色）或 `#f2f3f5`（浅色）
|
||||
- Left border: 4px solid，颜色为嵌入内容的强调色。
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **基础单位**：4px。刻度：4、8、12、16、20、24、32、40。
|
||||
- **服务器轨道**：固定宽度 72px。
|
||||
- **频道侧边栏**：宽度 240px。
|
||||
- **成员列表**：桌面端宽度 240px。
|
||||
- **聊天列**：自适应宽度，最小 380px。
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **时长**：悬停 200ms；头像圆形变形 350ms；提示框淡入淡出 80ms。
|
||||
- **缓动**：头像变形使用 `cubic-bezier(0.215, 0.61, 0.355, 1)`（快速入场后平稳落定）。
|
||||
- **未读通知脉冲**：@提及指示器采用 1.4s ease-in-out 无限循环动画。
|
||||
|
||||
## 7. Usage Guardrails
|
||||
|
||||
- 保持深色外壳、紧凑密度与蓝紫色操作层级三者并用；若将蓝紫色置于浅色营销风格的布局中，Discord 的产品质感将被破坏。
|
||||
- 导航密集型界面应围绕轨道、侧边栏和聊天列来组织，而非孤立的装饰性卡片。
|
||||
- 代表人物、服务器或在线状态时，应使用圆角方形头像和状态指示点语言。
|
||||
@@ -0,0 +1,168 @@
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Productivity & SaaS
|
||||
> Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Discord's product is engineered for evenings, raids, and group voice — so the entire surface is dark-first. The default canvas is the deep `Background Primary` (`#313338` light theme, `#1e1f22` dark theme), with chat columns layered on slightly lighter or darker shades to denote channels, threads, and side panels. The signature **Blurple** (`#5865f2`) is reserved for the brand mark, primary CTAs, mentions, and the "you" affordance — used sparingly so it pops against the muted neutrals.
|
||||
|
||||
Typography is **gg sans** (Discord's custom Whitney-replacement) for prose and chrome, with rounded geometric shapes that feel approachable but still legible at the small sizes a chat client demands. Headings step up incrementally; chat rows are tight (4–8px between message groups) so hours of scrollback feel scannable.
|
||||
|
||||
The shape language is rounded but not balloon-soft: 8px radii on cards, 4px on inputs, full pills on status badges and tags. Servers are rounded-square avatars at 48px that morph to circles on hover — a tiny piece of motion that has become part of the brand's identity.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark-first surfaces: `#1e1f22` / `#2b2d31` / `#313338` (3-step depth)
|
||||
- Blurple `#5865f2` as the only saturated accent in the chat surface
|
||||
- gg sans (Whitney-style) for all text — friendly, geometric, neutral
|
||||
- Rounded-square server avatars (16px radius) that snap to circles on hover
|
||||
- Tight chat-row spacing, generous side-panel padding
|
||||
- Status dots: green online, yellow idle, red dnd, gray offline
|
||||
- Pixel-snapped 1px dividers in subtle off-white at low alpha
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Blurple** (`#5865f2`): Brand primary, primary CTA, mention highlight.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/active for blurple.
|
||||
- **Blurple Soft** (`#7289da`): Legacy blurple, secondary accent in marketing.
|
||||
|
||||
### Surface (Dark Theme — default)
|
||||
- **Background Tertiary** (`#1e1f22`): Server list rail, deepest background.
|
||||
- **Background Secondary** (`#2b2d31`): Channel sidebar, settings sidebar.
|
||||
- **Background Primary** (`#313338`): Chat surface, message column.
|
||||
- **Background Floating** (`#111214`): Floating popovers, tooltips, autocomplete.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover overlay on rows.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Active row.
|
||||
|
||||
### Surface (Light Theme)
|
||||
- **Light Bg Primary** (`#ffffff`): Chat surface in light theme.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Sidebar in light theme.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Deepest light surface.
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): Channel headers, modal titles in dark theme.
|
||||
- **Header Secondary** (`#b5bac1`): Muted headers.
|
||||
- **Text Normal** (`#dbdee1`): Body text in dark theme — slightly cooler than pure white.
|
||||
- **Text Muted** (`#949ba4`): Timestamps, server names, secondary metadata.
|
||||
- **Text Link** (`#00a8fc`): Hyperlinks in messages — sky blue, distinct from blurple.
|
||||
- **Channels Default** (`#80848e`): Inactive channel name in sidebar.
|
||||
|
||||
### Status & Semantic
|
||||
- **Status Online** (`#23a55a`): Online dot, success states.
|
||||
- **Status Idle** (`#f0b232`): Idle dot, away.
|
||||
- **Status DND** (`#f23f43`): Do-not-disturb, also serves as destructive red.
|
||||
- **Status Streaming** (`#593695`): "Streaming" purple.
|
||||
- **Status Offline** (`#80848e`): Offline gray.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Soft blurple wash on @mention rows.
|
||||
|
||||
### Border & Divider
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standard divider in dark.
|
||||
- **Border Subtle** (`#3f4147`): Solid divider for cards.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI / Headings**: `gg sans`, with fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (legacy / Whitney)**: `Whitney`, with fallback: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, with fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing hero |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Settings/profile titles |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, channel header |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standard chat text |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Author of a message |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Channel list rows |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Server header |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Status text, edited tag |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```triple-fenced``` block |
|
||||
|
||||
### Principles
|
||||
- **Friendly geometry**: gg sans replaces Whitney with rounded terminals on a/g/s — the brand wants warmth without breaking legibility.
|
||||
- **Weight contrast over color contrast**: hierarchy comes from 400→500→600→700→800 weight steps; the surface stays neutral.
|
||||
- **16px body**: chat messages do not shrink below 16px. Density comes from line-height (1.375), not font size.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Use: Primary CTAs, "Continue", "Join Server"
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle (Link-style)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: text underlined, no background change
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Server Avatars
|
||||
- Size: 48×48px
|
||||
- Radius: 16px (rounded square) by default; transitions to 50% on hover and active.
|
||||
- Active state: 4px white pill on the left edge of the icon column.
|
||||
|
||||
### Status Dots
|
||||
- Size: 10×10px
|
||||
- Border: 3px solid background-tertiary (creates the "notch" effect)
|
||||
- Position: bottom-right of avatar.
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31` (dark) or `#f2f3f5` (light)
|
||||
- Left border: 4px solid embed accent color.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Server rail**: 72px wide, fixed.
|
||||
- **Channel sidebar**: 240px wide.
|
||||
- **Member list**: 240px wide on desktop.
|
||||
- **Chat column**: fluid, min 380px.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 200ms for hover; 350ms for the avatar circle-morph; 80ms for tooltip fade.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` for the avatar morph (snappy then settle).
|
||||
- **Notification pulse**: 1.4s ease-in-out infinite on unread mention indicator.
|
||||
|
||||
## 7. Usage Guardrails
|
||||
|
||||
- Preserve the dark shell, compact density, and blurple action hierarchy together; using blurple on a light marketing-style layout breaks the Discord product feel.
|
||||
- Keep navigation-heavy surfaces structured around rails, sidebars, and chat columns rather than isolated decorative cards.
|
||||
- Use the rounded-square avatar and status-dot language when representing people, servers, or active presence.
|
||||
@@ -0,0 +1,32 @@
|
||||
# Discord 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
|
||||
|
||||
- Dark-first surfaces: `#1e1f22` / `#2b2d31` / `#313338` (3-step depth)
|
||||
- Blurple `#5865f2` as the only saturated accent in the chat surface
|
||||
- Rounded-square server avatars (16px radius) that snap to circles on hover
|
||||
- Tight chat-row spacing, generous side-panel padding
|
||||
|
||||
## 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,359 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Discord — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/discord. Every visible
|
||||
value comes from tokens.css. Discord's signature moves: dark-first
|
||||
three-step depth ladder, gg sans with friendly geometry, Blurple
|
||||
accent (#5865f2), semi-transparent white borders."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #313338;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--muted: #949ba4;
|
||||
--meta: #80848e;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
|
||||
--accent: #5865f2;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #4752c4;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #23a55a;
|
||||
--warn: #f0b232;
|
||||
--danger: #f23f43;
|
||||
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 40px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--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); }
|
||||
@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, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: var(--fg-2);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
/* 32px section: line-height 1.20, normal tracking. */
|
||||
line-height: 1.20;
|
||||
font-weight: 700;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-2xl);
|
||||
/* 24px page heading: line-height 1.25 per DESIGN.md.
|
||||
Overrides the shared 1.10 set above. */
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--muted); font-weight: 400; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); color: var(--muted); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--meta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
|
||||
/* ─── Buttons ─────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary { background: var(--accent); color: var(--accent-on); }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-secondary { background: #4e5058; color: #ffffff; }
|
||||
.btn-secondary:hover { background: #6d6f78; }
|
||||
.btn-danger { background: #da373c; color: #ffffff; }
|
||||
|
||||
/* ─── Server avatars ─────────────────────── */
|
||||
.server-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-warm);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.server-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.server-icon:hover { border-radius: 50%; }
|
||||
|
||||
/* ─── Mention pill ───────────────────────── */
|
||||
.mention {
|
||||
display: inline;
|
||||
background: rgba(88, 101, 242, 0.3);
|
||||
color: #c9cdfb;
|
||||
padding: 0 2px;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ─── Card ───────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* ─── Inputs ─────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.field input {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--surface-warm);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
|
||||
/* ─── Layout ─────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · discord</p>
|
||||
<h1>Your place to talk.</h1>
|
||||
<p class="lead" style="max-width:46ch">
|
||||
Discord is the easiest way to talk over voice, video, and text.
|
||||
Dark-first, Blurple accent, gg sans — every value from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Download for free</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside style="display:flex;gap:var(--space-4);align-items:flex-start">
|
||||
<div class="server-rail">
|
||||
<div class="server-icon">OD</div>
|
||||
<div style="width:32px;height:2px;background:var(--border-soft);border-radius:2px"></div>
|
||||
<div class="server-icon" style="background:#23a55a;font-size:18px">🎮</div>
|
||||
<div class="server-icon" style="background:#8250df;font-size:18px">🎨</div>
|
||||
</div>
|
||||
<div class="card stack-3" style="flex:1">
|
||||
<p class="eyebrow"># general</p>
|
||||
<p style="font-size:var(--text-base);color:var(--fg)">
|
||||
<span style="font-weight:500;color:#f2f3f5">Ada</span>
|
||||
<span style="font-size:var(--text-xs);color:var(--meta)">Today at 4:32 PM</span>
|
||||
</p>
|
||||
<p style="font-size:var(--text-base)">
|
||||
Adding token fixtures for <span class="mention">@batch-2</span> brands today.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3" style="margin-bottom:var(--space-6)">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2>Dark depth through luminance steps.</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card stack-3">
|
||||
<h3>Three-step depth</h3>
|
||||
<p class="body-sm">
|
||||
#1e1f22 server rail → #2b2d31 sidebar → #313338 chat. Each step
|
||||
slightly lighter. No color variation — only luminance.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>Blurple accent</h3>
|
||||
<p class="body-sm">
|
||||
#5865f2 — reserved for CTAs, mentions, and "you" affordances.
|
||||
Hover: #4752c4. Used sparingly so it pops against muted neutrals.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>gg sans geometry</h3>
|
||||
<p class="body-sm">
|
||||
Friendly rounded terminals on a/g/s. Weight 400/500/600/700/800 —
|
||||
hierarchy through contrast, not color. 16px body never shrinks.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM -->
|
||||
<section data-od-id="form">
|
||||
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs on dark surfaces.</h2>
|
||||
<p class="lead" style="max-width:44ch">
|
||||
Background: #1e1f22. Border shifts to Blurple on focus.
|
||||
Labels: uppercase, 0.04em tracking, weight 600.
|
||||
</p>
|
||||
</div>
|
||||
<form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
|
||||
onsubmit="event.preventDefault()">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" placeholder="[email protected]" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" type="text" placeholder="cooluser#1234" />
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">Continue</button>
|
||||
<button type="button" class="btn btn-secondary">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,398 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "discord",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "Discord — reference components",
|
||||
"description": "Reference fixture for design-systems/discord. Every visible value comes from tokens.css. Discord's signature moves: dark-first three-step depth ladder, gg sans with friendly geometry, Blurple accent (#5865f2), semi-transparent white borders.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 38,
|
||||
"classCount": 17,
|
||||
"elementCount": 21
|
||||
},
|
||||
"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",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-md",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-6",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--accent-active",
|
||||
"--danger",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--font-mono",
|
||||
"--radius-lg",
|
||||
"--radius-pill",
|
||||
"--space-1",
|
||||
"--space-5",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--text-xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-danger",
|
||||
".btn-primary",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".container",
|
||||
".eyebrow",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".lead",
|
||||
".mention",
|
||||
".server-icon",
|
||||
".server-icon:hover",
|
||||
".server-rail",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"body",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-primary",
|
||||
"btn-secondary",
|
||||
"card",
|
||||
"container",
|
||||
"eyebrow",
|
||||
"features-grid",
|
||||
"field",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"lead",
|
||||
"mention",
|
||||
"server-icon",
|
||||
"server-rail",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"html",
|
||||
"input",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-danger",
|
||||
".btn-primary",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-primary",
|
||||
"btn-secondary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent-hover",
|
||||
"--focus-ring"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label"
|
||||
],
|
||||
"classes": [
|
||||
"field"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--muted",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card"
|
||||
],
|
||||
"classes": [
|
||||
"card"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--border-soft",
|
||||
"--radius-md",
|
||||
"--space-6",
|
||||
"--surface"
|
||||
]
|
||||
},
|
||||
{
|
||||
"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": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".eyebrow",
|
||||
".lead",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-sm",
|
||||
"eyebrow",
|
||||
"lead"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--muted",
|
||||
"--text-3xl",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 7,
|
||||
"pixelValues": 17,
|
||||
"hardcodedFontFamilies": 3
|
||||
}
|
||||
}
|
||||
@@ -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": "#313338",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:32"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#2b2d31",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:33"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#1e1f22",
|
||||
"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:34"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#dbdee1",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#f2f3f5",
|
||||
"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:38"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#949ba4",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:39"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#80848e",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:40"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(255, 255, 255, 0.06)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:43"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#3f4147",
|
||||
"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:44"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#5865f2",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:48"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#4752c4",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:49"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:50"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#23a55a",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#f0b232",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:54"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f23f43",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:55"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"gg sans\", \"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:58"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"gg sans\", \"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:59"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"gg mono\", Consolas, \"Andale Mono\", \"Courier New\", Courier, 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:60"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"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:65"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"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:66"
|
||||
],
|
||||
"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:67"
|
||||
],
|
||||
"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:68"
|
||||
],
|
||||
"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:69"
|
||||
],
|
||||
"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:70"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "32px",
|
||||
"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:71"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "56px",
|
||||
"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:72"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.375",
|
||||
"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:78"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.10",
|
||||
"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:79"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.02em",
|
||||
"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:80"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"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:86"
|
||||
],
|
||||
"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:87"
|
||||
],
|
||||
"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:88"
|
||||
],
|
||||
"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:89"
|
||||
],
|
||||
"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:90"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "40px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:91"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"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:94"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"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:95"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"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:96"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:101"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:102"
|
||||
],
|
||||
"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:103"
|
||||
],
|
||||
"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:108"
|
||||
],
|
||||
"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:109"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(88, 101, 242, 0.3)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:113"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "80ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:116"
|
||||
],
|
||||
"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:117"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"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:121"
|
||||
],
|
||||
"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:122"
|
||||
],
|
||||
"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:123"
|
||||
],
|
||||
"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:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "discord",
|
||||
"name": "Discord",
|
||||
"category": "Productivity & SaaS",
|
||||
"description": "Bundled OpenDesign package for Discord, 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>Discord 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>Discord 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>Discord 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">Productivity & SaaS</p>
|
||||
<h2>Display sample for Discord</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 @@
|
||||
# Discord 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/discord/DESIGN.md
|
||||
- design-systems/discord/tokens.css
|
||||
- design-systems/discord/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": "#313338",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:32"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#2b2d31",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:33"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#1e1f22",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:34"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#dbdee1",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#f2f3f5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:38"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#949ba4",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:39"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#80848e",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:40"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(255, 255, 255, 0.06)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:43"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "#3f4147",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:44"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#5865f2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:48"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "#4752c4",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:49"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:50"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#23a55a",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#f0b232",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:54"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#f23f43",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:55"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"gg sans\", \"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:58"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"gg sans\", \"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:59"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "\"gg mono\", Consolas, \"Andale Mono\", \"Courier New\", Courier, monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:60"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:65"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:66"
|
||||
],
|
||||
"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:67"
|
||||
],
|
||||
"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:68"
|
||||
],
|
||||
"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:69"
|
||||
],
|
||||
"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:70"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "56px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:72"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.375",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:78"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.10",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:79"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "-0.02em",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:80"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"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:86"
|
||||
],
|
||||
"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:87"
|
||||
],
|
||||
"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:88"
|
||||
],
|
||||
"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:89"
|
||||
],
|
||||
"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:90"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"layer": "A2",
|
||||
"value": "40px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:91"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "80px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:94"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:95"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:96"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:101"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:102"
|
||||
],
|
||||
"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:103"
|
||||
],
|
||||
"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:108"
|
||||
],
|
||||
"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:109"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:110"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px rgba(88, 101, 242, 0.3)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:113"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "80ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:116"
|
||||
],
|
||||
"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:117"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1200px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"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:122"
|
||||
],
|
||||
"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:123"
|
||||
],
|
||||
"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:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "discord",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#313338",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:32"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#2b2d31",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:33"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#1e1f22",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:34"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#dbdee1",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:37"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#f2f3f5",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:38"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#949ba4",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:39"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#80848e",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:40"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(255, 255, 255, 0.06)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:43"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#3f4147",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:44"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#5865f2",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:47"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:48"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#4752c4",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:49"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:50"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#23a55a",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:53"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#f0b232",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:54"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f23f43",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:55"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"gg sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:58"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"gg sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:59"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"gg mono\", Consolas, \"Andale Mono\", \"Courier New\", Courier, monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:60"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:65"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:66"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:67"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "18px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:68"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:69"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:70"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:71"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "56px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:72"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.375",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:78"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.10",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:79"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.02em",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:80"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:84"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:85"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:86"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:87"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:88"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:89"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:90"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "40px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:91"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:94"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:95"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:96"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:100"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:101"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:102"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:103"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:108"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:109"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:110"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(88, 101, 242, 0.3)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:113"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "80ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:116"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:117"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:118"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:122"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:123"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:124"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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>Discord - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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>Discord 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 Discord, 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="Discord" /></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>Discord - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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">Productivity & SaaS</p>
|
||||
<h1>Discord 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>Discord - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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">Productivity & SaaS system</p>
|
||||
<h1>Discord component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Discord, 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>Discord - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #5865f2;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #4752c4;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #313338;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f23f43;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--meta: #80848e;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #949ba4;
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 40px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #23a55a;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.02em;
|
||||
--warn: #f0b232;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #313338;
|
||||
--od-surface: #2b2d31;
|
||||
--od-text: #dbdee1;
|
||||
--od-muted: #949ba4;
|
||||
--od-border: rgba(255, 255, 255, 0.06);
|
||||
--od-accent: #5865f2;
|
||||
--od-radius: 8px;
|
||||
--od-font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--od-font-display: "gg sans", "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">Productivity & SaaS system</p>
|
||||
<h1>Discord component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Discord, 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": "#5865f2",
|
||||
"colorPrimaryBg": "#1e1f22",
|
||||
"colorPrimaryHover": "#4752c4",
|
||||
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 8
|
||||
}
|
||||
@@ -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,125 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/discord/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Discord" brand — deep blurple,
|
||||
* dark-first surfaces, voice-and-chat for gaming and community.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Dark-first: three-step depth ladder (#1e1f22 deepest → #2b2d31
|
||||
* sidebar → #313338 chat surface), pixel-snapped 1px dividers at
|
||||
* low alpha, rounded-square server avatars that morph to circles.
|
||||
* 2. gg sans (friendly geometric, Whitney-replacement) for all text at
|
||||
* 400/500/600/700/800 weights; 16px body never shrinks; hierarchy
|
||||
* comes from weight contrast over color contrast.
|
||||
* 3. Blurple (#5865f2) as the single saturated accent — reserved for
|
||||
* brand mark, primary CTAs, mentions, and "you" affordances; used
|
||||
* sparingly so it pops against the muted dark surface.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #313338 (chat surface / primary dark); --surface: #2b2d31.
|
||||
* - --surface-warm: #191a1e (deepest — server list rail, level below).
|
||||
* - --fg: #dbdee1 (text-normal — cooler than pure white).
|
||||
* - --fg-2: #f2f3f5 (header-primary — modal titles, channel headers).
|
||||
* - --muted: #949ba4 (text-muted — timestamps, metadata).
|
||||
* - --border: rgba(255,255,255,0.06); --border-soft: same.
|
||||
* - --accent: #5865f2 (Blurple); --accent-hover: #4752c4.
|
||||
* - --tracking-display: -0.02em (display 56px hero per DESIGN.md).
|
||||
* - --radius-sm: 4px (buttons/inputs); --radius-md: 8px (cards).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #313338; /* chat surface / primary dark */
|
||||
--surface: #2b2d31; /* channel sidebar, settings sidebar */
|
||||
--surface-warm: #1e1f22; /* server list rail — deepest layer */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #dbdee1; /* text-normal — slightly cooler than white */
|
||||
--fg-2: #f2f3f5; /* header-primary — modal titles */
|
||||
--muted: #949ba4; /* text-muted — timestamps, server names */
|
||||
--meta: #80848e; /* channels-default — inactive sidebar names */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: rgba(255, 255, 255, 0.06); /* standard divider */
|
||||
--border-soft: #3f4147; /* solid divider for cards */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #5865f2; /* Blurple — brand primary CTA */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #4752c4; /* darker hover */
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #23a55a; /* status-online green */
|
||||
--warn: #f0b232; /* status-idle yellow */
|
||||
--danger: #f23f43; /* status-dnd / destructive red */
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography Hierarchy.
|
||||
* Discord: 56px display, 24px page heading, 16px body (never shrinks).
|
||||
* Schema spine: xs=12 (timestamp/caption), base=16, 4xl=56. */
|
||||
--text-xs: 12px; /* timestamp / caption / meta */
|
||||
--text-sm: 14px; /* compact metadata */
|
||||
--text-base: 16px; /* message body — never below 16px */
|
||||
--text-lg: 18px; /* feature heading */
|
||||
--text-xl: 20px; /* sub-heading */
|
||||
--text-2xl: 24px; /* page heading — settings/profile */
|
||||
--text-3xl: 32px; /* section heading */
|
||||
--text-4xl: 56px; /* display hero — marketing */
|
||||
|
||||
/* Leading + tracking.
|
||||
* --leading-tight=1.10: 56px hero compression.
|
||||
* h2 (32px) → 1.20; h3 (24px) → 1.25 per brand feel.
|
||||
* --tracking-display: -0.02em (display 56px per DESIGN.md). */
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 4px base grid per DESIGN.md §Spacing & Layout. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 40px;
|
||||
|
||||
/* Section rhythm. */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* 4px for buttons/inputs; 8px for cards. Rounded but not balloon-soft. */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* Dark surfaces: luminance stepping; semi-transparent white borders
|
||||
as depth signal rather than drop shadows. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user