Introduction

Stratum is an atomic design system for React Native (Expo). It combines three ideas that rarely travel together:

• Tailwind-style ergonomics — a shared token language between design and code. theme.colors.accent in TypeScript maps directly to the same variable in Figma.
• shadcn-style ownership — components are copied into your repo, not installed as a black-box package. You can read, modify, and understand every line.
• Figma mirror — every token, variant, and component maps 1:1 between Figma and code. <Button variant="primary" size="md"> is Button / Primary / Md in Figma.

Who it’s for

React Native developers building production apps who want a design system that:

• Enforces visual consistency without fighting the tools
• Works with AI coding tools out of the box (full llms.txt + guide)
• Has a clear path from design decisions to shipped code

Designers who want their handoff to actually work — because the component properties in Figma exactly match the props in code, and the themes switch identically in both places.

The three themes

Stratum ships with three built-in themes, each with light and dark variants:

Theme	Inspiration	Character
Slate	Wealthsimple	High-contrast B&W, pill buttons, soft shadows
Obsidian	Gumroad	Warm off-white, sharp corners, thick borders, offset shadows
Quartz	Go Club	Electric blue accent, glass blur surfaces, expressive

Theme switching happens at runtime with zero re-renders. Switching themes transforms every component — button shapes, icon weights, surface treatments, radius scale — all from a single setTheme() call.

Atomic Design

Stratum follows atomic design: Tokens → Atoms → Molecules → Organisms → Templates → Screens.

Each layer is strict: atoms own raw styling, molecules compose atoms into single-job units, organisms assemble interface sections, templates define layout slots, and screens bind templates to data and navigation. Skipping layers is not allowed.

This means every screen can be understood by reading top-down, and every component can be tested in isolation.

Not a component library

Stratum is not an npm package you install and import. It’s a collection of copyable, owned components. You run npx stratum add atom/Button and the source lands in your repo. You can see it, change it, and understand it. When Stratum updates, you adopt what you want — no forced upgrades.

Next steps

• Installation — how to set up Stratum in a new Expo project
• Quick Start — add your first component in 5 minutes
• Project Structure — how files are organized