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。
8.5 KiB
8.5 KiB
Design System Inspired by Revolut
Category: Fintech & Crypto Digital banking. Sleek dark interface, gradient cards, fintech precision.
1. Visual Theme & Atmosphere
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
The color system is built on a comprehensive --rui-* (Revolut UI) token architecture with semantic naming for every state: danger (#e23b4a), warning (#ec7e00), teal (#00a87e), blue (#494fdf), deep-pink (#e61e49), and more. But the marketing surface itself is remarkably restrained — near-black (#191c1f) and pure white (#ffffff) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (#191c1f), secondary light (#f4f4f4), outlined (transparent + 2px solid), and ghost on dark (rgba(244,244,244,0.1) + 2px solid). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
Key Characteristics:
- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
- Near-black (
#191c1f) + white binary with comprehensive--rui-*semantic tokens - Universal pill buttons (9999px radius) with generous padding (14px 32px)
- Inter for body text with positive letter-spacing (0.16px–0.24px)
- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
- Zero shadows detected — depth through color contrast only
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
2. Color Palette & Roles
Primary
- Revolut Dark (
#191c1f): Primary dark surface, button background, near-black text - Pure White (
#ffffff):--rui-color-action-label, primary light surface - Light Surface (
#f4f4f4): Secondary button background, subtle surface
Brand / Interactive
- Revolut Blue (
#494fdf):--rui-color-blue, primary brand blue - Action Blue (
#4f55f1):--rui-color-action-photo-header-text, header accent - Blue Text (
#376cd5):--website-color-blue-text, link blue
Semantic
- Danger Red (
#e23b4a):--rui-color-danger, error/destructive - Deep Pink (
#e61e49):--rui-color-deep-pink, critical accent - Warning Orange (
#ec7e00):--rui-color-warning, warning states - Yellow (
#b09000):--rui-color-yellow, attention - Teal (
#00a87e):--rui-color-teal, success/positive - Light Green (
#428619):--rui-color-light-green, secondary success - Green Text (
#006400):--website-color-green-text, green text - Light Blue (
#007bc2):--rui-color-light-blue, informational - Brown (
#936d62):--rui-color-brown, warm neutral accent - Red Text (
#8b0000):--website-color-red-text, dark red text
Neutral Scale
- Mid Slate (
#505a63): Secondary text - Cool Gray (
#8d969e): Muted text, tertiary - Gray Tone (
#c9c9cd):--rui-color-grey-tone-20, borders/dividers
3. Typography Rules
Font Families
- Display:
Aeonik Pro— geometric grotesque, no detected fallbacks - Body / UI:
Inter— standard system sans - Fallback:
Arialfor specific button contexts
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
Principles
- Weight 500 as display default: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
- Billboard tracking: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
- Positive tracking on body: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
4. Component Stylings
Buttons
Primary Dark Pill
- Background:
#191c1f - Text:
#ffffff - Padding: 14px 32px
- Radius: 9999px (full pill)
- Hover: opacity 0.85
- Focus:
0 0 0 0.125remring
Secondary Light Pill
- Background:
#f4f4f4 - Text:
#000000 - Padding: 14px 34px
- Radius: 9999px
- Hover: opacity 0.85
Outlined Pill
- Background: transparent
- Text:
#191c1f - Border:
2px solid #191c1f - Padding: 14px 32px
- Radius: 9999px
Ghost on Dark
- Background:
rgba(244, 244, 244, 0.1) - Text:
#f4f4f4 - Border:
2px solid #f4f4f4 - Padding: 14px 32px
- Radius: 9999px
Cards & Containers
- Radius: 12px (small), 20px (cards)
- No shadows — flat surfaces with color contrast
- Dark and light section alternation
Navigation
- Aeonik Pro 20px weight 500
- Clean header, hamburger toggle at 12px radius
- Pill CTAs right-aligned
5. Layout Principles
Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
- Large section spacing: 80px–120px
Border Radius Scale
- Standard (12px): Navigation, small buttons
- Card (20px): Feature cards
- Pill (9999px): All buttons
6. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
| Focus | 0 0 0 0.125rem ring |
Accessibility focus |
Shadow Philosophy: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
7. Do's and Don'ts
Do
- Use Aeonik Pro weight 500 for all display headings
- Apply 9999px radius to all buttons — pill shape is universal
- Use generous button padding (14px 32px)
- Keep the palette to near-black + white for marketing surfaces
- Apply positive letter-spacing on Inter body text
Don't
- Don't use shadows — Revolut is flat by design
- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
- Don't use small buttons — the generous padding is intentional
- Don't apply semantic colors to marketing surfaces — they're for the product
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Compact, single column |
| Mobile | 400–720px | Standard mobile |
| Tablet | 720–1024px | 2-column layouts |
| Desktop | 1024–1280px | Standard desktop |
| Large | 1280–1920px | Full layout |
9. Agent Prompt Guide
Quick Color Reference
- Dark: Revolut Dark (
#191c1f) - Light: White (
#ffffff) - Surface: Light (
#f4f4f4) - Blue: Revolut Blue (
#494fdf) - Danger: Red (
#e23b4a) - Success: Teal (
#00a87e)
Example Component Prompts
- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
Iteration Guide
- Aeonik Pro 500 for headings — never bold
- All buttons are pills (9999px) with generous padding
- Zero shadows — flat is the Revolut identity
- Near-black + white for marketing, semantic colors for product