democrito
Agnostic atomic design system for AI-native tools — structured tokens, accessible components, and three-theme support. React + Tailwind CSS + Radix UI. Adaptable via Claude, vibe coding platforms or terminal.
Open source · MIT License · Built with React + Tailwind + shadcn/ui
Why
Around 400 BC, Democritus proposed something radical: that all matter is made of invisible, indivisible units he called atoms that combine to form everything.
Twenty-five centuries later, Brad Frost borrowed the concept for design interfaces: buttons are atoms, forms are molecules, pages are built from organisms. The methodology is called atomic design — and the connection back to Democritus is in the name.
democrito carries that thread forward into the age of AI-assisted development to allow designers build consistent design systems with craft and taste — and besides them, there are now AI agents, vibe-coding tools, and LLMs that need the rules to create delightful AI products.
How
Install via the shadcn registry in one command, copy the token layer manually for any non-React stack, and customize via Claude, vibe coding platform, or your favorite LLM to give any AI agent immediate design context — no build step required.
shadcn registry
recommendedInstalls the component registry and drops the AI context files into your project root.
npx shadcn@latest add https://democrito.design/r/democrito.json democrito
Git clone
Clone the full repo — useful if you want to browse, fork, or contribute.
git clone https://github.com/mmorerasanchez/democrito.git
Manual download
Download CLAUDE.md and DESIGN.md from the repo and drop them into your project root.
https://github.com/mmorerasanchez/democrito
Customize with your brand
What
From design tokens to full-page layouts, every piece is documented, themed across three surfaces, and structured for AI consumption. Adopt the whole system or extract only what your product needs.
Summary
90+
Design tokens
11
Atoms
17
Molecules
19
Organisms
7
Templates
48
UI primitives
Sections
Tokens
Colors, Typography, Spacing, Radius, Shadows, Breakpoints
Atoms
Button, Input, Textarea, Badge, Tag, Typography, Avatar, Spinner, Tooltip, Link, ...
Molecules
Form Field, Search Bar, Stat Card, Tab Nav, Empty State, Avatar Group, ...
Organisms
Top Bar, Filter Bar, Data Table, Activity Feed, Onboarding Wizard, Settings Nav, ...
Templates
App Shell, Dashboard, Editor, Library, Detail View, Settings, Auth, ...
Manifesto
Why design systems still matter — the taste argument.
Design principles
Monochromatic + Accent
95% warm stone grays, 4% terracotta orange accent, 1% semantic colors.
3-Surface Hierarchy
Background → Surface → Card creates depth without complexity.
Typography as Hierarchy
Three font families convey meaning: Display, Body, Mono.
Progressive Disclosure
Start with the lightest variant, add complexity as needed.
Accessible by Default
WCAG 2.1 AA, 44×44px touch targets, keyboard navigation.
IDE-Inspired
Clean, distraction-free workspace for data-dense work.
Contact
Questions, collaborations, or feedback on democrito — reach out on LinkedIn or via hola@atomic-products.com.
Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito