ABC Def
ABC Def(Definitive Elements Foundation) is a design system built for AI-friendly workflows — three-tier tokens components that stay consistent by default and customizable by design.
AI-assisted development efficiency
ABC Def's CSS token architecture keeps component source sizes comparable to shadcn/ui, while cutting customization prompt tokens by 56 – 68 %. Because every visual property is a named CSS variable, an AI only needs the token name rather than a list of Tailwind utility classes. Measured across Button, Input, and Dialog using a standard LLM tokenizer (cl100k_base).
| Component | Metric | ABC Def | shadcn/ui | Saving |
|---|---|---|---|---|
| Button | TSX source | 486 tokens | 431 tokens | Equivalent |
| Single customization prompt | 13 tokens | 40 tokens | 68 % fewer tokens | |
| Input | TSX source | 75 tokens | 159 tokens | 53 % fewer tokens |
| Single customization prompt | 13 tokens | 30 tokens | 57 % fewer tokens | |
| Dialog | TSX source | 751 tokens | 780 tokens | Equivalent |
| Single customization prompt | 15 tokens | 34 tokens | 56 % fewer tokens | |
| Average | 10 customization requests each | 410 tokens | 1,040 tokens | 61% fewer tokens |
Three-tier token architecture
Primitive foundation
The stable base layer — raw palette, spacing, and radius values that rarely change and anchor the entire system.
Semantic intent
The meaning layer — tokens for foregrounds, surfaces, borders, and states that map primitive values to product decisions.
Component tokens
The customization layer — each component exposes only the CSS variables it needs, so AI-assisted edits touch the fewest tokens possible.
Component coverage
The docs include 53 shared component pages across React, Vue, and styles. Start with the component index or the framework guide for your application.