44. Frontend System Design

Design Tokens: The Single Source of Truth

Never hardcode raw values (like #FF0000 or 16px) directly into your CSS files or React components. Instead, use Design Tokens (CSS Variables). A token gives a semantic name to a raw value.

If the company rebrands and changes its primary color, you only change the token once in the :root, and the entire application instantly updates.

Atomic Design Methodology

Atomic Design is a mental model for building component libraries. It breaks UIs down into 5 hierarchical levels:

• Atoms: The smallest, indivisible pieces (a single Button, an Input field, a Label).
• Molecules: A simple combination of atoms (a Search Form containing a Label, an Input, and a Button).
• Organisms: Complex, distinct sections of UI (a complete Navigation Bar).
• Templates: Page-level structures without actual data (wireframes).
• Pages: Templates populated with real, dynamic data.

Storybook: The Component Catalog

When you build an Atom (like a highly customizable Button), how do other developers on your team know it exists? You use a tool called Storybook. Storybook runs completely separate from your main application. It acts as a visual catalog where developers can view every UI component, test its hover states, and see what props it accepts, preventing them from rebuilding the same button from scratch.

Theming (Dark Mode)

Implementing Dark Mode is incredibly easy if you use Design Tokens. You simply swap the token values when a specific class (like .dark-theme) is active.