Practical Design Systems: From Component Library to Team Standards

A design system is not a UI Kit, but a way of working that keeps teams consistent and collaborates efficiently.

What is a Design System

A design system (Design System) is a complete set of standards and reusable components used to manage large-scale design work. It comprises three core parts:

1. Design Principles: Values that guide design decisions
2. Component Library: A collection of reusable UI elements
3. Specification Documentation: Usage rules and best practices

Design System vs. Component Library vs. Style Guide

Steps to Building a Design System

Step One: Design Tokens

Design tokens are the atomic units of a design system, defining the most basic visual attributes:

Color System:

Primary:    #206BE7 (品牌主色)
Secondary:  #6C757D (辅助色)
Success:    #28A745 (成功)
Warning:    #FFC107 (警告)
Danger:     #DC3545 (错误)

Typography System:

标题 H1:  24px / 1.3 / Bold
标题 H2:  20px / 1.3 / Bold
标题 H3:  18px / 1.4 / SemiBold
正文:     16px / 1.6 / Regular
辅助文字:  14px / 1.5 / Regular
注释:     12px / 1.5 / Regular

Spacing System (based on 4px grid):

xs:   4px    (紧凑间距)
sm:   8px    (元素内间距)
md:   16px   (元素间距)
lg:   24px   (区块间距)
xl:   32px   (大区块间距)
xxl:  48px   (页面级间距)

Step Two: Basic Components

Start with the most commonly used components and gradually expand:

Button:
- Primary Button: The single main action on a page
- Secondary Button: Auxiliary action
- Text Button: The lightest action
- Danger Button: Irreversible action

Each button needs to define: default state, hover state, pressed state, disabled state, loading state.

Form Components:
- Input: Single-line text, multi-line text
- Select: Dropdown selection, multi-select
- Switch: Boolean toggle
- Radio / Checkbox

Feedback Components:
- Toast / Message
- Dialog / Modal
- Notification
- Loading / Skeleton

Step Three: Composite Components

Build more complex UI modules based on basic components:

• Table: Sorting, filtering, pagination
• Form: Validation, layout, linkage
• Navigation: Sidebar, breadcrumbs, tabs
• Card: Card templates for different content types

Step Four: Page Templates

Layout frameworks for common pages:

• List Page: Search + Filter + List + Pagination
• Detail Page: Header information + Content area + Action bar
• Form Page: Step indicator + Form content + Submission area
• Dashboard: Data overview + Charts + Quick actions

Component Design Principles

Principle One: Single Responsibility

Each component should do one thing and do it well. Avoid stuffing multiple functionalities into one component.

Principle Two: Composability

Components should be freely combinable to build complex interfaces like LEGO bricks.

Principle Three: Configurability

Control component variants through properties (Props) rather than creating multiple similar components:

Button
├── type: primary | secondary | text | danger
├── size: small | medium | large
├── loading: true | false
├── disabled: true | false
└── icon: 可选图标

Principle Four: Accessibility First

• All interactive components support keyboard operation
• Provide ARIA labels
• Color contrast meets WCAG standards
• Convey information not solely by color

Team Collaboration Standards

Naming Conventions

Consistent naming makes team communication more efficient:

• Component Naming: Use PascalCase, e.g., SearchBar, UserCard
• State Naming: Use adjectives, e.g., active, disabled, loading
• Size Naming: Use T-shirt sizes, e.g., sm, md, lg

Design Handoff Checklist

When designers hand off to developers, it should include:

• [ ] Complete design mockups (including all states)
• [ ] Specification documentation (spacing, colors, fonts)
• [ ] Interaction specifications (animations, transitions, gestures)
• [ ] Exception states (empty data, error, loading)
• [ ] Responsive adaptation plan

Version Management

Design systems require version management:

• Major: Breaking changes, such as component API changes
• Minor: New components or features
• Patch: Bug fixes, minor style adjustments

Recommended Design System References

In Conclusion

A design system is a continuously evolving product, not a one-time project. Start small, first address the team's most pressing consistency issues, then gradually expand. Remember: a simple system used by the team is far more valuable than a perfect but unused complex system.