Atomic Design

Stratum is structured as a strict five-layer Atomic Design system. Each layer has a clear job, and the layers only compose upward — never sideways.

Tokens → Atoms → Molecules → Organisms → Templates → Screens

The layers

Tokens

Raw design decisions: colors, spacing, typography, radii, shadows, borders. Every other layer reads from tokens — nothing is ever hardcoded.

Import from: @/tokens Access in components via: const theme = useTheme()

Atoms (15)

The smallest composable units. Each atom renders one thing: a text label, a button, an icon, an input field. Atoms own their own styling and map directly to Figma components.

Rule: Atoms use <Surface> for themed backgrounds — never bare <View>. Import from: @/components

Molecules (6)

Two or more atoms combined to do one job. A FormField combines Input + Text (label) + Text (error). A SettingsRow combines Text + Icon + an accessory atom.

Rule: Molecules have no business logic. They are controlled — all state lives above them.

Organisms (4)

Meaningful interface sections assembled from molecules and atoms. SettingsGroup is a titled list of SettingsRow molecules. AuthForm is a FormField pair with a submit Button.

Rule: Organisms are still controlled — validation and data fetching belong in Screens, not organisms.

Templates (2)

Layout shells with named slots: header, content, footer as ReactNode props. Templates have no business logic and no awareness of what fills their slots.

Rule: Templates define structure only. Every visual decision inside a slot is the responsibility of the organism that fills it.

Screens

Bind templates to data, navigation, and state. Screens are the only layer that knows about routes, API calls, and application state.

Rule: Screens are not reusable components — they are one-off compositions for a specific route.

Layer decision guide

What you need	Use
A text label	Text or Heading atom
A button	Button or IconButton atom
A form input	FormField molecule (not bare Input)
Multiple form inputs with validation	AuthForm organism
A single settings preference row	SettingsRow molecule
Multiple preference rows in a group	SettingsGroup organism
A content list row	ListItem molecule
Multiple list rows	ListSection organism
A full-screen auth flow	AuthLayout template + AuthForm organism
A full-screen settings or detail view	SettingsLayout template

What you must never do

• Hardcode colors, sizes, or font values — always use tokens
• Skip layers — don’t put atoms directly in templates without an organism
• Add business logic to molecules or organisms — that belongs in screens
• Use more than one primary Button per screen

Related

• Project Structure — directory layout
• Components overview — start with atoms
• Patterns — composition examples