democrito
Agnostic atomic design system for AI-native tools — structured tokens, accessible components, and 3-theme support — 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.
25 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 and interfaces with craft and taste — and besides them, there are now AI agents, vibe-coding tools, and LLMs that need the rules to create meaningful 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
Git clone
Clone the full repo — useful if you want to browse, fork, or contribute.
git clone https://github.com/mmorerasanchez/democrito.git
Customize with your brand
The first OSS design system with structured AI context files to plug into your favorite vibe-coding tool and LLM, fully customizable — AI agent rules, reasoning, and the inventory needed to build on-brand.
What
Full design system template: from design tokens to full-page layouts, every piece is documented, themed across 3 surfaces, and structured for AI consumption. Adopt the whole system or extract only what your product needs.
Design principles
Six decisions that hold the system together — from a single token to full-page layouts, across all three themes. Remove any one and the visual coherence breaks.
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.
Design components
Five atomic layers plus a UI primitive foundation — browse by layer or drill into a specific component. Everything is documented, themed, and ready to use.
100+
Tokens
Colors, Typography, Spacing, Radius, Shadows, Breakpoints
11
Atoms
Button, Input, Textarea, Badge, Tag, Typography, Avatar, Spinner, Tooltip, Link, ...
18
Molecules
Form Field, Search Bar, Stat Card, Tab Nav, Empty State, Avatar Group, ...
19
Organisms
Top Bar, Filter Bar, Data Table, Activity Feed, Onboarding Wizard, Settings Nav, ...
7
Templates
App Shell, Dashboard, Editor, Library, Detail View, Settings, Auth, ...
48
UI primitives
Dialog, Dropdown, Popover, Sheet, Tabs, Toast, ...
Agent context architecture
Context files give any AI agent the rules, the reasoning, and the inventory it needs to build on-system — loaded automatically from root by the tools that read them.
CLAUDE.md & AGENTS.md
Code conventions and architecture rules — loaded automatically by Claude Code, Cursor, Codex, or your favorite IDE on session start.
DESIGN.md
Visual principles, colour system rationale, typography rules, spacing philosophy. The “taste” layer that guides aesthetic decisions.
skill/democrito
Installable Claude Skill that loads democrito's tokens, components, and conventions so Claude generates on-system UI from the first prompt.
docs/reference/design-system.md
The complete spec: every token, all 103 components across five atomic layers, three themes, and the usage rules that keep your UI consistent.
docs/ai
Step-by-step guides for building with democrito in Claude Code, Cursor, Lovable, Replit, and Google Stitch — each tuned to that tool's workflow.
tokens/index.css
The source of truth lives here as CSS custom properties — edit the @theme block to rebrand the system. Includes design-tokens.json W3C DTCG export.
Do you need help creating your own design system?
If you struggle with the AI integration and want to create your own on-brand design system, get in touch at hola@atomic-products.com or reach out directly.
Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito