Token-first
Every color, size, radius, and shadow comes from typed TypeScript tokens. No hardcoded values — ever.
Stratum
An atomic design system for React Native — Tailwind-style ergonomics, shadcn-style ownership, Figma mirror.
Why Stratum?
Section titled “Why Stratum?”Three themes
Slate, Obsidian, and Quartz. Switch at runtime with zero re-renders. One component library, three radically different aesthetics.
AI-ready
llms.txt and comprehensive docs give AI tools the context to generate correct, idiomatic Stratum code on the first try.
You own the code
Copy-paste components into your repo — no black-box dependency. Atomic Design from tokens to screens.
What’s included
Section titled “What’s included”15 atoms — Text, Heading, Icon, Surface, Button, IconButton, Input, TextArea, Checkbox, Switch, Radio, Slider, Card, Chip, Badge
6 molecules — FormField, SearchBar, SettingsRow, ListItem, ToggleRow, TagInput
4 organisms — TopNavBar, SettingsGroup, ListSection, AuthForm
2 templates — AuthLayout, SettingsLayout
2 screens — LoginScreen, SettingsScreen
3 themes — Slate · Obsidian · Quartz (each with light + dark)
Using with AI
Section titled “Using with AI”Paste /llms.txt into Cursor, Claude, or any AI tool to give it full context about Stratum’s component APIs, token values, and composition rules. See the Using with Cursor and Using with Claude guides for prompt patterns.