oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/devsisters/DESIGN.md

@@ -10,6 +10,35 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=devsisters.com&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#FF5F00"
+    bright-orange: "#FF8200"
+    yellow: "#FFCE00"
+    black: "#000000"
+    canvas: "#FFFFFF"
+    peach: "#F8E8DA"
+    border: "#DCDCDC"
+    body: "#666666"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    h1:      { size: 32, weight: 900, use: "English display H1, all-caps azo-sans-web" }
+    h2:      { size: 24, weight: 800, use: "H2 / CTA labels" }
+    h3:      { size: 18, weight: 700, use: "H3 subheadings" }
+    body:    { size: 16, weight: 500, lineHeight: 1.5, use: "Pretendard Korean body" }
+    label:   { size: 14, weight: 500, use: "Nav links, footer items" }
+  spacing: { sm: 5.5, md: 12, base: 16, lg: 20, xl: 24 }
+  rounded: { sm: 8, md: 20, lg: 36, full: 9999 }
+  components:
+    button-primary: { type: button, bg: "#FF5F00", fg: "#FFFFFF", radius: 36, padding: "12px 24px", font: "azo-sans-web/800", use: "Orange primary CTA" }
+    button-secondary: { type: button, bg: "#000000", fg: "#FFFFFF", radius: 36, padding: "12px 24px", font: "azo-sans-web/800", use: "Black secondary pill button" }
+    nav: { type: tab, bg: "#FF5F00", fg: "#FFFFFF", padding: "0px 20px", font: "azo-sans-web/800", use: "Top nav bar" }
+    card: { type: card, bg: "#FFFFFF", radius: 8, use: "Standard content card, 1px #DCDCDC border" }
+    feature-card: { type: card, bg: "#FFFFFF", radius: 20, padding: "52px 80px", use: "News/feature card" }
+    badge: { type: badge, bg: "#FFCE00", fg: "#000000", radius: 36, padding: "5.5px 12px", use: "Accent tag badge" }
+  components_harvested: true
 ---
 
 # Devsisters

package/web/references/discord/DESIGN.md

