Coral Design System | Kairos Wen

Project overview项目概览

Consistency is a team behavior, not a Figma file一致性不是一个 Figma 文件，而是一种团队协作方式

As SEA's design organization expanded, more designers, developers and product managers were solving similar interface problems in parallel. Coral brought foundations, reusable components, writing guidance and decision ownership into one shared system.

随着 SEA 设计团队扩张，设计、开发与产品经理开始在不同项目中重复解决相似的界面问题。Coral 将设计基础、可复用组件、文案规范和决策责任整合成一套共享系统。

Company公司SEA

Time时间2021–2022

Role角色Component contributor and reviewer组件系统贡献者与审核者

Outcome成果An internal library and governance workflow shared across UX, UI and engineering.供 UX、UI 与开发共同使用的内部组件库与治理流程。

01

Repeated design work重复设计

Teams rebuilt familiar patterns instead of reusing shared solutions.团队重复搭建相似模式，难以复用已有解决方案。

02

Inconsistent quality质量不一致

Visual and interaction decisions drifted between projects and roles.视觉与交互决策在不同项目和角色之间逐渐偏离。

03

Unclear ownership责任不清晰

Without review and maintenance rules, a library quickly became outdated.缺少审核与维护规则时，组件库很快就会失去可信度。

01 · System foundations系统基础

Define what Coral owns before adding components先明确 Coral 负责什么，再开始增加组件

The system began with a shared goal, design principles and an information architecture that connected foundations, components and UX writing.系统从共同目标、设计原则和信息架构开始，将基础规范、组件与 UX 文案组织为清晰的整体。

Coral design system goals — **Goal目标**Improve efficiency, consistency and product quality as the organization grows.在组织扩张时持续提升效率、一致性与产品质量。

Coral design principles — **Principles原则**A common bar for decisions, not only a catalog of visual styles.为产品决策建立共同标准，而不仅是视觉样式目录。

Coral 3.0 system structure covering foundations, components and UX writing — **System structure系统结构**Foundations support pattern, data, feedback, navigation and input components, with UX writing as a parallel discipline.基础规范支撑模式、数据展示、反馈、导航与输入组件，UX 文案作为并行能力共同纳入系统。

01

Reusable by default默认可复用

Design for recurring product needs, not one-off screens.围绕重复出现的产品需求设计，而不是只服务单一页面。

02

Shared ownership共同负责

UX, UI and engineering participate in quality decisions.UX、UI 与开发共同参与质量判断。

03

Document the why记录设计依据

Usage guidance keeps a component useful beyond its author.使用规范让组件在离开原作者后仍然可靠。

A system of people人的协作系统

The stakeholder map made contribution and review visible across UX, UI, product and engineering. This prevented Coral from becoming a design-only initiative with no path to implementation.利益相关者地图明确了 UX、UI、产品与开发在贡献和审核中的责任，避免 Coral 成为无法落地的设计侧单点项目。

Coral stakeholder map — **Stakeholder map协作角色**Contribution, review and implementation depend on explicit ownership.组件贡献、审核与落地都需要明确的责任边界。

02 · Governance workflow治理流程

Make contribution, review and release repeatable让组件提交、审核和发布成为可重复的流程

The library could only scale if teams knew when to reuse, when to submit a new component, who reviewed it and how issues returned to the backlog.只有当团队清楚何时复用、何时提交新组件、由谁审核，以及问题如何回流待办，组件库才能持续扩展。

01

Plan by iteration按迭代规划

Balance project demand, component maintenance and planned system work instead of growing the library opportunistically.平衡项目需求、组件维护与系统建设，避免组件库只随临时需求被动增长。

02

Triage submissions分流组件需求

First ask whether an existing component can solve the need. New requests enter a documented review path with clear urgency and ownership.先判断现有组件是否可满足需求；新需求进入有明确优先级与负责人的审核路径。

03

Review across disciplines跨角色审核

UX checks behavior and reusability, UI checks visual quality, and engineering validates implementation feasibility.UX 检查行为与复用性，UI 检查视觉质量，开发验证实现可行性。

04

Track and maintain跟踪与维护

Bi-weekly reviews, a shared checklist and an issue tracker keep the system current after release.双周评审、共享检查清单和问题跟踪器让组件在发布后仍保持更新。

End-to-end Coral component submission and warehousing workflow — **Submission workflow提交流程**From project requirement to reusable component, review, implementation and release.从项目需求到可复用组件，覆盖讨论、审核、开发与发布。

Coral component working process — **Working process组件工作流程**A shared handoff model connects design decisions with implementation.共享交付模型将设计决策与开发实现连接起来。

