oa-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseOA Design
OA 设计语言
The design language of Open Analytics, written down so
an agent can reproduce it. Nothing here is aspirational: every value is
lifted from the shipped product, springs and hex codes included.
The look in one sentence: white surfaces with continuous-curvature corners,
resting on a quiet grey stage, drawn in a single ink, moved by a single
spring.
Start by dropping into the project's global stylesheet: every
recipe reads from those token names. Then read the recipe for what you are
building. Build with real content, never lorem.
_root.cssOpen Analytics 的设计语言，书面化呈现以便智能体（Agent）复刻。所有内容均非理想化设定：每一项参数均提取自已发布产品，包括弹性动效参数和十六进制颜色码。
一句话概括视觉风格：白色连续曲率圆角表面，置于低饱和度灰色背景之上，以单一墨色绘制，通过统一弹性动效实现过渡。
首先将 引入项目全局样式表：所有组件方案均基于这些令牌（token）名称构建。然后根据你要开发的内容阅读对应方案。开发时请使用真实内容，切勿使用占位文本（lorem）。
_root.cssThe ten rules
十大规则
- One ink, everything derived. The entire neutral system is one color,
, mixed into transparency at fixed percentages: borders 12%, hover washes 5%, inputs 14%. Never introduce a second grey; when you need a new neutral, mix ink.
--ink - Two layers, and the gap is the page. Surfaces are a white frame holding a recessed grey inset; sections are plates and the page background between them is the only divider. No horizontal rules.
- Squircles for surfaces, pills for actions. Cards get
continuous-curvature corners; everything clickable that is not a card is a
pill. A rectangle is the smell of a foreign component.
rounded-lg - One spring family. Seven named springs cover the entire product (table below). Do not invent an eighth.
- Chrome never waits. Layout and titles render instantly; only data swaps from a pixel-matched skeleton, arriving by blur, not by pop.
- Weight stops at 500. Inter Tight 300 to 500; no bold anywhere.
Hierarchy comes from size, color and spacing. Data aligns with
; code is Geist Mono.
tabular-nums - One accent, spent in one place. A single blue for primary actions and the primary chart line; semantic colors are text tints, never fills.
- States get pills, events end themselves. Standing conditions render non-dismissable strips or pills that live exactly as long as the state; one-off outcomes are toasts that retire alone.
- Copy is part of the design. Sentence case; buttons say what happens;
errors name the cause and the way out, without blame. Read .
_copy.md - Quality floor, always. Focus rings, ,
role="status"decorations,aria-hidden, no horizontal page scroll.prefers-reduced-motion
- 单一基础墨色，万物衍生：整套中性色彩系统仅基于一种颜色 ，通过固定透明度比例混合衍生：边框为 12% 透明度，hover 背景为 5% 透明度，输入框为 14% 透明度。切勿引入第二种灰色；如需新的中性色，均通过混合墨色实现。
--ink - 两层结构，间隙即为页面分隔：界面表面为白色框架，内嵌凹陷灰色区域；各区块为独立板块，板块间的页面背景即为唯一分隔元素。禁止使用水平线。
- 表面用圆角矩形，交互用胶囊按钮：卡片采用连续曲率圆角；所有可点击元素（卡片除外）均为胶囊样式。带有 圆角的矩形属于外来组件特征。
rounded-lg - 单一弹性动效家族：七个命名弹性动效覆盖整个产品（如下表所示）。禁止新增第八种。
- 界面框架即时渲染：布局和标题立即渲染；仅数据从像素匹配的骨架屏切换，通过模糊效果加载完成，而非弹出式呈现。
- 字重最高为 500：使用 Inter Tight 字体，字重范围 300 至 500；全程无粗体。层级区分通过字号、颜色和间距实现。数据采用 对齐；代码使用 Geist Mono 字体。
tabular-nums - 单一强调色，集中使用：仅使用一种蓝色作为主交互按钮和主图表线条的颜色；语义化颜色仅用于文本色调，绝不用于填充色。
- 状态用胶囊/条块，事件自动消失：持续状态采用不可关闭的条块或胶囊样式，其显示时长与状态持续时间完全一致；一次性结果采用自动消失的提示弹窗（toast）。
- 文案是设计的一部分：采用句首大写格式；按钮文案明确说明操作结果；错误文案指出问题原因及解决方法，无指责性表述。请阅读 。
_copy.md - 始终保障基础体验质量：包含焦点环、、
role="status"装饰、aria-hidden适配，无横向页面滚动。prefers-reduced-motion
The springs
弹性动效参数
| Name | Value | Used for |
|---|---|---|
| PANEL | 550 / 38 | dropdowns, menus, boards, toggles |
| LAYOUT | 550 / 40 | measured height/width, traveling pills |
| POP | 400 / 26 | modal entrance |
| POP_EXIT | 380 / 28 | modal exit |
| BANNER | 400 / 30 | floating pills, page banners |
| FLICK | 900 / 50 | icon micro-moves |
| CHART | 300 / 28 | chart tooltips, crosshair |
Micro fades: 0.1s out, 0.16s in, easeOut; nothing in app chrome tweens past
0.2s. The constants ship as code in .
components/_lib/springs.ts| 名称 | 参数值 | 适用场景 |
|---|---|---|
| PANEL | 550 / 38 | 下拉菜单、导航菜单、面板、切换器 |
| LAYOUT | 550 / 40 | 尺寸变化、移动胶囊按钮 |
| POP | 400 / 26 | 模态框入场 |
| POP_EXIT | 380 / 28 | 模态框退场 |
| BANNER | 400 / 30 | 悬浮胶囊按钮、页面横幅 |
| FLICK | 900 / 50 | 图标微动画 |
| CHART | 300 / 28 | 图表提示框、十字线 |
微淡入淡出效果：淡出 0.1s，淡入 0.16s，采用 easeOut 曲线；界面框架中所有动效时长均不超过 0.2s。这些常量已作为代码发布在 中。
components/_lib/springs.tsComponent recipes
组件方案
Each recipe is self-contained: when to use it, the load-bearing details, and
the full type-checked source embedded.
| File | What |
|---|---|
| the surface system and the fixed-height mini card |
| pills that press, the bevel, honest loading |
| menus, selects, switchers; one anchored-panel pattern |
| the traveling highlight and the label mask |
| pop in, softer pop out |
| the measured-height choreography |
| pixel-matched waits and the blur arrival |
| explaining a standing state |
| the app chrome's one word |
| success pulses, error shakes |
| the landing glass pill |
| scroll reveals in 80ms beats |
每个方案均独立完整：包含适用场景、核心细节，以及嵌入的完整类型检查源码。
| 文件 | 对应组件 |
|---|---|
| 表面系统及固定高度迷你卡片 |
| 可按压胶囊按钮、斜面效果、真实加载状态 |
| 菜单、选择器、切换器；统一锚定面板模式 |
| 动态高亮条及标签遮罩 |
| 入场弹出、柔化退场 |
| 尺寸变化的交互编排 |
| 像素匹配的加载骨架屏及模糊加载效果 |
| 持续状态说明条 |
| 界面框架的单字提示 |
| 成功状态脉冲动画、错误状态震动动画 |
| 着陆页玻璃胶囊按钮 |
| 滚动触发的渐显效果（80ms 节拍） |
Guides
指南
| File | What |
|---|---|
| the full palette, dark theme, type, radius, shadows |
| plates, widths, page anatomy, settings screens |
| the component patterns in prose, cross-referenced |
| the vocabulary and the signature moves, with rules |
| marketing pages: hero, reveals, furniture |
| voice, buttons, errors, states, numbers |
| the installable token block every recipe reads from |
Stack assumptions: React + Tailwind v4 + the package; but every
value is plain CSS numbers and spring constants, so port freely. If the
project already has a design system, theirs wins; use this to fill gaps, not
to overwrite their identity.
motion| 文件 | 内容说明 |
|---|---|
| 完整调色板、暗黑主题、字体、圆角、阴影 |
| 板块、宽度、页面结构、设置界面 |
| 组件模式的文字说明及交叉引用 |
| 动效词汇及标志性动效规则 |
| 营销页面：首屏、渐显效果、装饰元素 |
| 文案风格、按钮文案、错误提示、状态说明、数字格式 |
| 可引入的令牌代码块，所有组件方案均基于此构建 |
技术栈假设：React + Tailwind v4 + motion 包；不过所有参数均为纯 CSS 数值和弹性常数，因此可自由移植。如果项目已有设计系统，则以该系统为准；本设计语言仅用于填补空白，而非覆盖原有品牌特性。