admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/slack/DESIGN-ar.md
+363
View File
@@ -0,0 +1,363 @@
# نظام التصميم المستوحى من Slack
> Category: الإنتاجية والبرمجيات كخدمة
> منصة التواصل في بيئة العمل. لون أساسي أوبيرجين، لوحة شعار متعددة النبرات، أسطح فاتحة مع شريط جانبي داكن، دافئة وودية.
## 1. الطابع البصري والأجواء
تبنى هوية Slack على فكرة أن العمل ينبغي أن يبدو إنسانياً بل ومرحاً بعض الشيء. السطح الأساسي **فاتح** — مناطق محتوى بيضاء مع شريط جانبي أوبيرجين عميق (`#4A154B`) — عكس الأدوات التي تُقدّم الأسطح الداكنة. هذا التباين مقصود: الشريط الجانبي هو مرساة تنقل هادئة ودائمة الحضور، بينما منطقة المحتوى مضيئة ومفتوحة.
لوحة الشعار — الأزرق والأخضر والأصفر والأحمر — تظهر أساساً في أيقونة الوسم وسياقات التسويق، وليست مبعثرة عبر واجهة المستخدم. في المنتج نفسه، يستخدم Slack نظام ألوان متحفظاً واحترافياً مع أوبيرجين كمرساة العلامة التجارية الوحيدة.
**الخصائص الرئيسية:**
- أسطح محتوى تُقدّم الفاتح: أبيض `#FFFFFF` وشبه أبيض `#F8F8F8`
- شريط جانبي أوبيرجين عميق `#4A154B` — العنصر الأكثر تميزاً في واجهة المستخدم للعلامة التجارية
- أربعة ألوان نبرة للشعار (أزرق، أخضر، أصفر، أحمر) تُستخدم باعتدال كنقاط تمييز فحسب
- Larsseit للعناوين (التسويق)، sans-serif النظامي لواجهة المستخدم
- مستدير لكن ليس كرتونياً: نصف قطر 4–8 بكسل في معظم المكونات
- كثيف لكن قابل للتنفس: صفوف رسائل مضغوطة مع تسلسل هرمي واضح للخيوط
- نبرة دافئة وتحادثية — الرموز التعبيرية والتفاعلات والرسوم التوضيحية من الدرجة الأولى
---
## 2. لوحة الألوان والأدوار
### اللون الأساسي للعلامة التجارية
| الرمز | Hex | الدور |
|---|---|---|
| `--color-aubergine` | `#4A154B` | خلفية الشريط الجانبي، لون العلامة التجارية الأساسي |
| `--color-aubergine-dark` | `#350d36` | حالات التمرير على أسطح الأوبيرجين |
| `--color-aubergine-light` | `#611f69` | تمييز العنصر النشط في الشريط الجانبي |
### ألوان النبرة في الشعار (استخدم باعتدال — للتمييز والأيقونات والتسويق فحسب)
| الرمز | Hex | الاسم | الدور |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | الأزرق السماوي | أيقونات القنوات، الروابط، حالات المعلومات |
| `--color-green` | `#2EB67D` | الأخضر الزبرجدي | حالة الاتصال، حالات النجاح |
| `--color-yellow` | `#ECB22E` | الذهبي | حالة الغياب، التحذيرات، التمييزات |
| `--color-red` | `#E01E5A` | الياقوتي | الإشعارات، الأخطاء، شارة الإشارات |
### السطح والخلفية
| الرمز | Hex | الدور |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | منطقة الرسائل الرئيسية، النوافذ المنبثقة |
| `--bg-secondary` | `#F8F8F8` | لوحات الخيوط، الأسطح الثانوية |
| `--bg-tertiary` | `#F1F1F1` | خلفيات الإدخال، حالات التمرير |
| `--bg-sidebar` | `#4A154B` | الشريط الجانبي الأيسر (أوبيرجين) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | تمرير عنصر الشريط الجانبي |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | العنصر النشط في الشريط الجانبي |
| `--bg-message-hover` | `#F8F8F8` | تمرير صف الرسالة |
### ألوان النص
| الرمز | Hex | الدور |
|---|---|---|
| `--text-primary` | `#1D1C1D` | نص المحتوى الأساسي (شبه أسود) |
| `--text-secondary` | `#616061` | الطوابع الزمنية، التسميات المخففة |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | أسماء القنوات في الشريط الجانبي |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | العناصر غير النشطة في الشريط الجانبي |
| `--text-link` | `#1264A3` | الروابط المضمّنة في الرسائل |
| `--text-mention` | `#1264A3` | لون نص @الإشارة |
### الألوان الدلالية
| الرمز | Hex | الدور |
|---|---|---|
| `--color-success` | `#2EB67D` | إشعارات النجاح، الحالات الإيجابية |
| `--color-warning` | `#ECB22E` | حالات التحذير |
| `--color-danger` | `#E01E5A` | حالات الخطأ، الإجراءات التدميرية |
| `--color-info` | `#36C5F0` | التمييزات الإعلامية |
### الحدود والفاصل
| الرمز | Hex | الدور |
|---|---|---|
| `--border-default` | `#DDDDDD` | الفواصل القياسية، حدود البطاقات |
| `--border-subtle` | `#F1F1F1` | الفواصل الخفية بين الصفوف |
| `--border-focus` | `#1264A3` | لون حلقة التركيز |
---
## 3. قواعد الطباعة
### الخطوط
| الدور | الرسمي | البديل على الويب |
|---|---|---|
| عناوين العرض / التسويق | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| واجهة المستخدم / المحتوى / Chrome | Slack Lato (مخصص) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| الكود / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> يستخدم Slack **Larsseit** لعناوين التسويق ونسخة Lato المخصصة لواجهة المستخدم داخل المنتج. لاستخدام الويب، يُعدّ `system-ui` أكثر البدائل أماناً.
### مقياس الطباعة
| المستوى | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | الاستخدام |
|---|---|---|---|---|---|
| عرض XL | 48px | 800 | 1.1 | -1px | عناوين hero التسويقية |
| عرض L | 36px | 700 | 1.15 | -0.5px | بطولات الأقسام |
| عنوان 1 | 28px | 700 | 1.25 | normal | عناوين النوافذ المنبثقة، رؤوس الصفحات |
| عنوان 2 | 22px | 700 | 1.3 | normal | عناوين البطاقات، أقسام الإعدادات |
| عنوان 3 | 18px | 700 | 1.35 | normal | رؤوس الأقسام الفرعية |
| محتوى L | 16px | 400 | 1.5 | normal | نص الرسالة، الأوصاف |
| محتوى | 15px | 400 | 1.46667 | normal | نص واجهة المستخدم الافتراضي (الحجم الأساسي لـ Slack) |
| محتوى SM | 13px | 400 | 1.38462 | normal | البيانات الوصفية الثانوية |
| تسمية توضيحية | 12px | 400 | 1.33 | normal | الطوابع الزمنية، التلميحات |
| كود | 12px | 400 | 1.5 | normal | الكود المضمّن، كتل الكود |
### قواعد الطباعة
- الحجم الأساسي لمحتوى Slack هو **15 بكسل** — أصغر قليلاً من 16 بكسل لزيادة الكثافة
- القنوات غير المقروءة: وزن 700 — الغامق هو المؤشر الأساسي لعدم القراءة
- الطوابع الزمنية: 12 بكسل `--text-secondary`، تظهر عند التمرير فحسب
- كتل الكود: خلفية `#F8F8F8`، حد `1px solid #DDDDDD`، border-radius 4px
- لا تستخدم أحجام خطوط أقل من 12 بكسل أبداً
- عناوين التسويق: letter-spacing `-1px` لأحجام العرض الكبيرة
---
## 4. تنسيقات المكونات
### الأزرار
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### حقول الإدخال
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### عنصر قناة الشريط الجانبي
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### شارة غير المقروء
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### مرفقات الرسائل / البطاقات
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### التفاعلات
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. مبادئ التخطيط
### تخطيط ثلاثي الأعمدة
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ الشريط الجانبي│ منطقة الرسائل │ الخيط │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ اختياري │
└──────────────┴──────────────────────────────┴─────────────┘
```
### نظام التباعد (أساس 4 بكسل)
| الرمز | القيمة | الاستخدام |
|---|---|---|
| `--space-1` | 4px | الفجوات الضيقة |
| `--space-2` | 8px | حشو المكون |
| `--space-3` | 12px | حشو الإدخال |
| `--space-4` | 16px | الحشو القياسي |
| `--space-6` | 24px | حشو البطاقة |
| `--space-8` | 32px | فجوات الأقسام |
### هيكل الشريط الجانبي
```
[اسم مساحة العمل ▼]
────────────────────
الخيوط
جميع الرسائل المباشرة
المسودات والمُرسَل
────────────────────
▼ القنوات
# general
# random
# design ● (غير مقروء)
────────────────────
▼ الرسائل المباشرة
John Doe
Jane Smith
```
### محرر الرسائل
- مثبت في أسفل منطقة الرسائل
- `border: 1px solid #DDDDDD`، `border-radius: 8px`، `margin: 0 16px 16px`
- شريط الأدوات: رموز تعبيرية، إرفاق، تنسيق، زر إرسال
---
## 6. العمق والارتفاع
يستخدم Slack ظلالاً خفيفة على سطح فاتح:
| المستوى | الاستخدام | الظل |
|---|---|---|
| مسطح | صفوف الرسائل، عناصر الشريط الجانبي | none |
| منخفض | البطاقات، حقول الإدخال | `0 1px 3px rgba(0,0,0,0.08)` |
| متوسط | القوائم المنسدلة، النوافذ المنبثقة | `0 4px 12px rgba(0,0,0,0.12)` |
| مرتفع | النوافذ المنبثقة الكبيرة، الحوارات | `0 8px 24px rgba(0,0,0,0.15)` |
| طبقة تغطية | خلفيات النوافذ المنبثقة | `rgba(0,0,0,0.5)` |
---
## 7. ما يجب فعله وما يجب تجنبه
### ✅ افعل
- استخدم أوبيرجين `#4A154B` للشريط الجانبي — إنه العنصر الأكثر تميزاً في واجهة Slack
- احتفظ بمنطقة المحتوى الرئيسية بيضاء وفاتحة
- استخدم `#1D1C1D` (شبه أسود) لجميع نصوص المحتوى، وليس الأسود الصريح
- اجعل أسماء القنوات غامقة لإظهار حالة عدم القراءة — الوزن هو المؤشر
- استخدم الألوان الأربعة للنبرة للأدوار الدلالية فحسب (نجاح، تحذير، خطر، معلومات)
- طبّق `border-left: 4px` على مرفقات الرسائل والمدمجات
- اعرض الطوابع الزمنية عند التمرير فحسب
- استخدم `#1264A3` للروابط وحالات التركيز
- احتفظ بعناصر الشريط الجانبي مضغوطة: ارتفاع 28 بكسل، border-radius 6 بكسل
### ❌ لا تفعل
- لا تستخدم منطقة محتوى رئيسية داكنة — Slack يُقدّم الفاتح
- لا تبعثر الأزرق/الأخضر/الأصفر/الأحمر كنبرات تزيينية
- لا تستخدم الأسود الصريح `#000000` للنص
- لا تستخدم فقاعات الكلام — الرسائل صفوف مسطحة
- لا تصنع أزراراً بنصف قطر كبير — 4 بكسل هو المعيار
- لا تعرض الطوابع الزمنية بشكل دائم
- لا تستخدم الحروف الكبيرة بالكامل لأسماء القنوات
- لا تستخدم أحجام خطوط أقل من 12 بكسل
---
## 8. السلوك المتجاوب
### نقاط الكسر
| نقطة الكسر | العرض | التخطيط |
|---|---|---|
| الجوال | < 768px | لوحة واحدة، الشريط الجانبي كدرج أيسر |
| الجهاز اللوحي | 768–1024px | الشريط الجانبي + منطقة الرسائل فحسب |
| سطح المكتب | > 1024px | تخطيط ثلاثي الأعمدة الكامل |
### التكيفات للجوال
- الشريط الجانبي: درج أيسر، اسحب لليمين للفتح
- شريط التبويب السفلي: الرئيسية، الرسائل المباشرة، النشاط، أنت
- لوحة الخيط: تغطية الشاشة بالكامل
- المحرر: مثبت فوق لوحة المفاتيح
- عناصر قائمة القنوات: ارتفاع منطقة اللمس 44 بكسل
- الحفاظ على شريط الرأس الأوبيرجين العلوي على الجوال
---
## 9. دليل مطالبات الوكيل
عند إنشاء تصميمات بأسلوب Slack، اتبع هذا النهج:
**تطبيق الألوان:**
> اضبط `background: #FFFFFF` كالقماش الرئيسي. استخدم `#4A154B` (أوبيرجين) للشريط الجانبي. جميع النصوص الأساسية هي `#1D1C1D`. الروابط وحلقات التركيز تستخدم `#1264A3`. الألوان الأربعة للشعار — `#36C5F0`، `#2EB67D`، `#ECB22E`، `#E01E5A` — دلالية فحسب: معلومات، نجاح، تحذير، خطر.
**الطباعة:**
> استخدم `system-ui, -apple-system, sans-serif` لجميع واجهات المستخدم. الحجم الأساسي هو 15 بكسل. القنوات غير المقروءة: وزن 700. نص المحتوى: وزن 400. الطوابع الزمنية: 12 بكسل `#616061`، عند التمرير فحسب. الكود: `Monaco, Menlo, monospace`، 12 بكسل، خلفية `#F8F8F8`.
**التخطيط:**
> ثلاثة أعمدة: شريط جانبي أوبيرجين 240 بكسل + منطقة رسائل بيضاء مرنة + لوحة خيط اختيارية 400 بكسل. عناصر الشريط الجانبي: ارتفاع 28 بكسل، نصف قطر 6 بكسل، غامق عند عدم القراءة. المحرر: مثبت في الأسفل، `border: 1px solid #DDDDDD`، `border-radius: 8px`.
**المكونات:**
> الأزرار: نصف قطر 4 بكسل، ارتفاع 36 بكسل، أوبيرجين أساسي. حقول الإدخال: حد `1px solid #DDDDDD`، حلقة تركيز `#1264A3`. صفوف الرسائل: مسطحة، بلا فقاعات، صورة رمزية دائرية 36 بكسل. التفاعلات: pill `border: 1px solid #DDDDDD`، `border-radius: 24px`.
**النبرة:**
> Slack دافئ واحترافي وإنساني. الحالات الفارغة تستخدم رسوماً توضيحية ودية. عبارات الدعوة للعمل مباشرة: "إرسال رسالة"، "ابدأ الآن". رسائل الخطأ واضحة ومفيدة. لا تثير القلق أبداً.
**الأنماط المضادة التي يجب تجنبها:**
> لا توجد منطقة محتوى داكنة. لا توجد فقاعات كلام. لا يوجد نص أسود صريح. لا توجد نبرات متعددة الألوان مبعثرة. لا توجد أسماء قنوات بالحروف الكبيرة. لا يوجد خط أصغر من 12 بكسل. لا يوجد نصف قطر زر كبير.
open-design/design-systems/slack/DESIGN-de.md
+363
View File
@@ -0,0 +1,363 @@
# Von Slack inspiriertes Design-System
> Category: Produktivität & SaaS
> Plattform für die Kommunikation am Arbeitsplatz. Aubergine als Primärfarbe, mehrfarbige Logo-Palette, helle Oberflächen mit dunkler Seitenleiste, warm und einladend.
## 1. Visuelles Thema und Atmosphäre
Slacks Identität basiert auf der Idee, dass Arbeit menschlich und sogar ein bisschen Spaß machen sollte. Die charakteristische Oberfläche ist **hell** — weiße Inhaltsbereiche mit einer tiefen Aubergine-Seitenleiste (`#4A154B`) — das Gegenteil von dunkel-zuerst-Tools. Dieser Kontrast ist bewusst gewählt: Die Seitenleiste ist ein ruhiger, immer präsenter Navigationsanker, während der Inhaltsbereich hell und offen ist.
Die Logo-Palette — blau, grün, gelb, rot — erscheint hauptsächlich im Hashtag-Icon und in Marketingkontexten, nicht verstreut durch die Benutzeroberfläche. Im Produkt selbst verwendet Slack ein zurückhaltendes, professionelles Farbsystem mit Aubergine als einzigem Markenanker.
**Hauptmerkmale:**
- Helle Inhaltsoberflächen zuerst: Weiß `#FFFFFF` und Nahweiß `#F8F8F8`
- Tiefes Aubergine `#4A154B` in der Seitenleiste — das markanteste UI-Element der Marke
- Vier Logo-Akzentfarben (blau, grün, gelb, rot) nur sparsam als Highlights verwendet
- Larsseit für Überschriften (Marketing), System-Serifenlos für die Benutzeroberfläche
- Abgerundet, aber nicht cartoonartig: 4–8px Radius bei den meisten Komponenten
- Dicht, aber luftig: kompakte Nachrichtenzeilen mit klarer Thread-Hierarchie
- Warmer und gesprächiger Ton — Emojis, Reaktionen und Illustrationen sind erstklassig
---
## 2. Farbpalette und Rollen
### Marken-Primärfarbe
| Token | Hex | Rolle |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Seitenleistenhintergrund, Marken-Primärfarbe |
| `--color-aubergine-dark` | `#350d36` | Hover-Zustände auf Aubergine-Oberflächen |
| `--color-aubergine-light` | `#611f69` | Highlight für aktive Elemente in der Seitenleiste |
### Logo-Akzentfarben (sparsam verwenden — nur für Highlights, Icons, Marketing)
| Token | Hex | Name | Rolle |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Himmelblau | Kanal-Icons, Links, Info-Zustände |
| `--color-green` | `#2EB67D` | Grünblau | Online-Status, Erfolgszustände |
| `--color-yellow` | `#ECB22E` | Gold | Abwesend-Status, Warnungen, Highlights |
| `--color-red` | `#E01E5A` | Rubin | Benachrichtigungen, Fehler, Erwähnungs-Badge |
### Oberfläche und Hintergrund
| Token | Hex | Rolle |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Hauptnachrichtenbereich, Modals |
| `--bg-secondary` | `#F8F8F8` | Thread-Panels, sekundäre Oberflächen |
| `--bg-tertiary` | `#F1F1F1` | Eingabehintergründe, Hover-Zustände |
| `--bg-sidebar` | `#4A154B` | Linke Seitenleiste (Aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover auf Seitenleistenelementen |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Aktives Seitenleistenelement |
| `--bg-message-hover` | `#F8F8F8` | Hover auf Nachrichtenzeilen |
### Textfarben
| Token | Hex | Rolle |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Primärer Fließtext (nahschwarz) |
| `--text-secondary` | `#616061` | Zeitstempel, gedämpfte Beschriftungen |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Kanalnamen in der Seitenleiste |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Inaktive Elemente in der Seitenleiste |
| `--text-link` | `#1264A3` | Inline-Links in Nachrichten |
| `--text-mention` | `#1264A3` | @Erwähnungs-Textfarbe |
### Semantische Farben
| Token | Hex | Rolle |
|---|---|---|
| `--color-success` | `#2EB67D` | Erfolgs-Toasts, positive Zustände |
| `--color-warning` | `#ECB22E` | Warnzustände |
| `--color-danger` | `#E01E5A` | Fehlerzustände, destruktive Aktionen |
| `--color-info` | `#36C5F0` | Informations-Highlights |
### Rahmen und Trennlinien
| Token | Hex | Rolle |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standard-Trennlinien, Kartenrahmen |
| `--border-subtle` | `#F1F1F1` | Dezente Trennlinien zwischen Zeilen |
| `--border-focus` | `#1264A3` | Fokusring-Farbe |
---
## 3. Typografie-Regeln
### Schriftarten
| Rolle | Offiziell | Web-Fallback |
|---|---|---|
| Display / Marketing-Überschriften | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Text / Chrome | Slack Lato (angepasst) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack verwendet **Larsseit** für Marketing-Überschriften und eine angepasste Lato-Variante für die produktinterne Benutzeroberfläche. Für Web-Einsatz ist `system-ui` der sicherste Fallback.
### Typografische Skala
| Ebene | Größe | Stärke | Zeilenhöhe | Buchstabenabstand | Verwendung |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Marketing-Hero-Überschriften |
| Display L | 36px | 700 | 1.15 | -0.5px | Abschnitts-Heroes |
| Heading 1 | 28px | 700 | 1.25 | normal | Modal-Titel, Seitenüberschriften |
| Heading 2 | 22px | 700 | 1.3 | normal | Kartentitel, Einstellungsabschnitte |
| Heading 3 | 18px | 700 | 1.35 | normal | Unterabschnittsüberschriften |
| Body L | 16px | 400 | 1.5 | normal | Nachrichtentext, Beschreibungen |
| Body | 15px | 400 | 1.46667 | normal | Standard-UI-Text (Slacks Basisgröße) |
| Body SM | 13px | 400 | 1.38462 | normal | Sekundäre Metadaten |
| Caption | 12px | 400 | 1.33 | normal | Zeitstempel, Hinweise |
| Code | 12px | 400 | 1.5 | normal | Inline-Code, Code-Blöcke |
### Typografie-Regeln
- Slacks Basis-Textgröße beträgt **15px** — etwas kleiner als 16px für mehr Dichte
- Ungelesene Kanäle: Stärke 700 — Fettschrift ist der primäre Ungelesen-Indikator
- Zeitstempel: 12px `--text-secondary`, nur beim Hover anzeigen
- Code-Blöcke: Hintergrund `#F8F8F8`, Rahmen `1px solid #DDDDDD`, Radius 4px
- Keine Schriftgrößen unter 12px verwenden
- Marketing-Überschriften: Buchstabenabstand `-1px` für große Display-Größen
---
## 4. Komponentenstile
### Schaltflächen
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Eingabefelder
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Seitenleisten-Kanalelement
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Ungelesen-Badge
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Nachrichten-Anhänge / Karten
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reaktionen
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Layout-Prinzipien
### Dreispaltiges Layout
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Abstands-System (Basis 4px)
| Token | Wert | Verwendung |
|---|---|---|
| `--space-1` | 4px | Enge Abstände |
| `--space-2` | 8px | Komponenten-Padding |
| `--space-3` | 12px | Eingabe-Padding |
| `--space-4` | 16px | Standard-Padding |
| `--space-6` | 24px | Karten-Padding |
| `--space-8` | 32px | Abschnittsabstände |
### Seitenleisten-Struktur
```
[Arbeitsbereichsname ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Nachrichten-Eingabebereich
- Am unteren Rand des Nachrichtenbereichs fixiert
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Werkzeugleiste: Emoji, Anhang, Formatierung, Senden-Schaltfläche
---
## 6. Tiefe und Elevation
Slack verwendet helle Schatten auf heller Oberfläche:
| Ebene | Verwendung | Schatten |
|---|---|---|
| Flach | Nachrichtenzeilen, Seitenleistenelemente | none |
| Niedrig | Karten, Eingaben | `0 1px 3px rgba(0,0,0,0.08)` |
| Mittel | Dropdowns, Popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Hoch | Modals, Dialoge | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Modal-Hintergründe | `rgba(0,0,0,0.5)` |
---
## 7. Dos und Don'ts
### ✅ Do
- Aubergine `#4A154B` für die Seitenleiste verwenden — das ikonischste UI-Element von Slack
- Den Hauptinhaltsbereich weiß und hell halten
- `#1D1C1D` (Nahschwarz) für den gesamten Fließtext verwenden, nicht reines Schwarz
- Kanalnamen fett setzen, um den Ungelesen-Status anzuzeigen — die Schriftstärke ist der Indikator
- Die vier Akzentfarben nur für semantische Rollen verwenden (Erfolg, Warnung, Gefahr, Info)
- `border-left: 4px` auf Nachrichten-Anhängen und Einbettungen anwenden
- Zeitstempel nur beim Hover anzeigen
- `#1264A3` für Links und Fokus-Zustände verwenden
- Seitenleistenelemente kompakt halten: 28px Höhe, 6px Rahmenradius
### ❌ Don't
- Keinen dunklen Hauptinhaltsbereich verwenden — Slack ist hell-zuerst
- Blau/Grün/Gelb/Rot nicht als dekorative Akzente verstreuen
- Kein reines Schwarz `#000000` für Text verwenden
- Keine Sprechblasen verwenden — Nachrichten sind flache Zeilen
- Schaltflächen nicht mit großem Radius gestalten — 4px ist Standard
- Zeitstempel nicht dauerhaft anzeigen
- Kanalnamen nicht in GROSSBUCHSTABEN schreiben
- Keine Schriftgrößen unter 12px verwenden
---
## 8. Responsives Verhalten
### Haltepunkte
| Haltepunkt | Breite | Layout |
|---|---|---|
| Mobil | < 768px | Einzelnes Panel, Seitenleiste als linke Schublade |
| Tablet | 768–1024px | Seitenleiste + nur Nachrichtenbereich |
| Desktop | > 1024px | Vollständiges dreispaltiges Layout |
### Mobile Anpassungen
- Seitenleiste: Linke Schublade, nach rechts wischen zum Öffnen
- Untere Tab-Leiste: Home, DMs, Aktivität, Profil
- Thread-Panel: Vollbild-Overlay
- Eingabebereich: Über der Tastatur fixiert
- Kanallistenelemente: 44px Touch-Zielhöhe
- Aubergine-Top-Header-Leiste auf Mobilgeräten beibehalten
---
## 9. Agent-Prompt-Leitfaden
Beim Erstellen von Slack-ähnlichen Designs diesen Ansatz befolgen:
**Farbverwendung:**
> `background: #FFFFFF` als Hauptleinwand setzen. `#4A154B` (Aubergine) für die Seitenleiste verwenden. Der gesamte Primärtext ist `#1D1C1D`. Links und Fokusringe verwenden `#1264A3`. Die vier Logo-Farben — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — sind nur semantisch: Info, Erfolg, Warnung, Gefahr.
**Typografie:**
> `system-ui, -apple-system, sans-serif` für die gesamte Benutzeroberfläche verwenden. Basisgröße ist 15px. Ungelesene Kanäle: Stärke 700. Fließtext: Stärke 400. Zeitstempel: 12px `#616061`, nur beim Hover. Code: `Monaco, Menlo, monospace`, 12px, Hintergrund `#F8F8F8`.
**Layout:**
> Drei Spalten: 240px Aubergine-Seitenleiste + flexibler weißer Nachrichtenbereich + optionales 400px Thread-Panel. Seitenleistenelemente: 28px Höhe, 6px Radius, fett wenn ungelesen. Eingabebereich: unten fixiert, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Komponenten:**
> Schaltflächen: 4px Radius, 36px Höhe, Aubergine als Primärfarbe. Eingaben: `1px solid #DDDDDD` Rahmen, `#1264A3` Fokusring. Nachrichtenzeilen: flach, keine Sprechblasen, 36px kreisförmiger Avatar. Reaktionen: Pille `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton:**
> Slack ist warm, professionell und menschlich. Leere Zustände verwenden freundliche Illustrationen. CTAs sind direkt: „Send message", „Get started". Fehlermeldungen sind klar und hilfreich. Niemals beunruhigend.
**Zu vermeidende Anti-Patterns:**
> Kein dunkler Inhaltsbereich. Keine Sprechblasen. Kein reiner schwarzer Text. Keine verstreuten Mehrfarb-Akzente. Keine Kanalnamen in GROSSBUCHSTABEN. Keine Schrift unter 12px. Kein großer Schaltflächen-Radius.
open-design/design-systems/slack/DESIGN-es.md
+363
View File
@@ -0,0 +1,363 @@
# Sistema de diseño inspirado en Slack
> Category: Productividad y SaaS
> Plataforma de comunicación en el lugar de trabajo. Paleta primaria berenjena, paleta multicolor del logotipo, superficies claras con barra lateral oscura, tono cálido y accesible.
## 1. Tema visual y atmósfera
La identidad de Slack se construye alrededor de la idea de que el trabajo debe sentirse humano e incluso un poco divertido. La superficie canónica es **clara** — áreas de contenido blancas con una profunda barra lateral berenjena (`#4A154B`) — lo opuesto a las herramientas con fondo oscuro. Este contraste es intencional: la barra lateral es un ancla de navegación tranquila y siempre presente, mientras que el área de contenido es brillante y abierta.
La paleta del logotipo — azul, verde, amarillo, rojo — aparece principalmente en el ícono de almohadilla y en contextos de marketing, no diseminada por la interfaz. En el propio producto, Slack utiliza un sistema de colores sobrio y profesional con el berenjena como único ancla de marca.
**Características clave:**
- Superficies de contenido predominantemente claras: blanco `#FFFFFF` y casi blanco `#F8F8F8`
- Profunda barra lateral berenjena `#4A154B` — el elemento de interfaz más reconocible de la marca
- Cuatro colores de acento del logotipo (azul, verde, amarillo, rojo) usados con moderación, solo como destacados
- Larsseit para encabezados (marketing), sans-serif del sistema para la interfaz
- Redondeado pero no caricaturesco: radio de 4–8px en la mayoría de componentes
- Denso pero respirable: filas de mensajes compactas con jerarquía de hilos clara
- Tono cálido y conversacional — emojis, reacciones e ilustraciones son elementos de primera clase
---
## 2. Paleta de colores y roles
### Color primario de marca
| Token | Hex | Rol |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Fondo de la barra lateral, color principal de la marca |
| `--color-aubergine-dark` | `#350d36` | Estados de hover en superficies berenjena |
| `--color-aubergine-light` | `#611f69` | Destacado del elemento activo en la barra lateral |
### Colores de acento del logotipo (usar con moderación — solo destacados, íconos, marketing)
| Token | Hex | Nombre | Rol |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Azul cielo | Íconos de canales, enlaces, estados informativos |
| `--color-green` | `#2EB67D` | Verde azulado | Estado en línea, estados de éxito |
| `--color-yellow` | `#ECB22E` | Dorado | Estado ausente, advertencias, destacados |
| `--color-red` | `#E01E5A` | Rubí | Notificaciones, errores, insignia de menciones |
### Superficie y fondo
| Token | Hex | Rol |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Área principal de mensajes, modales |
| `--bg-secondary` | `#F8F8F8` | Paneles de hilos, superficies secundarias |
| `--bg-tertiary` | `#F1F1F1` | Fondos de campos de entrada, estados de hover |
| `--bg-sidebar` | `#4A154B` | Barra lateral izquierda (berenjena) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover en elemento de la barra lateral |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Elemento activo de la barra lateral |
| `--bg-message-hover` | `#F8F8F8` | Hover en fila de mensaje |
### Colores de texto
| Token | Hex | Rol |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Texto principal del cuerpo (casi negro) |
| `--text-secondary` | `#616061` | Marcas de tiempo, etiquetas atenuadas |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nombres de canales en la barra lateral |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Elementos inactivos de la barra lateral |
| `--text-link` | `#1264A3` | Enlaces en línea en mensajes |
| `--text-mention` | `#1264A3` | Color de texto de las @menciones |
### Colores semánticos
| Token | Hex | Rol |
|---|---|---|
| `--color-success` | `#2EB67D` | Notificaciones de éxito, estados positivos |
| `--color-warning` | `#ECB22E` | Estados de advertencia |
| `--color-danger` | `#E01E5A` | Estados de error, acciones destructivas |
| `--color-info` | `#36C5F0` | Destacados informativos |
### Borde y divisor
| Token | Hex | Rol |
|---|---|---|
| `--border-default` | `#DDDDDD` | Divisores estándar, bordes de tarjetas |
| `--border-subtle` | `#F1F1F1` | Separadores sutiles entre filas |
| `--border-focus` | `#1264A3` | Color del anillo de enfoque |
---
## 3. Reglas tipográficas
### Tipografías
| Rol | Oficial | Alternativa web |
|---|---|---|
| Encabezados de pantalla / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Interfaz / Cuerpo / Chrome | Slack Lato (personalizado) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Código / Monoespaciado | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack usa **Larsseit** para los titulares de marketing y una variante personalizada de Lato para la interfaz del producto. Para uso web, `system-ui` es la alternativa más segura.
### Escala tipográfica
| Nivel | Tamaño | Peso | Altura de línea | Espaciado de letras | Uso |
|---|---|---|---|---|---|
| Pantalla XL | 48px | 800 | 1.1 | -1px | Titulares héroe de marketing |
| Pantalla L | 36px | 700 | 1.15 | -0.5px | Héroes de sección |
| Encabezado 1 | 28px | 700 | 1.25 | normal | Títulos de modales, encabezados de página |
| Encabezado 2 | 22px | 700 | 1.3 | normal | Títulos de tarjetas, secciones de configuración |
| Encabezado 3 | 18px | 700 | 1.35 | normal | Encabezados de subsección |
| Cuerpo L | 16px | 400 | 1.5 | normal | Texto de mensajes, descripciones |
| Cuerpo | 15px | 400 | 1.46667 | normal | Texto de interfaz predeterminado (tamaño base de Slack) |
| Cuerpo SM | 13px | 400 | 1.38462 | normal | Metadatos secundarios |
| Leyenda | 12px | 400 | 1.33 | normal | Marcas de tiempo, sugerencias |
| Código | 12px | 400 | 1.5 | normal | Código en línea, bloques de código |
### Reglas tipográficas
- El tamaño de cuerpo base de Slack es **15px** — ligeramente menor que 16px para mayor densidad
- Canales no leídos: peso 700 — la negrita es el indicador principal de no leído
- Marcas de tiempo: 12px `--text-secondary`, mostrar solo al pasar el cursor
- Bloques de código: fondo `#F8F8F8`, borde `1px solid #DDDDDD`, border-radius 4px
- Nunca usar tamaños de fuente inferiores a 12px
- Encabezados de marketing: espaciado de letras `-1px` para tamaños de pantalla grandes
---
## 4. Estilos de componentes
### Botones
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Campos de entrada
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Elemento de canal en la barra lateral
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Insignia de no leído
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Adjuntos de mensajes / Tarjetas
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reacciones
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Principios de maquetación
### Maquetación de tres columnas
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Sistema de espaciado (base 4px)
| Token | Valor | Uso |
|---|---|---|
| `--space-1` | 4px | Espacios reducidos |
| `--space-2` | 8px | Relleno de componentes |
| `--space-3` | 12px | Relleno de campos de entrada |
| `--space-4` | 16px | Relleno estándar |
| `--space-6` | 24px | Relleno de tarjetas |
| `--space-8` | 32px | Separación entre secciones |
### Estructura de la barra lateral
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Compositor de mensajes
- Fijado en la parte inferior del área de mensajes
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Barra de herramientas: emoji, adjuntar, formato, botón de envío
---
## 6. Profundidad y elevación
Slack usa sombras suaves sobre una superficie clara:
| Nivel | Uso | Sombra |
|---|---|---|
| Plano | Filas de mensajes, elementos de la barra lateral | none |
| Bajo | Tarjetas, campos de entrada | `0 1px 3px rgba(0,0,0,0.08)` |
| Medio | Menús desplegables, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Alto | Modales, diálogos | `0 8px 24px rgba(0,0,0,0.15)` |
| Superposición | Fondos de modales | `rgba(0,0,0,0.5)` |
---
## 7. Lo que se debe y no se debe hacer
### ✅ Hacer
- Usar berenjena `#4A154B` para la barra lateral — es el elemento de interfaz más icónico de Slack
- Mantener el área de contenido principal blanca y clara
- Usar `#1D1C1D` (casi negro) para todo el texto del cuerpo, no negro puro
- Poner en negrita los nombres de canales para mostrar el estado no leído — el peso es el indicador
- Usar los cuatro colores de acento solo para roles semánticos (éxito, advertencia, peligro, información)
- Aplicar `border-left: 4px` en adjuntos e inserciones de mensajes
- Mostrar marcas de tiempo solo al pasar el cursor
- Usar `#1264A3` para enlaces y estados de enfoque
- Mantener los elementos de la barra lateral compactos: altura 28px, border-radius 6px
### ❌ No hacer
- No usar un área de contenido principal oscura — Slack es predominantemente claro
- No dispersar azul/verde/amarillo/rojo como acentos decorativos
- No usar negro puro `#000000` para el texto
- No usar burbujas de diálogo — los mensajes son filas planas
- No hacer botones con radio grande — 4px es el estándar
- No mostrar marcas de tiempo permanentemente
- No usar MAYÚSCULAS para los nombres de canales
- No usar tamaños de fuente inferiores a 12px
---
## 8. Comportamiento responsivo
### Puntos de ruptura
| Punto de ruptura | Ancho | Maquetación |
|---|---|---|
| Móvil | < 768px | Panel único, barra lateral como cajón izquierdo |
| Tablet | 768–1024px | Solo barra lateral + área de mensajes |
| Escritorio | > 1024px | Maquetación completa de tres columnas |
### Adaptaciones móviles
- Barra lateral: cajón izquierdo, deslizar a la derecha para abrir
- Barra de pestañas inferior: Inicio, MDs, Actividad, Tú
- Panel de hilo: superposición de pantalla completa
- Compositor: fijado sobre el teclado
- Elementos de la lista de canales: altura de objetivo táctil 44px
- Barra de encabezado berenjena superior conservada en móvil
---
## 9. Guía de prompts para agente
Al generar diseños con estilo Slack, sigue este enfoque:
**Aplicación de colores:**
> Establece `background: #FFFFFF` como lienzo principal. Usa `#4A154B` (berenjena) para la barra lateral. Todo el texto principal es `#1D1C1D`. Los enlaces y anillos de enfoque usan `#1264A3`. Los cuatro colores del logotipo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — son únicamente semánticos: información, éxito, advertencia, peligro.
**Tipografía:**
> Usa `system-ui, -apple-system, sans-serif` para toda la interfaz. El tamaño base es 15px. Canales no leídos: peso 700. Texto del cuerpo: peso 400. Marcas de tiempo: 12px `#616061`, solo al pasar el cursor. Código: `Monaco, Menlo, monospace`, 12px, fondo `#F8F8F8`.
**Maquetación:**
> Tres columnas: barra lateral berenjena de 240px + área de mensajes blanca flexible + panel de hilo opcional de 400px. Elementos de la barra lateral: altura 28px, radio 6px, negrita cuando no leído. Compositor: fijado abajo, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Componentes:**
> Botones: radio 4px, altura 36px, berenjena primario. Campos de entrada: borde `1px solid #DDDDDD`, anillo de enfoque `#1264A3`. Filas de mensajes: planas, sin burbujas, avatar circular de 36px. Reacciones: píldora `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Tono:**
> Slack es cálido, profesional y humano. Los estados vacíos usan ilustraciones amigables. Las llamadas a la acción son directas: «Enviar mensaje», «Comenzar». Los mensajes de error son claros y útiles. Nunca alarmante.
**Antipatrones a evitar:**
> Sin área de contenido oscura. Sin burbujas de diálogo. Sin texto negro puro. Sin acentos multicolor dispersos. Sin nombres de canales en MAYÚSCULAS. Sin fuentes inferiores a 12px. Sin radio de botón grande.
open-design/design-systems/slack/DESIGN-fr.md
+363
View File
@@ -0,0 +1,363 @@
# Système de design inspiré de Slack
> Category: Productivité & SaaS
> Plateforme de communication professionnelle. Palette primaire aubergine, palette multi-accents pour le logo, surfaces claires avec barre latérale sombre, ton chaleureux et accessible.
## 1. Thème visuel et atmosphère
L'identité de Slack repose sur l'idée que le travail doit se sentir humain et même un peu amusant. La surface canonique est **claire** — des zones de contenu blanches avec une barre latérale aubergine profonde (`#4A154B`) — à l'opposé des outils à dominante sombre. Ce contraste est intentionnel : la barre latérale est une ancre de navigation calme et toujours présente, tandis que la zone de contenu est lumineuse et ouverte.
La palette du logo — bleu, vert, jaune, rouge — apparaît principalement dans l'icône dièse et dans les contextes marketing, et non disséminée dans l'interface. Dans le produit lui-même, Slack utilise un système de couleurs sobre et professionnel, avec l'aubergine comme seul ancre de marque.
**Caractéristiques principales :**
- Surfaces de contenu prioritairement claires : blanc `#FFFFFF` et quasi-blanc `#F8F8F8`
- Barre latérale aubergine profonde `#4A154B` — l'élément d'interface le plus reconnaissable de la marque
- Quatre couleurs d'accent du logo (bleu, vert, jaune, rouge) utilisées avec parcimonie, uniquement comme points forts
- Larsseit pour les titres (marketing), sans-serif système pour l'interface
- Arrondi mais pas cartoonesque : rayon de 4–8px sur la plupart des composants
- Dense mais aéré : rangées de messages compactes avec une hiérarchie de fils claire
- Ton chaleureux et conversationnel — émojis, réactions et illustrations sont de première importance
---
## 2. Palette de couleurs et rôles
### Primaire de marque
| Jeton | Hex | Rôle |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Arrière-plan de la barre latérale, couleur principale de la marque |
| `--color-aubergine-dark` | `#350d36` | États de survol sur les surfaces aubergine |
| `--color-aubergine-light` | `#611f69` | Mise en évidence de l'élément actif dans la barre latérale |
### Couleurs d'accent du logo (à utiliser avec parcimonie — points forts, icônes, marketing uniquement)
| Jeton | Hex | Nom | Rôle |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Bleu ciel | Icônes de canaux, liens, états informatifs |
| `--color-green` | `#2EB67D` | Vert sarcelle | Statut en ligne, états de succès |
| `--color-yellow` | `#ECB22E` | Or | Statut absent, avertissements, points forts |
| `--color-red` | `#E01E5A` | Rubis | Notifications, erreurs, badge de mentions |
### Surface et arrière-plan
| Jeton | Hex | Rôle |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Zone principale des messages, modales |
| `--bg-secondary` | `#F8F8F8` | Panneaux de fils, surfaces secondaires |
| `--bg-tertiary` | `#F1F1F1` | Arrière-plans des champs de saisie, états de survol |
| `--bg-sidebar` | `#4A154B` | Barre latérale gauche (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Survol d'un élément de la barre latérale |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Élément actif de la barre latérale |
| `--bg-message-hover` | `#F8F8F8` | Survol d'une rangée de message |
### Couleurs de texte
| Jeton | Hex | Rôle |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Texte principal du corps (quasi-noir) |
| `--text-secondary` | `#616061` | Horodatages, étiquettes atténuées |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Noms des canaux dans la barre latérale |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Éléments inactifs de la barre latérale |
| `--text-link` | `#1264A3` | Liens en ligne dans les messages |
| `--text-mention` | `#1264A3` | Couleur du texte des @mentions |
### Couleurs sémantiques
| Jeton | Hex | Rôle |
|---|---|---|
| `--color-success` | `#2EB67D` | Notifications de succès, états positifs |
| `--color-warning` | `#ECB22E` | États d'avertissement |
| `--color-danger` | `#E01E5A` | États d'erreur, actions destructrices |
| `--color-info` | `#36C5F0` | Points forts informatifs |
### Bordure et séparateur
| Jeton | Hex | Rôle |
|---|---|---|
| `--border-default` | `#DDDDDD` | Séparateurs standard, bordures de cartes |
| `--border-subtle` | `#F1F1F1` | Séparateurs discrets entre les rangées |
| `--border-focus` | `#1264A3` | Couleur de l'anneau de focus |
---
## 3. Règles typographiques
### Polices de caractères
| Rôle | Officielle | Substitut web |
|---|---|---|
| Titres d'affichage / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Interface / Corps / Chrome | Slack Lato (personnalisé) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack utilise **Larsseit** pour les titres marketing et une variante Lato personnalisée pour l'interface du produit. Pour une utilisation web, `system-ui` est le substitut le plus sûr.
### Échelle typographique
| Niveau | Taille | Graisse | Hauteur de ligne | Espacement des lettres | Usage |
|---|---|---|---|---|---|
| Affichage XL | 48px | 800 | 1.1 | -1px | Titres héros marketing |
| Affichage L | 36px | 700 | 1.15 | -0.5px | Héros de section |
| Titre 1 | 28px | 700 | 1.25 | normal | Titres de modales, en-têtes de page |
| Titre 2 | 22px | 700 | 1.3 | normal | Titres de cartes, sections de paramètres |
| Titre 3 | 18px | 700 | 1.35 | normal | En-têtes de sous-sections |
| Corps L | 16px | 400 | 1.5 | normal | Texte des messages, descriptions |
| Corps | 15px | 400 | 1.46667 | normal | Texte d'interface par défaut (taille de base de Slack) |
| Corps SM | 13px | 400 | 1.38462 | normal | Métadonnées secondaires |
| Légende | 12px | 400 | 1.33 | normal | Horodatages, indices |
| Code | 12px | 400 | 1.5 | normal | Code en ligne, blocs de code |
### Règles typographiques
- La taille de corps de base de Slack est **15px** — légèrement inférieure à 16px pour plus de densité
- Canaux non lus : graisse 700 — le gras est le principal indicateur de non-lu
- Horodatages : 12px `--text-secondary`, affichés au survol uniquement
- Blocs de code : arrière-plan `#F8F8F8`, bordure `1px solid #DDDDDD`, border-radius 4px
- Ne jamais utiliser de tailles de police inférieures à 12px
- Titres marketing : espacement des lettres `-1px` pour les grandes tailles d'affichage
---
## 4. Styles des composants
### Boutons
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Champs de saisie
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Élément de canal dans la barre latérale
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Badge non lu
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Pièces jointes de message / Cartes
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Réactions
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Principes de mise en page
### Mise en page à trois colonnes
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Système d'espacement (base 4px)
| Jeton | Valeur | Usage |
|---|---|---|
| `--space-1` | 4px | Espaces serrés |
| `--space-2` | 8px | Rembourrage de composant |
| `--space-3` | 12px | Rembourrage des champs de saisie |
| `--space-4` | 16px | Rembourrage standard |
| `--space-6` | 24px | Rembourrage de carte |
| `--space-8` | 32px | Espaces entre sections |
### Structure de la barre latérale
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Compositeur de message
- Épinglé en bas de la zone de message
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Barre d'outils : émoji, pièce jointe, format, bouton d'envoi
---
## 6. Profondeur et élévation
Slack utilise des ombres légères sur une surface claire :
| Niveau | Usage | Ombre |
|---|---|---|
| Plat | Rangées de messages, éléments de la barre latérale | none |
| Bas | Cartes, champs de saisie | `0 1px 3px rgba(0,0,0,0.08)` |
| Moyen | Menus déroulants, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Élevé | Modales, dialogues | `0 8px 24px rgba(0,0,0,0.15)` |
| Superposition | Arrière-plans de modales | `rgba(0,0,0,0.5)` |
---
## 7. À faire et à ne pas faire
### ✅ À faire
- Utiliser l'aubergine `#4A154B` pour la barre latérale — c'est l'élément d'interface le plus iconique de Slack
- Garder la zone de contenu principale blanche et claire
- Utiliser `#1D1C1D` (quasi-noir) pour tout le texte du corps, pas le noir pur
- Mettre les noms de canaux en gras pour indiquer le statut non lu — la graisse est l'indicateur
- Utiliser les quatre couleurs d'accent uniquement pour les rôles sémantiques (succès, avertissement, danger, info)
- Appliquer `border-left: 4px` sur les pièces jointes et les intégrations de messages
- Afficher les horodatages au survol uniquement
- Utiliser `#1264A3` pour les liens et les états de focus
- Garder les éléments de la barre latérale compacts : hauteur 28px, border-radius 6px
### ❌ À ne pas faire
- Ne pas utiliser une zone de contenu principale sombre — Slack est prioritairement clair
- Ne pas disperser bleu/vert/jaune/rouge comme accents décoratifs
- Ne pas utiliser le noir pur `#000000` pour le texte
- Ne pas utiliser des bulles de dialogue — les messages sont des rangées plates
- Ne pas créer des boutons à grand rayon — 4px est la norme
- Ne pas afficher les horodatages en permanence
- Ne pas utiliser les MAJUSCULES pour les noms de canaux
- Ne pas utiliser des tailles de police inférieures à 12px
---
## 8. Comportement responsive
### Points de rupture
| Point de rupture | Largeur | Mise en page |
|---|---|---|
| Mobile | < 768px | Panneau unique, barre latérale en tiroir gauche |
| Tablette | 768–1024px | Barre latérale + zone de messages uniquement |
| Bureau | > 1024px | Mise en page complète à trois colonnes |
### Adaptations mobiles
- Barre latérale : tiroir gauche, glisser à droite pour ouvrir
- Barre d'onglets du bas : Accueil, MDs, Activité, Vous
- Panneau de fil : superposition plein écran
- Compositeur : épinglé au-dessus du clavier
- Éléments de la liste de canaux : hauteur de cible tactile 44px
- Barre d'en-tête aubergine conservée sur mobile
---
## 9. Guide de prompt pour agent
Lors de la génération de designs dans le style Slack, suivez cette approche :
**Application des couleurs :**
> Définissez `background: #FFFFFF` comme canevas principal. Utilisez `#4A154B` (aubergine) pour la barre latérale. Tout le texte principal est `#1D1C1D`. Les liens et les anneaux de focus utilisent `#1264A3`. Les quatre couleurs du logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — sont uniquement sémantiques : info, succès, avertissement, danger.
**Typographie :**
> Utilisez `system-ui, -apple-system, sans-serif` pour toute l'interface. La taille de base est 15px. Canaux non lus : graisse 700. Texte du corps : graisse 400. Horodatages : 12px `#616061`, survol uniquement. Code : `Monaco, Menlo, monospace`, 12px, arrière-plan `#F8F8F8`.
**Mise en page :**
> Trois colonnes : barre latérale aubergine de 240px + zone de messages blanche flexible + panneau de fil optionnel de 400px. Éléments de la barre latérale : hauteur 28px, rayon 6px, gras si non lu. Compositeur : épinglé en bas, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Composants :**
> Boutons : rayon 4px, hauteur 36px, primaire aubergine. Champs de saisie : bordure `1px solid #DDDDDD`, anneau de focus `#1264A3`. Rangées de messages : plates, sans bulles, avatar circulaire de 36px. Réactions : pilule `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton :**
> Slack est chaleureux, professionnel et humain. Les états vides utilisent des illustrations amicales. Les appels à l'action sont directs : « Envoyer un message », « Commencer ». Les messages d'erreur sont clairs et utiles. Jamais alarmant.
**Antipatterns à éviter :**
> Pas de zone de contenu sombre. Pas de bulles de dialogue. Pas de texte noir pur. Pas d'accents multi-couleurs dispersés. Pas de noms de canaux en MAJUSCULES. Pas de police inférieure à 12px. Pas de grand rayon de bouton.
open-design/design-systems/slack/DESIGN-id.md
+363
View File
@@ -0,0 +1,363 @@
# Sistem Desain Terinspirasi Slack
> Category: Produktivitas & SaaS
> Platform komunikasi tempat kerja. Warna utama aubergine, palet logo multi-aksen, permukaan terang dengan sidebar gelap, hangat dan mudah didekati.
## 1. Tema Visual & Suasana
Identitas Slack dibangun di sekitar gagasan bahwa pekerjaan harus terasa manusiawi dan bahkan sedikit menyenangkan. Permukaan kanonik adalah **terang** — area konten putih dengan sidebar aubergine dalam (`#4A154B`) — kebalikan dari alat yang mengutamakan tema gelap. Kontras ini disengaja: sidebar adalah jangkar navigasi yang tenang dan selalu hadir, sementara area konten cerah dan terbuka.
Palet logo — biru, hijau, kuning, merah — muncul terutama pada ikon tagar dan konteks pemasaran, tidak tersebar di seluruh UI. Dalam produk itu sendiri, Slack menggunakan sistem warna yang terkendali dan profesional dengan aubergine sebagai satu-satunya jangkar merek.
**Karakteristik Utama:**
- Permukaan konten mengutamakan terang: putih `#FFFFFF` dan hampir putih `#F8F8F8`
- Sidebar aubergine dalam `#4A154B` — elemen UI merek yang paling mudah dikenali
- Empat warna aksen logo (biru, hijau, kuning, merah) digunakan hemat hanya sebagai sorotan
- Larsseit untuk judul (pemasaran), system sans-serif untuk UI
- Melengkung tapi tidak kartun: radius 4–8px pada sebagian besar komponen
- Padat tapi bisa bernapas: baris pesan yang ringkas dengan hierarki utas yang jelas
- Nada hangat dan percakapan — emoji, reaksi, dan ilustrasi adalah elemen kelas satu
---
## 2. Palet Warna & Peran
### Warna Utama Merek
| Token | Hex | Peran |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Latar belakang sidebar, warna merek utama |
| `--color-aubergine-dark` | `#350d36` | Status hover pada permukaan aubergine |
| `--color-aubergine-light` | `#611f69` | Sorotan item aktif di sidebar |
### Warna Aksen Logo (gunakan hemat — hanya untuk sorotan, ikon, pemasaran)
| Token | Hex | Nama | Peran |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Biru Langit | Ikon saluran, tautan, status informasi |
| `--color-green` | `#2EB67D` | Hijau Teal | Status online, status sukses |
| `--color-yellow` | `#ECB22E` | Emas | Status tidak ada, peringatan, sorotan |
| `--color-red` | `#E01E5A` | Ruby | Notifikasi, kesalahan, lencana sebutan |
### Permukaan & Latar Belakang
| Token | Hex | Peran |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Area pesan utama, modal |
| `--bg-secondary` | `#F8F8F8` | Panel utas, permukaan sekunder |
| `--bg-tertiary` | `#F1F1F1` | Latar belakang input, status hover |
| `--bg-sidebar` | `#4A154B` | Sidebar kiri (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover item sidebar |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Item sidebar aktif |
| `--bg-message-hover` | `#F8F8F8` | Hover baris pesan |
### Warna Teks
| Token | Hex | Peran |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Teks konten utama (hampir hitam) |
| `--text-secondary` | `#616061` | Cap waktu, label diredam |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nama saluran di sidebar |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Item sidebar tidak aktif |
| `--text-link` | `#1264A3` | Tautan inline dalam pesan |
| `--text-mention` | `#1264A3` | Warna teks @sebutan |
### Warna Semantik
| Token | Hex | Peran |
|---|---|---|
| `--color-success` | `#2EB67D` | Toast sukses, status positif |
| `--color-warning` | `#ECB22E` | Status peringatan |
| `--color-danger` | `#E01E5A` | Status kesalahan, aksi destruktif |
| `--color-info` | `#36C5F0` | Sorotan informasional |
### Batas & Pemisah
| Token | Hex | Peran |
|---|---|---|
| `--border-default` | `#DDDDDD` | Pemisah standar, batas kartu |
| `--border-subtle` | `#F1F1F1` | Pemisah halus antar baris |
| `--border-focus` | `#1264A3` | Warna cincin fokus |
---
## 3. Aturan Tipografi
### Jenis Huruf
| Peran | Resmi | Fallback Web |
|---|---|---|
| Judul Display / Pemasaran | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Konten / Chrome | Slack Lato (kustom) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Kode / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack menggunakan **Larsseit** untuk judul pemasaran dan varian Lato kustom untuk UI dalam produk. Untuk penggunaan web, `system-ui` adalah fallback yang paling aman.
### Skala Tipografi
| Tingkat | Ukuran | Bobot | Tinggi Baris | Spasi Huruf | Penggunaan |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Judul hero pemasaran |
| Display L | 36px | 700 | 1.15 | -0.5px | Hero seksi |
| Judul 1 | 28px | 700 | 1.25 | normal | Judul modal, header halaman |
| Judul 2 | 22px | 700 | 1.3 | normal | Judul kartu, seksi pengaturan |
| Judul 3 | 18px | 700 | 1.35 | normal | Header sub-seksi |
| Konten L | 16px | 400 | 1.5 | normal | Teks pesan, deskripsi |
| Konten | 15px | 400 | 1.46667 | normal | Teks UI default (ukuran dasar Slack) |
| Konten SM | 13px | 400 | 1.38462 | normal | Metadata sekunder |
| Keterangan | 12px | 400 | 1.33 | normal | Cap waktu, petunjuk |
| Kode | 12px | 400 | 1.5 | normal | Kode inline, blok kode |
### Aturan Tipografi
- Ukuran konten dasar Slack adalah **15px** — sedikit lebih kecil dari 16px untuk kepadatan
- Saluran belum dibaca: bobot 700 — tebal adalah indikator belum dibaca utama
- Cap waktu: 12px `--text-secondary`, tampilkan saat hover saja
- Blok kode: latar belakang `#F8F8F8`, batas `1px solid #DDDDDD`, border-radius 4px
- Jangan pernah menggunakan ukuran font di bawah 12px
- Judul pemasaran: letter-spacing `-1px` untuk ukuran display besar
---
## 4. Gaya Komponen
### Tombol
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Bidang Input
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Item Saluran Sidebar
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Lencana Belum Dibaca
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Lampiran Pesan / Kartu
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reaksi
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Prinsip Tata Letak
### Tata Letak Tiga Kolom
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Area Pesan │ Utas │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ opsional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Sistem Spasi (dasar 4px)
| Token | Nilai | Penggunaan |
|---|---|---|
| `--space-1` | 4px | Celah rapat |
| `--space-2` | 8px | Padding komponen |
| `--space-3` | 12px | Padding input |
| `--space-4` | 16px | Padding standar |
| `--space-6` | 24px | Padding kartu |
| `--space-8` | 32px | Celah seksi |
### Struktur Sidebar
```
[Nama Ruang Kerja ▼]
────────────────────
Utas
Semua DM
Draf & Terkirim
────────────────────
▼ Saluran
# general
# random
# design ● (belum dibaca)
────────────────────
▼ Pesan Langsung
John Doe
Jane Smith
```
### Komposer Pesan
- Disematkan di bagian bawah area pesan
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Toolbar: emoji, lampirkan, format, tombol kirim
---
## 6. Kedalaman & Elevasi
Slack menggunakan bayangan ringan pada permukaan terang:
| Tingkat | Penggunaan | Bayangan |
|---|---|---|
| Datar | Baris pesan, item sidebar | none |
| Rendah | Kartu, input | `0 1px 3px rgba(0,0,0,0.08)` |
| Sedang | Dropdown, popover | `0 4px 12px rgba(0,0,0,0.12)` |
| Tinggi | Modal, dialog | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Latar belakang modal | `rgba(0,0,0,0.5)` |
---
## 7. Yang Harus & Tidak Boleh Dilakukan
### ✅ Lakukan
- Gunakan aubergine `#4A154B` untuk sidebar — ini adalah elemen UI paling ikonik Slack
- Jaga area konten utama tetap putih dan terang
- Gunakan `#1D1C1D` (hampir hitam) untuk semua teks konten, bukan hitam murni
- Tebalkan nama saluran untuk menunjukkan status belum dibaca — bobot adalah indikatornya
- Gunakan empat warna aksen hanya untuk peran semantik (sukses, peringatan, bahaya, informasi)
- Terapkan `border-left: 4px` pada lampiran pesan dan embed
- Tampilkan cap waktu hanya saat hover
- Gunakan `#1264A3` untuk tautan dan status fokus
- Jaga item sidebar tetap ringkas: tinggi 28px, border-radius 6px
### ❌ Jangan
- Jangan gunakan area konten utama yang gelap — Slack mengutamakan terang
- Jangan menyebarkan biru/hijau/kuning/merah sebagai aksen dekoratif
- Jangan gunakan hitam murni `#000000` untuk teks
- Jangan gunakan balon percakapan — pesan adalah baris datar
- Jangan buat tombol dengan radius besar — 4px adalah standar
- Jangan tampilkan cap waktu secara permanen
- Jangan gunakan HURUF KAPITAL untuk nama saluran
- Jangan gunakan ukuran font di bawah 12px
---
## 8. Perilaku Responsif
### Titik Henti
| Titik Henti | Lebar | Tata Letak |
|---|---|---|
| Mobile | < 768px | Panel tunggal, sidebar sebagai laci kiri |
| Tablet | 768–1024px | Hanya sidebar + area pesan |
| Desktop | > 1024px | Tata letak tiga kolom penuh |
### Adaptasi Mobile
- Sidebar: laci kiri, geser kanan untuk membuka
- Tab bar bawah: Beranda, DM, Aktivitas, Anda
- Panel utas: overlay layar penuh
- Komposer: disematkan di atas keyboard
- Item daftar saluran: tinggi area sentuh 44px
- Header aubergine atas dipertahankan di mobile
---
## 9. Panduan Prompt Agent
Saat membuat desain bergaya Slack, ikuti pendekatan ini:
**Penerapan warna:**
> Atur `background: #FFFFFF` sebagai kanvas utama. Gunakan `#4A154B` (aubergine) untuk sidebar. Semua teks utama adalah `#1D1C1D`. Tautan dan cincin fokus menggunakan `#1264A3`. Empat warna logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — bersifat semantik saja: informasi, sukses, peringatan, bahaya.
**Tipografi:**
> Gunakan `system-ui, -apple-system, sans-serif` untuk semua UI. Ukuran dasar adalah 15px. Saluran belum dibaca: bobot 700. Teks konten: bobot 400. Cap waktu: 12px `#616061`, hanya saat hover. Kode: `Monaco, Menlo, monospace`, 12px, latar belakang `#F8F8F8`.
**Tata letak:**
> Tiga kolom: sidebar aubergine 240px + area pesan putih fleksibel + panel utas 400px opsional. Item sidebar: tinggi 28px, radius 6px, tebal saat belum dibaca. Komposer: disematkan di bawah, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Komponen:**
> Tombol: radius 4px, tinggi 36px, aubergine sebagai utama. Input: batas `1px solid #DDDDDD`, cincin fokus `#1264A3`. Baris pesan: datar, tanpa balon, avatar lingkaran 36px. Reaksi: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Nada:**
> Slack hangat, profesional, dan manusiawi. Status kosong menggunakan ilustrasi yang ramah. CTA langsung: "Kirim pesan", "Mulai". Pesan kesalahan jelas dan membantu. Tidak pernah mengkhawatirkan.
**Anti-pola yang harus dihindari:**
> Tidak ada area konten gelap. Tidak ada balon percakapan. Tidak ada teks hitam murni. Tidak ada aksen multi-warna yang tersebar. Tidak ada nama saluran dengan HURUF KAPITAL. Tidak ada font di bawah 12px. Tidak ada radius tombol yang besar.
open-design/design-systems/slack/DESIGN-it.md
+363
View File
@@ -0,0 +1,363 @@
# Sistema di design ispirato a Slack
> Category: Produttività e SaaS
> Piattaforma di comunicazione aziendale. Palette primaria melanzana, palette multi-accento del logo, superfici chiare con barra laterale scura, tono caldo e accessibile.
## 1. Tema visivo e atmosfera
L'identità di Slack si costruisce attorno all'idea che il lavoro debba sembrare umano e persino un po' divertente. La superficie canonica è **chiara** — aree di contenuto bianche con una profonda barra laterale melanzana (`#4A154B`) — l'opposto degli strumenti a dominante scura. Questo contrasto è intenzionale: la barra laterale è un'ancora di navigazione tranquilla e sempre presente, mentre l'area del contenuto è luminosa e aperta.
La palette del logo — blu, verde, giallo, rosso — appare principalmente nell'icona del cancelletto e nei contesti di marketing, non disseminata nell'interfaccia. Nel prodotto stesso, Slack utilizza un sistema di colori sobrio e professionale con il melanzana come unico ancoraggio del brand.
**Caratteristiche principali:**
- Superfici di contenuto prevalentemente chiare: bianco `#FFFFFF` e quasi bianco `#F8F8F8`
- Profonda barra laterale melanzana `#4A154B` — l'elemento di interfaccia più riconoscibile del brand
- Quattro colori di accento del logo (blu, verde, giallo, rosso) usati con parsimonia, solo come evidenziazioni
- Larsseit per i titoli (marketing), sans-serif di sistema per l'interfaccia
- Arrotondato ma non cartoonesco: raggio di 4–8px sulla maggior parte dei componenti
- Denso ma respirabile: righe di messaggi compatte con chiara gerarchia dei thread
- Tono caldo e conversazionale — emoji, reazioni e illustrazioni sono elementi di prima classe
---
## 2. Palette di colori e ruoli
### Colore primario del brand
| Token | Hex | Ruolo |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Sfondo della barra laterale, colore principale del brand |
| `--color-aubergine-dark` | `#350d36` | Stati di hover su superfici melanzana |
| `--color-aubergine-light` | `#611f69` | Evidenziazione dell'elemento attivo nella barra laterale |
### Colori di accento del logo (usare con parsimonia — solo evidenziazioni, icone, marketing)
| Token | Hex | Nome | Ruolo |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Azzurro cielo | Icone di canale, link, stati informativi |
| `--color-green` | `#2EB67D` | Verde acqua | Stato online, stati di successo |
| `--color-yellow` | `#ECB22E` | Oro | Stato assente, avvisi, evidenziazioni |
| `--color-red` | `#E01E5A` | Rubino | Notifiche, errori, badge menzioni |
### Superficie e sfondo
| Token | Hex | Ruolo |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Area principale dei messaggi, modali |
| `--bg-secondary` | `#F8F8F8` | Pannelli dei thread, superfici secondarie |
| `--bg-tertiary` | `#F1F1F1` | Sfondi dei campi di input, stati di hover |
| `--bg-sidebar` | `#4A154B` | Barra laterale sinistra (melanzana) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover su elemento della barra laterale |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Elemento attivo della barra laterale |
| `--bg-message-hover` | `#F8F8F8` | Hover su riga del messaggio |
### Colori del testo
| Token | Hex | Ruolo |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Testo principale del corpo (quasi nero) |
| `--text-secondary` | `#616061` | Timestamp, etichette attenuate |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nomi dei canali nella barra laterale |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Elementi inattivi della barra laterale |
| `--text-link` | `#1264A3` | Link in linea nei messaggi |
| `--text-mention` | `#1264A3` | Colore del testo delle @menzioni |
### Colori semantici
| Token | Hex | Ruolo |
|---|---|---|
| `--color-success` | `#2EB67D` | Notifiche di successo, stati positivi |
| `--color-warning` | `#ECB22E` | Stati di avviso |
| `--color-danger` | `#E01E5A` | Stati di errore, azioni distruttive |
| `--color-info` | `#36C5F0` | Evidenziazioni informative |
### Bordo e divisore
| Token | Hex | Ruolo |
|---|---|---|
| `--border-default` | `#DDDDDD` | Divisori standard, bordi delle schede |
| `--border-subtle` | `#F1F1F1` | Separatori sottili tra le righe |
| `--border-focus` | `#1264A3` | Colore dell'anello di focus |
---
## 3. Regole tipografiche
### Caratteri tipografici
| Ruolo | Ufficiale | Alternativa web |
|---|---|---|
| Titoli di visualizzazione / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Interfaccia / Corpo / Chrome | Slack Lato (personalizzato) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Codice / Monospaziato | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack usa **Larsseit** per i titoli di marketing e una variante personalizzata di Lato per l'interfaccia del prodotto. Per l'uso web, `system-ui` è l'alternativa più sicura.
### Scala tipografica
| Livello | Dimensione | Peso | Altezza di riga | Spaziatura lettere | Utilizzo |
|---|---|---|---|---|---|
| Visualizzazione XL | 48px | 800 | 1.1 | -1px | Titoli hero di marketing |
| Visualizzazione L | 36px | 700 | 1.15 | -0.5px | Hero di sezione |
| Titolo 1 | 28px | 700 | 1.25 | normal | Titoli di modali, intestazioni di pagina |
| Titolo 2 | 22px | 700 | 1.3 | normal | Titoli di schede, sezioni delle impostazioni |
| Titolo 3 | 18px | 700 | 1.35 | normal | Intestazioni di sottosezione |
| Corpo L | 16px | 400 | 1.5 | normal | Testo dei messaggi, descrizioni |
| Corpo | 15px | 400 | 1.46667 | normal | Testo di interfaccia predefinito (dimensione base di Slack) |
| Corpo SM | 13px | 400 | 1.38462 | normal | Metadati secondari |
| Didascalia | 12px | 400 | 1.33 | normal | Timestamp, suggerimenti |
| Codice | 12px | 400 | 1.5 | normal | Codice in linea, blocchi di codice |
### Regole tipografiche
- La dimensione di corpo base di Slack è **15px** — leggermente inferiore a 16px per maggiore densità
- Canali non letti: peso 700 — il grassetto è il principale indicatore di non letto
- Timestamp: 12px `--text-secondary`, mostrati solo al passaggio del cursore
- Blocchi di codice: sfondo `#F8F8F8`, bordo `1px solid #DDDDDD`, border-radius 4px
- Non usare mai dimensioni di font inferiori a 12px
- Titoli di marketing: spaziatura lettere `-1px` per le grandi dimensioni di visualizzazione
---
## 4. Stili dei componenti
### Pulsanti
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Campi di input
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Elemento di canale nella barra laterale
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Badge messaggi non letti
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Allegati messaggi / Schede
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reazioni
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Principi di layout
### Layout a tre colonne
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Sistema di spaziatura (base 4px)
| Token | Valore | Utilizzo |
|---|---|---|
| `--space-1` | 4px | Spazi ridotti |
| `--space-2` | 8px | Padding del componente |
| `--space-3` | 12px | Padding dei campi di input |
| `--space-4` | 16px | Padding standard |
| `--space-6` | 24px | Padding delle schede |
| `--space-8` | 32px | Spazi tra sezioni |
### Struttura della barra laterale
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Compositore di messaggi
- Fissato in fondo all'area dei messaggi
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Barra degli strumenti: emoji, allegato, formato, pulsante di invio
---
## 6. Profondità ed elevazione
Slack usa ombre leggere su una superficie chiara:
| Livello | Utilizzo | Ombra |
|---|---|---|
| Piatto | Righe dei messaggi, elementi della barra laterale | none |
| Basso | Schede, campi di input | `0 1px 3px rgba(0,0,0,0.08)` |
| Medio | Menu a discesa, popover | `0 4px 12px rgba(0,0,0,0.12)` |
| Alto | Modali, finestre di dialogo | `0 8px 24px rgba(0,0,0,0.15)` |
| Sovrapposizione | Sfondi delle modali | `rgba(0,0,0,0.5)` |
---
## 7. Cosa fare e cosa non fare
### ✅ Fare
- Usare il melanzana `#4A154B` per la barra laterale — è l'elemento di interfaccia più iconico di Slack
- Mantenere l'area di contenuto principale bianca e chiara
- Usare `#1D1C1D` (quasi nero) per tutto il testo del corpo, non il nero puro
- Mettere in grassetto i nomi dei canali per indicare lo stato non letto — il peso è l'indicatore
- Usare i quattro colori di accento solo per ruoli semantici (successo, avviso, pericolo, informazione)
- Applicare `border-left: 4px` agli allegati e alle incorporazioni dei messaggi
- Mostrare i timestamp solo al passaggio del cursore
- Usare `#1264A3` per link e stati di focus
- Mantenere gli elementi della barra laterale compatti: altezza 28px, border-radius 6px
### ❌ Non fare
- Non usare un'area di contenuto principale scura — Slack è prevalentemente chiaro
- Non disseminare blu/verde/giallo/rosso come accenti decorativi
- Non usare il nero puro `#000000` per il testo
- Non usare fumetti — i messaggi sono righe piatte
- Non fare pulsanti con raggio grande — 4px è lo standard
- Non mostrare i timestamp in modo permanente
- Non usare MAIUSCOLO per i nomi dei canali
- Non usare dimensioni di font inferiori a 12px
---
## 8. Comportamento responsivo
### Breakpoint
| Breakpoint | Larghezza | Layout |
|---|---|---|
| Mobile | < 768px | Pannello singolo, barra laterale come cassetto sinistro |
| Tablet | 768–1024px | Solo barra laterale + area messaggi |
| Desktop | > 1024px | Layout completo a tre colonne |
### Adattamenti per mobile
- Barra laterale: cassetto sinistro, scorrere a destra per aprire
- Barra delle schede inferiore: Home, MD, Attività, Tu
- Pannello thread: sovrapposizione a schermo intero
- Compositore: fissato sopra la tastiera
- Elementi dell'elenco canali: altezza del target di tocco 44px
- Barra dell'intestazione melanzana superiore mantenuta su mobile
---
## 9. Guida ai prompt per agente
Quando si generano design in stile Slack, seguire questo approccio:
**Applicazione dei colori:**
> Impostare `background: #FFFFFF` come tela principale. Usare `#4A154B` (melanzana) per la barra laterale. Tutto il testo principale è `#1D1C1D`. Link e anelli di focus usano `#1264A3`. I quattro colori del logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — sono esclusivamente semantici: informazione, successo, avviso, pericolo.
**Tipografia:**
> Usare `system-ui, -apple-system, sans-serif` per tutta l'interfaccia. La dimensione base è 15px. Canali non letti: peso 700. Testo del corpo: peso 400. Timestamp: 12px `#616061`, solo al passaggio del cursore. Codice: `Monaco, Menlo, monospace`, 12px, sfondo `#F8F8F8`.
**Layout:**
> Tre colonne: barra laterale melanzana da 240px + area messaggi bianca flessibile + pannello thread opzionale da 400px. Elementi della barra laterale: altezza 28px, raggio 6px, grassetto quando non letti. Compositore: fissato in basso, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Componenti:**
> Pulsanti: raggio 4px, altezza 36px, melanzana primario. Campi di input: bordo `1px solid #DDDDDD`, anello di focus `#1264A3`. Righe dei messaggi: piatte, senza fumetti, avatar circolare da 36px. Reazioni: pillola `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Tono:**
> Slack è caldo, professionale e umano. Gli stati vuoti usano illustrazioni amichevoli. Le chiamate all'azione sono dirette: «Invia messaggio», «Inizia». I messaggi di errore sono chiari e utili. Mai allarmante.
**Antipattern da evitare:**
> Nessuna area di contenuto scura. Nessun fumetto. Nessun testo nero puro. Nessun accento multicolore disseminato. Nessun nome di canale in MAIUSCOLO. Nessun font inferiore a 12px. Nessun raggio di pulsante grande.
open-design/design-systems/slack/DESIGN-ja.md
+363
View File
@@ -0,0 +1,363 @@
# Slack に着想を得たデザインシステム
> Category: 生産性・SaaS
> 職場向けコミュニケーションプラットフォーム。深いオーベルジーヌを主色に、マルチアクセントのロゴパレット、ダークサイドバーを組み合わせた明るいサーフェス。温かみがあり親しみやすい。
## 1. ビジュアルテーマと雰囲気
Slack のアイデンティティは、「仕事は人間らしく、少し楽しくあるべきだ」というコンセプトに基づいています。標準的なサーフェスは**明るい**——白いコンテンツエリアに深いオーベルジーヌ（`#4A154B`）のサイドバー——ダーク優先のツールとは対照的です。このコントラストは意図的なもので、サイドバーは落ち着いた常設のナビゲーションアンカーであり、コンテンツエリアは明るく開放的です。
ロゴパレット——青、緑、黄、赤——は主にハッシュタグアイコンやマーケティングの文脈で使用され、UI 全体に散りばめられてはいません。製品内では、Slack はオーベルジーヌを唯一のブランドアンカーとして使用する、節制された専門的なカラーシステムを採用しています。
**主な特徴：**
- 明るさ優先のコンテンツサーフェス：ホワイト `#FFFFFF` とニアホワイト `#F8F8F8`
- 深いオーベルジーヌ `#4A154B` のサイドバー——ブランドで最も象徴的な UI 要素
- 4 つのロゴアクセントカラー（青、緑、黄、赤）はハイライトのみに少量使用
- 見出しに Larsseit（マーケティング）、UI にはシステムサンセリフ
- 丸みはあるがカートゥーン調ではない：ほとんどのコンポーネントで 4〜8px の角丸
- 密度があり息づかいのある：コンパクトなメッセージ行と明確なスレッド階層
- 温かく会話的なトーン——絵文字、リアクション、イラストはファーストクラス
---
## 2. カラーパレットと役割
### ブランドプライマリ
| トークン | Hex | 役割 |
|---|---|---|
| `--color-aubergine` | `#4A154B` | サイドバー背景、ブランドプライマリカラー |
| `--color-aubergine-dark` | `#350d36` | オーベルジーヌサーフェスのホバー状態 |
| `--color-aubergine-light` | `#611f69` | サイドバーのアクティブアイテムハイライト |
### ロゴアクセントカラー（少量使用——ハイライト、アイコン、マーケティングのみ）
| トークン | Hex | 名前 | 役割 |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | スカイブルー | チャンネルアイコン、リンク、情報状態 |
| `--color-green` | `#2EB67D` | ティールグリーン | オンラインステータス、成功状態 |
| `--color-yellow` | `#ECB22E` | ゴールド | 離席ステータス、警告、ハイライト |
| `--color-red` | `#E01E5A` | ルビー | 通知、エラー、メンションバッジ |
### サーフェスと背景
| トークン | Hex | 役割 |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | メインメッセージエリア、モーダル |
| `--bg-secondary` | `#F8F8F8` | スレッドパネル、セカンダリサーフェス |
| `--bg-tertiary` | `#F1F1F1` | 入力欄の背景、ホバー状態 |
| `--bg-sidebar` | `#4A154B` | 左サイドバー（オーベルジーヌ） |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | サイドバーアイテムのホバー |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | アクティブなサイドバーアイテム |
| `--bg-message-hover` | `#F8F8F8` | メッセージ行のホバー |
### テキストカラー
| トークン | Hex | 役割 |
|---|---|---|
| `--text-primary` | `#1D1C1D` | メインボディテキスト（ニアブラック） |
| `--text-secondary` | `#616061` | タイムスタンプ、ミュートラベル |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | サイドバーのチャンネル名 |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | サイドバーの非アクティブアイテム |
| `--text-link` | `#1264A3` | メッセージ内のインラインリンク |
| `--text-mention` | `#1264A3` | @メンションのテキストカラー |
### セマンティックカラー
| トークン | Hex | 役割 |
|---|---|---|
| `--color-success` | `#2EB67D` | 成功トースト、ポジティブな状態 |
| `--color-warning` | `#ECB22E` | 警告状態 |
| `--color-danger` | `#E01E5A` | エラー状態、破壊的なアクション |
| `--color-info` | `#36C5F0` | 情報ハイライト |
### ボーダーと区切り線
| トークン | Hex | 役割 |
|---|---|---|
| `--border-default` | `#DDDDDD` | 標準の区切り線、カードボーダー |
| `--border-subtle` | `#F1F1F1` | 行間の微妙なセパレーター |
| `--border-focus` | `#1264A3` | フォーカスリングのカラー |
---
## 3. タイポグラフィルール
### 書体
| 役割 | 公式 | ウェブフォールバック |
|---|---|---|
| ディスプレイ / マーケティング見出し | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / ボディ / クローム | Slack Lato（カスタム） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| コード / 等幅 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack はマーケティングの見出しに **Larsseit** を使用し、製品内 UI にはカスタム Lato バリアントを使用しています。ウェブでの使用には、`system-ui` が最も安全なフォールバックです。
### タイプスケール
| レベル | サイズ | ウェイト | 行高 | 字間 | 用途 |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | マーケティングのヒーロー見出し |
| Display L | 36px | 700 | 1.15 | -0.5px | セクションヒーロー |
| Heading 1 | 28px | 700 | 1.25 | normal | モーダルタイトル、ページヘッダー |
| Heading 2 | 22px | 700 | 1.3 | normal | カードタイトル、設定セクション |
| Heading 3 | 18px | 700 | 1.35 | normal | サブセクションヘッダー |
| Body L | 16px | 400 | 1.5 | normal | メッセージテキスト、説明 |
| Body | 15px | 400 | 1.46667 | normal | デフォルト UI テキスト（Slack の基本サイズ） |
| Body SM | 13px | 400 | 1.38462 | normal | セカンダリメタデータ |
| Caption | 12px | 400 | 1.33 | normal | タイムスタンプ、ヒント |
| Code | 12px | 400 | 1.5 | normal | インラインコード、コードブロック |
### タイポグラフィルール
- Slack の基本ボディサイズは **15px**——密度を高めるため 16px より若干小さい
- 未読チャンネル：ウェイト 700——太字が主な未読インジケーター
- タイムスタンプ：12px `--text-secondary`、ホバー時のみ表示
- コードブロック：背景 `#F8F8F8`、ボーダー `1px solid #DDDDDD`、角丸 4px
- フォントサイズを 12px 未満にしない
- マーケティング見出し：大きなディスプレイサイズには字間 `-1px`
---
## 4. コンポーネントスタイル
### ボタン
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### 入力フィールド
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### サイドバーチャンネルアイテム
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### 未読バッジ
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### メッセージ添付ファイル / カード
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### リアクション
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. レイアウト原則
### 3 カラムレイアウト
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### スペーシングシステム（ベースは 4px）
| トークン | 値 | 用途 |
|---|---|---|
| `--space-1` | 4px | タイトなギャップ |
| `--space-2` | 8px | コンポーネントパディング |
| `--space-3` | 12px | 入力パディング |
| `--space-4` | 16px | 標準パディング |
| `--space-6` | 24px | カードパディング |
| `--space-8` | 32px | セクションギャップ |
### サイドバー構造
```
[ワークスペース名 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### メッセージコンポーザー
- メッセージエリアの底部に固定
- `border: 1px solid #DDDDDD`、`border-radius: 8px`、`margin: 0 16px 16px`
- ツールバー：絵文字、添付、書式設定、送信ボタン
---
## 6. 深度とエレベーション
Slack は明るいサーフェスに軽いシャドウを使用しています：
| レベル | 用途 | シャドウ |
|---|---|---|
| フラット | メッセージ行、サイドバーアイテム | none |
| 低 | カード、入力欄 | `0 1px 3px rgba(0,0,0,0.08)` |
| 中 | ドロップダウン、ポップオーバー | `0 4px 12px rgba(0,0,0,0.12)` |
| 高 | モーダル、ダイアログ | `0 8px 24px rgba(0,0,0,0.15)` |
| オーバーレイ | モーダルバックドロップ | `rgba(0,0,0,0.5)` |
---
## 7. すべきこととすべきでないこと
### ✅ すべきこと
- サイドバーにオーベルジーヌ `#4A154B` を使用する——Slack 最も象徴的な UI 要素
- メインコンテンツエリアを白く明るく保つ
- すべてのボディテキストに `#1D1C1D`（ニアブラック）を使用し、純粋な黒は避ける
- チャンネル名を太字にして未読状態を示す——ウェイトがインジケーター
- 4 つのアクセントカラーはセマンティックな役割（成功、警告、危険、情報）のみに使用
- メッセージの添付ファイルと埋め込みに `border-left: 4px` を適用
- タイムスタンプはホバー時のみ表示
- リンクとフォーカス状態に `#1264A3` を使用
- サイドバーアイテムをコンパクトに保つ：高さ 28px、角丸 6px
### ❌ すべきでないこと
- メインコンテンツエリアをダークにしない——Slack は明るさ優先
- 青/緑/黄/赤を装飾的なアクセントとして散りばめない
- テキストに純粋な黒 `#000000` を使用しない
- 吹き出しを使用しない——メッセージはフラットな行
- ボタンを大きな角丸にしない——4px が標準
- タイムスタンプを常時表示しない
- チャンネル名をすべて大文字にしない
- フォントサイズを 12px 未満にしない
---
## 8. レスポンシブ動作
### ブレークポイント
| ブレークポイント | 幅 | レイアウト |
|---|---|---|
| モバイル | < 768px | シングルパネル、サイドバーは左ドロワー |
| タブレット | 768–1024px | サイドバー + メッセージエリアのみ |
| デスクトップ | > 1024px | フルの 3 カラムレイアウト |
### モバイルアダプテーション
- サイドバー：左ドロワー、右スワイプで開く
- ボトムタブバー：ホーム、DM、アクティビティ、プロフィール
- スレッドパネル：フルスクリーンオーバーレイ
- コンポーザー：キーボードの上に固定
- チャンネルリストアイテム：44px のタッチターゲット高さ
- モバイルでもオーベルジーヌのトップヘッダーバーを維持
---
## 9. Agent プロンプトガイド
Slack スタイルのデザインを生成する際は、以下のアプローチに従ってください：
**カラーの適用：**
> メインキャンバスとして `background: #FFFFFF` を設定します。サイドバーには `#4A154B`（オーベルジーヌ）を使用します。すべてのプライマリテキストは `#1D1C1D` です。リンクとフォーカスリングは `#1264A3` を使用します。4 つのロゴカラー——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——はセマンティック専用：情報、成功、警告、危険。
**タイポグラフィ：**
> すべての UI に `system-ui, -apple-system, sans-serif` を使用します。ベースサイズは 15px です。未読チャンネル：ウェイト 700。ボディテキスト：ウェイト 400。タイムスタンプ：12px `#616061`、ホバー時のみ。コード：`Monaco, Menlo, monospace`、12px、背景 `#F8F8F8`。
**レイアウト：**
> 3 カラム：240px のオーベルジーヌサイドバー + フレキシブルな白いメッセージエリア + オプションの 400px スレッドパネル。サイドバーアイテム：高さ 28px、角丸 6px、未読時は太字。コンポーザー：底部固定、`border: 1px solid #DDDDDD`、`border-radius: 8px`。
**コンポーネント：**
> ボタン：角丸 4px、高さ 36px、オーベルジーヌプライマリ。入力欄：`1px solid #DDDDDD` ボーダー、`#1264A3` フォーカスリング。メッセージ行：フラット、吹き出しなし、36px の円形アバター。リアクション：ピル形 `border: 1px solid #DDDDDD`、`border-radius: 24px`。
**トーン：**
> Slack は温かく、プロフェッショナルで、人間らしいです。空の状態にはフレンドリーなイラストを使用します。CTA は直接的：「Send message」、「Get started」。エラーメッセージは明確で助けになります。決して不安をあおらない。
**避けるべきアンチパターン：**
> ダークなコンテンツエリア禁止。吹き出し禁止。純粋な黒のテキスト禁止。散乱したマルチカラーアクセント禁止。チャンネル名の全大文字禁止。12px 未満のフォント禁止。大きな角丸ボタン禁止。
open-design/design-systems/slack/DESIGN-ko.md
+363
View File
@@ -0,0 +1,363 @@
# Slack에서 영감받은 디자인 시스템
> Category: 생산성 및 SaaS
> 직장 커뮤니케이션 플랫폼. 오베르진을 주색으로, 다중 액센트 로고 팔레트, 다크 사이드바와 결합된 밝은 서피스. 따뜻하고 친근한 느낌.
## 1. 비주얼 테마와 분위기
Slack의 정체성은 '업무는 인간적이고 약간 재미있어야 한다'는 아이디어를 중심으로 구축되어 있습니다. 기본 서피스는 **밝은** 형태입니다——흰색 콘텐츠 영역과 깊은 오베르진(`#4A154B`) 사이드바——어두운 색 우선 도구와 정반대입니다. 이 대비는 의도적입니다: 사이드바는 차분하고 항상 존재하는 내비게이션 앵커이며, 콘텐츠 영역은 밝고 열려 있습니다.
로고 팔레트——파란색, 초록색, 노란색, 빨간색——는 주로 해시태그 아이콘과 마케팅 맥락에서 사용되며, UI 전체에 흩어져 있지 않습니다. 제품 자체에서 Slack은 오베르진을 유일한 브랜드 앵커로 사용하는 절제되고 전문적인 색상 시스템을 사용합니다.
**주요 특징:**
- 밝은 콘텐츠 서피스 우선: 흰색 `#FFFFFF`와 거의 흰색 `#F8F8F8`
- 깊은 오베르진 `#4A154B` 사이드바——브랜드에서 가장 인식하기 쉬운 UI 요소
- 4가지 로고 액센트 컬러(파란색, 초록색, 노란색, 빨간색)는 하이라이트로만 아껴 사용
- 제목에 Larsseit(마케팅), UI에는 시스템 산세리프
- 둥글지만 만화 같지 않음: 대부분의 컴포넌트에 4–8px 반경
- 촘촘하지만 숨 쉬는 느낌: 컴팩트한 메시지 행과 명확한 스레드 계층 구조
- 따뜻하고 대화적인 톤——이모지, 반응, 일러스트가 일급 시민
---
## 2. 색상 팔레트와 역할
### 브랜드 프라이머리
| 토큰 | Hex | 역할 |
|---|---|---|
| `--color-aubergine` | `#4A154B` | 사이드바 배경, 브랜드 주색 |
| `--color-aubergine-dark` | `#350d36` | 오베르진 서피스의 호버 상태 |
| `--color-aubergine-light` | `#611f69` | 사이드바 활성 항목 하이라이트 |
### 로고 액센트 컬러(아껴 사용——하이라이트, 아이콘, 마케팅에만)
| 토큰 | Hex | 이름 | 역할 |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | 스카이 블루 | 채널 아이콘, 링크, 정보 상태 |
| `--color-green` | `#2EB67D` | 틸 그린 | 온라인 상태, 성공 상태 |
| `--color-yellow` | `#ECB22E` | 골드 | 자리 비움 상태, 경고, 하이라이트 |
| `--color-red` | `#E01E5A` | 루비 | 알림, 오류, 멘션 뱃지 |
### 서피스 및 배경
| 토큰 | Hex | 역할 |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | 메인 메시지 영역, 모달 |
| `--bg-secondary` | `#F8F8F8` | 스레드 패널, 보조 서피스 |
| `--bg-tertiary` | `#F1F1F1` | 입력 배경, 호버 상태 |
| `--bg-sidebar` | `#4A154B` | 왼쪽 사이드바(오베르진) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 사이드바 항목 호버 |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 활성 사이드바 항목 |
| `--bg-message-hover` | `#F8F8F8` | 메시지 행 호버 |
### 텍스트 컬러
| 토큰 | Hex | 역할 |
|---|---|---|
| `--text-primary` | `#1D1C1D` | 주요 본문 텍스트(거의 검정) |
| `--text-secondary` | `#616061` | 타임스탬프, 음소거 레이블 |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | 사이드바 채널 이름 |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 사이드바 비활성 항목 |
| `--text-link` | `#1264A3` | 메시지 내 인라인 링크 |
| `--text-mention` | `#1264A3` | @멘션 텍스트 컬러 |
### 시맨틱 컬러
| 토큰 | Hex | 역할 |
|---|---|---|
| `--color-success` | `#2EB67D` | 성공 토스트, 긍정적 상태 |
| `--color-warning` | `#ECB22E` | 경고 상태 |
| `--color-danger` | `#E01E5A` | 오류 상태, 파괴적 동작 |
| `--color-info` | `#36C5F0` | 정보 하이라이트 |
### 테두리 및 구분선
| 토큰 | Hex | 역할 |
|---|---|---|
| `--border-default` | `#DDDDDD` | 표준 구분선, 카드 테두리 |
| `--border-subtle` | `#F1F1F1` | 행 사이의 미묘한 구분선 |
| `--border-focus` | `#1264A3` | 포커스 링 컬러 |
---
## 3. 타이포그래피 규칙
### 서체
| 역할 | 공식 | 웹 폴백 |
|---|---|---|
| 디스플레이 / 마케팅 제목 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / 본문 / 크롬 | Slack Lato(커스텀) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| 코드 / 모노스페이스 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack은 마케팅 헤드라인에 **Larsseit**를, 제품 내 UI에는 커스텀 Lato 변형을 사용합니다. 웹 사용에는 `system-ui`가 가장 안전한 폴백입니다.
### 타입 스케일
| 레벨 | 크기 | 두께 | 행간 | 자간 | 용도 |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | 마케팅 히어로 헤드라인 |
| Display L | 36px | 700 | 1.15 | -0.5px | 섹션 히어로 |
| Heading 1 | 28px | 700 | 1.25 | normal | 모달 제목, 페이지 헤더 |
| Heading 2 | 22px | 700 | 1.3 | normal | 카드 제목, 설정 섹션 |
| Heading 3 | 18px | 700 | 1.35 | normal | 서브섹션 헤더 |
| Body L | 16px | 400 | 1.5 | normal | 메시지 텍스트, 설명 |
| Body | 15px | 400 | 1.46667 | normal | 기본 UI 텍스트(Slack의 기본 크기) |
| Body SM | 13px | 400 | 1.38462 | normal | 보조 메타데이터 |
| Caption | 12px | 400 | 1.33 | normal | 타임스탬프, 힌트 |
| Code | 12px | 400 | 1.5 | normal | 인라인 코드, 코드 블록 |
### 타이포그래피 규칙
- Slack의 기본 본문 크기는 **15px**——밀도를 위해 16px보다 약간 작음
- 읽지 않은 채널: 두께 700——볼드체가 주요 읽지 않음 표시기
- 타임스탬프: 12px `--text-secondary`, 호버 시에만 표시
- 코드 블록: 배경 `#F8F8F8`, 테두리 `1px solid #DDDDDD`, 반경 4px
- 폰트 크기 12px 미만 사용 금지
- 마케팅 제목: 큰 디스플레이 크기에 자간 `-1px`
---
## 4. 컴포넌트 스타일
### 버튼
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### 입력 필드
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### 사이드바 채널 항목
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### 읽지 않음 뱃지
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### 메시지 첨부 파일 / 카드
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### 반응
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. 레이아웃 원칙
### 3단 레이아웃
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### 간격 시스템(4px 기준)
| 토큰 | 값 | 용도 |
|---|---|---|
| `--space-1` | 4px | 좁은 간격 |
| `--space-2` | 8px | 컴포넌트 패딩 |
| `--space-3` | 12px | 입력 패딩 |
| `--space-4` | 16px | 표준 패딩 |
| `--space-6` | 24px | 카드 패딩 |
| `--space-8` | 32px | 섹션 간격 |
### 사이드바 구조
```
[워크스페이스 이름 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### 메시지 컴포저
- 메시지 영역 하단에 고정
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- 툴바: 이모지, 첨부, 서식, 전송 버튼
---
## 6. 깊이와 엘리베이션
Slack은 밝은 서피스에 가벼운 그림자를 사용합니다:
| 레벨 | 용도 | 그림자 |
|---|---|---|
| 플랫 | 메시지 행, 사이드바 항목 | none |
| 낮음 | 카드, 입력 | `0 1px 3px rgba(0,0,0,0.08)` |
| 중간 | 드롭다운, 팝오버 | `0 4px 12px rgba(0,0,0,0.12)` |
| 높음 | 모달, 다이얼로그 | `0 8px 24px rgba(0,0,0,0.15)` |
| 오버레이 | 모달 백드롭 | `rgba(0,0,0,0.5)` |
---
## 7. 해야 할 것과 하지 말아야 할 것
### ✅ 해야 할 것
- 사이드바에 오베르진 `#4A154B` 사용——Slack의 가장 상징적인 UI 요소
- 메인 콘텐츠 영역을 흰색으로 밝게 유지
- 모든 본문 텍스트에 `#1D1C1D`(거의 검정) 사용, 순수 검정 사용 금지
- 채널 이름을 볼드체로 표시하여 읽지 않음 상태 표시——두께가 표시기
- 4가지 액센트 컬러는 시맨틱 역할(성공, 경고, 위험, 정보)에만 사용
- 메시지 첨부 파일과 임베드에 `border-left: 4px` 적용
- 타임스탬프는 호버 시에만 표시
- 링크와 포커스 상태에 `#1264A3` 사용
- 사이드바 항목을 컴팩트하게 유지: 높이 28px, 반경 6px
### ❌ 하지 말아야 할 것
- 메인 콘텐츠 영역을 어둡게 하지 않기——Slack은 밝은 색 우선
- 파란색/초록색/노란색/빨간색을 장식적 액센트로 흩뿌리지 않기
- 텍스트에 순수 검정 `#000000` 사용 금지
- 말풍선 사용 금지——메시지는 플랫한 행
- 버튼에 큰 반경 사용 금지——4px가 표준
- 타임스탬프를 영구적으로 표시하지 않기
- 채널 이름을 전부 대문자로 쓰지 않기
- 폰트 크기 12px 미만 사용 금지
---
## 8. 반응형 동작
### 브레이크포인트
| 브레이크포인트 | 너비 | 레이아웃 |
|---|---|---|
| 모바일 | < 768px | 단일 패널, 사이드바는 왼쪽 드로어 |
| 태블릿 | 768–1024px | 사이드바 + 메시지 영역만 |
| 데스크톱 | > 1024px | 전체 3단 레이아웃 |
### 모바일 적응
- 사이드바: 왼쪽 드로어, 오른쪽으로 스와이프하여 열기
- 하단 탭 바: 홈, DM, 활동, 나
- 스레드 패널: 전체 화면 오버레이
- 컴포저: 키보드 위에 고정
- 채널 목록 항목: 44px 터치 타겟 높이
- 모바일에서도 오베르진 상단 헤더 바 유지
---
## 9. Agent 프롬프트 가이드
Slack 스타일 디자인을 생성할 때 다음 접근 방식을 따르세요:
**색상 적용:**
> 메인 캔버스로 `background: #FFFFFF`를 설정합니다. 사이드바에는 `#4A154B`(오베르진)를 사용합니다. 모든 주요 텍스트는 `#1D1C1D`입니다. 링크와 포커스 링은 `#1264A3`을 사용합니다. 4가지 로고 컬러——`#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A`——는 시맨틱 전용: 정보, 성공, 경고, 위험.
**타이포그래피:**
> 모든 UI에 `system-ui, -apple-system, sans-serif`를 사용합니다. 기본 크기는 15px입니다. 읽지 않은 채널: 두께 700. 본문 텍스트: 두께 400. 타임스탬프: 12px `#616061`, 호버 시에만. 코드: `Monaco, Menlo, monospace`, 12px, 배경 `#F8F8F8`.
**레이아웃:**
> 3단: 240px 오베르진 사이드바 + 플렉시블 흰색 메시지 영역 + 선택적 400px 스레드 패널. 사이드바 항목: 높이 28px, 반경 6px, 읽지 않았을 때 볼드. 컴포저: 하단 고정, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**컴포넌트:**
> 버튼: 반경 4px, 높이 36px, 오베르진 프라이머리. 입력: `1px solid #DDDDDD` 테두리, `#1264A3` 포커스 링. 메시지 행: 플랫, 말풍선 없음, 36px 원형 아바타. 반응: 필 형태 `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**톤:**
> Slack은 따뜻하고 전문적이며 인간적입니다. 빈 상태에는 친근한 일러스트를 사용합니다. CTA는 직접적입니다: "Send message", "Get started". 오류 메시지는 명확하고 도움이 됩니다. 절대 불안을 조성하지 않습니다.
**피해야 할 안티패턴:**
> 어두운 콘텐츠 영역 금지. 말풍선 금지. 순수 검정 텍스트 금지. 여러 색상 액센트 흩뿌리기 금지. 채널 이름 전부 대문자 금지. 12px 미만 폰트 금지. 큰 버튼 반경 금지.
open-design/design-systems/slack/DESIGN-nl.md
+363
View File
@@ -0,0 +1,363 @@
# Ontwerpsysteem Geïnspireerd door Slack
> Category: Productiviteit & SaaS
> Werkplekcommunicatieplatform. Aubergine als primaire kleur, multi-accentlogo-palet, lichte oppervlakken met donkere zijbalk, warm en toegankelijk.
## 1. Visueel Thema & Sfeer
De identiteit van Slack is gebouwd rond het idee dat werk menselijk moet aanvoelen en zelfs een beetje leuk. Het canonieke oppervlak is **licht** — witte inhoudsgebieden met een diepe aubergine (`#4A154B`) zijbalk — het tegenovergestelde van donker-eerst-tools. Dit contrast is bewust: de zijbalk is een rustig, altijd aanwezig navigatieanker, terwijl het inhoudsgebied helder en open is.
Het logopalet — blauw, groen, geel, rood — verschijnt voornamelijk in het hashtag-icoon en marketingcontexten, niet verspreid door de UI. In het product zelf gebruikt Slack een ingehouden, professioneel kleursysteem met aubergine als enige merkanker.
**Kernkenmerken:**
- Licht-eerst inhoudsoppervlakken: wit `#FFFFFF` en bijna-wit `#F8F8F8`
- Diepe aubergine `#4A154B` zijbalk — het meest herkenbare UI-element van het merk
- Vier logo-accentkleuren (blauw, groen, geel, rood) spaarzaam gebruikt als uitlichting
- Larsseit voor koppen (marketing), systeem sans-serif voor UI
- Afgerond maar niet cartoonesk: 4–8px radius op de meeste componenten
- Compact maar ademend: compacte berichtrijen met duidelijke draadhiërarchie
- Warme en conversationele toon — emoji's, reacties en illustraties zijn eersteklas elementen
---
## 2. Kleurenpalet & Rollen
### Primaire Merkkleur
| Token | Hex | Rol |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Zijbalkachtergrond, primaire merkkleur |
| `--color-aubergine-dark` | `#350d36` | Hoverstatus op aubergine-oppervlakken |
| `--color-aubergine-light` | `#611f69` | Actief item markering in zijbalk |
### Logo-accentkleuren (spaarzaam gebruiken — alleen voor uitlichting, iconen, marketing)
| Token | Hex | Naam | Rol |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Hemelsblauw | Kanaalpictogrammen, links, informatiestatussen |
| `--color-green` | `#2EB67D` | Teal groen | Online status, successtatussen |
| `--color-yellow` | `#ECB22E` | Goud | Afwezigheidsstatus, waarschuwingen, uitlichtingen |
| `--color-red` | `#E01E5A` | Robijn | Meldingen, fouten, vermeldingsbadge |
### Oppervlak & Achtergrond
| Token | Hex | Rol |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Hoofd berichtgebied, modals |
| `--bg-secondary` | `#F8F8F8` | Draadpanelen, secundaire oppervlakken |
| `--bg-tertiary` | `#F1F1F1` | Invoerachtergrondsden, hoverstatus |
| `--bg-sidebar` | `#4A154B` | Linkerzijbalk (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover zijbalkitem |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Actief zijbalkitem |
| `--bg-message-hover` | `#F8F8F8` | Hover berichtrij |
### Tekstkleuren
| Token | Hex | Rol |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Primaire inhoudstekst (bijna zwart) |
| `--text-secondary` | `#616061` | Tijdstempels, gedempte labels |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Kanaalnamen in zijbalk |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Inactieve zijbalkitems |
| `--text-link` | `#1264A3` | Inlinelinks in berichten |
| `--text-mention` | `#1264A3` | Tekstkleur @vermelding |
### Semantische Kleuren
| Token | Hex | Rol |
|---|---|---|
| `--color-success` | `#2EB67D` | Succestoasts, positieve statussen |
| `--color-warning` | `#ECB22E` | Waarschuwingsstatussen |
| `--color-danger` | `#E01E5A` | Foutstatussen, destructieve acties |
| `--color-info` | `#36C5F0` | Informatieve uitlichtingen |
### Rand & Verdeler
| Token | Hex | Rol |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standaard scheidingslijnen, kaartrandlingen |
| `--border-subtle` | `#F1F1F1` | Subtiele scheidingslijnen tussen rijen |
| `--border-focus` | `#1264A3` | Focusring kleur |
---
## 3. Typografieregels
### Lettertypen
| Rol | Officieel | Web-terugval |
|---|---|---|
| Display / Marketingkoppen | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Inhoud / Chrome | Slack Lato (aangepast) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack gebruikt **Larsseit** voor marketingkoppen en een aangepaste Lato-variant voor de UI in het product. Voor webgebruik is `system-ui` de veiligste terugval.
### Typografieschaal
| Niveau | Grootte | Gewicht | Regelhoogte | Letterafstand | Gebruik |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Marketing hero-koppen |
| Display L | 36px | 700 | 1.15 | -0.5px | Sectie-hero's |
| Kop 1 | 28px | 700 | 1.25 | normal | Modaltitels, paginakoppen |
| Kop 2 | 22px | 700 | 1.3 | normal | Kaartitels, instellingssecties |
| Kop 3 | 18px | 700 | 1.35 | normal | Subsectiekoppen |
| Inhoud L | 16px | 400 | 1.5 | normal | Berichttekst, beschrijvingen |
| Inhoud | 15px | 400 | 1.46667 | normal | Standaard UI-tekst (basisgrootte van Slack) |
| Inhoud SM | 13px | 400 | 1.38462 | normal | Secundaire metadata |
| Bijschrift | 12px | 400 | 1.33 | normal | Tijdstempels, hints |
| Code | 12px | 400 | 1.5 | normal | Inlinecode, codeblokken |
### Typografieregels
- De basisinhoudsgrootte van Slack is **15px** — iets kleiner dan 16px voor dichtheid
- Ongelezen kanalen: gewicht 700 — vet is de primaire ongelezen indicator
- Tijdstempels: 12px `--text-secondary`, alleen weergeven bij hover
- Codeblokken: achtergrond `#F8F8F8`, rand `1px solid #DDDDDD`, border-radius 4px
- Gebruik nooit lettergroottes onder 12px
- Marketingkoppen: letter-spacing `-1px` voor grote displayformaten
---
## 4. Componentstijlen
### Knoppen
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Invoervelden
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Zijbalkkanaalitem
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Ongelezen Badge
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Berichtbijlagen / Kaarten
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reacties
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Lay-outprincipes
### Driekolomslay-out
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Zijbalk │ Berichtgebied │ Draad │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optioneel │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Ruimtesysteem (4px basis)
| Token | Waarde | Gebruik |
|---|---|---|
| `--space-1` | 4px | Nauwe tussenruimtes |
| `--space-2` | 8px | Componentopvulling |
| `--space-3` | 12px | Invoervulling |
| `--space-4` | 16px | Standaardopvulling |
| `--space-6` | 24px | Kaartopvulling |
| `--space-8` | 32px | Sectietussenruimtes |
### Zijbalkstructuur
```
[Werkruimtenaam ▼]
────────────────────
Draden
Alle DM's
Concepten & Verzonden
────────────────────
▼ Kanalen
# general
# random
# design ● (ongelezen)
────────────────────
▼ Directe berichten
John Doe
Jane Smith
```
### Berichtcomponist
- Vastgemaakt aan de onderkant van het berichtgebied
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Werkbalk: emoji, bijlage, opmaak, verzendknop
---
## 6. Diepte & Elevatie
Slack gebruikt lichte schaduwen op een licht oppervlak:
| Niveau | Gebruik | Schaduw |
|---|---|---|
| Vlak | Berichtrijen, zijbalkitems | none |
| Laag | Kaarten, invoervelden | `0 1px 3px rgba(0,0,0,0.08)` |
| Midden | Dropdowns, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Hoog | Modals, dialoogvensters | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Modalachtergronden | `rgba(0,0,0,0.5)` |
---
## 7. Aanbevelingen & Waarschuwingen
### ✅ Doe Dit
- Gebruik aubergine `#4A154B` voor de zijbalk — dit is het meest iconische UI-element van Slack
- Houd het hoofdinhoudsgebied wit en licht
- Gebruik `#1D1C1D` (bijna zwart) voor alle inhoudstekst, niet puur zwart
- Maak kanaalnamen vet om de ongelezen status te tonen — gewicht is de indicator
- Gebruik de vier accentkleuren alleen voor semantische rollen (succes, waarschuwing, gevaar, informatie)
- Pas `border-left: 4px` toe op berichtbijlagen en ingesloten elementen
- Toon tijdstempels alleen bij hover
- Gebruik `#1264A3` voor links en focusstatussen
- Houd zijbalkitems compact: 28px hoogte, 6px border-radius
### ❌ Doe Dit Niet
- Gebruik geen donker hoofdinhoudsgebied — Slack is licht-eerst
- Verspreid blauw/groen/geel/rood niet als decoratieve accenten
- Gebruik geen puur zwart `#000000` voor tekst
- Gebruik geen tekstballonnen — berichten zijn platte rijen
- Maak knoppen niet groot-radius — 4px is standaard
- Toon tijdstempels niet permanent
- Gebruik geen HOOFDLETTERS voor kanaalnamen
- Gebruik geen lettergroottes onder 12px
---
## 8. Responsief Gedrag
### Breekpunten
| Breekpunt | Breedte | Lay-out |
|---|---|---|
| Mobiel | < 768px | Enkel paneel, zijbalk als linkerpaneel |
| Tablet | 768–1024px | Alleen zijbalk + berichtgebied |
| Desktop | > 1024px | Volledige driekolomslay-out |
### Mobiele Aanpassingen
- Zijbalk: linkerpaneel, veeg naar rechts om te openen
- Onderste tabbalk: Start, DM's, Activiteit, Jij
- Draadpaneel: volledig-scherm overlay
- Componist: vastgemaakt boven toetsenbord
- Kanalenlijstitems: 44px aanraakvlak hoogte
- Aubergine bovenste headerbalk behouden op mobiel
---
## 9. Agentpromptgids
Bij het genereren van Slack-stijl ontwerpen, volg deze aanpak:
**Kleurtoepassing:**
> Stel `background: #FFFFFF` in als het hoofdcanvas. Gebruik `#4A154B` (aubergine) voor de zijbalk. Alle primaire tekst is `#1D1C1D`. Links en focusringen gebruiken `#1264A3`. De vier logokleuren — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — zijn uitsluitend semantisch: informatie, succes, waarschuwing, gevaar.
**Typografie:**
> Gebruik `system-ui, -apple-system, sans-serif` voor alle UI. Basisgrootte is 15px. Ongelezen kanalen: gewicht 700. Inhoudstekst: gewicht 400. Tijdstempels: 12px `#616061`, alleen bij hover. Code: `Monaco, Menlo, monospace`, 12px, achtergrond `#F8F8F8`.
**Lay-out:**
> Drie kolommen: aubergine zijbalk 240px + flexibel wit berichtgebied + optioneel draadpaneel 400px. Zijbalkitems: 28px hoogte, 6px radius, vet wanneer ongelezen. Componist: vastgemaakt onderaan, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Componenten:**
> Knoppen: 4px radius, 36px hoogte, aubergine primair. Invoervelden: rand `1px solid #DDDDDD`, focusring `#1264A3`. Berichtrijen: plat, geen tekstballonnen, cirkelavatar 36px. Reacties: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Toon:**
> Slack is warm, professioneel en menselijk. Lege staten gebruiken vriendelijke illustraties. CTA's zijn direct: "Stuur bericht", "Aan de slag". Foutmeldingen zijn duidelijk en behulpzaam. Nooit alarmerend.
**Te vermijden antipatronen:**
> Geen donker inhoudsgebied. Geen tekstballonnen. Geen puur zwarte tekst. Geen verspreide meerkleurige accenten. Geen HOOFDLETTERS in kanaalnamen. Geen lettertype onder 12px. Geen grote knopradius.
open-design/design-systems/slack/DESIGN-pl.md
+363
View File
@@ -0,0 +1,363 @@
# System Projektowania Inspirowany Slackiem
> Category: Produktywność & SaaS
> Platforma komunikacji w miejscu pracy. Aubergine jako kolor główny, wieloakcentowa paleta logo, jasne powierzchnie z ciemnym paskiem bocznym, ciepły i przystępny charakter.
## 1. Temat Wizualny & Atmosfera
Tożsamość Slacka buduje się wokół idei, że praca powinna być ludzka, a nawet trochę zabawna. Kanoniczna powierzchnia jest **jasna** — białe obszary treści z głębokim paskiem bocznym w kolorze aubergine (`#4A154B`) — co jest odwrotnością narzędzi stawiających na ciemny motyw. Ten kontrast jest zamierzony: pasek boczny to spokojna, zawsze widoczna kotwica nawigacyjna, podczas gdy obszar treści jest jasny i otwarty.
Paleta logo — niebieska, zielona, żółta, czerwona — pojawia się głównie w ikonie hashtagu i materiałach marketingowych, a nie rozrzucona po całym interfejsie. W samym produkcie Slack stosuje powściągliwy, profesjonalny system kolorów z aubergine jako jedyną kotwicą marki.
**Kluczowe Cechy:**
- Jasne powierzchnie treści: biały `#FFFFFF` i prawie biały `#F8F8F8`
- Głęboki aubergine `#4A154B` w pasku bocznym — najbardziej rozpoznawalny element UI marki
- Cztery kolory akcentowe logo (niebieski, zielony, żółty, czerwony) używane oszczędnie tylko jako wyróżniki
- Larsseit dla nagłówków (marketing), systemowy sans-serif dla UI
- Zaokrąglone, ale nie kreskówkowe: promień 4–8px w większości komponentów
- Gęsty, ale oddychający: zwarte wiersze wiadomości z wyraźną hierarchią wątków
- Ciepły i konwersacyjny ton — emoji, reakcje i ilustracje są równoprawnym elementem
---
## 2. Paleta Kolorów & Role
### Kolor Główny Marki
| Token | Hex | Rola |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Tło paska bocznego, główny kolor marki |
| `--color-aubergine-dark` | `#350d36` | Stany hover na powierzchniach aubergine |
| `--color-aubergine-light` | `#611f69` | Podświetlenie aktywnego elementu w pasku bocznym |
### Kolory Akcentowe Logo (używać oszczędnie — tylko wyróżniki, ikony, marketing)
| Token | Hex | Nazwa | Rola |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Błękitny | Ikony kanałów, linki, stany informacyjne |
| `--color-green` | `#2EB67D` | Zieleń morska | Status online, stany sukcesu |
| `--color-yellow` | `#ECB22E` | Złoty | Status nieobecności, ostrzeżenia, wyróżnienia |
| `--color-red` | `#E01E5A` | Rubinowy | Powiadomienia, błędy, badge wzmianek |
### Powierzchnia & Tło
| Token | Hex | Rola |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Główny obszar wiadomości, okna modalne |
| `--bg-secondary` | `#F8F8F8` | Panele wątków, powierzchnie pomocnicze |
| `--bg-tertiary` | `#F1F1F1` | Tła pól wejściowych, stany hover |
| `--bg-sidebar` | `#4A154B` | Lewy pasek boczny (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover elementu paska bocznego |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Aktywny element paska bocznego |
| `--bg-message-hover` | `#F8F8F8` | Hover wiersza wiadomości |
### Kolory Tekstu
| Token | Hex | Rola |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Główny tekst treści (prawie czarny) |
| `--text-secondary` | `#616061` | Znaczniki czasu, wyciszone etykiety |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nazwy kanałów w pasku bocznym |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Nieaktywne elementy paska bocznego |
| `--text-link` | `#1264A3` | Linki inline w wiadomościach |
| `--text-mention` | `#1264A3` | Kolor tekstu @wzmianki |
### Kolory Semantyczne
| Token | Hex | Rola |
|---|---|---|
| `--color-success` | `#2EB67D` | Toasty sukcesu, stany pozytywne |
| `--color-warning` | `#ECB22E` | Stany ostrzeżeń |
| `--color-danger` | `#E01E5A` | Stany błędów, destrukcyjne akcje |
| `--color-info` | `#36C5F0` | Wyróżnienia informacyjne |
### Obramowanie & Linia Podziału
| Token | Hex | Rola |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standardowe linie podziału, obramowania kart |
| `--border-subtle` | `#F1F1F1` | Subtelne separatory między wierszami |
| `--border-focus` | `#1264A3` | Kolor pierścienia fokusowania |
---
## 3. Zasady Typografii
### Kroje Pisma
| Rola | Oficjalny | Zamiennik Web |
|---|---|---|
| Nagłówki Display / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Treść / Chrome | Slack Lato (własny) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Kod / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack używa **Larsseit** do nagłówków marketingowych i własnego wariantu Lato dla UI wewnątrz produktu. W zastosowaniach webowych `system-ui` jest najbezpieczniejszym zamiennikiem.
### Skala Typograficzna
| Poziom | Rozmiar | Grubość | Wysokość Linii | Odstęp Liter | Zastosowanie |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Nagłówki hero w marketingu |
| Display L | 36px | 700 | 1.15 | -0.5px | Hero sekcji |
| Nagłówek 1 | 28px | 700 | 1.25 | normal | Tytuły okien modalnych, nagłówki stron |
| Nagłówek 2 | 22px | 700 | 1.3 | normal | Tytuły kart, sekcje ustawień |
| Nagłówek 3 | 18px | 700 | 1.35 | normal | Nagłówki podsekcji |
| Treść L | 16px | 400 | 1.5 | normal | Tekst wiadomości, opisy |
| Treść | 15px | 400 | 1.46667 | normal | Domyślny tekst UI (bazowy rozmiar Slacka) |
| Treść SM | 13px | 400 | 1.38462 | normal | Metadane pomocnicze |
| Podpis | 12px | 400 | 1.33 | normal | Znaczniki czasu, podpowiedzi |
| Kod | 12px | 400 | 1.5 | normal | Kod inline, bloki kodu |
### Zasady Typograficzne
- Bazowy rozmiar treści Slacka to **15px** — nieco mniejszy niż 16px dla większej gęstości
- Nieprzeczytane kanały: grubość 700 — pogrubienie jest głównym wskaźnikiem nieprzeczytania
- Znaczniki czasu: 12px `--text-secondary`, widoczne tylko po najechaniu
- Bloki kodu: tło `#F8F8F8`, obramowanie `1px solid #DDDDDD`, border-radius 4px
- Nigdy nie używać rozmiarów czcionki poniżej 12px
- Nagłówki marketingowe: letter-spacing `-1px` dla dużych rozmiarów display
---
## 4. Style Komponentów
### Przyciski
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Pola Wejściowe
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Element Kanału w Pasku Bocznym
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Badge Nieprzeczytanych
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Załączniki Wiadomości / Karty
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reakcje
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Zasady Układu
### Układ Trójkolumnowy
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Pasek Boczny│ Obszar Wiadomości │ Wątek │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ opcjonalny │
└──────────────┴──────────────────────────────┴─────────────┘
```
### System Odstępów (baza 4px)
| Token | Wartość | Zastosowanie |
|---|---|---|
| `--space-1` | 4px | Ciasne odstępy |
| `--space-2` | 8px | Padding komponentów |
| `--space-3` | 12px | Padding pól wejściowych |
| `--space-4` | 16px | Standardowy padding |
| `--space-6` | 24px | Padding kart |
| `--space-8` | 32px | Odstępy sekcji |
### Struktura Paska Bocznego
```
[Nazwa Obszaru Roboczego ▼]
────────────────────
Wątki
Wszystkie DM
Szkice i Wysłane
────────────────────
▼ Kanały
# general
# random
# design ● (nieprzeczytane)
────────────────────
▼ Wiadomości Bezpośrednie
John Doe
Jane Smith
```
### Kompozytor Wiadomości
- Przypięty do dołu obszaru wiadomości
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Pasek narzędzi: emoji, załącz, formatuj, przycisk wyślij
---
## 6. Głębia & Elewacja
Slack używa lekkich cieni na jasnej powierzchni:
| Poziom | Zastosowanie | Cień |
|---|---|---|
| Płaski | Wiersze wiadomości, elementy paska bocznego | none |
| Niski | Karty, pola wejściowe | `0 1px 3px rgba(0,0,0,0.08)` |
| Średni | Listy rozwijane, popovery | `0 4px 12px rgba(0,0,0,0.12)` |
| Wysoki | Okna modalne, dialogi | `0 8px 24px rgba(0,0,0,0.15)` |
| Nakładka | Tła okien modalnych | `rgba(0,0,0,0.5)` |
---
## 7. Zalecenia i Przestrogi
### ✅ Zalecane
- Używaj aubergine `#4A154B` dla paska bocznego — to najbardziej ikoniczny element UI Slacka
- Utrzymuj główny obszar treści biały i jasny
- Używaj `#1D1C1D` (prawie czarny) dla całego tekstu treści, nie czystej czerni
- Pogrubiaj nazwy kanałów, aby pokazać status nieprzeczytania — grubość jest wskaźnikiem
- Używaj czterech kolorów akcentowych tylko dla ról semantycznych (sukces, ostrzeżenie, niebezpieczeństwo, informacja)
- Stosuj `border-left: 4px` na załącznikach wiadomości i osadzonych elementach
- Pokazuj znaczniki czasu tylko po najechaniu
- Używaj `#1264A3` dla linków i stanów fokusowania
- Utrzymuj elementy paska bocznego zwarte: wysokość 28px, border-radius 6px
### ❌ Niezalecane
- Nie używaj ciemnego głównego obszaru treści — Slack preferuje jasny motyw
- Nie rozrzucaj niebieskich/zielonych/żółtych/czerwonych jako dekoracyjnych akcentów
- Nie używaj czystej czerni `#000000` dla tekstu
- Nie używaj dymków mowy — wiadomości to płaskie wiersze
- Nie nadawaj przyciskom dużego promienia — 4px to standard
- Nie pokazuj znaczników czasu na stałe
- Nie używaj WIELKICH LITER dla nazw kanałów
- Nie używaj rozmiarów czcionki poniżej 12px
---
## 8. Zachowanie Responsywne
### Punkty Przełamania
| Punkt Przełamania | Szerokość | Układ |
|---|---|---|
| Mobile | < 768px | Pojedynczy panel, pasek boczny jako lewy drawer |
| Tablet | 768–1024px | Tylko pasek boczny + obszar wiadomości |
| Desktop | > 1024px | Pełny układ trójkolumnowy |
### Adaptacje Mobilne
- Pasek boczny: lewy drawer, przeciągnij w prawo, aby otworzyć
- Dolny pasek zakładek: Dom, DM, Aktywność, Ty
- Panel wątku: nakładka pełnoekranowa
- Kompozytor: przypięty nad klawiaturą
- Elementy listy kanałów: wysokość obszaru dotykowego 44px
- Aubergine górny pasek nagłówka zachowany na urządzeniach mobilnych
---
## 9. Przewodnik po Promptach Agenta
Generując projekty w stylu Slacka, stosuj następujące podejście:
**Zastosowanie kolorów:**
> Ustaw `background: #FFFFFF` jako główne płótno. Użyj `#4A154B` (aubergine) dla paska bocznego. Cały tekst główny to `#1D1C1D`. Linki i pierścienie fokusowania używają `#1264A3`. Cztery kolory logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — są wyłącznie semantyczne: informacja, sukces, ostrzeżenie, niebezpieczeństwo.
**Typografia:**
> Używaj `system-ui, -apple-system, sans-serif` dla całego UI. Rozmiar bazowy to 15px. Nieprzeczytane kanały: grubość 700. Tekst treści: grubość 400. Znaczniki czasu: 12px `#616061`, tylko po najechaniu. Kod: `Monaco, Menlo, monospace`, 12px, tło `#F8F8F8`.
**Układ:**
> Trzy kolumny: aubergine pasek boczny 240px + elastyczny biały obszar wiadomości + opcjonalny panel wątku 400px. Elementy paska bocznego: wysokość 28px, promień 6px, pogrubienie gdy nieprzeczytane. Kompozytor: przypięty na dole, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Komponenty:**
> Przyciski: promień 4px, wysokość 36px, aubergine jako główny. Pola wejściowe: obramowanie `1px solid #DDDDDD`, pierścień fokusowania `#1264A3`. Wiersze wiadomości: płaskie, bez dymków, okrągły awatar 36px. Reakcje: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton:**
> Slack jest ciepły, profesjonalny i ludzki. Puste stany używają przyjaznych ilustracji. CTA są bezpośrednie: "Wyślij wiadomość", "Zacznij". Komunikaty o błędach są jasne i pomocne. Nigdy nie alarmujące.
**Antywzorce do unikania:**
> Brak ciemnego obszaru treści. Brak dymków mowy. Brak czystego czarnego tekstu. Brak rozproszonych wielokolorowych akcentów. Brak WIELKICH LITER w nazwach kanałów. Brak czcionki poniżej 12px. Brak dużego promienia przycisku.
open-design/design-systems/slack/DESIGN-pt-br.md
+363
View File
@@ -0,0 +1,363 @@
# Sistema de design inspirado no Slack
> Category: Produtividade e SaaS
> Plataforma de comunicação corporativa. Paleta primária berinjela, paleta multicolorida do logotipo, superfícies claras com barra lateral escura, tom caloroso e acessível.
## 1. Tema visual e atmosfera
A identidade do Slack é construída em torno da ideia de que o trabalho deve parecer humano e até um pouco divertido. A superfície canônica é **clara** — áreas de conteúdo brancas com uma profunda barra lateral berinjela (`#4A154B`) — o oposto das ferramentas com fundo escuro. Esse contraste é intencional: a barra lateral é uma âncora de navegação tranquila e sempre presente, enquanto a área de conteúdo é brilhante e aberta.
A paleta do logotipo — azul, verde, amarelo, vermelho — aparece principalmente no ícone de cerquilha e em contextos de marketing, não espalhada pela interface. No próprio produto, o Slack usa um sistema de cores sóbrio e profissional com o berinjela como única âncora de marca.
**Características principais:**
- Superfícies de conteúdo predominantemente claras: branco `#FFFFFF` e quase branco `#F8F8F8`
- Profunda barra lateral berinjela `#4A154B` — o elemento de interface mais reconhecível da marca
- Quatro cores de destaque do logotipo (azul, verde, amarelo, vermelho) usadas com moderação, apenas como destaques
- Larsseit para títulos (marketing), sans-serif do sistema para a interface
- Arredondado mas não caricato: raio de 4–8px na maioria dos componentes
- Denso mas respirável: linhas de mensagens compactas com hierarquia de threads clara
- Tom caloroso e conversacional — emojis, reações e ilustrações são elementos de primeira classe
---
## 2. Paleta de cores e funções
### Cor primária da marca
| Token | Hex | Função |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Fundo da barra lateral, cor principal da marca |
| `--color-aubergine-dark` | `#350d36` | Estados de hover em superfícies berinjela |
| `--color-aubergine-light` | `#611f69` | Destaque do item ativo na barra lateral |
### Cores de destaque do logotipo (usar com moderação — apenas destaques, ícones, marketing)
| Token | Hex | Nome | Função |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Azul celeste | Ícones de canais, links, estados informativos |
| `--color-green` | `#2EB67D` | Verde-azulado | Status online, estados de sucesso |
| `--color-yellow` | `#ECB22E` | Dourado | Status ausente, avisos, destaques |
| `--color-red` | `#E01E5A` | Rubi | Notificações, erros, distintivo de menções |
### Superfície e fundo
| Token | Hex | Função |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Área principal de mensagens, modais |
| `--bg-secondary` | `#F8F8F8` | Painéis de threads, superfícies secundárias |
| `--bg-tertiary` | `#F1F1F1` | Fundos de campos de entrada, estados de hover |
| `--bg-sidebar` | `#4A154B` | Barra lateral esquerda (berinjela) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover em item da barra lateral |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Item ativo da barra lateral |
| `--bg-message-hover` | `#F8F8F8` | Hover em linha de mensagem |
### Cores de texto
| Token | Hex | Função |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Texto principal do corpo (quase preto) |
| `--text-secondary` | `#616061` | Carimbos de tempo, rótulos atenuados |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nomes de canais na barra lateral |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Itens inativos da barra lateral |
| `--text-link` | `#1264A3` | Links em linha nas mensagens |
| `--text-mention` | `#1264A3` | Cor do texto das @menções |
### Cores semânticas
| Token | Hex | Função |
|---|---|---|
| `--color-success` | `#2EB67D` | Notificações de sucesso, estados positivos |
| `--color-warning` | `#ECB22E` | Estados de aviso |
| `--color-danger` | `#E01E5A` | Estados de erro, ações destrutivas |
| `--color-info` | `#36C5F0` | Destaques informativos |
### Borda e divisor
| Token | Hex | Função |
|---|---|---|
| `--border-default` | `#DDDDDD` | Divisores padrão, bordas de cartões |
| `--border-subtle` | `#F1F1F1` | Separadores sutis entre linhas |
| `--border-focus` | `#1264A3` | Cor do anel de foco |
---
## 3. Regras tipográficas
### Tipografias
| Função | Oficial | Alternativa web |
|---|---|---|
| Títulos de exibição / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Interface / Corpo / Chrome | Slack Lato (personalizado) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Código / Monoespaçado | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> O Slack usa **Larsseit** para títulos de marketing e uma variante personalizada do Lato para a interface do produto. Para uso web, `system-ui` é a alternativa mais segura.
### Escala tipográfica
| Nível | Tamanho | Peso | Altura de linha | Espaçamento entre letras | Uso |
|---|---|---|---|---|---|
| Exibição XL | 48px | 800 | 1.1 | -1px | Títulos herói de marketing |
| Exibição L | 36px | 700 | 1.15 | -0.5px | Heróis de seção |
| Título 1 | 28px | 700 | 1.25 | normal | Títulos de modais, cabeçalhos de página |
| Título 2 | 22px | 700 | 1.3 | normal | Títulos de cartões, seções de configurações |
| Título 3 | 18px | 700 | 1.35 | normal | Cabeçalhos de subseção |
| Corpo L | 16px | 400 | 1.5 | normal | Texto de mensagens, descrições |
| Corpo | 15px | 400 | 1.46667 | normal | Texto de interface padrão (tamanho base do Slack) |
| Corpo SM | 13px | 400 | 1.38462 | normal | Metadados secundários |
| Legenda | 12px | 400 | 1.33 | normal | Carimbos de tempo, dicas |
| Código | 12px | 400 | 1.5 | normal | Código em linha, blocos de código |
### Regras tipográficas
- O tamanho de corpo base do Slack é **15px** — ligeiramente menor que 16px para maior densidade
- Canais não lidos: peso 700 — o negrito é o principal indicador de não lido
- Carimbos de tempo: 12px `--text-secondary`, exibidos apenas ao passar o cursor
- Blocos de código: fundo `#F8F8F8`, borda `1px solid #DDDDDD`, border-radius 4px
- Nunca usar tamanhos de fonte abaixo de 12px
- Títulos de marketing: espaçamento entre letras `-1px` para tamanhos de exibição grandes
---
## 4. Estilos de componentes
### Botões
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Campos de entrada
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Item de canal na barra lateral
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Distintivo de não lido
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Anexos de mensagem / Cartões
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reações
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Princípios de layout
### Layout de três colunas
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Sistema de espaçamento (base 4px)
| Token | Valor | Uso |
|---|---|---|
| `--space-1` | 4px | Espaços compactos |
| `--space-2` | 8px | Preenchimento de componente |
| `--space-3` | 12px | Preenchimento de campos de entrada |
| `--space-4` | 16px | Preenchimento padrão |
| `--space-6` | 24px | Preenchimento de cartão |
| `--space-8` | 32px | Espaços entre seções |
### Estrutura da barra lateral
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Compositor de mensagem
- Fixado na parte inferior da área de mensagens
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Barra de ferramentas: emoji, anexar, formatar, botão de envio
---
## 6. Profundidade e elevação
O Slack usa sombras suaves em uma superfície clara:
| Nível | Uso | Sombra |
|---|---|---|
| Plano | Linhas de mensagens, itens da barra lateral | none |
| Baixo | Cartões, campos de entrada | `0 1px 3px rgba(0,0,0,0.08)` |
| Médio | Menus suspensos, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Alto | Modais, diálogos | `0 8px 24px rgba(0,0,0,0.15)` |
| Sobreposição | Fundos de modais | `rgba(0,0,0,0.5)` |
---
## 7. O que fazer e o que não fazer
### ✅ Fazer
- Usar berinjela `#4A154B` para a barra lateral — é o elemento de interface mais icônico do Slack
- Manter a área de conteúdo principal branca e clara
- Usar `#1D1C1D` (quase preto) para todo o texto do corpo, não preto puro
- Deixar os nomes de canais em negrito para indicar o status não lido — o peso é o indicador
- Usar as quatro cores de destaque apenas para funções semânticas (sucesso, aviso, perigo, informação)
- Aplicar `border-left: 4px` em anexos e incorporações de mensagens
- Exibir carimbos de tempo apenas ao passar o cursor
- Usar `#1264A3` para links e estados de foco
- Manter os itens da barra lateral compactos: altura 28px, border-radius 6px
### ❌ Não fazer
- Não usar uma área de conteúdo principal escura — o Slack é predominantemente claro
- Não espalhar azul/verde/amarelo/vermelho como acentos decorativos
- Não usar preto puro `#000000` para o texto
- Não usar balões de fala — as mensagens são linhas planas
- Não fazer botões com raio grande — 4px é o padrão
- Não exibir carimbos de tempo permanentemente
- Não usar MAIÚSCULAS para nomes de canais
- Não usar tamanhos de fonte abaixo de 12px
---
## 8. Comportamento responsivo
### Pontos de interrupção
| Ponto de interrupção | Largura | Layout |
|---|---|---|
| Celular | < 768px | Painel único, barra lateral como gaveta esquerda |
| Tablet | 768–1024px | Apenas barra lateral + área de mensagens |
| Desktop | > 1024px | Layout completo de três colunas |
### Adaptações para celular
- Barra lateral: gaveta esquerda, deslizar para a direita para abrir
- Barra de abas inferior: Início, MDs, Atividade, Você
- Painel de thread: sobreposição em tela cheia
- Compositor: fixado acima do teclado
- Itens da lista de canais: altura de alvo de toque 44px
- Barra de cabeçalho berinjela superior mantida no celular
---
## 9. Guia de prompts para agente
Ao gerar designs com estilo Slack, siga esta abordagem:
**Aplicação de cores:**
> Defina `background: #FFFFFF` como tela principal. Use `#4A154B` (berinjela) para a barra lateral. Todo o texto principal é `#1D1C1D`. Links e anéis de foco usam `#1264A3`. As quatro cores do logotipo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — são apenas semânticas: informação, sucesso, aviso, perigo.
**Tipografia:**
> Use `system-ui, -apple-system, sans-serif` para toda a interface. O tamanho base é 15px. Canais não lidos: peso 700. Texto do corpo: peso 400. Carimbos de tempo: 12px `#616061`, apenas ao passar o cursor. Código: `Monaco, Menlo, monospace`, 12px, fundo `#F8F8F8`.
**Layout:**
> Três colunas: barra lateral berinjela de 240px + área de mensagens branca flexível + painel de thread opcional de 400px. Itens da barra lateral: altura 28px, raio 6px, negrito quando não lido. Compositor: fixado abaixo, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Componentes:**
> Botões: raio 4px, altura 36px, berinjela primário. Campos de entrada: borda `1px solid #DDDDDD`, anel de foco `#1264A3`. Linhas de mensagens: planas, sem balões, avatar circular de 36px. Reações: pílula `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Tom:**
> O Slack é caloroso, profissional e humano. Os estados vazios usam ilustrações amigáveis. As chamadas para ação são diretas: "Enviar mensagem", "Começar". As mensagens de erro são claras e úteis. Nunca alarmante.
**Antipadrões a evitar:**
> Sem área de conteúdo escura. Sem balões de fala. Sem texto preto puro. Sem acentos multicoloridos espalhados. Sem nomes de canais em MAIÚSCULAS. Sem fontes abaixo de 12px. Sem raio de botão grande.
open-design/design-systems/slack/DESIGN-ru.md
+363
View File
@@ -0,0 +1,363 @@
# Дизайн-система, вдохновлённая Slack
> Category: Продуктивность и SaaS
> Платформа для корпоративного общения. Основной цвет — баклажан, многоцветная логотипная палитра, светлые поверхности с тёмной боковой панелью, тёплый и дружелюбный тон.
## 1. Визуальная тема и атмосфера
Идентичность Slack построена на идее, что работа должна ощущаться по-человечески и даже немного весело. Каноническая поверхность — **светлая**: белые области контента с глубокой баклажановой боковой панелью (`#4A154B`) — в противовес инструментам с тёмным фоном. Этот контраст намеренный: боковая панель служит спокойным, всегда присутствующим навигационным якорем, тогда как область контента — яркая и открытая.
Логотипная палитра — синий, зелёный, жёлтый, красный — появляется преимущественно в иконке решётки и в маркетинговых контекстах, а не разбросана по интерфейсу. В самом продукте Slack использует сдержанную профессиональную цветовую систему, где баклажановый — единственный якорь бренда.
**Ключевые характеристики:**
- Светлые поверхности контента: белый `#FFFFFF` и почти белый `#F8F8F8`
- Глубокая баклажановая боковая панель `#4A154B` — самый узнаваемый UI-элемент бренда
- Четыре акцентных цвета логотипа (синий, зелёный, жёлтый, красный) используются экономно, только как акценты
- Larsseit для заголовков (маркетинг), системный sans-serif для интерфейса
- Скруглённый, но не мультяшный: радиус 4–8px у большинства компонентов
- Плотный, но «дышащий»: компактные строки сообщений с чёткой иерархией тредов
- Тёплый и разговорный тон — эмодзи, реакции и иллюстрации являются полноправными элементами
---
## 2. Цветовая палитра и роли
### Основной цвет бренда
| Токен | Hex | Роль |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Фон боковой панели, основной цвет бренда |
| `--color-aubergine-dark` | `#350d36` | Состояния наведения на баклажановых поверхностях |
| `--color-aubergine-light` | `#611f69` | Выделение активного элемента в боковой панели |
### Акцентные цвета логотипа (использовать экономно — только акценты, иконки, маркетинг)
| Токен | Hex | Название | Роль |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Небесно-голубой | Иконки каналов, ссылки, информационные состояния |
| `--color-green` | `#2EB67D` | Бирюзово-зелёный | Статус онлайн, состояния успеха |
| `--color-yellow` | `#ECB22E` | Золотой | Статус «отошёл», предупреждения, акценты |
| `--color-red` | `#E01E5A` | Рубиновый | Уведомления, ошибки, бейдж упоминаний |
### Поверхности и фоны
| Токен | Hex | Роль |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Основная область сообщений, модальные окна |
| `--bg-secondary` | `#F8F8F8` | Панели тредов, вторичные поверхности |
| `--bg-tertiary` | `#F1F1F1` | Фоны полей ввода, состояния наведения |
| `--bg-sidebar` | `#4A154B` | Левая боковая панель (баклажановая) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Наведение на элемент боковой панели |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Активный элемент боковой панели |
| `--bg-message-hover` | `#F8F8F8` | Наведение на строку сообщения |
### Цвета текста
| Токен | Hex | Роль |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Основной текст (почти чёрный) |
| `--text-secondary` | `#616061` | Временны́е метки, приглушённые подписи |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Названия каналов в боковой панели |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Неактивные элементы боковой панели |
| `--text-link` | `#1264A3` | Встроенные ссылки в сообщениях |
| `--text-mention` | `#1264A3` | Цвет текста @упоминаний |
### Семантические цвета
| Токен | Hex | Роль |
|---|---|---|
| `--color-success` | `#2EB67D` | Уведомления об успехе, положительные состояния |
| `--color-warning` | `#ECB22E` | Предупреждающие состояния |
| `--color-danger` | `#E01E5A` | Состояния ошибок, деструктивные действия |
| `--color-info` | `#36C5F0` | Информационные акценты |
### Границы и разделители
| Токен | Hex | Роль |
|---|---|---|
| `--border-default` | `#DDDDDD` | Стандартные разделители, границы карточек |
| `--border-subtle` | `#F1F1F1` | Ненавязчивые разделители между строками |
| `--border-focus` | `#1264A3` | Цвет кольца фокуса |
---
## 3. Типографические правила
### Шрифты
| Роль | Официальный | Веб-замена |
|---|---|---|
| Дисплейные / Маркетинговые заголовки | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Интерфейс / Текст / Chrome | Slack Lato (кастомный) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Код / Моноширинный | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack использует **Larsseit** для маркетинговых заголовков и кастомный вариант Lato для интерфейса продукта. Для веб-использования `system-ui` — наиболее надёжная замена.
### Шкала типографики
| Уровень | Размер | Начертание | Высота строки | Межбуквенный интервал | Использование |
|---|---|---|---|---|---|
| Дисплей XL | 48px | 800 | 1.1 | -1px | Маркетинговые заголовки-герои |
| Дисплей L | 36px | 700 | 1.15 | -0.5px | Секционные герои |
| Заголовок 1 | 28px | 700 | 1.25 | normal | Заголовки модальных окон, заголовки страниц |
| Заголовок 2 | 22px | 700 | 1.3 | normal | Заголовки карточек, разделы настроек |
| Заголовок 3 | 18px | 700 | 1.35 | normal | Заголовки подразделов |
| Текст L | 16px | 400 | 1.5 | normal | Текст сообщений, описания |
| Текст | 15px | 400 | 1.46667 | normal | Текст интерфейса по умолчанию (базовый размер Slack) |
| Текст SM | 13px | 400 | 1.38462 | normal | Вторичные метаданные |
| Подпись | 12px | 400 | 1.33 | normal | Временны́е метки, подсказки |
| Код | 12px | 400 | 1.5 | normal | Встроенный код, блоки кода |
### Типографические правила
- Базовый размер текста в Slack — **15px** — немного меньше 16px для плотности
- Непрочитанные каналы: начертание 700 — жирный шрифт является основным индикатором непрочитанного
- Временны́е метки: 12px `--text-secondary`, отображаются только при наведении
- Блоки кода: фон `#F8F8F8`, граница `1px solid #DDDDDD`, border-radius 4px
- Никогда не использовать размеры шрифта менее 12px
- Маркетинговые заголовки: межбуквенный интервал `-1px` для крупных дисплейных размеров
---
## 4. Стили компонентов
### Кнопки
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Поля ввода
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Элемент канала в боковой панели
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Бейдж непрочитанного
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Вложения сообщений / Карточки
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Реакции
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Принципы компоновки
### Трёхколоночная компоновка
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Система отступов (базовый блок 4px)
| Токен | Значение | Использование |
|---|---|---|
| `--space-1` | 4px | Узкие промежутки |
| `--space-2` | 8px | Внутренние отступы компонента |
| `--space-3` | 12px | Внутренние отступы полей ввода |
| `--space-4` | 16px | Стандартные отступы |
| `--space-6` | 24px | Отступы карточек |
| `--space-8` | 32px | Промежутки между секциями |
### Структура боковой панели
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Строка ввода сообщения
- Закреплена в нижней части области сообщений
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Панель инструментов: эмодзи, вложение, форматирование, кнопка отправки
---
## 6. Глубина и возвышение
Slack использует лёгкие тени на светлой поверхности:
| Уровень | Использование | Тень |
|---|---|---|
| Плоский | Строки сообщений, элементы боковой панели | none |
| Низкий | Карточки, поля ввода | `0 1px 3px rgba(0,0,0,0.08)` |
| Средний | Выпадающие меню, поповеры | `0 4px 12px rgba(0,0,0,0.12)` |
| Высокий | Модальные окна, диалоги | `0 8px 24px rgba(0,0,0,0.15)` |
| Оверлей | Фоны модальных окон | `rgba(0,0,0,0.5)` |
---
## 7. Что делать и чего не делать
### ✅ Делать
- Использовать баклажановый `#4A154B` для боковой панели — это самый узнаваемый UI-элемент Slack
- Сохранять основную область контента белой и светлой
- Использовать `#1D1C1D` (почти чёрный) для всего основного текста, а не чистый чёрный
- Выделять названия каналов жирным для обозначения непрочитанных — начертание является индикатором
- Использовать четыре акцентных цвета только для семантических ролей (успех, предупреждение, опасность, информация)
- Применять `border-left: 4px` к вложениям и встроенным элементам сообщений
- Показывать временны́е метки только при наведении
- Использовать `#1264A3` для ссылок и состояний фокуса
- Сохранять компактность элементов боковой панели: высота 28px, border-radius 6px
### ❌ Не делать
- Не использовать тёмную основную область контента — Slack светлый по умолчанию
- Не рассыпать синий/зелёный/жёлтый/красный как декоративные акценты
- Не использовать чистый чёрный `#000000` для текста
- Не использовать речевые пузыри — сообщения являются плоскими строками
- Не делать кнопки с большим радиусом — 4px является стандартом
- Не отображать временны́е метки постоянно
- Не использовать ЗАГЛАВНЫЕ БУКВЫ для названий каналов
- Не использовать размеры шрифта менее 12px
---
## 8. Адаптивное поведение
### Контрольные точки
| Контрольная точка | Ширина | Компоновка |
|---|---|---|
| Мобильный | < 768px | Одна панель, боковая панель как левый выдвижной ящик |
| Планшет | 768–1024px | Только боковая панель + область сообщений |
| Десктоп | > 1024px | Полная трёхколоночная компоновка |
### Мобильные адаптации
- Боковая панель: левый выдвижной ящик, открывается смахиванием вправо
- Нижняя панель вкладок: Главная, Личные сообщения, Активность, Я
- Панель треда: полноэкранный оверлей
- Строка ввода: закреплена над клавиатурой
- Элементы списка каналов: высота касательной области 44px
- Баклажановая верхняя панель заголовка сохраняется на мобильном
---
## 9. Руководство по промптам для агента
При генерации дизайнов в стиле Slack следуйте этому подходу:
**Применение цветов:**
> Установите `background: #FFFFFF` в качестве основного холста. Используйте `#4A154B` (баклажановый) для боковой панели. Весь основной текст — `#1D1C1D`. Ссылки и кольца фокуса используют `#1264A3`. Четыре цвета логотипа — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — только семантические: информация, успех, предупреждение, опасность.
**Типографика:**
> Используйте `system-ui, -apple-system, sans-serif` для всего интерфейса. Базовый размер — 15px. Непрочитанные каналы: начертание 700. Основной текст: начертание 400. Временны́е метки: 12px `#616061`, только при наведении. Код: `Monaco, Menlo, monospace`, 12px, фон `#F8F8F8`.
**Компоновка:**
> Три колонки: баклажановая боковая панель 240px + гибкая белая область сообщений + опциональная панель тредов 400px. Элементы боковой панели: высота 28px, радиус 6px, жирный при непрочитанном. Строка ввода: закреплена внизу, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Компоненты:**
> Кнопки: радиус 4px, высота 36px, основная баклажановая. Поля ввода: граница `1px solid #DDDDDD`, кольцо фокуса `#1264A3`. Строки сообщений: плоские, без пузырей, круглый аватар 36px. Реакции: таблетка `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Тон:**
> Slack тёплый, профессиональный и человечный. Пустые состояния используют дружелюбные иллюстрации. Призывы к действию прямые: «Отправить сообщение», «Начать». Сообщения об ошибках ясные и полезные. Никогда не пугающие.
**Антипаттерны, которых следует избегать:**
> Никакой тёмной области контента. Никаких речевых пузырей. Никакого чисто чёрного текста. Никаких разбросанных многоцветных акцентов. Никаких названий каналов ЗАГЛАВНЫМИ БУКВАМИ. Никаких шрифтов ниже 12px. Никаких кнопок с большим радиусом.
open-design/design-systems/slack/DESIGN-tr.md
+363
View File
@@ -0,0 +1,363 @@
# Slack'ten İlham Alan Tasarım Sistemi
> Category: Verimlilik & SaaS
> İş yeri iletişim platformu. Aubergine birincil renk, çok vurgulu logo paleti, koyu kenar çubuğu ile açık yüzeyler, sıcak ve erişilebilir.
## 1. Görsel Tema & Atmosfer
Slack'in kimliği, işin insancıl ve hatta biraz eğlenceli hissettirmesi gerektiği fikri üzerine kuruludur. Kanonik yüzey **açık** renktir — derin aubergine (`#4A154B`) kenar çubuğu olan beyaz içerik alanları — karanlık öncelikli araçların tam tersi. Bu kontrast kasıtlıdır: kenar çubuğu sakin, her zaman mevcut bir navigasyon çapasıyken içerik alanı parlak ve açıktır.
Logo paleti — mavi, yeşil, sarı, kırmızı — esas olarak hashtag simgesinde ve pazarlama bağlamlarında görünür, kullanıcı arayüzüne yayılmış değildir. Ürünün kendisinde Slack, aubergine'i tek marka çapası olarak kullanan kısıtlı, profesyonel bir renk sistemi kullanır.
**Temel Özellikler:**
- Açık öncelikli içerik yüzeyleri: beyaz `#FFFFFF` ve beyaza yakın `#F8F8F8`
- Derin aubergine `#4A154B` kenar çubuğu — markanın en tanınmış kullanıcı arayüzü öğesi
- Dört logo vurgu rengi (mavi, yeşil, sarı, kırmızı) yalnızca vurgular olarak tutumlu biçimde kullanılır
- Başlıklar için Larsseit (pazarlama), kullanıcı arayüzü için sistem sans-serif
- Yuvarlak ama karikatür değil: çoğu bileşende 4–8px yarıçap
- Yoğun ama nefes alabilir: net konu hiyerarşisi ile kompakt mesaj satırları
- Sıcak ve konuşma dili tonu — emojiler, tepkiler ve çizimler birinci sınıf öğelerdir
---
## 2. Renk Paleti & Roller
### Birincil Marka Rengi
| Token | Hex | Rol |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Kenar çubuğu arka planı, birincil marka rengi |
| `--color-aubergine-dark` | `#350d36` | Aubergine yüzeylerdeki hover durumları |
| `--color-aubergine-light` | `#611f69` | Kenar çubuğundaki aktif öğe vurgusu |
### Logo Vurgu Renkleri (tutumlu kullanın — yalnızca vurgular, simgeler, pazarlama için)
| Token | Hex | Ad | Rol |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Gökyüzü Mavisi | Kanal simgeleri, bağlantılar, bilgi durumları |
| `--color-green` | `#2EB67D` | Teal Yeşili | Çevrimiçi durumu, başarı durumları |
| `--color-yellow` | `#ECB22E` | Altın | Uzakta durumu, uyarılar, vurgular |
| `--color-red` | `#E01E5A` | Yakut | Bildirimler, hatalar, bahsetme rozeti |
### Yüzey & Arka Plan
| Token | Hex | Rol |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Ana mesaj alanı, modallar |
| `--bg-secondary` | `#F8F8F8` | Konu panelleri, ikincil yüzeyler |
| `--bg-tertiary` | `#F1F1F1` | Giriş arka planları, hover durumları |
| `--bg-sidebar` | `#4A154B` | Sol kenar çubuğu (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Kenar çubuğu öğesi hover |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Aktif kenar çubuğu öğesi |
| `--bg-message-hover` | `#F8F8F8` | Mesaj satırı hover |
### Metin Renkleri
| Token | Hex | Rol |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Birincil gövde metni (siyaha yakın) |
| `--text-secondary` | `#616061` | Zaman damgaları, soluk etiketler |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Kenar çubuğundaki kanal adları |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Kenar çubuğundaki etkin olmayan öğeler |
| `--text-link` | `#1264A3` | Mesajlardaki satır içi bağlantılar |
| `--text-mention` | `#1264A3` | @bahsetme metin rengi |
### Semantik Renkler
| Token | Hex | Rol |
|---|---|---|
| `--color-success` | `#2EB67D` | Başarı bildirimleri, olumlu durumlar |
| `--color-warning` | `#ECB22E` | Uyarı durumları |
| `--color-danger` | `#E01E5A` | Hata durumları, yıkıcı eylemler |
| `--color-info` | `#36C5F0` | Bilgilendirici vurgular |
### Kenarlık & Ayırıcı
| Token | Hex | Rol |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standart ayırıcılar, kart kenarlıkları |
| `--border-subtle` | `#F1F1F1` | Satırlar arasındaki hafif ayırıcılar |
| `--border-focus` | `#1264A3` | Odak halkası rengi |
---
## 3. Tipografi Kuralları
### Yazı Tipleri
| Rol | Resmi | Web Yedeği |
|---|---|---|
| Görüntü / Pazarlama Başlıkları | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Kullanıcı Arayüzü / Gövde / Chrome | Slack Lato (özel) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Kod / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack, pazarlama başlıkları için **Larsseit** ve ürün içi kullanıcı arayüzü için özel bir Lato varyantı kullanır. Web kullanımı için `system-ui` en güvenli yedeğidir.
### Tipografi Ölçeği
| Düzey | Boyut | Kalınlık | Satır Yüksekliği | Harf Aralığı | Kullanım |
|---|---|---|---|---|---|
| Görüntü XL | 48px | 800 | 1.1 | -1px | Pazarlama hero başlıkları |
| Görüntü L | 36px | 700 | 1.15 | -0.5px | Bölüm hero'ları |
| Başlık 1 | 28px | 700 | 1.25 | normal | Modal başlıkları, sayfa üstbilgileri |
| Başlık 2 | 22px | 700 | 1.3 | normal | Kart başlıkları, ayarlar bölümleri |
| Başlık 3 | 18px | 700 | 1.35 | normal | Alt bölüm üstbilgileri |
| Gövde L | 16px | 400 | 1.5 | normal | Mesaj metni, açıklamalar |
| Gövde | 15px | 400 | 1.46667 | normal | Varsayılan kullanıcı arayüzü metni (Slack'in temel boyutu) |
| Gövde SM | 13px | 400 | 1.38462 | normal | İkincil meta veri |
| Altyazı | 12px | 400 | 1.33 | normal | Zaman damgaları, ipuçları |
| Kod | 12px | 400 | 1.5 | normal | Satır içi kod, kod blokları |
### Tipografi Kuralları
- Slack'in temel gövde boyutu **15px'dir** — yoğunluk için 16px'den biraz daha küçük
- Okunmamış kanallar: kalınlık 700 — kalın, birincil okunmamış göstergesidir
- Zaman damgaları: 12px `--text-secondary`, yalnızca hover durumunda göster
- Kod blokları: arka plan `#F8F8F8`, kenarlık `1px solid #DDDDDD`, border-radius 4px
- 12px'in altında yazı tipi boyutu kullanmayın
- Pazarlama başlıkları: büyük görüntü boyutları için letter-spacing `-1px`
---
## 4. Bileşen Stilleri
### Düğmeler
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Giriş Alanları
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Kenar Çubuğu Kanal Öğesi
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Okunmamış Rozeti
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Mesaj Ekleri / Kartlar
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Tepkiler
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Düzen İlkeleri
### Üç Sütunlu Düzen
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Kenar Çubuğu │ Mesaj Alanı │ Konu │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ isteğe bağlı│
└──────────────┴──────────────────────────────┴─────────────┘
```
### Boşluk Sistemi (4px taban)
| Token | Değer | Kullanım |
|---|---|---|
| `--space-1` | 4px | Dar boşluklar |
| `--space-2` | 8px | Bileşen dolgusu |
| `--space-3` | 12px | Giriş dolgusu |
| `--space-4` | 16px | Standart dolgu |
| `--space-6` | 24px | Kart dolgusu |
| `--space-8` | 32px | Bölüm boşlukları |
### Kenar Çubuğu Yapısı
```
[Çalışma Alanı Adı ▼]
────────────────────
Konular
Tüm DM'ler
Taslaklar & Gönderilenler
────────────────────
▼ Kanallar
# general
# random
# design ● (okunmamış)
────────────────────
▼ Doğrudan Mesajlar
John Doe
Jane Smith
```
### Mesaj Oluşturucu
- Mesaj alanının altına sabitlenmiş
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Araç çubuğu: emoji, ekle, biçimlendir, gönder düğmesi
---
## 6. Derinlik & Yükseklik
Slack, açık yüzeyde hafif gölgeler kullanır:
| Düzey | Kullanım | Gölge |
|---|---|---|
| Düz | Mesaj satırları, kenar çubuğu öğeleri | none |
| Düşük | Kartlar, giriş alanları | `0 1px 3px rgba(0,0,0,0.08)` |
| Orta | Açılır menüler, popover'lar | `0 4px 12px rgba(0,0,0,0.12)` |
| Yüksek | Modallar, iletişim kutuları | `0 8px 24px rgba(0,0,0,0.15)` |
| Katman | Modal arka planları | `rgba(0,0,0,0.5)` |
---
## 7. Yapılacaklar ve Yapılmayacaklar
### ✅ Yapın
- Kenar çubuğu için aubergine `#4A154B` kullanın — Slack'in en ikonik kullanıcı arayüzü öğesidir
- Ana içerik alanını beyaz ve açık tutun
- Tüm gövde metni için saf siyah değil `#1D1C1D` (siyaha yakın) kullanın
- Okunmamış durumu göstermek için kanal adlarını kalın yapın — kalınlık göstergedir
- Dört vurgu rengini yalnızca semantik roller için kullanın (başarı, uyarı, tehlike, bilgi)
- Mesaj eklerine ve gömülü öğelere `border-left: 4px` uygulayın
- Zaman damgalarını yalnızca hover durumunda gösterin
- Bağlantılar ve odak durumları için `#1264A3` kullanın
- Kenar çubuğu öğelerini kompakt tutun: 28px yükseklik, 6px border-radius
### ❌ Yapmayın
- Koyu bir ana içerik alanı kullanmayın — Slack açık önceliklidir
- Mavi/yeşil/sarı/kırmızıyı dekoratif vurgular olarak yaymayın
- Metin için saf siyah `#000000` kullanmayın
- Konuşma balonları kullanmayın — mesajlar düz satırlardır
- Düğmeleri büyük yarıçaplı yapmayın — 4px standarttır
- Zaman damgalarını kalıcı olarak göstermeyin
- Kanal adları için BÜYÜK HARF kullanmayın
- 12px altında yazı tipi boyutu kullanmayın
---
## 8. Duyarlı Davranış
### Kırılma Noktaları
| Kırılma Noktası | Genişlik | Düzen |
|---|---|---|
| Mobil | < 768px | Tek panel, kenar çubuğu sol çekmece olarak |
| Tablet | 768–1024px | Yalnızca kenar çubuğu + mesaj alanı |
| Masaüstü | > 1024px | Tam üç sütunlu düzen |
### Mobil Uyarlamalar
- Kenar çubuğu: sol çekmece, açmak için sağa kaydır
- Alt sekme çubuğu: Ana Sayfa, DM'ler, Etkinlik, Sen
- Konu paneli: tam ekran katman
- Oluşturucu: klavyenin üzerine sabitlenmiş
- Kanal listesi öğeleri: 44px dokunma hedefi yüksekliği
- Mobilde aubergine üst başlık çubuğu korunur
---
## 9. Ajan İstemi Kılavuzu
Slack tarzı tasarımlar oluştururken bu yaklaşımı izleyin:
**Renk uygulaması:**
> `background: #FFFFFF`'i ana tuval olarak ayarlayın. Kenar çubuğu için `#4A154B` (aubergine) kullanın. Tüm birincil metin `#1D1C1D`'dir. Bağlantılar ve odak halkaları `#1264A3` kullanır. Dört logo rengi — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — yalnızca semantiktir: bilgi, başarı, uyarı, tehlike.
**Tipografi:**
> Tüm kullanıcı arayüzü için `system-ui, -apple-system, sans-serif` kullanın. Temel boyut 15px'dir. Okunmamış kanallar: kalınlık 700. Gövde metni: kalınlık 400. Zaman damgaları: 12px `#616061`, yalnızca hover'da. Kod: `Monaco, Menlo, monospace`, 12px, arka plan `#F8F8F8`.
**Düzen:**
> Üç sütun: 240px aubergine kenar çubuğu + esnek beyaz mesaj alanı + isteğe bağlı 400px konu paneli. Kenar çubuğu öğeleri: 28px yükseklik, 6px yarıçap, okunmamışken kalın. Oluşturucu: alta sabitlenmiş, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Bileşenler:**
> Düğmeler: 4px yarıçap, 36px yükseklik, aubergine birincil. Giriş alanları: `1px solid #DDDDDD` kenarlık, `#1264A3` odak halkası. Mesaj satırları: düz, balon yok, 36px daire avatar. Tepkiler: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton:**
> Slack sıcak, profesyonel ve insancıldır. Boş durumlar dostane çizimler kullanır. Eylem çağrıları doğrudandır: "Mesaj gönder", "Başla". Hata mesajları açık ve yardımcıdır. Hiçbir zaman endişe verici değildir.
**Kaçınılması gereken anti-desenler:**
> Koyu içerik alanı yok. Konuşma balonu yok. Saf siyah metin yok. Dağınık çok renkli vurgular yok. Kanal adlarında BÜYÜK HARF yok. 12px altında yazı tipi yok. Büyük düğme yarıçapı yok.
open-design/design-systems/slack/DESIGN-uk.md
+364
View File
@@ -0,0 +1,364 @@
# Система Дизайну, Натхненна Slack
> Category: Продуктивність і SaaS
> Платформа комунікації на робочому місці. Основний колір aubergine, мульти-акцентна палітра логотипу, світлі поверхні з темною бічною панеллю, тепла й дружня атмосфера.
## 1. Візуальна Тема й Атмосфера
Ідентичність Slack будується навколо ідеї, що робота повинна відчуватися людяною і навіть трохи веселою. Канонічна поверхня — **світла** — білі зони вмісту з глибокою бічною панеллю aubergine (`#4A154B`) — протилежність інструментам, що ставлять на перше місце темні теми. Цей контраст є навмисним: бічна панель — спокійний, постійно присутній навігаційний якір, тоді як зона вмісту яскрава й відкрита.
Палітра логотипу — синій, зелений, жовтий, червоний — з'являється переважно в іконці хештегу й маркетингових контекстах, а не розкидана по всьому інтерфейсу. В самому продукті Slack використовує стриману, професійну колірну систему з aubergine як єдиним брендовим якорем.
**Ключові Характеристики:**
- Світлі поверхні вмісту: білий `#FFFFFF` і майже білий `#F8F8F8`
- Глибока бічна панель aubergine `#4A154B` — найбільш упізнаваний елемент інтерфейсу бренду
- Чотири акцентні кольори логотипу (синій, зелений, жовтий, червоний) використовуються ощадливо лише як підсвічення
- Larsseit для заголовків (маркетинг), системний sans-serif для інтерфейсу
- Округлий, але не мультяшний: радіус 4–8px на більшості компонентів
- Щільний, але з простором для дихання: компактні рядки повідомлень із чіткою ієрархією гілок
- Теплий і розмовний тон — емодзі, реакції та ілюстрації є елементами першого класу
---
## 2. Колірна Палітра й Ролі
### Основний Колір Бренду
| Токен | Hex | Роль |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Фон бічної панелі, основний колір бренду |
| `--color-aubergine-dark` | `#350d36` | Стани наведення на поверхнях aubergine |
| `--color-aubergine-light` | `#611f69` | Підсвічення активного елемента в бічній панелі |
### Акцентні Кольори Логотипу (використовувати ощадливо — лише для підсвічень, іконок, маркетингу)
| Токен | Hex | Назва | Роль |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Небесно-блакитний | Іконки каналів, посилання, інформаційні стани |
| `--color-green` | `#2EB67D` | Зелений бірюзовий | Статус онлайн, стани успіху |
| `--color-yellow` | `#ECB22E` | Золотий | Статус відсутності, попередження, підсвічення |
| `--color-red` | `#E01E5A` | Рубіновий | Сповіщення, помилки, значок згадки |
### Поверхня й Фон
| Токен | Hex | Роль |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Основна область повідомлень, модальні вікна |
| `--bg-secondary` | `#F8F8F8` | Панелі гілок, другорядні поверхні |
| `--bg-tertiary` | `#F1F1F1` | Фони полів введення, стани наведення |
| `--bg-sidebar` | `#4A154B` | Ліва бічна панель (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Наведення на елемент бічної панелі |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Активний елемент бічної панелі |
| `--bg-message-hover` | `#F8F8F8` | Наведення на рядок повідомлення |
### Кольори Тексту
| Токен | Hex | Роль |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Основний текст вмісту (майже чорний) |
| `--text-secondary` | `#616061` | Мітки часу, приглушені мітки |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Назви каналів у бічній панелі |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Неактивні елементи бічної панелі |
| `--text-link` | `#1264A3` | Вбудовані посилання в повідомленнях |
| `--text-mention` | `#1264A3` | Колір тексту @згадки |
### Семантичні Кольори
| Токен | Hex | Роль |
|---|---|---|
| `--color-success` | `#2EB67D` | Тости успіху, позитивні стани |
| `--color-warning` | `#ECB22E` | Стани попереджень |
| `--color-danger` | `#E01E5A` | Стани помилок, деструктивні дії |
| `--color-info` | `#36C5F0` | Інформаційні підсвічення |
### Межа й Розділювач
| Токен | Hex | Роль |
|---|---|---|
| `--border-default` | `#DDDDDD` | Стандартні розділювачі, межі карток |
| `--border-subtle` | `#F1F1F1` | Тонкі розділювачі між рядками |
| `--border-focus` | `#1264A3` | Колір кільця фокусу |
---
## 3. Правила Типографіки
### Шрифти
| Роль | Офіційний | Резервний для Вебу |
|---|---|---|
| Відображення / Маркетингові Заголовки | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Інтерфейс / Текст / Chrome | Slack Lato (власний) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Код / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack використовує **Larsseit** для маркетингових заголовків і власний варіант Lato для інтерфейсу в продукті. Для використання в вебі `system-ui` є найбезпечнішим резервом.
### Типографічна Шкала
| Рівень | Розмір | Товщина | Висота Рядка | Міжлітерний Інтервал | Використання |
|---|---|---|---|---|---|
| Відображення XL | 48px | 800 | 1.1 | -1px | Маркетингові hero-заголовки |
| Відображення L | 36px | 700 | 1.15 | -0.5px | Hero секцій |
| Заголовок 1 | 28px | 700 | 1.25 | normal | Заголовки модальних вікон, заголовки сторінок |
| Заголовок 2 | 22px | 700 | 1.3 | normal | Заголовки карток, секції налаштувань |
| Заголовок 3 | 18px | 700 | 1.35 | normal | Заголовки підсекцій |
| Текст L | 16px | 400 | 1.5 | normal | Текст повідомлень, описи |
| Текст | 15px | 400 | 1.46667 | normal | Стандартний текст інтерфейсу (базовий розмір Slack) |
| Текст SM | 13px | 400 | 1.38462 | normal | Другорядні метадані |
| Підпис | 12px | 400 | 1.33 | normal | Мітки часу, підказки |
| Код | 12px | 400 | 1.5 | normal | Вбудований код, блоки коду |
### Правила Типографіки
- Базовий розмір тексту Slack — **15px** — дещо менший за 16px для більшої щільності
- Непрочитані канали: товщина 700 — жирний шрифт є основним індикатором непрочитаного
- Мітки часу: 12px `--text-secondary`, показувати лише при наведенні
- Блоки коду: фон `#F8F8F8`, межа `1px solid #DDDDDD`, border-radius 4px
- Ніколи не використовувати розміри шрифтів менше 12px
- Маркетингові заголовки: letter-spacing `-1px` для великих відображень
---
## 4. Стилі Компонентів
### Кнопки
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Поля Введення
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Елемент Каналу в Бічній Панелі
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Значок Непрочитаних
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Вкладення Повідомлень / Картки
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Реакції
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Принципи Макету
### Триколонковий Макет
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Бічна │ Область Повідомлень │ Гілка │
│ Панель │ (flex: 1) │ (400px) │
│ (240px) │ #FFFFFF │необов'язково│
│ #4A154B │ │ │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Система Відступів (основа 4px)
| Токен | Значення | Використання |
|---|---|---|
| `--space-1` | 4px | Тісні проміжки |
| `--space-2` | 8px | Відступ компонента |
| `--space-3` | 12px | Відступ поля введення |
| `--space-4` | 16px | Стандартний відступ |
| `--space-6` | 24px | Відступ картки |
| `--space-8` | 32px | Проміжки між секціями |
### Структура Бічної Панелі
```
[Назва Робочого Простору ▼]
────────────────────
Гілки
Усі ПП
Чернетки та Надіслані
────────────────────
▼ Канали
# general
# random
# design ● (непрочитане)
────────────────────
▼ Прямі Повідомлення
John Doe
Jane Smith
```
### Редактор Повідомлень
- Закріплений внизу зони повідомлень
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Панель інструментів: емодзі, вкладення, форматування, кнопка надсилання
---
## 6. Глибина й Висота
Slack використовує легкі тіні на світлій поверхні:
| Рівень | Використання | Тінь |
|---|---|---|
| Плоский | Рядки повідомлень, елементи бічної панелі | none |
| Низький | Картки, поля введення | `0 1px 3px rgba(0,0,0,0.08)` |
| Середній | Спадні меню, popover'и | `0 4px 12px rgba(0,0,0,0.12)` |
| Високий | Модальні вікна, діалоги | `0 8px 24px rgba(0,0,0,0.15)` |
| Накладення | Фони модальних вікон | `rgba(0,0,0,0.5)` |
---
## 7. Що Робити й Чого Уникати
### ✅ Робіть
- Використовуйте aubergine `#4A154B` для бічної панелі — це найбільш іконічний елемент інтерфейсу Slack
- Тримайте основну зону вмісту білою та світлою
- Використовуйте `#1D1C1D` (майже чорний) для всього тексту вмісту, не чисто чорний
- Виділяйте назви каналів жирним для відображення статусу непрочитаного — товщина є індикатором
- Використовуйте чотири акцентні кольори лише для семантичних ролей (успіх, попередження, небезпека, інформація)
- Застосовуйте `border-left: 4px` до вкладень повідомлень та вбудованих елементів
- Показуйте мітки часу лише при наведенні
- Використовуйте `#1264A3` для посилань і станів фокусу
- Тримайте елементи бічної панелі компактними: висота 28px, border-radius 6px
### ❌ Не Робіть
- Не використовуйте темну основну зону вмісту — Slack надає перевагу світлій
- Не розкидайте синій/зелений/жовтий/червоний як декоративні акценти
- Не використовуйте чисто чорний `#000000` для тексту
- Не використовуйте мовні бульбашки — повідомлення є плоскими рядками
- Не робіть кнопки з великим радіусом — 4px є стандартом
- Не показуйте мітки часу постійно
- Не використовуйте ВЕЛИКІ ЛІТЕРИ для назв каналів
- Не використовуйте розміри шрифтів менше 12px
---
## 8. Адаптивна Поведінка
### Точки Перелому
| Точка Перелому | Ширина | Макет |
|---|---|---|
| Мобільний | < 768px | Одна панель, бічна панель як лівий ящик |
| Планшет | 768–1024px | Лише бічна панель + зона повідомлень |
| Десктоп | > 1024px | Повний триколонковий макет |
### Мобільні Адаптації
- Бічна панель: лівий ящик, проведіть вправо для відкриття
- Нижня панель вкладок: Головна, ПП, Активність, Я
- Панель гілки: накладення на весь екран
- Редактор: закріплений над клавіатурою
- Елементи списку каналів: висота сенсорної цілі 44px
- Верхня панель заголовка aubergine збережена на мобільному
---
## 9. Посібник із Запитів Агента
Під час створення дизайнів у стилі Slack дотримуйтесь такого підходу:
**Застосування кольору:**
> Встановіть `background: #FFFFFF` як основний полотно. Використовуйте `#4A154B` (aubergine) для бічної панелі. Весь основний текст — `#1D1C1D`. Посилання та кільця фокусу використовують `#1264A3`. Чотири кольори логотипу — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — лише семантичні: інформація, успіх, попередження, небезпека.
**Типографіка:**
> Використовуйте `system-ui, -apple-system, sans-serif` для всього інтерфейсу. Базовий розмір — 15px. Непрочитані канали: товщина 700. Текст вмісту: товщина 400. Мітки часу: 12px `#616061`, лише при наведенні. Код: `Monaco, Menlo, monospace`, 12px, фон `#F8F8F8`.
**Макет:**
> Три колонки: бічна панель aubergine 240px + гнучка біла зона повідомлень + необов'язкова панель гілки 400px. Елементи бічної панелі: висота 28px, радіус 6px, жирний при непрочитаному. Редактор: закріплений внизу, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Компоненти:**
> Кнопки: радіус 4px, висота 36px, aubergine основний. Поля введення: межа `1px solid #DDDDDD`, кільце фокусу `#1264A3`. Рядки повідомлень: плоскі, без бульбашок, кругла аватарка 36px. Реакції: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Тон:**
> Slack теплий, професійний і людяний. Порожні стани використовують дружні ілюстрації. Заклики до дії прямі: "Надіслати повідомлення", "Розпочати". Повідомлення про помилки чіткі й корисні. Ніколи не тривожні.
**Антишаблони, яких слід уникати:**
> Ніякої темної зони вмісту. Ніяких мовних бульбашок. Ніякого чисто чорного тексту. Ніяких розкиданих багатобарвних акцентів. Ніяких ВЕЛИКИХ ЛІТЕР у назвах каналів. Ніяких шрифтів менше 12px. Ніякого великого радіуса кнопок.
open-design/design-systems/slack/DESIGN-vi.md
+363
View File
@@ -0,0 +1,363 @@
# Hệ Thống Thiết Kế Lấy Cảm Hứng Từ Slack
> Category: Năng Suất & SaaS
> Nền tảng giao tiếp nơi làm việc. Màu chủ đạo aubergine, bảng màu logo đa nhấn, bề mặt sáng với thanh bên tối, ấm áp và thân thiện.
## 1. Chủ Đề Trực Quan & Bầu Không Khí
Nhận diện của Slack được xây dựng xung quanh ý tưởng rằng công việc nên cảm thấy mang tính con người và thậm chí đôi chút thú vị. Bề mặt chuẩn là **sáng** — vùng nội dung trắng với thanh bên aubergine đậm (`#4A154B`) — đối lập với các công cụ ưu tiên tối. Sự tương phản này là cố ý: thanh bên là neo điều hướng bình tĩnh, luôn hiện diện, trong khi vùng nội dung sáng và rộng mở.
Bảng màu logo — xanh dương, xanh lá, vàng, đỏ — chủ yếu xuất hiện trong biểu tượng hashtag và các bối cảnh marketing, không rải rác khắp giao diện. Trong sản phẩm thực tế, Slack sử dụng hệ thống màu sắc tiết chế, chuyên nghiệp với aubergine là neo thương hiệu duy nhất.
**Đặc Điểm Chính:**
- Bề mặt nội dung ưu tiên sáng: trắng `#FFFFFF` và gần trắng `#F8F8F8`
- Thanh bên aubergine đậm `#4A154B` — yếu tố giao diện dễ nhận ra nhất của thương hiệu
- Bốn màu nhấn logo (xanh dương, xanh lá, vàng, đỏ) được dùng tiết kiệm chỉ làm điểm nhấn
- Larsseit cho tiêu đề (marketing), sans-serif hệ thống cho giao diện
- Bo góc nhưng không hoạt hình: bán kính 4–8px trên hầu hết các thành phần
- Dày đặc nhưng có không gian thở: hàng tin nhắn gọn với phân cấp luồng rõ ràng
- Giọng điệu ấm áp và hội thoại — emoji, phản ứng và hình minh họa là nội dung hạng nhất
---
## 2. Bảng Màu & Vai Trò
### Màu Thương Hiệu Chính
| Token | Hex | Vai Trò |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Nền thanh bên, màu thương hiệu chính |
| `--color-aubergine-dark` | `#350d36` | Trạng thái hover trên bề mặt aubergine |
| `--color-aubergine-light` | `#611f69` | Đánh dấu mục đang hoạt động trong thanh bên |
### Màu Nhấn Logo (dùng tiết kiệm — chỉ cho điểm nhấn, biểu tượng, marketing)
| Token | Hex | Tên | Vai Trò |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Xanh Trời | Biểu tượng kênh, liên kết, trạng thái thông tin |
| `--color-green` | `#2EB67D` | Xanh Lục | Trạng thái trực tuyến, trạng thái thành công |
| `--color-yellow` | `#ECB22E` | Vàng | Trạng thái vắng mặt, cảnh báo, điểm nhấn |
| `--color-red` | `#E01E5A` | Đỏ Ruby | Thông báo, lỗi, huy hiệu đề cập |
### Bề Mặt & Nền
| Token | Hex | Vai Trò |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Vùng tin nhắn chính, hộp thoại |
| `--bg-secondary` | `#F8F8F8` | Bảng luồng, bề mặt phụ |
| `--bg-tertiary` | `#F1F1F1` | Nền đầu vào, trạng thái hover |
| `--bg-sidebar` | `#4A154B` | Thanh bên trái (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover mục thanh bên |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Mục thanh bên đang hoạt động |
| `--bg-message-hover` | `#F8F8F8` | Hover hàng tin nhắn |
### Màu Văn Bản
| Token | Hex | Vai Trò |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Văn bản nội dung chính (gần đen) |
| `--text-secondary` | `#616061` | Dấu thời gian, nhãn mờ |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Tên kênh trong thanh bên |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Mục không hoạt động trong thanh bên |
| `--text-link` | `#1264A3` | Liên kết nội tuyến trong tin nhắn |
| `--text-mention` | `#1264A3` | Màu văn bản @đề cập |
### Màu Ngữ Nghĩa
| Token | Hex | Vai Trò |
|---|---|---|
| `--color-success` | `#2EB67D` | Thông báo thành công, trạng thái tích cực |
| `--color-warning` | `#ECB22E` | Trạng thái cảnh báo |
| `--color-danger` | `#E01E5A` | Trạng thái lỗi, hành động phá hủy |
| `--color-info` | `#36C5F0` | Điểm nhấn thông tin |
### Đường Viền & Phân Cách
| Token | Hex | Vai Trò |
|---|---|---|
| `--border-default` | `#DDDDDD` | Phân cách chuẩn, viền thẻ |
| `--border-subtle` | `#F1F1F1` | Phân cách nhẹ giữa các hàng |
| `--border-focus` | `#1264A3` | Màu vòng focus |
---
## 3. Quy Tắc Chữ
### Phông Chữ
| Vai Trò | Chính Thức | Dự Phòng Web |
|---|---|---|
| Tiêu Đề Hiển Thị / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Giao Diện / Nội Dung / Chrome | Slack Lato (tùy chỉnh) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack sử dụng **Larsseit** cho tiêu đề marketing và biến thể Lato tùy chỉnh cho giao diện trong sản phẩm. Khi dùng trên web, `system-ui` là dự phòng an toàn nhất.
### Thang Chữ
| Cấp Độ | Kích Thước | Độ Đậm | Chiều Cao Dòng | Khoảng Cách Chữ | Sử Dụng |
|---|---|---|---|---|---|
| Hiển Thị XL | 48px | 800 | 1.1 | -1px | Tiêu đề hero marketing |
| Hiển Thị L | 36px | 700 | 1.15 | -0.5px | Hero phần |
| Tiêu Đề 1 | 28px | 700 | 1.25 | normal | Tiêu đề hộp thoại, header trang |
| Tiêu Đề 2 | 22px | 700 | 1.3 | normal | Tiêu đề thẻ, phần cài đặt |
| Tiêu Đề 3 | 18px | 700 | 1.35 | normal | Header tiểu mục |
| Nội Dung L | 16px | 400 | 1.5 | normal | Văn bản tin nhắn, mô tả |
| Nội Dung | 15px | 400 | 1.46667 | normal | Văn bản giao diện mặc định (kích thước cơ sở của Slack) |
| Nội Dung SM | 13px | 400 | 1.38462 | normal | Siêu dữ liệu phụ |
| Chú Thích | 12px | 400 | 1.33 | normal | Dấu thời gian, gợi ý |
| Code | 12px | 400 | 1.5 | normal | Code nội tuyến, khối code |
### Quy Tắc Chữ
- Kích thước nội dung cơ sở của Slack là **15px** — nhỏ hơn một chút so với 16px để tăng mật độ
- Kênh chưa đọc: độ đậm 700 — in đậm là chỉ báo chưa đọc chính
- Dấu thời gian: 12px `--text-secondary`, chỉ hiển thị khi hover
- Khối code: nền `#F8F8F8`, viền `1px solid #DDDDDD`, border-radius 4px
- Không bao giờ sử dụng cỡ chữ dưới 12px
- Tiêu đề marketing: letter-spacing `-1px` cho kích thước hiển thị lớn
---
## 4. Kiểu Dáng Thành Phần
### Nút
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Trường Đầu Vào
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Mục Kênh Trong Thanh Bên
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Huy Hiệu Chưa Đọc
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Tệp Đính Kèm Tin Nhắn / Thẻ
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Phản Ứng
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Nguyên Tắc Bố Cục
### Bố Cục Ba Cột
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Thanh Bên │ Vùng Tin Nhắn │ Luồng │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ tùy chọn │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Hệ Thống Khoảng Cách (cơ sở 4px)
| Token | Giá Trị | Sử Dụng |
|---|---|---|
| `--space-1` | 4px | Khoảng cách chật |
| `--space-2` | 8px | Padding thành phần |
| `--space-3` | 12px | Padding đầu vào |
| `--space-4` | 16px | Padding chuẩn |
| `--space-6` | 24px | Padding thẻ |
| `--space-8` | 32px | Khoảng cách phần |
### Cấu Trúc Thanh Bên
```
[Tên Không Gian Làm Việc ▼]
────────────────────
Luồng
Tất cả DM
Bản Nháp & Đã Gửi
────────────────────
▼ Kênh
# chung
# ngẫu nhiên
# thiết-kế ● (chưa đọc)
────────────────────
▼ Tin Nhắn Trực Tiếp
John Doe
Jane Smith
```
### Trình Soạn Tin Nhắn
- Ghim ở cuối vùng tin nhắn
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Thanh công cụ: emoji, đính kèm, định dạng, nút gửi
---
## 6. Độ Sâu & Độ Cao
Slack sử dụng bóng nhẹ trên bề mặt sáng:
| Cấp Độ | Sử Dụng | Bóng |
|---|---|---|
| Phẳng | Hàng tin nhắn, mục thanh bên | none |
| Thấp | Thẻ, đầu vào | `0 1px 3px rgba(0,0,0,0.08)` |
| Trung Bình | Dropdown, popover | `0 4px 12px rgba(0,0,0,0.12)` |
| Cao | Hộp thoại modal | `0 8px 24px rgba(0,0,0,0.15)` |
| Phủ Lớp | Phông nền modal | `rgba(0,0,0,0.5)` |
---
## 7. Nên Làm & Không Nên Làm
### ✅ Nên Làm
- Sử dụng aubergine `#4A154B` cho thanh bên — đây là yếu tố giao diện mang tính biểu tượng nhất của Slack
- Giữ vùng nội dung chính trắng và sáng
- Sử dụng `#1D1C1D` (gần đen) cho tất cả văn bản nội dung, không dùng đen thuần
- In đậm tên kênh để hiển thị trạng thái chưa đọc — độ đậm là chỉ báo
- Chỉ sử dụng bốn màu nhấn cho vai trò ngữ nghĩa (thành công, cảnh báo, nguy hiểm, thông tin)
- Áp dụng `border-left: 4px` trên tệp đính kèm và nhúng tin nhắn
- Chỉ hiển thị dấu thời gian khi hover
- Sử dụng `#1264A3` cho liên kết và trạng thái focus
- Giữ mục thanh bên gọn: chiều cao 28px, border-radius 6px
### ❌ Không Nên Làm
- Không sử dụng vùng nội dung chính tối — Slack ưu tiên sáng
- Không rải xanh dương/xanh lá/vàng/đỏ như nhấn trang trí
- Không sử dụng đen thuần `#000000` cho văn bản
- Không sử dụng bong bóng hội thoại — tin nhắn là hàng phẳng
- Không làm nút có bán kính lớn — 4px là chuẩn
- Không hiển thị dấu thời gian thường xuyên
- Không dùng CHỮ HOA cho tên kênh
- Không sử dụng cỡ chữ dưới 12px
---
## 8. Hành Vi Responsive
### Điểm Ngắt
| Điểm Ngắt | Chiều Rộng | Bố Cục |
|---|---|---|
| Di Động | < 768px | Bảng đơn, thanh bên là ngăn kéo trái |
| Máy Tính Bảng | 768–1024px | Chỉ thanh bên + vùng tin nhắn |
| Máy Tính | > 1024px | Bố cục ba cột đầy đủ |
### Thích Ứng Di Động
- Thanh bên: ngăn kéo trái, vuốt phải để mở
- Thanh tab dưới cùng: Trang chủ, DM, Hoạt động, Bạn
- Bảng luồng: phủ lớp toàn màn hình
- Trình soạn: ghim phía trên bàn phím
- Mục danh sách kênh: chiều cao vùng chạm 44px
- Thanh header aubergine trên cùng được giữ lại trên di động
---
## 9. Hướng Dẫn Prompt Agent
Khi tạo thiết kế theo phong cách Slack, hãy theo cách tiếp cận sau:
**Áp dụng màu sắc:**
> Đặt `background: #FFFFFF` làm canvas chính. Sử dụng `#4A154B` (aubergine) cho thanh bên. Tất cả văn bản chính là `#1D1C1D`. Liên kết và vòng focus dùng `#1264A3`. Bốn màu logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — chỉ mang tính ngữ nghĩa: thông tin, thành công, cảnh báo, nguy hiểm.
**Chữ:**
> Sử dụng `system-ui, -apple-system, sans-serif` cho tất cả giao diện. Kích thước cơ sở là 15px. Kênh chưa đọc: độ đậm 700. Văn bản nội dung: độ đậm 400. Dấu thời gian: 12px `#616061`, chỉ khi hover. Code: `Monaco, Menlo, monospace`, 12px, nền `#F8F8F8`.
**Bố cục:**
> Ba cột: thanh bên aubergine 240px + vùng tin nhắn trắng flex + bảng luồng 400px tùy chọn. Mục thanh bên: chiều cao 28px, bán kính 6px, in đậm khi chưa đọc. Trình soạn: ghim dưới cùng, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Thành phần:**
> Nút: bán kính 4px, chiều cao 36px, aubergine chính. Đầu vào: viền `1px solid #DDDDDD`, vòng focus `#1264A3`. Hàng tin nhắn: phẳng, không có bong bóng, avatar hình tròn 36px. Phản ứng: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Giọng điệu:**
> Slack ấm áp, chuyên nghiệp và mang tính con người. Trạng thái trống sử dụng hình minh họa thân thiện. CTA trực tiếp: "Gửi tin nhắn", "Bắt đầu". Thông báo lỗi rõ ràng và hữu ích. Không bao giờ gây hoảng sợ.
**Các anti-pattern cần tránh:**
> Không có vùng nội dung tối. Không có bong bóng hội thoại. Không có văn bản đen thuần. Không rải nhấn đa màu. Không có tên kênh CHỮ HOA. Không có phông chữ dưới 12px. Không có bán kính nút lớn.
open-design/design-systems/slack/DESIGN-zh-tw.md
+363
View File
@@ -0,0 +1,363 @@
# 受 Slack 啟發的設計系統
> Category: 生產力與 SaaS
> 職場通訊平台。以深茄紫為主色，多色調 Logo 調色板，明亮介面搭配深色側邊欄，溫暖而親切。
## 1. 視覺主題與氛圍
Slack 的品牌形象建立在「工作也可以充滿人情味，甚至有點趣味」的理念之上。標準介面是**明亮**的——白色內容區搭配深茄紫（`#4A154B`）側邊欄——與深色優先工具形成反差。這種對比是刻意為之：側邊欄是沉穩、始終存在的導航錨點，而內容區則明亮開闊。
Logo 調色板——藍、綠、黃、紅——主要出現在井號圖示和行銷場景中，而非散落於整個 UI。在產品本身中，Slack 使用克制、專業的配色系統，以茄紫色作為唯一的品牌錨點。
**核心特徵：**
- 明亮優先的內容介面：白色 `#FFFFFF` 與近白色 `#F8F8F8`
- 深茄紫 `#4A154B` 側邊欄——品牌最具辨識度的 UI 元素
- 四種 Logo 強調色（藍、綠、黃、紅）僅少量用作高亮
- 標題使用 Larsseit（行銷場景），UI 使用系統無襯線字體
- 圓潤但不卡通：大多數元件圓角為 4–8px
- 緊湊而透氣：訊息行緊密，討論串層級清晰
- 溫暖對話的語調——表情符號、回應和插圖是一等公民
---
## 2. 色彩規範與用途
### 品牌主色
| 變數 | Hex | 用途 |
|---|---|---|
| `--color-aubergine` | `#4A154B` | 側邊欄背景，品牌主色 |
| `--color-aubergine-dark` | `#350d36` | 茄紫介面上的懸停狀態 |
| `--color-aubergine-light` | `#611f69` | 側邊欄活躍項高亮 |
### Logo 強調色（少量使用——僅用於高亮、圖示、行銷）
| 變數 | Hex | 名稱 | 用途 |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | 天藍 | 頻道圖示、連結、資訊狀態 |
| `--color-green` | `#2EB67D` | 青綠 | 線上狀態、成功狀態 |
| `--color-yellow` | `#ECB22E` | 金黃 | 離開狀態、警告、高亮 |
| `--color-red` | `#E01E5A` | 寶石紅 | 通知、錯誤、提及徽章 |
### 介面背景色
| 變數 | Hex | 用途 |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | 主訊息區、彈窗 |
| `--bg-secondary` | `#F8F8F8` | 討論串面板、次級介面 |
| `--bg-tertiary` | `#F1F1F1` | 輸入框背景、懸停狀態 |
| `--bg-sidebar` | `#4A154B` | 左側邊欄（茄紫色） |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 側邊欄項懸停 |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 活躍側邊欄項 |
| `--bg-message-hover` | `#F8F8F8` | 訊息行懸停 |
### 文字顏色
| 變數 | Hex | 用途 |
|---|---|---|
| `--text-primary` | `#1D1C1D` | 主要正文（近黑色） |
| `--text-secondary` | `#616061` | 時間戳記、靜音標籤 |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | 側邊欄頻道名稱 |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 側邊欄未啟用項 |
| `--text-link` | `#1264A3` | 訊息內聯連結 |
| `--text-mention` | `#1264A3` | @提及文字顏色 |
### 語意色
| 變數 | Hex | 用途 |
|---|---|---|
| `--color-success` | `#2EB67D` | 成功提示、積極狀態 |
| `--color-warning` | `#ECB22E` | 警告狀態 |
| `--color-danger` | `#E01E5A` | 錯誤狀態、破壞性操作 |
| `--color-info` | `#36C5F0` | 資訊性高亮 |
### 邊框與分隔線
| 變數 | Hex | 用途 |
|---|---|---|
| `--border-default` | `#DDDDDD` | 標準分隔線、卡片邊框 |
| `--border-subtle` | `#F1F1F1` | 行間細微分隔線 |
| `--border-focus` | `#1264A3` | 焦點環顏色 |
---
## 3. 字體排版規則
### 字體
| 用途 | 官方字體 | 網頁後備 |
|---|---|---|
| 展示 / 行銷標題 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / 正文 / 框架 | Slack Lato（定製） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| 程式碼 / 等寬 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack 行銷標題使用 **Larsseit**，產品內 UI 使用定製版 Lato。網頁使用時，`system-ui` 是最安全的後備方案。
### 字號層級
| 層級 | 大小 | 字重 | 行高 | 字間距 | 用途 |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | 行銷主視覺標題 |
| Display L | 36px | 700 | 1.15 | -0.5px | 區塊主視覺 |
| Heading 1 | 28px | 700 | 1.25 | normal | 彈窗標題、頁面標題 |
| Heading 2 | 22px | 700 | 1.3 | normal | 卡片標題、設定區塊 |
| Heading 3 | 18px | 700 | 1.35 | normal | 子區塊標題 |
| Body L | 16px | 400 | 1.5 | normal | 訊息文字、說明 |
| Body | 15px | 400 | 1.46667 | normal | 預設 UI 文字（Slack 基礎字號） |
| Body SM | 13px | 400 | 1.38462 | normal | 次要元資料 |
| Caption | 12px | 400 | 1.33 | normal | 時間戳記、提示 |
| Code | 12px | 400 | 1.5 | normal | 行內程式碼、程式碼區塊 |
### 排版規則
- Slack 基礎正文字號為 **15px**——比 16px 略小，以提高密度
- 未讀頻道：字重 700——粗體是主要的未讀指示器
- 時間戳記：12px `--text-secondary`，僅懸停時顯示
- 程式碼區塊：背景 `#F8F8F8`，邊框 `1px solid #DDDDDD`，圓角 4px
- 不使用 12px 以下的字號
- 行銷標題：大展示尺寸使用字間距 `-1px`
---
## 4. 元件樣式
### 按鈕
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### 輸入框
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### 側邊欄頻道項
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### 未讀徽章
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### 訊息附件 / 卡片
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### 回應
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. 版面原則
### 三欄版面
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### 間距系統（基礎單位 4px）
| 變數 | 數值 | 用途 |
|---|---|---|
| `--space-1` | 4px | 緊湊間隙 |
| `--space-2` | 8px | 元件內邊距 |
| `--space-3` | 12px | 輸入框內邊距 |
| `--space-4` | 16px | 標準內邊距 |
| `--space-6` | 24px | 卡片內邊距 |
| `--space-8` | 32px | 區塊間距 |
### 側邊欄結構
```
[工作區名稱 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### 訊息編輯器
- 固定在訊息區底部
- `border: 1px solid #DDDDDD`，`border-radius: 8px`，`margin: 0 16px 16px`
- 工具列：表情符號、附件、格式化、傳送按鈕
---
## 6. 深度與層級
Slack 在明亮介面上使用輕柔陰影：
| 層級 | 用途 | 陰影 |
|---|---|---|
| 扁平 | 訊息行、側邊欄項 | none |
| 低 | 卡片、輸入框 | `0 1px 3px rgba(0,0,0,0.08)` |
| 中 | 下拉選單、彈出層 | `0 4px 12px rgba(0,0,0,0.12)` |
| 高 | 強制回應視窗、對話框 | `0 8px 24px rgba(0,0,0,0.15)` |
| 遮罩 | 強制回應背景遮罩 | `rgba(0,0,0,0.5)` |
---
## 7. 應該與不應該
### ✅ 應該
- 側邊欄使用茄紫色 `#4A154B`——這是 Slack 最標誌性的 UI 元素
- 保持主內容區白色和明亮
- 所有正文使用 `#1D1C1D`（近黑色），而非純黑
- 用粗體頻道名稱表示未讀狀態——字重是指示器
- 四種強調色僅用於語意角色（成功、警告、危險、資訊）
- 訊息附件和嵌入內容使用 `border-left: 4px`
- 僅在懸停時顯示時間戳記
- 連結和焦點狀態使用 `#1264A3`
- 側邊欄項保持緊湊：高度 28px，圓角 6px
### ❌ 不應該
- 不要使用深色主內容區——Slack 是明亮優先的
- 不要將藍/綠/黃/紅作為裝飾性強調色散落各處
- 不要使用純黑 `#000000` 作為文字顏色
- 不要使用氣泡——訊息是扁平行
- 不要將按鈕做成大圓角——4px 是標準
- 不要永久顯示時間戳記
- 不要將頻道名稱全大寫
- 不要使用 12px 以下的字號
---
## 8. 響應式行為
### 斷點
| 斷點 | 寬度 | 版面 |
|---|---|---|
| 行動裝置 | < 768px | 單面板，側邊欄作為左抽屜 |
| 平板 | 768–1024px | 側邊欄 + 僅訊息區 |
| 桌機 | > 1024px | 完整三欄版面 |
### 行動端適配
- 側邊欄：左抽屜，向右滑動開啟
- 底部標籤列：首頁、私訊、動態、我
- 討論串面板：全螢幕覆蓋層
- 編輯器：固定在鍵盤上方
- 頻道清單項：44px 觸控目標高度
- 行動端保留茄紫色頂部標題列
---
## 9. Agent 提示指南
產生 Slack 風格設計時，遵循以下方法：
**顏色應用：**
> 將 `background: #FFFFFF` 設為主畫布。側邊欄使用 `#4A154B`（茄紫色）。所有主要文字使用 `#1D1C1D`。連結和焦點環使用 `#1264A3`。四種 Logo 顏色——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——僅作語意用途：資訊、成功、警告、危險。
**排版：**
> 所有 UI 使用 `system-ui, -apple-system, sans-serif`。基礎字號為 15px。未讀頻道：字重 700。正文：字重 400。時間戳記：12px `#616061`，僅懸停顯示。程式碼：`Monaco, Menlo, monospace`，12px，背景 `#F8F8F8`。
**版面：**
> 三欄：240px 茄紫色側邊欄 + 彈性白色訊息區 + 可選 400px 討論串面板。側邊欄項：高度 28px，圓角 6px，未讀時加粗。編輯器：固定底部，`border: 1px solid #DDDDDD`，`border-radius: 8px`。
**元件：**
> 按鈕：圓角 4px，高度 36px，茄紫色主按鈕。輸入框：`1px solid #DDDDDD` 邊框，`#1264A3` 焦點環。訊息行：扁平，無氣泡，36px 圓形頭像。回應：膠囊形 `border: 1px solid #DDDDDD`，`border-radius: 24px`。
**語調：**
> Slack 是溫暖、專業且充滿人情味的。空狀態使用友善插圖。行動呼籲直接明確：「Send message」、「Get started」。錯誤訊息清晰且有幫助。絕不令人感到警覺。
**需要避免的反模式：**
> 不要深色內容區。不要氣泡。不要純黑文字。不要散落的多色強調。不要全大寫頻道名稱。不要低於 12px 的字號。不要大圓角按鈕。
open-design/design-systems/slack/DESIGN-zh.md
+363
View File
@@ -0,0 +1,363 @@
# 受 Slack 启发的设计系统
> Category: 生产力与 SaaS
> 职场通讯平台。以深茄紫为主色，多色调 Logo 调色板，明亮界面搭配深色侧边栏，温暖而亲切。
## 1. 视觉主题与氛围
Slack 的品牌形象建立在"工作也可以充满人情味，甚至有点趣味"的理念之上。标准界面是**明亮**的——白色内容区搭配深茄紫（`#4A154B`）侧边栏——与深色优先工具形成反差。这种对比是刻意为之：侧边栏是沉稳、始终存在的导航锚点，而内容区则明亮开阔。
Logo 调色板——蓝、绿、黄、红——主要出现在井号图标和营销场景中，而非散落于整个 UI。在产品本身中，Slack 使用克制、专业的配色系统，以茄紫色作为唯一的品牌锚点。
**核心特征：**
- 明亮优先的内容界面：白色 `#FFFFFF` 与近白色 `#F8F8F8`
- 深茄紫 `#4A154B` 侧边栏——品牌最具辨识度的 UI 元素
- 四种 Logo 强调色（蓝、绿、黄、红）仅少量用作高亮
- 标题使用 Larsseit（营销场景），UI 使用系统无衬线字体
- 圆润但不卡通：大多数组件圆角为 4–8px
- 紧凑而透气：消息行紧密，线程层级清晰
- 温暖对话的语调——表情符号、回应和插图是一等公民
---
## 2. 色彩规范与用途
### 品牌主色
| 变量 | Hex | 用途 |
|---|---|---|
| `--color-aubergine` | `#4A154B` | 侧边栏背景，品牌主色 |
| `--color-aubergine-dark` | `#350d36` | 茄紫界面上的悬停状态 |
| `--color-aubergine-light` | `#611f69` | 侧边栏活跃项高亮 |
### Logo 强调色（少量使用——仅用于高亮、图标、营销）
| 变量 | Hex | 名称 | 用途 |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | 天蓝 | 频道图标、链接、信息状态 |
| `--color-green` | `#2EB67D` | 青绿 | 在线状态、成功状态 |
| `--color-yellow` | `#ECB22E` | 金黄 | 离开状态、警告、高亮 |
| `--color-red` | `#E01E5A` | 宝石红 | 通知、错误、提及徽章 |
### 界面背景色
| 变量 | Hex | 用途 |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | 主消息区、弹窗 |
| `--bg-secondary` | `#F8F8F8` | 线程面板、次级界面 |
| `--bg-tertiary` | `#F1F1F1` | 输入框背景、悬停状态 |
| `--bg-sidebar` | `#4A154B` | 左侧边栏（茄紫色） |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 侧边栏项悬停 |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 活跃侧边栏项 |
| `--bg-message-hover` | `#F8F8F8` | 消息行悬停 |
### 文字颜色
| 变量 | Hex | 用途 |
|---|---|---|
| `--text-primary` | `#1D1C1D` | 主要正文（近黑色） |
| `--text-secondary` | `#616061` | 时间戳、静音标签 |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | 侧边栏频道名 |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 侧边栏未激活项 |
| `--text-link` | `#1264A3` | 消息内联链接 |
| `--text-mention` | `#1264A3` | @提及文字颜色 |
### 语义色
| 变量 | Hex | 用途 |
|---|---|---|
| `--color-success` | `#2EB67D` | 成功提示、积极状态 |
| `--color-warning` | `#ECB22E` | 警告状态 |
| `--color-danger` | `#E01E5A` | 错误状态、破坏性操作 |
| `--color-info` | `#36C5F0` | 信息性高亮 |
### 边框与分隔线
| 变量 | Hex | 用途 |
|---|---|---|
| `--border-default` | `#DDDDDD` | 标准分隔线、卡片边框 |
| `--border-subtle` | `#F1F1F1` | 行间微妙分隔线 |
| `--border-focus` | `#1264A3` | 焦点环颜色 |
---
## 3. 排版规则
### 字体
| 用途 | 官方字体 | 网页回退 |
|---|---|---|
| 展示 / 营销标题 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / 正文 / 框架 | Slack Lato（定制） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| 代码 / 等宽 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack 营销标题使用 **Larsseit**，产品内 UI 使用定制版 Lato。网页使用时，`system-ui` 是最安全的回退方案。
### 字号层级
| 层级 | 大小 | 字重 | 行高 | 字间距 | 用途 |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | 营销主视觉标题 |
| Display L | 36px | 700 | 1.15 | -0.5px | 区块主视觉 |
| Heading 1 | 28px | 700 | 1.25 | normal | 弹窗标题、页面标题 |
| Heading 2 | 22px | 700 | 1.3 | normal | 卡片标题、设置区块 |
| Heading 3 | 18px | 700 | 1.35 | normal | 子区块标题 |
| Body L | 16px | 400 | 1.5 | normal | 消息文本、描述 |
| Body | 15px | 400 | 1.46667 | normal | 默认 UI 文字（Slack 基础字号） |
| Body SM | 13px | 400 | 1.38462 | normal | 次要元数据 |
| Caption | 12px | 400 | 1.33 | normal | 时间戳、提示 |
| Code | 12px | 400 | 1.5 | normal | 行内代码、代码块 |
### 排版规则
- Slack 基础正文字号为 **15px**——比 16px 略小，以提高密度
- 未读频道：字重 700——粗体是主要的未读指示器
- 时间戳：12px `--text-secondary`，仅悬停时显示
- 代码块：背景 `#F8F8F8`，边框 `1px solid #DDDDDD`，圆角 4px
- 不使用 12px 以下的字号
- 营销标题：大展示尺寸使用字间距 `-1px`
---
## 4. 组件样式
### 按钮
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### 输入框
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### 侧边栏频道项
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### 未读徽章
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### 消息附件 / 卡片
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### 回应
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. 布局原则
### 三栏布局
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### 间距系统（基础单位 4px）
| 变量 | 数值 | 用途 |
|---|---|---|
| `--space-1` | 4px | 紧凑间隙 |
| `--space-2` | 8px | 组件内边距 |
| `--space-3` | 12px | 输入框内边距 |
| `--space-4` | 16px | 标准内边距 |
| `--space-6` | 24px | 卡片内边距 |
| `--space-8` | 32px | 区块间距 |
### 侧边栏结构
```
[工作区名称 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### 消息编辑器
- 固定在消息区底部
- `border: 1px solid #DDDDDD`，`border-radius: 8px`，`margin: 0 16px 16px`
- 工具栏：表情、附件、格式化、发送按钮
---
## 6. 深度与层级
Slack 在明亮界面上使用轻柔阴影：
| 层级 | 用途 | 阴影 |
|---|---|---|
| 扁平 | 消息行、侧边栏项 | none |
| 低 | 卡片、输入框 | `0 1px 3px rgba(0,0,0,0.08)` |
| 中 | 下拉菜单、弹出层 | `0 4px 12px rgba(0,0,0,0.12)` |
| 高 | 模态框、对话框 | `0 8px 24px rgba(0,0,0,0.15)` |
| 遮罩 | 模态背景遮罩 | `rgba(0,0,0,0.5)` |
---
## 7. 应该与不应该
### ✅ 应该
- 侧边栏使用茄紫色 `#4A154B`——这是 Slack 最标志性的 UI 元素
- 保持主内容区白色和明亮
- 所有正文使用 `#1D1C1D`（近黑色），而非纯黑
- 用粗体频道名表示未读状态——字重是指示器
- 四种强调色仅用于语义角色（成功、警告、危险、信息）
- 消息附件和嵌入内容使用 `border-left: 4px`
- 仅在悬停时显示时间戳
- 链接和焦点状态使用 `#1264A3`
- 侧边栏项保持紧凑：高度 28px，圆角 6px
### ❌ 不应该
- 不要使用深色主内容区——Slack 是明亮优先的
- 不要将蓝/绿/黄/红作为装饰性强调色散落各处
- 不要使用纯黑 `#000000` 作为文字颜色
- 不要使用气泡——消息是扁平行
- 不要将按钮做成大圆角——4px 是标准
- 不要永久显示时间戳
- 不要将频道名全大写
- 不要使用 12px 以下的字号
---
## 8. 响应式行为
### 断点
| 断点 | 宽度 | 布局 |
|---|---|---|
| 移动端 | < 768px | 单面板，侧边栏作为左抽屉 |
| 平板 | 768–1024px | 侧边栏 + 仅消息区 |
| 桌面端 | > 1024px | 完整三栏布局 |
### 移动端适配
- 侧边栏：左抽屉，向右滑动打开
- 底部标签栏：首页、私信、动态、我
- 线程面板：全屏覆盖层
- 编辑器：固定在键盘上方
- 频道列表项：44px 触摸目标高度
- 移动端保留茄紫色顶部标题栏
---
## 9. Agent 提示指南
生成 Slack 风格设计时，遵循以下方法：
**颜色应用：**
> 将 `background: #FFFFFF` 设为主画布。侧边栏使用 `#4A154B`（茄紫色）。所有主要文字使用 `#1D1C1D`。链接和焦点环使用 `#1264A3`。四种 Logo 颜色——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——仅作语义用途：信息、成功、警告、危险。
**排版：**
> 所有 UI 使用 `system-ui, -apple-system, sans-serif`。基础字号为 15px。未读频道：字重 700。正文：字重 400。时间戳：12px `#616061`，仅悬停显示。代码：`Monaco, Menlo, monospace`，12px，背景 `#F8F8F8`。
**布局：**
> 三栏：240px 茄紫色侧边栏 + 弹性白色消息区 + 可选 400px 线程面板。侧边栏项：高度 28px，圆角 6px，未读时加粗。编辑器：固定底部，`border: 1px solid #DDDDDD`，`border-radius: 8px`。
**组件：**
> 按钮：圆角 4px，高度 36px，茄紫色主按钮。输入框：`1px solid #DDDDDD` 边框，`#1264A3` 焦点环。消息行：扁平，无气泡，36px 圆形头像。回应：胶囊形 `border: 1px solid #DDDDDD`，`border-radius: 24px`。
**语调：**
> Slack 是温暖、专业且充满人情味的。空状态使用友好插图。行动号召直接明确："Send message"、"Get started"。错误信息清晰且有帮助。绝不令人感到警觉。
**需要避免的反模式：**
> 不要深色内容区。不要气泡。不要纯黑文字。不要散落的多色强调。不要全大写频道名。不要低于 12px 的字号。不要大圆角按钮。
open-design/design-systems/slack/DESIGN.md
+363
View File
@@ -0,0 +1,363 @@
# Design System Inspired by Slack
> Category: Productivity & SaaS
> Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.
## 1. Visual Theme & Atmosphere
Slack's identity is built around the idea that work should feel human and even a little fun. The canonical surface is **light** — white content areas with a deep aubergine (`#4A154B`) sidebar — the inverse of dark-first tools. This contrast is intentional: the sidebar is a calm, always-present navigation anchor, while the content area is bright and open.
The logo palette — blue, green, yellow, red — appears primarily in the hashtag icon and marketing contexts, not scattered through the UI. In the product itself, Slack uses a restrained, professional color system with aubergine as the sole brand anchor.
**Key Characteristics:**
- Light-first content surfaces: white `#FFFFFF` and near-white `#F8F8F8`
- Deep aubergine `#4A154B` sidebar — the brand's most recognizable UI element
- Four logo accent colors (blue, green, yellow, red) used sparingly as highlights only
- Larsseit for headings (marketing), system sans-serif for UI
- Rounded but not cartoonish: 4–8px radius on most components
- Dense but breathable: compact message rows with clear thread hierarchy
- Warm and conversational tone — emojis, reactions, and illustrations are first-class
---
## 2. Color Palette & Roles
### Brand Primary
| Token | Hex | Role |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Sidebar background, primary brand color |
| `--color-aubergine-dark` | `#350d36` | Hover states on aubergine surfaces |
| `--color-aubergine-light` | `#611f69` | Active item highlight in sidebar |
### Logo Accent Colors (use sparingly — highlights, icons, marketing only)
| Token | Hex | Name | Role |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Sky Blue | Channel icons, links, info states |
| `--color-green` | `#2EB67D` | Teal Green | Online status, success states |
| `--color-yellow` | `#ECB22E` | Gold | Away status, warnings, highlights |
| `--color-red` | `#E01E5A` | Ruby | Notifications, errors, mentions badge |
### Surface & Background
| Token | Hex | Role |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Main message area, modals |
| `--bg-secondary` | `#F8F8F8` | Thread panels, secondary surfaces |
| `--bg-tertiary` | `#F1F1F1` | Input backgrounds, hover states |
| `--bg-sidebar` | `#4A154B` | Left sidebar (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Sidebar item hover |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Active sidebar item |
| `--bg-message-hover` | `#F8F8F8` | Message row hover |
### Text Colors
| Token | Hex | Role |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Primary body text (near-black) |
| `--text-secondary` | `#616061` | Timestamps, muted labels |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Sidebar channel names |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Sidebar inactive items |
| `--text-link` | `#1264A3` | Inline links in messages |
| `--text-mention` | `#1264A3` | @mention text color |
### Semantic Colors
| Token | Hex | Role |
|---|---|---|
| `--color-success` | `#2EB67D` | Success toasts, positive states |
| `--color-warning` | `#ECB22E` | Warning states |
| `--color-danger` | `#E01E5A` | Error states, destructive actions |
| `--color-info` | `#36C5F0` | Informational highlights |
### Border & Divider
| Token | Hex | Role |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standard dividers, card borders |
| `--border-subtle` | `#F1F1F1` | Subtle separators between rows |
| `--border-focus` | `#1264A3` | Focus ring color |
---
## 3. Typography Rules
### Typefaces
| Role | Official | Web Fallback |
|---|---|---|
| Display / Marketing Headings | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Body / Chrome | Slack Lato (custom) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack uses **Larsseit** for marketing headlines and a custom Lato variant for in-product UI. For web use, `system-ui` is the safest fallback.
### Type Scale
| Level | Size | Weight | Line Height | Letter Spacing | Usage |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Marketing hero headlines |
| Display L | 36px | 700 | 1.15 | -0.5px | Section heroes |
| Heading 1 | 28px | 700 | 1.25 | normal | Modal titles, page headers |
| Heading 2 | 22px | 700 | 1.3 | normal | Card titles, settings sections |
| Heading 3 | 18px | 700 | 1.35 | normal | Sub-section headers |
| Body L | 16px | 400 | 1.5 | normal | Message text, descriptions |
| Body | 15px | 400 | 1.46667 | normal | Default UI text (Slack's base size) |
| Body SM | 13px | 400 | 1.38462 | normal | Secondary metadata |
| Caption | 12px | 400 | 1.33 | normal | Timestamps, hints |
| Code | 12px | 400 | 1.5 | normal | Inline code, code blocks |
### Type Rules
- Slack's base body size is **15px** — slightly smaller than 16px for density
- Unread channels: weight 700 — bold is the primary unread indicator
- Timestamps: 12px `--text-secondary`, show on hover only
- Code blocks: background `#F8F8F8`, border `1px solid #DDDDDD`, border-radius 4px
- Never use font sizes below 12px
- Marketing headings: letter-spacing `-1px` for large display sizes
---
## 4. Component Stylings
### Buttons
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Input Fields
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Sidebar Channel Item
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Unread Badge
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Message Attachments / Cards
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reactions
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Layout Principles
### Three-Column Layout
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Spacing System (4px base)
| Token | Value | Usage |
|---|---|---|
| `--space-1` | 4px | Tight gaps |
| `--space-2` | 8px | Component padding |
| `--space-3` | 12px | Input padding |
| `--space-4` | 16px | Standard padding |
| `--space-6` | 24px | Card padding |
| `--space-8` | 32px | Section gaps |
### Sidebar Structure
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Message Composer
- Pinned to bottom of message area
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Toolbar: emoji, attach, format, send button
---
## 6. Depth & Elevation
Slack uses light shadows on a light surface:
| Level | Usage | Shadow |
|---|---|---|
| Flat | Message rows, sidebar items | none |
| Low | Cards, inputs | `0 1px 3px rgba(0,0,0,0.08)` |
| Medium | Dropdowns, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| High | Modals, dialogs | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Modal backdrops | `rgba(0,0,0,0.5)` |
---
## 7. Do's and Don'ts
### ✅ Do
- Use aubergine `#4A154B` for the sidebar — it is Slack's most iconic UI element
- Keep the main content area white and light
- Use `#1D1C1D` (near-black) for all body text, not pure black
- Bold channel names to show unread status — weight is the indicator
- Use the four accent colors only for semantic roles (success, warning, danger, info)
- Apply `border-left: 4px` on message attachments and embeds
- Show timestamps on hover only
- Use `#1264A3` for links and focus states
- Keep sidebar items compact: 28px height, 6px border-radius
### ❌ Don't
- Don't use a dark main content area — Slack is light-first
- Don't scatter blue/green/yellow/red as decorative accents
- Don't use pure black `#000000` for text
- Don't use speech bubbles — messages are flat rows
- Don't make buttons large-radius — 4px is standard
- Don't show timestamps permanently
- Don't use ALL CAPS for channel names
- Don't use font sizes below 12px
---
## 8. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Layout |
|---|---|---|
| Mobile | < 768px | Single panel, sidebar as left drawer |
| Tablet | 768–1024px | Sidebar + message area only |
| Desktop | > 1024px | Full three-column layout |
### Mobile Adaptations
- Sidebar: left drawer, swipe right to open
- Bottom tab bar: Home, DMs, Activity, You
- Thread panel: full-screen overlay
- Composer: pinned above keyboard
- Channel list items: 44px touch target height
- Aubergine top header bar retained on mobile
---
## 9. Agent Prompt Guide
When generating Slack-styled designs, follow this approach:
**Color application:**
> Set `background: #FFFFFF` as the main canvas. Use `#4A154B` (aubergine) for the sidebar. All primary text is `#1D1C1D`. Links and focus rings use `#1264A3`. The four logo colors — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — are semantic only: info, success, warning, danger.
**Typography:**
> Use `system-ui, -apple-system, sans-serif` for all UI. Base size is 15px. Unread channels: weight 700. Body text: weight 400. Timestamps: 12px `#616061`, hover-only. Code: `Monaco, Menlo, monospace`, 12px, `#F8F8F8` background.
**Layout:**
> Three columns: 240px aubergine sidebar + flex white message area + optional 400px thread panel. Sidebar items: 28px height, 6px radius, bold when unread. Composer: pinned bottom, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Components:**
> Buttons: 4px radius, 36px height, aubergine primary. Inputs: `1px solid #DDDDDD` border, `#1264A3` focus ring. Message rows: flat, no bubbles, 36px circle avatar. Reactions: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Tone:**
> Slack is warm, professional, and human. Empty states use friendly illustrations. CTAs are direct: "Send message", "Get started". Error messages are clear and helpful. Never alarming.
**Anti-patterns to avoid:**
> No dark content area. No speech bubbles. No pure black text. No scattered multi-color accents. No ALL CAPS channel names. No font below 12px. No large button radius.
open-design/design-systems/slack/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Slack 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
- Light-first content surfaces: white `#FFFFFF` and near-white `#F8F8F8`
- Deep aubergine `#4A154B` sidebar — the brand's most recognizable UI element
- Four logo accent colors (blue, green, yellow, red) used sparingly as highlights only
- Larsseit for headings (marketing), system sans-serif for UI
## 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`.
open-design/design-systems/slack/components.html
+387
View File
@@ -0,0 +1,387 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Slack — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/slack. Every visible
value comes from tokens.css. Slack's signature moves: aubergine
sidebar (#4A154B), white content surfaces, Larsseit display,
4px button radius, logo-color semantic palette."
/>
<style>
:root {
--bg: #ffffff;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--muted: #616061;
--meta: #616061;
--border: #dddddd;
--border-soft: #f1f1f1;
--accent: #4a154b;
--accent-on: #ffffff;
--accent-hover: #611f69;
--accent-active: #350d36;
--success: #2eb67d;
--warn: #ecb22e;
--danger: #e01e5a;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--text-lg: 16px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--leading-body: 1.5;
--leading-tight: 1.10;
--tracking-display: -0.021em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--motion-fast: 150ms;
--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-soft); }
@media (max-width: 1023px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 639px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography ─────────────────────────── */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
margin: 0;
line-height: var(--leading-tight);
color: var(--fg);
}
h1 {
font-size: var(--text-4xl);
letter-spacing: var(--tracking-display);
}
h2 {
font-size: var(--text-3xl);
/* 36px section hero: line-height 1.15, tracking -0.5px (-0.014em). */
line-height: 1.15;
letter-spacing: -0.014em;
}
h3 {
font-size: var(--text-2xl);
/* 28px heading 1: line-height 1.25 per DESIGN.md.
Overrides the shared 1.10 set above. */
line-height: 1.25;
}
p { margin: 0; }
.lead {
font-size: var(--text-lg);
line-height: 1.5;
color: var(--muted);
}
.body-muted { color: var(--muted); }
.body-sm { font-size: var(--text-sm); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
/* ─── Buttons ─────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-4);
height: 36px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 700;
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: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface); }
.btn-danger {
background: var(--danger);
color: #ffffff;
}
/* ─── Sidebar ─────────────────────────────── */
.sidebar {
background: var(--accent);
border-radius: var(--radius-md);
padding: var(--space-4);
color: rgba(255, 255, 255, 0.9);
font-size: var(--text-base);
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 220px;
}
.sidebar-title {
font-weight: 700;
color: #ffffff;
font-size: var(--text-base);
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-2);
}
.channel-item {
display: flex;
align-items: center;
gap: var(--space-2);
height: 28px;
padding: 0 var(--space-4);
border-radius: 6px;
color: rgba(255, 255, 255, 0.7);
font-size: var(--text-base);
font-weight: 400;
cursor: pointer;
transition: background-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard);
}
.channel-item:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.channel-item.active {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.channel-item.unread {
color: #ffffff;
font-weight: 700;
}
/* ─── Reaction ───────────────────────────── */
.reaction {
display: inline-flex;
align-items: center;
gap: var(--space-1);
border: 1px solid var(--border);
border-radius: 24px;
background: var(--surface);
padding: 2px 8px;
font-size: var(--text-sm);
cursor: pointer;
transition: background-color var(--motion-fast) var(--ease-standard);
}
.reaction:hover { background: var(--border-soft); }
.reaction.active {
background: rgba(18, 100, 163, 0.1);
border-color: #1264a3;
}
/* ─── Input ──────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-base); font-weight: 700; color: var(--fg); }
.field input {
background: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 12px;
font-size: var(--text-base);
height: 36px;
outline: none;
transition: border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
border-color: #1264a3;
box-shadow: var(--focus-ring);
}
/* ─── 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-5);
}
@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">
<h1>Made for people. Built for productivity.</h1>
<p class="lead" style="max-width:48ch">
Slack brings your team's communication and tools together in one
place. Warm, human, and structured around the aubergine sidebar
that's become a workplace icon.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">Try Slack for free</a>
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
</div>
</div>
<aside>
<div class="sidebar">
<div class="sidebar-title">open-design ▼</div>
<div class="channel-item"># threads</div>
<div class="channel-item"># all-dms</div>
<div class="channel-item active"># general</div>
<div class="channel-item unread"># design ●</div>
<div class="channel-item"># engineering</div>
<div class="channel-item"># random</div>
</div>
</aside>
</div>
</section>
<!-- FEATURES -->
<section data-od-id="features">
<h2 style="max-width:28ch;margin-bottom:var(--space-6)">Warm, professional, human.</h2>
<div class="features-grid">
<article style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)" class="stack-3">
<h3>Aubergine sidebar</h3>
<p class="body-muted body-sm">
#4A154B — the most recognizable UI element in workplace software.
Channel items: 28px height, 6px radius, bold when unread.
</p>
</article>
<article style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)" class="stack-3">
<h3>Logo palette</h3>
<p class="body-muted body-sm">
Blue (#36C5F0), green (#2EB67D), yellow (#ECB22E), red (#E01E5A) —
strictly semantic. Info, success, warning, danger. Never decorative.
</p>
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-3)">
<span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:#36c5f0"></span>
<span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:#2eb67d"></span>
<span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:#ecb22e"></span>
<span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:#e01e5a"></span>
</div>
</article>
<article style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)" class="stack-3">
<h3>Reactions</h3>
<p class="body-muted body-sm">
Pill border-radius 24px, 1px border, surface background. Active
state: tinted blue. Timestamps show on hover only.
</p>
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap">
<span class="reaction active">👍 3</span>
<span class="reaction">🎉 1</span>
<span class="reaction">❤️ 2</span>
</div>
</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">
<h2>Inputs and buttons.</h2>
<p class="body-muted" style="max-width:44ch">
4px radius on buttons and inputs — not cartoonish.
Focus ring: 2px solid #1264A3. Height 36px, font-size 15px.
</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">Work email</label>
<input id="email" type="email" placeholder="[email protected]" />
</div>
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
<button type="submit" class="btn btn-primary">Get started</button>
<button type="button" class="btn btn-secondary">Skip</button>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/components.manifest.json
+395
View File
@@ -0,0 +1,395 @@
{
"schemaVersion": 1,
"brandId": "slack",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Slack — reference components",
"description": "Reference fixture for design-systems/slack. Every visible value comes from tokens.css. Slack's signature moves: aubergine sidebar (#4A154B), white content surfaces, Larsseit display, 4px button radius, logo-color semantic palette.",
"styleBlockCount": 1,
"selectorCount": 42,
"classCount": 19,
"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",
"--danger",
"--ease-standard",
"--fg",
"--focus-ring",
"--font-body",
"--font-display",
"--leading-body",
"--leading-tight",
"--motion-fast",
"--muted",
"--radius-md",
"--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",
"--surface",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--tracking-display"
],
"unusedDeclared": [
"--accent-active",
"--elev-flat",
"--elev-raised",
"--elev-ring",
"--fg-2",
"--font-mono",
"--meta",
"--motion-base",
"--radius-lg",
"--radius-pill",
"--space-8",
"--success",
"--surface-warm",
"--text-xl",
"--text-xs",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".body-muted",
".body-sm",
".btn",
".btn-danger",
".btn-primary",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".channel-item",
".channel-item:hover",
".channel-item.active",
".channel-item.unread",
".container",
".features-grid",
".field",
".field input",
".field input::placeholder",
".field input:focus",
".field label",
".hero-actions",
".hero-grid",
".lead",
".reaction",
".reaction:hover",
".reaction.active",
".sidebar",
".sidebar-title",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"*",
"*::after",
"*::before",
"body",
"h1",
"h2",
"h3",
"html",
"p",
"section",
"section + section"
],
"classes": [
"active",
"body-muted",
"body-sm",
"btn",
"btn-primary",
"btn-secondary",
"channel-item",
"container",
"features-grid",
"field",
"hero-actions",
"hero-grid",
"lead",
"reaction",
"sidebar",
"sidebar-title",
"stack-3",
"stack-4",
"unread"
],
"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",
"--surface"
]
},
{
"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",
"--muted",
"--text-base"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": false,
"selectors": [],
"classes": [],
"elements": [],
"tokenReferences": []
},
{
"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",
".lead",
"h1",
"h2",
"h3"
],
"classes": [
"body-muted",
"body-sm",
"lead"
],
"elements": [
"h1",
"h2",
"h3",
"p"
],
"tokenReferences": [
"--fg",
"--font-display",
"--leading-tight",
"--muted",
"--text-3xl"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"section",
"section + section"
],
"classes": [
"container",
"features-grid",
"hero-grid",
"stack-3",
"stack-4"
],
"elements": [
"main",
"section"
],
"tokenReferences": [
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--space-3",
"--space-6"
]
}
],
"literals": {
"colorExpressions": 12,
"pixelValues": 19,
"hardcodedFontFamilies": 3
}
}
open-design/design-systems/slack/design-tokens.json
+701
View File
@@ -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": 1,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"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": "#f8f8f8",
"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": "var(--surface)",
"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": "#1d1c1d",
"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": "#1d1c1d",
"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": "#616061",
"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": "#616061",
"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": "#dddddd",
"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": "#f1f1f1",
"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": "#4a154b",
"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": "#611f69",
"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": "#350d36",
"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": "#2eb67d",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:54"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#ecb22e",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:55"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#e01e5a",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:56"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"Larsseit\", \"Helvetica Neue\", 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:59"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", 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:60"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"value": "\"Monaco\", \"Menlo\", \"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:61"
],
"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:67"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"value": "13px",
"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:68"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"value": "15px",
"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:69"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "16px",
"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:70"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "22px",
"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:71"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "28px",
"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:72"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"value": "36px",
"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:73"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "48px",
"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:74"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"value": "1.5",
"type": "number",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:80"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.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:81"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"value": "-0.021em",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:82"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:86"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"value": "8px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:87"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:88"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"value": "16px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:89"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"value": "20px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:90"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"value": "24px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:91"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"value": "32px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:92"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"value": "48px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:93"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"value": "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:96"
],
"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:97"
],
"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:98"
],
"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:102"
],
"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:103"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:104"
],
"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:105"
],
"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:109"
],
"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:110"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "0 4px 12px rgba(0, 0, 0, 0.12)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:111"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"value": "0 0 0 2px rgba(18, 100, 163, 0.25)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:115"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"value": "150ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:118"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"value": "200ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:119"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"value": "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:120"
],
"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:123"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:124"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:125"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:126"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/slack/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "slack",
"name": "Slack",
"category": "Productivity & SaaS",
"description": "Bundled OpenDesign package for Slack, 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"
}
}
open-design/design-systems/slack/preview/colors.html
+39
View File
@@ -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>Slack 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>
open-design/design-systems/slack/preview/spacing.html
+41
View File
@@ -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>Slack 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>
open-design/design-systems/slack/preview/typography.html
+34
View File
@@ -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>Slack 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 Slack</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>
open-design/design-systems/slack/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Slack 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/slack/DESIGN.md
- design-systems/slack/tokens.css
- design-systems/slack/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.
open-design/design-systems/slack/source/token-contract.report.json
+641
View File
@@ -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": 1,
"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": "#ffffff",
"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": "#f8f8f8",
"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": "var(--surface)",
"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": "#1d1c1d",
"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": "#1d1c1d",
"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": "#616061",
"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": "#616061",
"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": "#dddddd",
"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": "#f1f1f1",
"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": "#4a154b",
"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": "#611f69",
"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": "#350d36",
"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": "#2eb67d",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:54"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#ecb22e",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:55"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#e01e5a",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:56"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"Larsseit\", \"Helvetica Neue\", Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:59"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:60"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"layer": "A2",
"value": "\"Monaco\", \"Menlo\", \"Courier New\", Courier, monospace",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:61"
],
"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:67"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"layer": "A1-structure",
"value": "13px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:68"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"layer": "A1-structure",
"value": "15px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:69"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:70"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "22px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:71"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "28px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:72"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"layer": "A1-structure",
"value": "36px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:73"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:74"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"layer": "A1-structure",
"value": "1.5",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:80"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.10",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:81"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"layer": "A1-structure",
"value": "-0.021em",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:82"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:86"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"layer": "A2",
"value": "8px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:87"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:88"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"layer": "A2",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:89"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"layer": "A2",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:90"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"layer": "A2",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:91"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"layer": "A2",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:92"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"layer": "A2",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:93"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"layer": "A1-structure",
"value": "80px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:96"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:97"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"layer": "A1-structure",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:98"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:102"
],
"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:103"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:104"
],
"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:105"
],
"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:109"
],
"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:110"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "0 4px 12px rgba(0, 0, 0, 0.12)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:111"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"layer": "A2",
"value": "0 0 0 2px rgba(18, 100, 163, 0.25)",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:115"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"layer": "A2",
"value": "150ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:118"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"layer": "A2",
"value": "200ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:119"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"layer": "A2",
"value": "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:120"
],
"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:123"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:124"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:125"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:126"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/slack/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "slack",
"files": [
"DESIGN.md",
"tokens.css",
"components.html"
],
"generatedAt": "2026-06-06T00:00:00.000Z",
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"layer": "A1-identity",
"source": "tokens.css:32"
},
{
"name": "--surface",
"value": "#f8f8f8",
"layer": "A1-identity",
"source": "tokens.css:33"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"layer": "B-slot",
"source": "tokens.css:34"
},
{
"name": "--fg",
"value": "#1d1c1d",
"layer": "A1-identity",
"source": "tokens.css:37"
},
{
"name": "--fg-2",
"value": "#1d1c1d",
"layer": "B-slot",
"source": "tokens.css:38"
},
{
"name": "--muted",
"value": "#616061",
"layer": "A1-identity",
"source": "tokens.css:39"
},
{
"name": "--meta",
"value": "#616061",
"layer": "B-slot",
"source": "tokens.css:40"
},
{
"name": "--border",
"value": "#dddddd",
"layer": "A1-identity",
"source": "tokens.css:43"
},
{
"name": "--border-soft",
"value": "#f1f1f1",
"layer": "B-slot",
"source": "tokens.css:44"
},
{
"name": "--accent",
"value": "#4a154b",
"layer": "A1-identity",
"source": "tokens.css:47"
},
{
"name": "--accent-on",
"value": "#ffffff",
"layer": "A2",
"source": "tokens.css:48"
},
{
"name": "--accent-hover",
"value": "#611f69",
"layer": "A2",
"source": "tokens.css:49"
},
{
"name": "--accent-active",
"value": "#350d36",
"layer": "A2",
"source": "tokens.css:50"
},
{
"name": "--success",
"value": "#2eb67d",
"layer": "A2",
"source": "tokens.css:54"
},
{
"name": "--warn",
"value": "#ecb22e",
"layer": "A2",
"source": "tokens.css:55"
},
{
"name": "--danger",
"value": "#e01e5a",
"layer": "A2",
"source": "tokens.css:56"
},
{
"name": "--font-display",
"value": "\"Larsseit\", \"Helvetica Neue\", Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:59"
},
{
"name": "--font-body",
"value": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:60"
},
{
"name": "--font-mono",
"value": "\"Monaco\", \"Menlo\", \"Courier New\", Courier, monospace",
"layer": "A2",
"source": "tokens.css:61"
},
{
"name": "--text-xs",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:67"
},
{
"name": "--text-sm",
"value": "13px",
"layer": "A1-structure",
"source": "tokens.css:68"
},
{
"name": "--text-base",
"value": "15px",
"layer": "A1-structure",
"source": "tokens.css:69"
},
{
"name": "--text-lg",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:70"
},
{
"name": "--text-xl",
"value": "22px",
"layer": "A1-structure",
"source": "tokens.css:71"
},
{
"name": "--text-2xl",
"value": "28px",
"layer": "A1-structure",
"source": "tokens.css:72"
},
{
"name": "--text-3xl",
"value": "36px",
"layer": "A1-structure",
"source": "tokens.css:73"
},
{
"name": "--text-4xl",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:74"
},
{
"name": "--leading-body",
"value": "1.5",
"layer": "A1-structure",
"source": "tokens.css:80"
},
{
"name": "--leading-tight",
"value": "1.10",
"layer": "A1-structure",
"source": "tokens.css:81"
},
{
"name": "--tracking-display",
"value": "-0.021em",
"layer": "A1-structure",
"source": "tokens.css:82"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:86"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:87"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:88"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:89"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:90"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:91"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:92"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:93"
},
{
"name": "--section-y-desktop",
"value": "80px",
"layer": "A1-structure",
"source": "tokens.css:96"
},
{
"name": "--section-y-tablet",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:97"
},
{
"name": "--section-y-phone",
"value": "32px",
"layer": "A1-structure",
"source": "tokens.css:98"
},
{
"name": "--radius-sm",
"value": "4px",
"layer": "A2",
"source": "tokens.css:102"
},
{
"name": "--radius-md",
"value": "8px",
"layer": "A2",
"source": "tokens.css:103"
},
{
"name": "--radius-lg",
"value": "12px",
"layer": "A2",
"source": "tokens.css:104"
},
{
"name": "--radius-pill",
"value": "9999px",
"layer": "A2",
"source": "tokens.css:105"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:109"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:110"
},
{
"name": "--elev-raised",
"value": "0 4px 12px rgba(0, 0, 0, 0.12)",
"layer": "A2",
"source": "tokens.css:111"
},
{
"name": "--focus-ring",
"value": "0 0 0 2px rgba(18, 100, 163, 0.25)",
"layer": "A2",
"source": "tokens.css:115"
},
{
"name": "--motion-fast",
"value": "150ms",
"layer": "A2",
"source": "tokens.css:118"
},
{
"name": "--motion-base",
"value": "200ms",
"layer": "A2",
"source": "tokens.css:119"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"layer": "A2",
"source": "tokens.css:120"
},
{
"name": "--container-max",
"value": "1200px",
"layer": "A1-structure",
"source": "tokens.css:123"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:124"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:125"
},
{
"name": "--container-gutter-phone",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:126"
}
]
}
open-design/design-systems/slack/system/artifacts/deck.html
+137
View File
@@ -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>Slack - Pitch deck</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/artifacts/email.html
+137
View File
@@ -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>Slack - Email</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/artifacts/form.html
+137
View File
@@ -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>Slack - Form page</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/artifacts/landing.html
+137
View File
@@ -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>Slack - Landing page</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/artifacts/newsletter.html
+137
View File
@@ -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>Slack - Newsletter</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/artifacts/poster.html
+137
View File
@@ -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>Slack - Poster</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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>Slack 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 Slack, 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="Slack" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/slack/system/index.html
+128
View File
@@ -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>Slack - system assets</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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 &amp; SaaS</p>
<h1>Slack 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>
open-design/design-systems/slack/system/kit.dark.html
+149
View File
@@ -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>Slack - dark component kit</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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 &amp; SaaS system</p>
<h1>Slack component kit</h1>
<p class="lead">Bundled OpenDesign package for Slack, 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>
open-design/design-systems/slack/system/kit.html
+149
View File
@@ -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>Slack - component kit</title>
<style>
:root {
--accent: #4a154b;
--accent-active: #350d36;
--accent-hover: #611f69;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #dddddd;
--border-soft: #f1f1f1;
--container-gutter-desktop: 24px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #e01e5a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1d1c1d;
--fg-2: #1d1c1d;
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
--leading-body: 1.5;
--leading-tight: 1.10;
--meta: #616061;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #616061;
--radius-lg: 12px;
--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: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #2eb67d;
--surface: #f8f8f8;
--surface-warm: var(--surface);
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-base: 15px;
--text-lg: 16px;
--text-sm: 13px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.021em;
--warn: #ecb22e;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f8f8f8;
--od-text: #1d1c1d;
--od-muted: #616061;
--od-border: #dddddd;
--od-accent: #4a154b;
--od-radius: 8px;
--od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--od-font-display: "Larsseit", "Helvetica Neue", 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 &amp; SaaS system</p>
<h1>Slack component kit</h1>
<p class="lead">Bundled OpenDesign package for Slack, 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>
open-design/design-systems/slack/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#4a154b",
"colorPrimaryBg": "var(--surface)",
"colorPrimaryHover": "#611f69",
"colorPrimaryActive": "#350d36",
"fontSize": 15,
"borderRadius": 8
}
open-design/design-systems/slack/tailwind-v4.css
+63
View File
@@ -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);
}
open-design/design-systems/slack/tokens.css
+127
View File
@@ -0,0 +1,127 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/slack/tokens.css
*
* Structured token bindings for the "Slack" brand — aubergine sidebar,
* light content surfaces, warm and human workplace communication.
*
* Brand identity in three sentences:
* 1. Light-first content surfaces (white #FFFFFF / near-white #F8F8F8)
* anchored by the iconic deep aubergine (#4A154B) sidebar — the most
* recognizable UI element in workplace software.
* 2. Larsseit for marketing display headings; system-ui for all product
* UI at 15px base (slightly below 16px for density); bold (700)
* channel names are the primary unread indicator.
* 3. Four logo accent colors (blue, green, yellow, red) are strictly
* semantic (info/success/warn/danger) — never decorative accents;
* #1264A3 for links and focus rings.
*
* Schema decisions:
* - --bg: #FFFFFF; --surface: #F8F8F8 (thread panels, secondary).
* - --surface-warm aliases --surface (no warm tier in Slack's system).
* - --fg: #1D1C1D (near-black — not pure black per brand spec).
* - --accent: #4A154B (aubergine — primary CTAs and the sidebar).
* - --accent-hover: #611f69 (active aubergine).
* - --leading-tight: 1.10 (display compression at 48px).
* - h2 (36px) → 1.15; h3 (28px) → 1.25 per DESIGN.md type table.
* - --tracking-display: -0.021em (-1px / 48px normalized).
* - --radius-sm: 4px (buttons/inputs — Slack uses conservative radius).
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface ──────────────────────────────────────────────────── */
--bg: #ffffff;
--surface: #f8f8f8; /* thread panels, secondary surfaces */
--surface-warm: var(--surface); /* no warm tier in Slack's system */
/* ─── Foreground ───────────────────────────────────────────────── */
--fg: #1d1c1d; /* near-black — not pure black */
--fg-2: #1d1c1d; /* same ink; no split tier */
--muted: #616061; /* timestamps, muted labels */
--meta: #616061; /* same muted tier */
/* ─── Border ───────────────────────────────────────────────────── */
--border: #dddddd; /* standard dividers, card borders */
--border-soft: #f1f1f1; /* subtle row separators */
/* ─── Accent ───────────────────────────────────────────────────── */
--accent: #4a154b; /* aubergine — primary CTAs, sidebar bg */
--accent-on: #ffffff;
--accent-hover: #611f69; /* active/hover aubergine */
--accent-active: #350d36; /* deep aubergine — pressed */
/* ─── Semantic ─────────────────────────────────────────────────── */
/* Logo palette: these ARE the semantic colors (info/success/warn/danger). */
--success: #2eb67d; /* Slack teal green — online, success */
--warn: #ecb22e; /* Slack gold — away, warning */
--danger: #e01e5a; /* Slack ruby — notifications, errors */
/* ─── Typography ───────────────────────────────────────────────── */
--font-display: "Larsseit", "Helvetica Neue", Arial, sans-serif;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Monaco", "Menlo", "Courier New", Courier, monospace;
/* Type scale — DESIGN.md §Type Scale.
* Slack base size is 15px (density). Display: 48px marketing hero.
* Schema maps: xs=12, sm=15, base=15(=body), lg=18, xl=22, 2xl=28,
* 3xl=36, 4xl=48. */
--text-xs: 12px; /* caption / timestamp */
--text-sm: 13px; /* body SM — secondary metadata */
--text-base: 15px; /* default UI text (Slack's base) */
--text-lg: 16px; /* body L — messages, descriptions */
--text-xl: 22px; /* heading 2 — card titles */
--text-2xl: 28px; /* heading 1 — modal titles */
--text-3xl: 36px; /* display L — section heroes */
--text-4xl: 48px; /* display XL — marketing hero */
/* Leading + tracking.
* --leading-tight=1.10: display hero compression.
* h2 (36px) → 1.15; h3 (28px) → 1.25 per DESIGN.md.
* --tracking-display: -0.021em = -1px / 48px normalized. */
--leading-body: 1.5;
--leading-tight: 1.10;
--tracking-display: -0.021em;
/* ─── Spacing ──────────────────────────────────────────────────── */
/* 4px base grid per DESIGN.md §Spacing System. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* Section rhythm. */
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ───────────────────────────────────────────────────── */
/* 4px is Slack's standard for buttons and inputs — not cartoonish. */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
/* ─── Elevation ────────────────────────────────────────────────── */
/* Light shadows on a light surface. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12);
/* ─── Focus ────────────────────────────────────────────────────── */
/* Slack focus: blue ring on #1264A3. */
--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25);
/* ─── Motion ───────────────────────────────────────────────────── */
--motion-fast: 150ms;
--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;
}