Design breakdowns.
Most inspiration sites stop at "look how nice." We go further. Each breakdown decodes a design archetype into its anatomy, then hands you the exact tokens to rebuild it: palette, type, spacing, CSS variables and Tailwind config. Discover → Decode → Build.
Anatomy of a SaaS Pricing Page
Decode why great pricing pages convert — structure, hierarchy and the exact tokens to rebuild one.
Decode it → SaaS · DashboardAnatomy of a Dashboard Shell
Sidebar, top bar and content grid — the layout system behind calm, data-dense apps.
Decode it → Marketing · HeroAnatomy of a Landing-Page Hero
The first screen: headline rhythm, social proof, and one unmistakable call to action.
Decode it →How a breakdown works
Every breakdown is a design-system audit, not a blog post. Anatomy (each component, why it exists, why it works) → Tokens (the palette, type pairing, spacing and radius) → Build Kit (a live, palette-driven preview plus copy-ready code). Pair any breakdown with a palette and a template to ship it.
Looking for everything on one archetype rather than a single breakdown? The page types hub joins each breakdown with the layouts, templates and palettes that go with it.