design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Principles

设计原则

Core philosophy: Every interface should look designed by a team that obsesses over 1-pixel differences. Not stripped, crafted. And designed for its specific context.

核心理念： 每个界面都应呈现出由执着于1像素差别的团队打造的质感。不是简单简化，而是精心雕琢。并且要贴合产品的特定场景。

Design Direction (REQUIRED)

设计方向（必选）

Before writing code, commit to a direction. Don't default. Think about what this specific product needs to feel like.

编写代码前，先确定设计方向。 不要默认选择通用风格，要思考这款特定产品需要传递怎样的感受。

Think About Context

结合场景考量

What does this product do? A finance tool needs different energy than a creative tool.
Who uses it? Power users want density. Occasional users want guidance.
What's the emotional job? Trust? Efficiency? Delight? Focus?
What would make this memorable? Every product has a chance to feel distinctive.

产品定位是什么？ 金融工具与创意工具需要传递的氛围截然不同。
目标用户是谁？ 核心用户需要高密度信息，偶尔使用的用户需要引导性设计。
情感诉求是什么？ 信任？高效？愉悦？专注？
记忆点在哪里？ 每个产品都有机会打造独特的辨识度。

Choose a Personality

选择产品风格

Direction	Feel	When to Use
Precision & Density	Tight spacing, monochrome, info-forward	Power users who live in the tool. Linear, Raycast, terminal aesthetics.
Warmth & Approachability	Generous spacing, soft shadows, friendly	Products that want to feel human. Notion, Coda, collaborative tools.
Sophistication & Trust	Cool tones, layered depth, gravitas	Products handling money or sensitive data. Stripe, Mercury.
Boldness & Clarity	High contrast, dramatic negative space	Modern, decisive products. Vercel, minimal dashboards.
Utility & Function	Muted palette, functional density	Work matters more than chrome. GitHub, developer tools.
Data & Analysis	Chart-optimized, technical but accessible	Analytics, metrics, business intelligence.

Pick one. Or blend two. But commit to a direction that fits the product.

设计方向	风格感受	适用场景
精准密集型	紧凑间距、单色风格、信息优先	重度使用工具的核心用户。类似Linear、Raycast、终端的美学风格。
温暖亲和型	宽松间距、柔和阴影、友好感	希望传递人文感的产品。如Notion、Coda、协作类工具。
精致信赖型	冷色调、分层深度、厚重感	处理资金或敏感数据的产品。如Stripe、Mercury。
醒目清晰型	高对比度、大留白	现代、果断的产品。如Vercel、极简仪表盘。
实用功能型	低饱和度配色、功能优先的密集布局	功能优先于装饰的工具。如GitHub、开发者工具。
数据分析型	图表优化、专业但易用	分析类、指标类、商业智能产品。

选择一种风格，或融合两种，但必须确定符合产品定位的方向。

Choose Foundation

选择基础元素

