admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
364 lines
12 KiB
Markdown
364 lines
12 KiB
Markdown
# 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.
|