Content Comparison

Introduction

Standardised naming conventions enhance clarity, streamline collaboration, and facilitated system evolution.

In design systems, naming conventions are pivotal for ensuring consistency, clarity, and efficiency. Clear names, such as "error-red" for a colour, immediately indicate its function, streamlining communication among designers, developers, and other team members.

Standardised naming expedites the design and development process by reducing the need for continuous reference or clarification. It guarantees that references to specific elements are universally understood, facilitating smoother integration as the design system expands.

This shared language bolsters collaboration across teams, ensuring everyone understands each component's purpose. Such conventions prevent accidental duplicates, which can clutter the system, and aid in managing component evolution, especially when deprecating old elements or introducing new ones.

Principles

1. Using atomic design classification

2. Simple and descriptive

3. Scalable

...

1. - hierarchical structure (atoms, molecules, organisms, etc.)

...

...

1. Simple and descriptive - consistent naming rules (descriptive, clear, no abbreviations)

...

We are following atomic design…

...

3. Scalable

Atomic Design

Atomic design is a methodology developed by Brad Frost for creating design systems in a systematic and hierarchical manner.

The idea behind atomic design is to break interfaces down into their smallest parts, which can be combined and recombined to produce any number of UI variations. Atomic design breaks down UI components into the following levels: atoms, molecules, organisms, templates and pages.

Atoms

...