diff --git a/apps/web/src/i18n/content.fr.ts b/apps/web/src/i18n/content.fr.ts index 66fedad09..bf8981b76 100644 --- a/apps/web/src/i18n/content.fr.ts +++ b/apps/web/src/i18n/content.fr.ts @@ -437,6 +437,7 @@ export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ 'shadcn', 'simple', 'skeumorphism', + 'slack', 'sleek', 'spacious', 'storytelling', diff --git a/apps/web/src/i18n/content.ru.ts b/apps/web/src/i18n/content.ru.ts index b40f11af8..2978dcf40 100644 --- a/apps/web/src/i18n/content.ru.ts +++ b/apps/web/src/i18n/content.ru.ts @@ -437,6 +437,7 @@ export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ 'shadcn', 'simple', 'skeumorphism', + 'slack', 'sleek', 'spacious', 'storytelling', diff --git a/apps/web/src/i18n/content.ts b/apps/web/src/i18n/content.ts index 3e35383c9..528238560 100644 --- a/apps/web/src/i18n/content.ts +++ b/apps/web/src/i18n/content.ts @@ -486,6 +486,7 @@ const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ 'shadcn', 'simple', 'skeumorphism', + 'slack', 'sleek', 'spacious', 'storytelling', diff --git a/design-systems/slack/DESIGN.md b/design-systems/slack/DESIGN.md new file mode 100644 index 000000000..26cabd1d9 --- /dev/null +++ b/design-systems/slack/DESIGN.md @@ -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.