Coral UI changes review workflow — **UI change review视觉变更审核**Smaller visual-only changes use a lighter but still accountable review path.仅涉及视觉的小型变更采用更轻量但仍可追踪的审核路径。

Coral bi-weekly component review checklist — **Review checklist评审清单**A consistent agenda turns critique into actionable quality checks.统一议程把评审意见转化为可执行的质量检查。

Coral component issue tracker — **Issue tracker问题跟踪**Open questions, owners and status remain visible between review sessions.在评审会议之间持续记录问题、负责人和处理状态。

03 · Component deep dive组件案例

Slider: turn one control into a dependable patternSlider：把一个控件沉淀为可靠的产品模式

The Slider component demonstrates the full method: research established the pattern space, documentation defined anatomy and states, and specifications made implementation predictable.Slider 组件展示了完整方法：竞品研究建立模式边界，文档定义结构与状态，规格说明保障实现一致性。

Research before standardization标准化之前先研究

We compared mature systems including Ant Design, Material Design, Spectrum and enterprise libraries. The aim was not to copy appearance, but to understand recurring anatomy, value models, accessibility states and usage constraints.我们对比 Ant Design、Material Design、Spectrum 等成熟系统。目的不是复制外观，而是理解共同的结构、数值模式、可访问状态和使用边界。

1Definition and anatomy定义与结构
2Types and interaction states类型与交互状态
3Usage and content behavior使用方式与内容行为
4Best practices and anti-patterns最佳实践与错误示例
5UI specification and theming视觉规格与主题适配

Competitive research for slider components across major design systems — **Pattern research模式研究**Click to inspect the full research board.点击查看完整研究画板。

Slider definition and anatomy — **Anatomy结构**Name each part so design and engineering share the same vocabulary.为每个部分建立统一命名，让设计与开发使用同一种语言。

Slider types and states — **Types & states类型与状态**Cover value models, handles, labels and interaction states.覆盖数值模式、手柄、标签与交互状态。

Slider usage guidance — **Usage使用规范**Explain when the pattern is appropriate and how content behaves.说明组件适用场景与内容行为。

Slider best practices — **Best practice最佳实践**Make good and poor usage explicit for future contributors.为后续贡献者明确正确用法与反例。

Complete Slider UI specifications and theming — **UI specification视觉规格**Anatomy, states, labels, overflow, dimensions, tokens and dark-mode theming.覆盖结构、状态、标签、溢出、尺寸、设计变量与深色主题。

04 · Adoption & evolution推广与演进

A design system only works when people can use and improve it只有团队能够使用并持续改进，设计系统才真正成立

Sharing sessions introduced component usage, clarified differences between similar patterns and created a direct channel for feedback.分享会帮助团队理解组件用法、区分相似模式，并建立直接的反馈渠道。

Expand扩展

Add data display, comments, toolbars, login and card patterns through the same submission process.通过同一提交流程继续补充数据展示、评论、工具栏、登录与卡片模式。

Support支持

Help teams choose the right component, resolve new problems and improve existing guidance.帮助团队选择正确组件、解决新问题并持续完善使用规范。

Publish发布

Move beyond a Figma-only library toward a searchable Coral website connected to development.从仅存在于 Figma 的组件库，走向可检索并连接开发实现的 Coral 网站。

Coral design system website roadmap — **Website roadmap网站路线图**Plan, document, develop, release and retrospect with explicit design participation.在规划、文档、开发、发布与复盘阶段明确设计参与方式。

05 · Outcome项目成果

From a component library to an operating model从组件库走向团队运行机制

Coral became a complete internal component library for SEA's design team and a shared framework for how UX, UI and engineering created, reviewed and maintained interface patterns.Coral 成为 SEA 设计团队内部完整的组件库，也为 UX、UI 与开发如何创建、审核和维护界面模式建立了共同框架。

Efficiency效率

Reusable patterns reduced repeated design and implementation work.复用模式减少了重复设计与开发工作。

Quality质量

Cross-discipline review created a consistent quality bar.跨角色审核建立了统一质量标准。

Continuity持续性

Checklists, issue tracking and support kept the library alive after release.检查清单、问题跟踪与支持机制让组件库在发布后持续运转。

The strongest design system is not the one with the most components. It is the one whose decisions can be understood, reused and improved by the whole team.最强的设计系统，不是组件数量最多，而是它的决策能够被整个团队理解、复用并持续改进。

Coral taught me to design the governance around the interface: contribution paths, review criteria and maintenance rituals are product experiences too.Coral 让我认识到，界面背后的治理同样需要设计：贡献路径、审核标准和维护节奏本身也是产品体验。