Color foundation (don't default to warm):

Warm (creams, warm grays): approachable, comfortable, human
Cool (slate, blue-gray): professional, trustworthy, serious
Pure neutrals (true grays): minimal, bold, technical
Tinted (slight color cast): distinctive, memorable, branded

Light or dark? Dark feels technical, focused, premium. Light feels open, approachable, clean. Choose based on context.

Accent color: ONE that means something. Blue = trust. Green = growth. Orange = energy. Violet = creativity.

色彩基础（不要默认选择暖色调）：

暖色调（米白、暖灰）：亲和、舒适、人性化
冷色调（石板灰、蓝灰）：专业、可信、严肃
纯中性色（纯灰）：极简、醒目、技术感
带色调倾向（轻微色彩偏移）：独特、易记、品牌化

亮色或暗色模式？ 暗色模式更显技术感、专注感与高端感。亮色模式更显开阔、亲和、清爽。根据场景选择。

强调色： 只选一种有明确含义的颜色。蓝色=信任，绿色=增长，橙色=活力，紫色=创意。

Choose Layout

选择布局方式

Dense grids for information-heavy interfaces where users scan and compare
Generous spacing for focused tasks where users need to concentrate
Sidebar nav for multi-section apps with many destinations
Top nav for simpler tools with fewer sections

密集网格：适用于信息密集型界面，方便用户快速浏览与对比
宽松间距：适用于需要用户集中注意力的专注型任务
侧边栏导航：适用于多板块、多入口的复杂应用
顶部导航：适用于板块较少的简单工具

Choose Typography

选择字体体系

System fonts: fast, native, invisible (utility-focused products)
Geometric sans (Geist, Inter): modern, clean, technical
Humanist sans (SF Pro, Satoshi): warmer, more approachable
Monospace influence: technical, developer-focused, data-heavy

系统字体：加载快、原生感、无干扰（适用于功能优先的产品）
几何无衬线字体（Geist、Inter）：现代、简洁、技术感
人文无衬线字体（SF Pro、Satoshi）：更温暖、亲和
等宽字体风格：技术感、面向开发者、数据密集型场景

Core Craft (Non-Negotiable)

核心设计工艺（不可妥协）

The 4px Grid

4px网格系统

All spacing uses 4px base:

4px

(micro),

8px

(tight),

12px

(standard),

16px

(comfortable),

24px

(generous),

32px

(major).

所有间距以4px为基准：

4px

（微间距）、

8px

（紧凑间距）、

12px

（标准间距）、

16px

（舒适间距）、

24px

（宽松间距）、

32px

（大间距）。

Symmetrical Padding

对称内边距

TLBR must match. If top is 16px, all sides are 16px. Exception: when content naturally creates visual balance.

上下左右内边距必须一致。如果顶部是16px，所有边都设为16px。例外情况：内容自然形成视觉平衡时可调整。

Border Radius

圆角半径

Stick to 4px grid. Pick a system and commit:

Sharp: 4px, 6px, 8px
Soft: 8px, 12px
Minimal: 2px, 4px, 6px

遵循4px网格系统。确定一套规则并坚持执行：

锐利风格：4px、6px、8px
柔和风格：8px、12px
极简风格：2px、4px、6px

Depth Strategy

层次感策略

Match depth to design direction. Different products need different approaches:

Borders-only (flat): Clean, technical. Linear, Raycast use almost no shadows.
Subtle single shadow: Soft lift without complexity.
Layered shadows: Rich, premium, dimensional. Stripe, Mercury.
Surface color shifts: Background tints establish hierarchy without shadows.

The craft is in the choice, not the complexity. A flat interface with perfect spacing is more polished than shadow-heavy with sloppy details.

层次感需匹配设计方向。不同产品需要不同的处理方式：

仅用边框（扁平化）：简洁、技术感。Linear、Raycast几乎不使用阴影。
细微单层阴影：轻微悬浮感，不增加复杂度。
多层阴影：丰富、高端、有立体感。如Stripe、Mercury。
背景色渐变：通过背景色调变化建立层级，无需阴影。

设计的精髓在于选择，而非复杂度。间距完美的扁平化界面，比阴影繁多但细节粗糙的界面更精致。

Typography Hierarchy

字体层级

Headlines: 600 weight, -0.02em tracking
Body: 400-500 weight
Labels: 500 weight, positive tracking for uppercase
Scale: 11px, 12px, 13px, 14px (base), 16px, 18px, 24px, 32px

Use monospace for numbers, IDs, codes, timestamps. Use

tabular-nums

for columns.

Font pairing: Display font for headlines (one statement font) + neutral body font. Don't mix two display fonts.

标题：600字重，-0.02em字距
正文：400-500字重
标签：500字重，大写字母使用正字距
字号范围：11px、12px、13px、14px（基准）、16px、18px、24px、32px

数字、ID、代码、时间戳使用等宽字体。表格列使用

tabular-nums

属性。

字体搭配： 标题用展示字体（一种标志性字体）+ 正文用中性字体。不要混合两种展示字体。

Color for Meaning Only

色彩仅用于传递信息

Gray builds structure. Color only appears when it communicates: status, action, error, success. Four-level contrast hierarchy: foreground → secondary → muted → faint.

灰色构建界面结构。仅在需要传递特定信息时使用色彩：状态、操作、错误、成功。四级对比度层级：前景色→次要色→弱化色→淡色。

Card Layouts

卡片布局

Internal layouts should vary by content. A metric card doesn't have to look like a plan card doesn't have to look like a settings card. One might have a sparkline, another an avatar stack, another a progress ring.

Surface treatment stays consistent: same border weight, shadow depth, corner radius, padding scale.

内部布局需根据内容调整。指标卡片、计划卡片、设置卡片的样式不必完全统一。有的卡片可能包含迷你折线图，有的包含头像组，有的包含进度环。

表层处理保持一致： 相同的边框粗细、阴影深度、圆角半径、内边距比例。

Isolated Controls

独立控件

Never use native form elements for styled UI. Native

<select>

<input type="date">

render OS-native elements that cannot be styled. Build custom components.

Custom select triggers:

display: inline-flex

with

white-space: nowrap

to keep text and icons on same row.

不要为样式化UI使用原生表单元素。原生

<select>

、

<input type="date">

会渲染系统原生元素，无法自定义样式。需构建自定义组件。

自定义选择器触发样式：使用

display: inline-flex

并设置

white-space: nowrap

，确保文本和图标在同一行显示。

Navigation Context

导航上下文

Screens need grounding:

Navigation (sidebar or top)
Location indicator (breadcrumbs, active state)
User context (who's logged in)

When building sidebars, consider using same background as main content. Linear, Vercel use subtle border for separation rather than different backgrounds.

界面需要明确的定位：

导航栏（侧边栏或顶部）
位置指示器（面包屑、激活状态）
用户上下文（当前登录用户）

构建侧边栏时，可考虑使用与主内容区相同的背景色。Linear、Vercel使用细微边框分隔，而非不同背景色。

Dark Mode

暗色模式

Borders over shadows: Shadows less visible on dark backgrounds
Adjust semantic colors: Desaturate for dark backgrounds
Same hierarchy, inverted values

用边框替代阴影：阴影在暗色背景上辨识度低
调整语义化色彩：在暗色背景上降低饱和度
层级不变，数值反转

Motion & Animation

动效与动画

Motion is communication, not decoration. Every animation should have a reason.

Timing: 150-200ms for micro-interactions, 300-400ms for larger transitions
Easing:
```
ease-out
```
for entrances,
```
ease-in
```
for exits,
```
ease-in-out
```
for state changes
Staggered reveals: When loading multiple items, stagger by 50-75ms for polished feel
Scroll-triggered: Subtle fade-in on scroll for long pages (opacity + small translateY)

Avoid: Spring physics, bouncy overshoots, parallax effects. Keep motion functional.

动效是沟通工具，而非装饰。每个动画都要有明确目的。

时长： 微交互用150-200ms，大型过渡用300-400ms
缓动函数： 入场用
```
ease-out
```
，退场用
```
ease-in
```
，状态切换用
```
ease-in-out
```
** stagger式展示：** 加载多个元素时，每隔50-75ms依次展示，提升精致感
滚动触发： 长页面滚动时的淡入效果（透明度+轻微Y轴位移）

避免：弹簧物理效果、弹跳过度、视差效果。保持动效的功能性。

Texture & Atmosphere

质感与氛围

For products that need visual depth beyond shadows:

Subtle gradients: Background gradients (2-3% opacity shift) add dimension without distraction
Noise overlay: 1-2% noise on large surfaces prevents flatness (especially dark mode)
Glass effects:
```
backdrop-filter: blur()
```
for elevated surfaces, used sparingly
Border gradients: Subtle gradient borders on hero cards for premium feel

Match to personality: Precision products stay flat. Sophisticated products layer depth.

对于需要超越阴影的视觉深度的产品：

细微渐变： 背景渐变（2-3%透明度变化）增加维度感，不分散注意力
噪点叠加： 大区域表面添加1-2%噪点，避免扁平化（尤其在暗色模式下）
毛玻璃效果： 对悬浮元素使用
```
backdrop-filter: blur()
```
，谨慎使用
渐变边框： 核心卡片使用细微渐变边框，提升高端感

匹配产品风格：精准型产品保持扁平化，精致型产品增加层次感。

Anti-Patterns

反模式

Never:

Dramatic drop shadows (
```
0 25px 50px...
```
)
Large radius (16px+) on small elements
Asymmetric padding without reason
Pure white cards on colored backgrounds
Thick borders (2px+) for decoration
Spring/bouncy animations
Multiple accent colors
Motion without purpose

绝对不要：

使用夸张的大阴影（如
```
0 25px 50px...
```
）
小元素使用大圆角（16px以上）
无理由的不对称内边距
彩色背景上使用纯白卡片
装饰性粗边框（2px以上）
弹簧/弹跳动画
使用多种强调色
无目的的动效

The Standard

标准要求

Different products want different things. A dev tool wants precision and density. A collaborative product wants warmth and space. A financial product wants trust and sophistication.

Same quality bar, context-driven execution.

For CSS values and implementation details, see references/craft-details.md.

不同产品有不同需求。开发者工具需要精准与密集，协作产品需要温暖与空间，金融产品需要信任与精致。

统一的质量标准，结合场景的执行方式。

关于CSS数值与实现细节，请参考references/craft-details.md。