Atomic Design

🧬 Atomic Design in the Universal Design System (UDS)

Overview

Atomic Design, developed by Brad Frost, is a methodology for building UI systems that are modular, reusable, and scalable. At Dev Launchers, we’ve expanded the traditional five-layer model to include a sixth foundational level — Subatomic tokens — to reflect our token-first architecture and reinforce accessibility, theming, and performance.

We treat Atomic Design not just as a structure, but as a mindset to unify design and development through shared logic, semantic meaning, and systemized reuse.

---

⚛️ UDS Atomic Hierarchy

🧬 Subatomic (Tokens)

Design primitives that power all styles

This is the base layer of our system. Subatomic elements include:

• Color tokens (primitive, theme, style, status)

• Spacing tokens (gaps, paddings, margins)

• Radius, typography, shadows, z-index

• Semantic tags & accessibility toggles

These tokens are never used directly in isolation but are aliased upward through the system to enforce consistency, flexibility, and accessibility. For example, color values are drawn from a 10-step primitive scale, then remapped through a theme layer and re-aliased into styles like surface, content, or ring.

💡 Our color system alone supports over 19,000 possible combinations — all layered, accessible, and theme-aware.

---

⚛️ Atoms

The simplest building blocks with function or visual form

Atoms are individual UI elements that can’t be broken down further without losing meaning — such as:

• Buttons

• Text components

• Icons

• Tags

• Inputs

• Semantic dividers or roles

In UDS, atoms are not just styled elements — they carry accessibility tagging, semantic meaning, and token-driven styling out of the box.

---

🧪 Molecules

Functional units made from groups of atoms

Examples:

• Input group (label + input + icon)

• Status badge (icon + text)

• Toggle chip (text + interactive state)

These are compositional units that balance layout and interaction. Their internal spacing, color, and behavior all rely on subatomic tokens and semantic variants.

---

🧬 Organisms

Full UI components with layout and dynamic behavior

Examples:

• Header/navigation bar

• Footer section

• Sidebar with nested lists

• Card with media, content, and CTA

These are self-contained, flexible, and structured to follow accessibility standards and variant logic for theme, status, and mode.

---

📐 Templates

Page-level scaffolds without real data

Templates define structural layout and component placement rules. They often include placeholder content and illustrate hierarchy, responsive behavior, and dynamic state integration.

---

📄 Pages

Fully realized instances with real content

Pages are built from templates and include all real data, content, states, and integrations. They are used for usability validation, accessibility QA, and final testing across devices and modes.

---

🔎 Why We Use Atomic + Subatomic Design

👩‍🎨 Designers

• Token-powered styling lets designers focus on intent, not hex codes or spacing guesswork.

• Theme-agnostic and mode-ready — no need to redesign for dark mode.

• Semantic tagging empowers accessible, hierarchical UI building blocks.

👨‍💻 Developers

• Fewer overrides thanks to centralized tokens.

• Semantic and predictable classnames via status/priority/appearance logic.

• Easier debugging due to token naming and structured variant logic.

🏢 For the Organization

• One system, many products — enabling brand, accessibility, and scale.

• Easy rebranding — change at the token layer, not at the component level.

• WCAG baked in — not bolted on.

---

💬 TL;DR

We expanded Atomic Design by adding a Subatomic Token Layer to our system. This allows us to maintain high design fidelity, accessibility, and flexibility — across components, themes, and brands — while aligning designers and developers through shared logic and language.