From atoms to apps.One design contract.
Components → blocks → templates → pages. Five layers, each built from the one below. Brad Frost's atomic design, applied to a real shipping library.
- Components
- 0
- Blocks
- 0
- Templates
- 0
⌬ a Sisyphos atom
Atoms bond into blocks
A pricing card is one Card, three Chips, a list of Checks, and a Button. The card alone is a primitive. The whole assembly — with opinions about layout, copy, and state — is a Block. Drop-in, themeable, every one shipped with its own source.
- Sign-in card
- Pricing tiers
- Feature grid
- Stats row
- Testimonials
Molecules form working sections
An organism is a stretch of UI that does one job in context: a marketing hero with sign-up, a dashboard header with workspace switcher, a pricing comparison row. In Sisyphos every organism lives inside a Template — they're the practical glue between reusable Blocks and the page shell.
Organisms arrange into routes
A Template is a full route shell: a marketing landing, a sign-in screen, a dashboard overview. Drop one into app/page.tsx and the page exists. Swap a block, the template inherits the upgrade. Two-way leverage.
- Marketing landing
- Pricing page
- Contact page
- Dashboard overview
- Authentication page
Templates filled with real life
A Page is a Template hydrated with real data, real routing, real state. The marketing landing template becomes your home — with your copy, your testimonials, your pricing pulled from a CMS or hardcoded. Templates are the canvas. Pages are the painting.
You don't build apps. You compose them.
Five layers. One source of truth. Pick any tier and start — Sisyphos meets you where you are.