admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/discord/DESIGN.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

7.6 KiB
Raw Blame History

Design System Inspired by Discord

Category: Productivity & SaaS Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.

1. Visual Theme & Atmosphere

Discord's product is engineered for evenings, raids, and group voice — so the entire surface is dark-first. The default canvas is the deep Background Primary (#313338 light theme, #1e1f22 dark theme), with chat columns layered on slightly lighter or darker shades to denote channels, threads, and side panels. The signature Blurple (#5865f2) is reserved for the brand mark, primary CTAs, mentions, and the "you" affordance — used sparingly so it pops against the muted neutrals.

Typography is gg sans (Discord's custom Whitney-replacement) for prose and chrome, with rounded geometric shapes that feel approachable but still legible at the small sizes a chat client demands. Headings step up incrementally; chat rows are tight (4–8px between message groups) so hours of scrollback feel scannable.

The shape language is rounded but not balloon-soft: 8px radii on cards, 4px on inputs, full pills on status badges and tags. Servers are rounded-square avatars at 48px that morph to circles on hover — a tiny piece of motion that has become part of the brand's identity.

Key Characteristics:

  • Dark-first surfaces: #1e1f22 / #2b2d31 / #313338 (3-step depth)
  • Blurple #5865f2 as the only saturated accent in the chat surface
  • gg sans (Whitney-style) for all text — friendly, geometric, neutral
  • Rounded-square server avatars (16px radius) that snap to circles on hover
  • Tight chat-row spacing, generous side-panel padding
  • Status dots: green online, yellow idle, red dnd, gray offline
  • Pixel-snapped 1px dividers in subtle off-white at low alpha

2. Color Palette & Roles

Primary

  • Blurple (#5865f2): Brand primary, primary CTA, mention highlight.
  • Blurple Hover (#4752c4): Hover/active for blurple.
  • Blurple Soft (#7289da): Legacy blurple, secondary accent in marketing.

Surface (Dark Theme — default)

  • Background Tertiary (#1e1f22): Server list rail, deepest background.
  • Background Secondary (#2b2d31): Channel sidebar, settings sidebar.
  • Background Primary (#313338): Chat surface, message column.
  • Background Floating (#111214): Floating popovers, tooltips, autocomplete.
  • Background Modifier Hover (rgba(78, 80, 88, 0.3)): Hover overlay on rows.
  • Background Modifier Selected (rgba(78, 80, 88, 0.6)): Active row.

Surface (Light Theme)

  • Light Bg Primary (#ffffff): Chat surface in light theme.
  • Light Bg Secondary (#f2f3f5): Sidebar in light theme.
  • Light Bg Tertiary (#e3e5e8): Deepest light surface.

Text

  • Header Primary (#f2f3f5): Channel headers, modal titles in dark theme.
  • Header Secondary (#b5bac1): Muted headers.
  • Text Normal (#dbdee1): Body text in dark theme — slightly cooler than pure white.
  • Text Muted (#949ba4): Timestamps, server names, secondary metadata.
  • Text Link (#00a8fc): Hyperlinks in messages — sky blue, distinct from blurple.
  • Channels Default (#80848e): Inactive channel name in sidebar.

Status & Semantic

  • Status Online (#23a55a): Online dot, success states.
  • Status Idle (#f0b232): Idle dot, away.
  • Status DND (#f23f43): Do-not-disturb, also serves as destructive red.
  • Status Streaming (#593695): "Streaming" purple.
  • Status Offline (#80848e): Offline gray.
  • Mention Highlight (rgba(88, 101, 242, 0.1)): Soft blurple wash on @mention rows.

Border & Divider

  • Background Modifier Accent (rgba(255, 255, 255, 0.06)): Standard divider in dark.
  • Border Subtle (#3f4147): Solid divider for cards.

3. Typography Rules

Font Family

  • Body / UI / Headings: gg sans, with fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
  • Display (legacy / Whitney): Whitney, with fallback: gg sans
  • Code / Mono: "gg mono", with fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarchy

Role Font Size Weight Line Height Letter Spacing Notes
Display Hero gg sans 56px (3.5rem) 800 1.1 -0.02em Marketing hero
Page Heading gg sans 24px (1.5rem) 700 1.25 normal Settings/profile titles
Channel Name gg sans 16px (1rem) 600 1.25 normal #general, channel header
Message Body gg sans 16px (1rem) 400 1.375 normal Standard chat text
Username gg sans 16px (1rem) 500 1.25 normal Author of a message
Timestamp gg sans 12px (0.75rem) 500 1.25 normal "Today at 4:32 PM"
Sidebar Channel gg sans 16px (1rem) 500 1.25 normal Channel list rows
Server Name gg sans 16px (1rem) 600 1.25 normal Server header
Caption / Meta gg sans 12px (0.75rem) 400 1.3 0.02em Status text, edited tag
Code Inline gg mono 0.875em 400 inherit normal Inline code
Code Block gg mono 14px (0.875rem) 400 1.5 normal triple-fenced block

Principles

  • Friendly geometry: gg sans replaces Whitney with rounded terminals on a/g/s — the brand wants warmth without breaking legibility.
  • Weight contrast over color contrast: hierarchy comes from 400→500→600→700→800 weight steps; the surface stays neutral.
  • 16px body: chat messages do not shrink below 16px. Density comes from line-height (1.375), not font size.

4. Component Stylings

Buttons

Primary

  • Background: #5865f2
  • Text: #ffffff
  • Padding: 8px 16px
  • Radius: 4px
  • Hover: #4752c4
  • Use: Primary CTAs, "Continue", "Join Server"

Secondary

  • Background: #4e5058
  • Text: #ffffff
  • Padding: 8px 16px
  • Radius: 4px
  • Hover: #6d6f78

Tertiary / Subtle (Link-style)

  • Background: transparent
  • Text: #dbdee1
  • Hover: text underlined, no background change

Danger

  • Background: #da373c
  • Text: #ffffff
  • Hover: #a12d2f

Inputs

  • Background: #1e1f22
  • Text: #dbdee1
  • Border: 1px solid #1e1f22
  • Radius: 4px
  • Padding: 10px 12px
  • Focus: border #5865f2

Server Avatars

  • Size: 48×48px
  • Radius: 16px (rounded square) by default; transitions to 50% on hover and active.
  • Active state: 4px white pill on the left edge of the icon column.

Status Dots

  • Size: 10×10px
  • Border: 3px solid background-tertiary (creates the "notch" effect)
  • Position: bottom-right of avatar.

Cards / Embeds

  • Background: #2b2d31 (dark) or #f2f3f5 (light)
  • Left border: 4px solid embed accent color.
  • Radius: 4px
  • Padding: 8px 16px

Mention Pill

  • Background: rgba(88, 101, 242, 0.3)
  • Text: #c9cdfb
  • Padding: 0 2px
  • Radius: 3px

5. Spacing & Layout

  • Base unit: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40.
  • Server rail: 72px wide, fixed.
  • Channel sidebar: 240px wide.
  • Member list: 240px wide on desktop.
  • Chat column: fluid, min 380px.

6. Motion

  • Duration: 200ms for hover; 350ms for the avatar circle-morph; 80ms for tooltip fade.
  • Easing: cubic-bezier(0.215, 0.61, 0.355, 1) for the avatar morph (snappy then settle).
  • Notification pulse: 1.4s ease-in-out infinite on unread mention indicator.

7. Usage Guardrails

  • Preserve the dark shell, compact density, and blurple action hierarchy together; using blurple on a light marketing-style layout breaks the Discord product feel.
  • Keep navigation-heavy surfaces structured around rails, sidebars, and chat columns rather than isolated decorative cards.
  • Use the rounded-square avatar and status-dot language when representing people, servers, or active presence.
Reference in new issue View Git Blame Copy Permalink