Principles

Design Tokens

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.

Tech-Agnostic

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.

Think Proportionately

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.

Cross-Platform

The system should support web, Android and iOS, and reduce the amount of one-off designs that cater to specific platforms.