Weft.Systems
The structure behind the surface.
Professional-grade DESIGN.md files for AI coding agents.
Tokens without thinking.
Existing DESIGN.md collections extract hex codes from live websites. You get colors and font sizes — but no component behavior, no accessibility rules, no edge case handling. Your AI agent can match a palette but can't make a layout decision.
# Colors
primary: #2563EB
secondary: #475569
background: #FFFFFF
# Typography
headings: Inter, sans-serif
body: Roboto, sans-serif
base-size: 16pxDesign briefs for machines.
Each Weft system is a complete design brief: tokens, principles, component specifications, accessibility standards, edge case patterns, and explicit agent instructions. Drop one in your project root — your AI agent builds production-quality UI.
## Component Specifications
### Data Table
- Density: High (row height 32px)
- Font: Tabular lining nums for amounts
- Action menu: Hover-only on lg, visible on sm
- Empty state: Illustration + Primary CPA
## AI Instruction
When rendering lists > 10 items, ALWAYS
implement pagination with page size 20.8 Systems
Engineered from design principles. Not extracted from websites.
Three steps.
Copy
Pick an archetype. Copy the DESIGN.md into your project root.
Prompt
Tell your AI agent to follow the design system.
Build
Get production-quality UI. Every token, component, and edge case — handled.
Design systems shouldn't assume everyone's on a MacBook in San Francisco.
The African Mobile-First system is built for real constraints: mid-range Android devices, 3G networks, outdoor sunlight, and users who've never seen a SaaS dashboard before.
Orders
How Weft compares.
| Feature | From Scratch | awesome-design-md | Weft |
|---|---|---|---|
| Design tokens | |||
| Component specs | |||
| Behavior rules | |||
| Accessibility | Rarely | WCAG AA baked in | |
| Edge cases | |||
| Agent instructions | |||
| Mobile-first | Desktop-biased | Per archetype |