The system should use design tokens as its single source of truth, enabling us to quickly make large scale visual changes that propagate across platforms with minimal engineering effort.
Encourage Collaboration & Ownership
The more people who contribute to the system, the broader the institutional knowledge becomes and the less it feels like arbitrary rules constraining creativity.
Accessibility & Performance
The system should keep accessibility and performance top of mind in creating new UI components, adhering to standards and not compromising for the sake of aesthetics.
The system should not be tied to a specific design tool or tech stack, as these things change frequently.
Define Building Blocks, Not Features
The system should provide the building blocks for designers and engineers to innovate on new features and not exceed its scope into features.
Avoid Context-Specific Naming Conventions
The system should build features from atomic-level components and layout helpers to avoid the need for feature-specific styles.
Visual Style/UI Components
The system should clearly distinguish between UI components and their visual styles (color, type, spacing, etc.).
Align Design Tools & Frameworks
The system should ensure that our design tools reflect what is available in our engineering frameworks, which requires close, frequent collaboration between design and engineering.
The system’s UI components should let content, padding and border dictate their dimensions and arrange them using relative units rather than fixed pixel values to support a broad range of devices.
The system should support web, Android and iOS, and reduce the amount of one-off designs that cater to specific platforms.