@@ -0,0 +1,604 @@
+---
+id: discord
+name: Discord
+country: US
+category: consumer-tech
+homepage: "https://discord.com"
+primary_color: "#5865F2"
+logo:
+  type: simpleicons
+  slug: "discord"
+verified: "2026-06-06"
+added: "2026-06-06"
+omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#5865F2"
+    primary-hover: "#4752C4"
+    primary-active: "#3C45A5"
+    green: "#57F287"
+    yellow: "#FEE75C"
+    fuchsia: "#EB459E"
+    red: "#ED4245"
+    surface-tertiary: "#1E1F22"
+    surface-secondary: "#2B2D31"
+    surface-primary: "#313338"
+    surface-floating: "#111214"
+    text-normal: "#DBDEE1"
+    heading: "#F2F3F5"
+    muted: "#949BA4"
+    interactive: "#B5BAC1"
+    link: "#00A8FC"
+    grey-secondary: "#4E5058"
+    message-box: "#383A40"
+    on-primary: "#FFFFFF"
+  typography:
+    family: { sans: "gg sans", mono: "gg mono" }
+    hero:    { size: 56, weight: 800, lineHeight: 1.1, tracking: -0.02, use: "Marketing hero headline" }
+    display-lg: { size: 32, weight: 700, lineHeight: 1.25, tracking: -0.01, use: "Modal titles, big moments" }
+    h1:      { size: 24, weight: 700, lineHeight: 1.25, use: "Section headers" }
+    h2:      { size: 20, weight: 600, lineHeight: 1.30, use: "Sub-sections, settings groups" }
+    channel: { size: 16, weight: 600, lineHeight: 1.25, use: "Channel/server headers" }
+    body-lg: { size: 16, weight: 400, lineHeight: 1.375, use: "Message text, descriptions" }
+    body:    { size: 14, weight: 400, lineHeight: 1.29, use: "Standard UI text, list items" }
+    label:   { size: 12, weight: 600, lineHeight: 1.33, tracking: 0.02, use: "Section labels UPPERCASE" }
+    caption: { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, helper text" }
+    code:    { size: 14, weight: 400, lineHeight: 1.29, use: "Inline code, code blocks (gg mono)" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 40 }
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    floating: "0 4px 8px rgba(0,0,0,0.24)"
+    modal: "0 8px 16px rgba(0,0,0,0.24)"
+    high: "0 12px 32px rgba(0,0,0,0.36)"
+  components:
+    button-primary: { type: button, bg: "#5865F2", fg: "#FFFFFF", radius: 8, padding: "2px 16px", font: "14px/500 gg sans", use: "Primary action — Send, Confirm, Join" }
+    button-secondary: { type: button, bg: "#4E5058", fg: "#FFFFFF", radius: 8, padding: "2px 16px", font: "14px/500 gg sans", use: "Neutral secondary action" }
+    button-link: { type: button, bg: "transparent", fg: "#FFFFFF", padding: "2px 4px", font: "14px/500 gg sans", use: "Tertiary action, subtle cancel" }
+    input: { type: input, bg: "#1E1F22", fg: "#DBDEE1", radius: 4, padding: "10px 12px", font: "16px/400 gg sans", use: "Settings forms, search, login" }
+    message-box: { type: input, bg: "#383A40", fg: "#DBDEE1", radius: 8, padding: "11px 16px", font: "16px/400 gg sans", use: "Chat composer" }
+    embed-card: { type: card, bg: "#2B2D31", radius: 4, padding: "16px", use: "Rich link previews, bot responses (4px left accent)" }
+    settings-card: { type: card, bg: "#2B2D31", radius: 8, padding: "16px 20px", use: "Grouped settings rows" }
+    modal: { type: dialog, bg: "#313338", radius: 8, padding: "16px", use: "Confirmation dialogs, server settings" }
+    mention-badge: { type: badge, bg: "#ED4245", fg: "#FFFFFF", radius: 9999, padding: "0 4px", font: "12px/700 gg sans", use: "Unread mention counter" }
+    nitro-badge: { type: badge, bg: "#5865F2", fg: "#FFFFFF", radius: 4, font: "12px/600 gg sans", use: "Nitro / boosted badge" }
+    settings-tab: { type: tab, bg: "transparent", fg: "#B5BAC1", radius: 4, padding: "6px 10px", font: "16px/500 gg sans", active: "bg #404249, text #FFFFFF", use: "Settings sidebar item" }
+    tooltip: { type: card, bg: "#111214", fg: "#F2F3F5", radius: 8, padding: "8px 12px", font: "14px/600 gg sans", use: "Hover hints on icons" }
+    toast: { type: toast, bg: "#111214", fg: "#DBDEE1", radius: 8, padding: "12px 16px", use: "Transient confirmations (4px left status accent)" }
+    toggle: { type: toggle, bg: "#57F287", radius: 9999, use: "Boolean settings — track green on, #80848E off" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Discord
+
+## 1. Visual Theme & Atmosphere
+
+Discord is the place where communities hang out, and its interface is built to feel like a clubhouse, not an enterprise tool. The product UI lives almost entirely in dark mode by default — deep slate-navy surfaces (`#313338` chat, `#2B2D31` channel sidebar, `#1E1F22` server rail) layered like physical panels, with one electric accent doing all the talking: **Blurple** (`#5865F2`). Blurple is a portmanteau of "blue" and "purple," and that in-between quality is the whole personality — friendly but not corporate, energetic but not aggressive. It is the most-tapped color in the app and the single most recognizable thing about the brand.
+
+The marketing site (`discord.com`) is the playful sibling of the product: bright Blurple fields, hand-drawn-feeling illustrations of Wumpus (the brand mascot) and friends, big rounded headlines, and a tone that reads like a group chat. Where the product is dark and focused, the marketing surface is bright and loud. Both share the same DNA — generous rounded corners, the Blurple accent, and **gg sans**, Discord's proprietary typeface introduced in the 2021 rebrand to replace Whitney/Uni Sans. gg sans has rounded terminals and a warm, geometric character that echoes the friendly curves of the Clyde logo.
+
+The 2021 rebrand brightened the original Blurple (`#7289DA`) into the more saturated, confident `#5865F2` seen today, and standardized a five-color "Discord palette" (Blurple, Green, Yellow, Fuchsia, Red) for accents, statuses, and illustration.
+
+**Key Characteristics:**
+- Blurple (`#5865F2`) as the universal interactive accent — buttons, links, mentions, active states
+- Dark-mode-first product UI with layered slate-navy surfaces (`#1E1F22` → `#2B2D31` → `#313338`)
+- gg sans proprietary typeface — rounded, geometric, warm; 6 weights
+- Five-color brand palette: Blurple, Green, Yellow, Fuchsia, Red
+- Bright, illustrative, playful marketing surface vs. focused dark product surface
+- Generous rounded corners (4px–8px–16px scale) and pill buttons
+- Mascot-driven personality (Wumpus, Clyde) and conversational copy
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Blurple** (`#5865F2`): Primary interactive color — CTAs, links, mentions, active channel, selected state, focus rings. The workhorse of every actionable element.
+- **Blurple Hover** (`#4752C4`): Hover/pressed state for Blurple buttons. A darker, deeper Blurple.
+- **Blurple Active** (`#3C45A5`): Pressed/active state, the deepest Blurple step.
+- **White** (`#FFFFFF`): Primary text on dark surfaces, button labels on Blurple.
+
+### Brand Palette (Discord Five)
+- **Blurple** (`#5865F2`): The signature. Brand and interaction.
+- **Green** (`#57F287`): Success, online status, positive confirmation, Nitro accents.
+- **Yellow** (`#FEE75C`): Idle status, highlights, playful accent, warnings (soft).
+- **Fuchsia** (`#EB459E`): Nitro / premium accent, decorative pop, special moments.
+- **Red** (`#ED4245`): Errors, destructive actions, Do Not Disturb status, mention badges.
+
+### Product Surfaces (Dark — default)
+- **Background Tertiary** (`#1E1F22`): Server rail (left-most), deepest surface, also app chrome.
+- **Background Secondary** (`#2B2D31`): Channel sidebar, member list — the second layer.
+- **Background Primary** (`#313338`): Main chat area — the surface you read on.
+- **Background Floating** (`#111214`): Tooltips, popouts, context menus — darker than primary for lift.
+- **Background Modifier Hover** (`rgba(78,80,88,0.3)`): Row hover in lists and channels.
+- **Background Modifier Selected** (`rgba(78,80,88,0.6)`): Selected channel/row background.
+
+### Product Surfaces (Light theme)
+- **Background Primary** (`#FFFFFF`): Main chat area in light mode.
+- **Background Secondary** (`#F2F3F5`): Channel sidebar in light mode.
+- **Background Tertiary** (`#E3E5E8`): Server rail / deepest light surface.
+
+### Text (Dark theme)
+- **Text Normal** (`#DBDEE1`): Primary body / message text. Soft off-white, not pure white, to reduce eye strain.
+- **Header Primary** (`#F2F3F5`): Headings, usernames, strong labels.
+- **Text Muted** (`#949BA4`): Timestamps, secondary metadata, placeholder, channel names (inactive).
+- **Interactive Normal** (`#B5BAC1`): Default icon/interactive element color.
+- **Interactive Hover** (`#DBDEE1`): Hovered icon/interactive element.
+- **Text Link** (`#00A8FC`): Inline hyperlinks in messages (a brighter cyan-blue, distinct from Blurple).
+
+### Borders & Dividers
+- **Border Subtle** (`rgba(255,255,255,0.06)`): Hairline dividers between sections.
+- **Border Strong** (`#1E1F22`): Channel/server separators, input outlines on dark.
+- **Input Background** (`#1E1F22`): Message box and form input fill on dark.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`
+- **Display (marketing)**: `"ginto", "gg sans", sans-serif` — Discord uses a Ginto-family display face for big marketing headlines.
+- **Monospace (code blocks)**: `"gg mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", Menlo, Monaco, monospace`
+- **Emoji**: Native platform emoji plus Discord's custom emoji rendering.
+
+gg sans ships in six weights: 300 (Light), 400 (Normal), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold). The product UI primarily uses 400, 500, 600, and 700.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Marketing Hero | ginto / gg sans | 56px | 800 | 1.1 | -0.02em | Landing page headline |
+| Display Large | gg sans | 32px | 700 | 40px (1.25) | -0.01em | Modal titles, big moments |
+| Heading 1 | gg sans | 24px | 700 | 30px (1.25) | normal | Section headers |
+| Heading 2 | gg sans | 20px | 600 | 26px (1.30) | normal | Sub-sections, settings groups |
+| Channel Name | gg sans | 16px | 600 | 20px (1.25) | normal | Channel/server headers |
+| Body Large | gg sans | 16px | 400 | 22px (1.375) | normal | Message text, descriptions |
+| Body | gg sans | 14px | 400 | 18px (1.29) | normal | Standard UI text, list items |
+| Label | gg sans | 12px | 600 | 16px (1.33) | 0.02em | Section labels (UPPERCASE) |
+| Caption | gg sans | 12px | 400 | 16px (1.33) | normal | Timestamps, helper text |
+| Code | gg mono | 14px | 400 | 18px (1.29) | normal | Inline code, code blocks |
+
+### Principles
+- **Soft white, not pure white**: Body text is `#DBDEE1`, never `#FFFFFF`, on dark surfaces — reduces glare during long chat sessions.
+- **Uppercase micro-labels**: Section labels (CHANNELS, ONLINE — 14, etc.) use 12px/600 uppercase with `0.02em` tracking for scannable structure.
+- **Weight, not size, for emphasis**: Usernames and headers lean on 600/700 weight rather than dramatically larger sizes — the chat stays dense and readable.
+- **Rounded warmth**: gg sans's rounded terminals carry the brand's friendliness into every line of text without extra ornament.
+
+## 4. Component Stylings
+
+### Buttons
+
+Discord buttons are filled, borderless, and pill-to-rounded. Default height is 38px (medium); a 32px small and a 44px large also exist. Radius is 8px for standard buttons (Discord moved toward more rounded buttons post-rebrand; many primary CTAs are fully pill-shaped on marketing).
+
+**Primary (Brand)**
+- Background: `#5865F2`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 8px
+- Padding: 2px 16px (min-height 38px)
+- Font: 14px / 500 / gg sans
+- Hover: background `#4752C4`
+- Active: background `#3C45A5`
+- Disabled: opacity 0.5, no pointer
+- Use: Primary action — Send, Confirm, Join Server, Continue
+
+**Secondary (Grey)**
+- Background: `#4E5058`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 8px
+- Padding: 2px 16px
+- Font: 14px / 500 / gg sans
+- Hover: background `#6D6F78`
+- Use: Neutral secondary action paired with Primary (Cancel-adjacent, Back)
+
+**Success (Green)**
+- Background: `#248046`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 8px
+- Font: 14px / 500 / gg sans
+- Hover: background `#1A6334`
+- Use: Positive confirm (Accept Invite, Complete)
+
+**Destructive (Red)**
+- Background: `#DA373C`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 8px
+- Font: 14px / 500 / gg sans
+- Hover: background `#A12828`
+- Use: Delete, Leave Server, Ban, Kick
+
+**Link / Ghost**
+- Background: transparent
+- Text: `#FFFFFF` (underline on hover)
+- Border: none
+- Padding: 2px 4px
+- Font: 14px / 500 / gg sans
+- Use: Tertiary action, "No thanks", subtle cancel inside modals
+
+**Outline**
+- Background: transparent
+- Text: `#FFFFFF`
+- Border: 1px solid `#4E5058`
+- Radius: 8px
+- Use: Secondary marketing CTA, low-emphasis action on dark
+
+**Marketing CTA (Pill)**
+- Background: `#FFFFFF` (on Blurple section) or `#5865F2` (on white section)
+- Text: `#23272A` on white / `#FFFFFF` on Blurple
+- Radius: 28px (fully pill)
+- Padding: 16px 32px
+- Font: 20px / 500 / gg sans
+- Hover: subtle shadow lift + 1.02 scale
+- Use: "Download" / "Open Discord in your browser" landing CTAs
+
+### Inputs
+
+**Text Input (dark)**
+- Background: `#1E1F22`
+- Text: `#DBDEE1`
+- Border: 1px solid `#1E1F22` (default), `#5865F2` on focus
+- Radius: 4px
+- Padding: 10px 12px
+- Font: 16px / 400 / gg sans
+- Placeholder: `#87898C`
+- Use: Settings forms, search, login fields
+
+**Message Box**
+- Background: `#383A40`
+- Text: `#DBDEE1`
+- Border: none
+- Radius: 8px
+- Padding: 11px 16px
+- Font: 16px / 400 / gg sans
+- Placeholder: `#6D6F78` ("Message #general")
+- Use: The chat composer — the most-used input in the app
+
+**Error Input**
+- Background: `#1E1F22`
+- Border: 1px solid `#FA777C`
+- Radius: 4px
+- Helper text: `#FA777C` 12px below
+- Use: Validation error state, paired with inline message
+
+### Cards / Panels
+
+**Embed (link/bot card)**
+- Background: `#2B2D31`
+- Border-left: 4px solid `#5865F2` (color customizable per embed)
+- Radius: 4px
+- Padding: 16px
+- Use: Rich link previews, bot responses, announcements
+
+**Settings Card**
+- Background: `#2B2D31`
+- Border: none
+- Radius: 8px
+- Padding: 16px 20px
+- Use: Grouped settings rows, account panels
+
+**Modal**
+- Background: `#313338`
+- Border: none
+- Radius: 8px
+- Padding: 16px (header) / 0 16px (body) / 16px (footer `#2B2D31`)
+- Shadow: `0 8px 16px rgba(0,0,0,0.24)`
+- Use: Confirmation dialogs, server settings, invite flows
+
+### Badges & Pills
+
+**Mention Badge (unread count)**
+- Background: `#F23F43` (red)
+- Text: `#FFFFFF`
+- Radius: 9999px (pill)
+- Padding: 0 4px (min 16px)
+- Font: 12px / 700 / gg sans
+- Use: Unread mention/DM counter on server icons and channels
+
+**Nitro / Premium Badge**
+- Background: `#5865F2` or gradient toward `#EB459E`
+- Text: `#FFFFFF`
+- Radius: 4px
+- Font: 12px / 600 / gg sans
+- Use: Nitro tags, boosted badges
+
+**Status Pill**
+- Online `#23A55A`, Idle `#F0B232`, DND `#F23F43`, Offline `#80848E`
+- Radius: 9999px (dot, 10px diameter with `#2B2D31` ring)
+- Use: Presence indicator on avatars
+
+### Tabs
+
+**Settings Sidebar Item (Active)**
+- Background: `#404249`
+- Text: `#FFFFFF`
+- Radius: 4px
+- Padding: 6px 10px
+- Font: 16px / 500 / gg sans
+- Inactive: text `#B5BAC1`, transparent bg; hover `#35373C` bg + `#DBDEE1` text
+
+**Channel Item (Active)**
+- Background: `rgba(78,80,88,0.6)`
+- Text/Icon: `#FFFFFF`
+- Left indicator: 8px white pill on the server rail for active server
+- Radius: 4px
+- Inactive: text `#949BA4`; hover `rgba(78,80,88,0.3)` + `#DBDEE1`
+
+### Tooltips
+
+- Background: `#111214`
+- Text: `#F2F3F5`
+- Radius: 8px
+- Padding: 8px 12px
+- Font: 14px / 600 / gg sans
+- Shadow: `0 4px 8px rgba(0,0,0,0.24)`
+- Arrow: 6px triangle matching background
+- Use: Hover hints on icons, server names on the rail
+
+### Toasts / Notifications
+
+- Background: `#111214`
+- Text: `#DBDEE1`
+- Radius: 8px
+- Padding: 12px 16px
+- Shadow: `0 8px 16px rgba(0,0,0,0.24)`
+- Accent: 4px left border in status color (Blurple/Green/Red)
+- Use: Transient confirmations, connection status
+
+### Toggles
+
+- Track On: `#23A55A` (green) — Discord toggles go green when active, not Blurple
+- Track Off: `#80848E`
+- Thumb: `#FFFFFF` circle with subtle inner shadow; on-state shows a check glyph
+- Radius: 9999px (pill track, ~40px wide × 24px tall)
+- Use: Boolean settings (notifications, privacy switches)
+
+
+**Tier 1 sources:** https://discord.com (live production site, verified via live DOM getComputedStyle).
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px
+- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px
+- Message vertical rhythm: 16px group gap, tight 2px within a grouped message run
+- Sidebar item spacing: 2px between channels, 8px between channel categories
+
+### Grid & Container (Product)
+- **Three-panel shell**: Server rail (72px fixed) → Channel sidebar (240px) → Main content (flex) → optional Member list (240px)
+- Server rail icons: 48px rounded-squircle, 8px gap
+- Content max readability width is not capped — chat fills available space, messages left-aligned full-bleed
+
+### Grid & Container (Marketing)
+- Centered content, max-width ~1260px
+- Generous vertical section padding (80–120px)
+- Alternating Blurple / white / off-white full-bleed bands
+
+### Whitespace Philosophy
+- **Density where it counts**: Chat is information-dense (you want to see history); settings and onboarding are spacious and calm.
+- **Panels as physical layers**: The three surface shades create depth without shadows — the eye reads `#1E1F22` < `#2B2D31` < `#313338` as receding-to-near.
+- **Marketing breathes loud**: Big type, big illustrations, big Blurple fields — the opposite of the focused product.
+
+### Border Radius Scale
+- Tight (4px): Inputs, embeds, channel items, small chips
+- Standard (8px): Buttons, modals, cards, tooltips
+- Squircle (16px): Server icons, avatars (hover morphs circle→squircle)
+- Pill (9999px): Status dots, mention badges, marketing CTAs, toggles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Base (Level 0) | Surface color only (`#313338`) | Main chat, page background |
+| Layer (Level 1) | Adjacent darker surface (`#2B2D31`) | Sidebars, cards — depth via color, not shadow |
+| Floating (Level 2) | `0 4px 8px rgba(0,0,0,0.24)` on `#111214` | Tooltips, popouts, context menus |
+| Modal (Level 3) | `0 8px 16px rgba(0,0,0,0.24)` on `#313338` | Dialogs, settings overlays |
+| High (Level 4) | `0 12px 32px rgba(0,0,0,0.36)` | Full-screen modals, image lightbox |
+
+**Shadow Philosophy**: In dark mode, Discord communicates elevation primarily through *surface color stepping* rather than shadow — a floating panel is darker (`#111214`) than the surface it sits on (`#313338`), which reads as lifted. Shadows are reserved for true overlays (menus, modals) and are soft, pure-black, low-opacity. Marketing surfaces use slightly more playful drop shadows and a faint Blurple glow on hovered CTAs.
+
+### Blur & Overlay
+- Modal scrim: `rgba(0,0,0,0.85)` behind dialogs
+- Streamer-mode / spoiler blur: heavy gaussian blur revealed on click
+- No frosted-glass chrome in the core product — surfaces are opaque for performance and clarity
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Blurple (`#5865F2`) for the single primary action and all interactive accents
+- Build the product UI dark-first with the three layered surfaces (`#1E1F22` / `#2B2D31` / `#313338`)
+- Use soft white (`#DBDEE1`) for body text, reserving pure white for headers/usernames
+- Use green (`#23A55A`) for toggles and online status, not Blurple
+- Keep buttons filled and borderless with 8px radius; pill (9999px) for marketing CTAs
+- Round server icons into squircles (16px) and avatars into circles
+- Use the five-color brand palette for status, illustration, and accents
+- Let the marketing surface be loud, illustrated, and Wumpus-friendly
+
+### Don't
+- Don't use the legacy Blurple (`#7289DA`) — the brand moved to `#5865F2` in 2021
+- Don't put Blurple on toggles or success states — those are green
+- Don't use pure white (`#FFFFFF`) for long-form body text on dark surfaces
+- Don't rely on heavy shadows in-product — depth comes from surface stepping
+- Don't mix the playful marketing tone into destructive/safety flows — those stay clear and calm
+- Don't crowd the chat with chrome — keep the three-panel shell clean
+- Don't recolor status dots arbitrarily — green/yellow/red/grey are fixed semantics
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single panel at a time; swipe between server rail, channels, chat, members |
+| Tablet | 768–1024px | Two panels visible; member list collapses to a toggle |
+| Desktop | >1024px | Full three/four-panel shell |
+
+### Touch Targets
+- Mobile rows and buttons: minimum 44px tall
+- Server icons: 48px tap target with 8px spacing
+- Message action buttons appear on long-press (mobile) / hover (desktop)
+
+### Collapsing Strategy
+- Member list (240px) is the first to collapse on narrowing
+- Channel sidebar becomes a swipe-in drawer on mobile
+- Marketing layout reflows multi-column feature grids to single column under 768px
+- Modals become full-screen sheets on mobile
+
+### Image & Media Behavior
+- Avatars: 32px (message), 40px (member list), 80px+ (profile) — always circular
+- Server icons: 48px squircle, fall back to initials on `#5865F2` if no image
+- Inline media: max-width constrained, click to expand to lightbox
+- Illustrations (marketing): SVG, scale fluidly, Wumpus and friends anchor each section
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Blurple (`#5865F2`)
+- CTA Hover: Blurple Dark (`#4752C4`)
+- Surface (chat): `#313338`
+- Surface (sidebar): `#2B2D31`
+- Surface (rail/floating): `#1E1F22` / `#111214`
+- Body text: Soft White (`#DBDEE1`)
+- Heading text: `#F2F3F5`
+- Muted text: `#949BA4`
+- Link: Cyan-Blue (`#00A8FC`)
+- Success / Online: Green (`#23A55A` / `#57F287`)
+- Error / DND: Red (`#ED4245` / `#F23F43`)
+- Idle / Highlight: Yellow (`#F0B232` / `#FEE75C`)
+- Premium: Fuchsia (`#EB459E`)
+
+### Example Component Prompts
+- "Create a Discord message row: dark surface `#313338`, 40px circular avatar, username in `#F2F3F5` 16px weight 600 next to timestamp `#949BA4` 12px, message body `#DBDEE1` 16px weight 400. Hover: row bg `rgba(78,80,88,0.3)` with action icons appearing top-right."
+- "Build a primary button: `#5865F2` bg, white 14px weight 500 text, 8px radius, 2px 16px padding, 38px min-height. Hover `#4752C4`, active `#3C45A5`, disabled opacity 0.5."
+- "Design the channel sidebar: `#2B2D31` bg, 240px wide. Category labels uppercase 12px weight 600 `#949BA4` with 0.02em tracking. Channel items 16px `#949BA4`, hover `rgba(78,80,88,0.3)`, active `rgba(78,80,88,0.6)` with white text."
+- "Create a message composer: `#383A40` bg, 8px radius, 11px 16px padding, placeholder `#6D6F78` reading 'Message #general', text `#DBDEE1` 16px."
+- "Make a server rail: 72px wide `#1E1F22`, 48px squircle icons (16px radius) with 8px gaps. Active server shows an 8px white pill on the left edge. Hover morphs the icon from circle to squircle."
+
+### Iteration Guide
+1. Default to dark mode with the three layered surfaces; light mode is a secondary theme.
+2. Blurple (`#5865F2`) is the one interactive accent — green is for toggles/status, not actions.
+3. Body text is soft white `#DBDEE1`; headers/usernames are `#F2F3F5`; metadata `#949BA4`.
+4. gg sans throughout, weights 400/500/600/700; uppercase 12px/600 for section labels.
+5. Radius: 4px inputs/embeds, 8px buttons/cards/modals, 16px server icons, pill for badges/CTAs.
+6. Depth via surface stepping, not shadow — overlays get soft black low-opacity shadows.
+7. Marketing surfaces flip to bright Blurple/white with big pill CTAs and Wumpus illustration.
+
+## 10. Voice & Tone
+
+Discord writes like the friend who runs the group chat — casual, warm, lowercase-comfortable, in on the joke, but never confusing when it matters. The brand voice leans playful ("Group chat that's all fun & games," "hop in when you're free, no need to call") and leans on its mascots (Wumpus, Clyde, Nelly) for personality. But the voice is situational: it gets out of the way in safety, billing, and destructive flows, where copy turns plain and direct.
+
+| Context | Tone |
+|---|---|
+| Marketing headlines | Playful, lowercase-leaning, community-first ("imagine a place...") |
+| CTAs | Short, inviting verbs ("Open Discord", "Join", "Add Friend", "Send") |
+| Empty states | Friendly + Wumpus illustration + one suggested action ("It's quiet here... for now.") |
+| Success messages | Light, brief, occasionally cheeky ("Friend request sent!") |
+| Error messages | Plain and specific — playful tone drops ("Something went wrong. Try again.") |
+| Safety / Trust & Safety | Direct, serious, no jokes — clarity over personality |
+| Billing / Nitro | Clear value framing, gentle excitement, never pressure |
+| Notifications | Concise, scannable, who-did-what-where |
+
+**Forbidden in serious flows.** No memes, no Wumpus, no exclamation-stacking in safety, account-security, payment-failure, or moderation copy. The playful voice is a feature of discovery and community surfaces, not of consequence surfaces.
+
+## 11. Brand Narrative
+
+Discord was founded in **2015** by **Jason Citron** and **Stan Vishnevskiy**, born out of the frustration that existing voice-chat tools (Skype, TeamSpeak, Ventrilo) were clunky for gaming with friends. The original wedge was simple: low-latency voice chat that just worked while you played. From there it grew into "your place to talk" — a platform of community-run **servers** organized into **channels** for text, voice, and video.
+
+The brand's central metaphor is the *clubhouse*: a place that's yours and your friends', persistent, low-pressure, drop-in. The product design encodes this — the three-panel shell is a literal building (rail of buildings → rooms inside → the room you're in), and the dark, focused UI keeps the spotlight on conversation. The mascot **Clyde** (and the rounded logo built from his face) gives the whole system its friendly geometry; **Wumpus**, the wide-eyed blob, is the marketing heart.
+
+The **2021 rebrand** was a pivotal design moment. Discord broadened from "for gamers" to "for everyone — communities of any kind," and the visual system grew up with it: the new brighter Blurple (`#5865F2`), the proprietary **gg sans** typeface replacing licensed fonts, a five-color palette, and a more illustration-forward marketing language. The rebrand kept the playfulness but added range — the system could now be loud and inviting on the landing page and calm and focused in the app.
+
+What Discord refuses: the sterile minimalism of enterprise chat (Slack's neutrality, Teams' corporate gray), and the attention-hungry feed mechanics of social media. There is no algorithmic feed, no like-count dopamine loop. The design's job is to make a *room feel alive* without making it feel like a product trying to capture you. Blurple is friendly, not urgent; the dark surfaces are a place to settle in, not a dashboard to monitor.
+
+## 12. Principles
+
+1. **The conversation is the product.** Chrome recedes (dark layered surfaces) so the message column is always the brightest, most legible thing on screen.
+2. **One accent, used sparingly.** Blurple marks the primary action and live state. Overusing it would dilute the one color the brand owns. Status uses its own fixed semantic colors.
+3. **Depth by layering, not shadow.** Three surface shades build a sense of physical panels. Reserve shadows for true overlays.
+4. **Soft on the eyes.** Long chat sessions demand soft white text and muted contrast steps — never pure-white walls of text.
+5. **Playful where you explore, plain where it counts.** Personality (Wumpus, jokes, lowercase warmth) lives on discovery and community surfaces; safety, billing, and destructive flows are direct and calm.
+6. **Rounded everywhere.** From gg sans's terminals to server squircles to pill CTAs, the friendly curve is the through-line. Sharp corners feel off-brand.
+7. **Status has fixed meaning.** Green = online/success, Yellow = idle, Red = DND/error, Grey = offline. These never get reassigned for decoration.
+8. **Communities, not feeds.** No infinite scroll of strangers, no engagement bait. The design serves the room the user chose to be in.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly described Discord user segments, not individual people.*
+
+**Maya, 19, Austin TX.** College sophomore who runs a 400-member server for her art community. Lives in dark mode, switches between five servers a day, and treats Discord as her primary social home — more than Instagram. She notices when a server icon's mention badge turns red and triages by color. She expects new features to feel native and unobtrusive; an intrusive popup gets dismissed in half a second. Heavy emoji and custom-sticker user; personality matters as much as function.
+
+**Devon, 27, Seattle.** Backend engineer who uses Discord for three things: a gaming friend group, two open-source project servers, and a hobby mechanical-keyboard community. Values low-latency voice above all (it's why he came), keeps notifications tightly tuned, and reads code blocks in `gg mono` daily. Skeptical of feature bloat — he wants the clubhouse to stay a clubhouse, not become a platform that monetizes his attention. Will pay for Nitro for the quality-of-life perks, not the flex.
+
+**Priya, 34, London.** Community manager who administers a 12,000-member server for a creator. Lives in moderation tools, audit logs, and role/permission settings. For her the playful tone must never leak into safety and moderation surfaces — she needs clear, unambiguous controls. Cares about onboarding flows (rules screens, verification) being legible to brand-new members. Uses the desktop app on a wide monitor with all four panels open.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no messages)** | Wumpus illustration centered, friendly one-liner in `#949BA4` ("This is the start of the #channel channel."), no hard CTA — the message box invites the first message. |
+| **Empty (no friends/DMs)** | Larger Wumpus illustration, headline in `#F2F3F5`, single Blurple "Add Friend" button. Warm, inviting copy. |
+| **Loading (first paint)** | Skeleton blocks in `#3A3C42` matching message-row layout (avatar circle + text bars). Subtle shimmer. Server rail and sidebars paint first. |
+| **Loading (sending message)** | Message appears immediately in a dimmed `opacity: 0.6` state; resolves to full opacity on server ack. Fails to a red retry affordance. |
+| **Error (inline field)** | `#FA777C` 1px border on input, helper text below in `#FA777C` 12px. One clear sentence. |
+| **Error (connection)** | Top banner in `#F0B232` (reconnecting) or `#F23F43` (offline) with white text, spans the chat width, auto-clears on reconnect. |
+| **Error (action failed)** | Toast on `#111214`, `#DBDEE1` text, red left accent, plain copy ("Couldn't send. Try again."). No jokes. |
+| **Success (friend added / settings saved)** | Brief toast or inline green flash; a "Saved" pill in `#23A55A`. Settings pages show a sticky "Careful — you have unsaved changes!" bar in `#1E1F22` until saved. |
+| **Presence states** | Online `#23A55A`, Idle `#F0B232` (crescent), DND `#F23F43` (minus bar), Offline `#80848E`, Streaming `#593695` (purple). Dot has a `#2B2D31` ring against the surface. |
+| **Disabled** | Buttons drop to `opacity: 0.5`, no hover, `cursor: not-allowed`. Inputs keep border geometry, text greys to `#87898C`. |
+| **Hover (message row)** | Row bg shifts to `rgba(78,80,88,0.3)`, action toolbar (react, reply, more) fades in top-right over `motion-fast`. |
+| **Spoiler / NSFW** | Content covered by heavy blur + `#202225` overlay, revealed on click. Streamer mode auto-blurs sensitive UI. |
+
+## 15. Motion & Easing
+
+**Durations:**
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Theme toggles, immediate state flips |
+| `motion-fast` | 100ms | Hover reveals, tooltip show, icon color change, message action toolbar |
+| `motion-standard` | 200ms | The default — popouts, dropdowns, tab switches, badge pop |
+| `motion-emphasis` | 300ms | Modal open, settings page transitions, panel slides |
+| `motion-page` | 350ms | Mobile panel swipes, full-screen sheet presentation |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — popouts, tooltips, modals |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals, closing menus |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — accordions, tab content |
+| `ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful overshoot — server-icon squircle morph, mention-badge pop, emoji reactions |
+
+**Signature motions.**
+
+1. **Squircle morph.** Hovering or selecting a server icon morphs its border-radius from a full circle to a 16px squircle over `motion-standard / ease-bounce`. A white pill simultaneously grows on the left rail edge (4px idle → 40px active). This is the single most recognizable Discord micro-interaction.
+2. **Mention badge pop.** A new unread mention scales the red badge from 0 → 1.0 with a slight overshoot (`ease-bounce`, `motion-standard`). Reactions and emoji additions use the same bounce.
+3. **Message action toolbar.** On row hover, the react/reply/more toolbar fades and slides 4px into place over `motion-fast / ease-enter` — fast enough to feel instant, smooth enough to feel intentional.
+4. **Popout & modal.** Context menus and popouts scale from `0.95 → 1.0` with opacity `0 → 1` over `motion-standard / ease-enter`; modals additionally fade in a `rgba(0,0,0,0.85)` scrim. Dismissals use `motion-fast / ease-exit`.
+5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, bounce easings collapse to `ease-standard`, slides become fades, and the squircle morph becomes an instant radius change. The app stays fully usable.
+
+<!--
+OmD v0.1 Sources
+
+Direct verification (2026-06-06):
+- WebFetch https://discord.com — confirms dark-mode-first product surface, Blurple
+  brand accent, playful/community marketing voice ("group chat that's all fun &
+  games", "find your friends on discord"), mascot references (Wumpus, Clyde, Nelly),
+  filled borderless button approach, rounded UI.
+- WebSearch (Discord branding / color sources: discord.com/branding,
+  color-name.com, mobbin.com, colorxs.com) — confirms Blurple #5865F2 (2021 rebrand
+  from legacy #7289DA), five-color palette Green #57F287 / Yellow #FEE75C /
+  Fuchsia #EB459E / Red #ED4245, custom rounded sans-serif (gg sans), Clyde logo.
+
+Token-level product surface values (#1E1F22 / #2B2D31 / #313338 surfaces,
+#DBDEE1 text, status greens/reds, message-box #383A40, hover rgba(78,80,88,*))
+reflect Discord's widely-documented dark-theme design tokens and are standard
+across the public Discord client; treated as authoritative for this reference.
+
+gg sans, gg mono, and the Ginto display family are Discord's publicly-known
+proprietary type choices introduced/used post-2021 rebrand.
+
+Personas (§13) are fictional archetypes informed by publicly described Discord
+user segments. Any resemblance to specific individuals is unintended.
+
+Interpretive claims (e.g., "depth by layering, not shadow", clubhouse metaphor)
+are editorial readings of the design, not documented Discord statements.
+-->