majiayu000 Designing Systems
Agent Workflow (MANDATORY)
Before ANY design system work, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Find existing CSS variables, Tailwind config, colors
- fuse-ai-pilot:research-expert - Verify latest OKLCH and Tailwind v4 patterns
- mcp__context7__query-docs - Check Tailwind v4 @theme syntax
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
| Feature | Description |
|---|---|
| OKLCH Colors | Wide gamut P3 color space |
| CSS Variables | Semantic token architecture |
| Tailwind v4 @theme | CSS-first configuration |
| 60-30-10 Rule | Color distribution ratio |
Critical Rules
- OKLCH only - No hex or RGB for colors
- Forbidden fonts - Inter, Roboto, Arial are BANNED
- CSS variables - Never hard-code colors
- Analyze first - Document existing system before changes
- Dark mode - Always define both light and dark tokens
Architecture
styles/
├── tokens/
│ ├── colors.css (~50 lines)
│ ├── typography.css (~30 lines)
│ └── spacing.css (~20 lines)
└── app.css (~40 lines - @import + @theme)
→ See color-system.md for token examples
Reference Guide
Concepts
| Topic | Reference | When to Consult |
|---|---|---|
| Colors | color-system.md | OKLCH palettes, psychology |
| Typography | typography.md | Fonts, scale, mobile sizes |
| Theme Presets | theme-presets.md | Brutalist, Solarpunk, etc. |
| Grids | grids-layout.md | 12-column, spacing |
| UI Hierarchy | ui-hierarchy.md | Visual hierarchy patterns |
| UI Spacing | ui-spacing.md | Spacing systems |
| UI Trends | ui-trends-2026.md | 2026 design trends |
| Gradients | gradients-guide.md | Gradient patterns |
| Tailwind Config | tailwind-config.md | v4 @theme setup |
| Tailwind Utils | tailwind-utilities.md | Utility patterns |
| Tailwind Perf | tailwind-performance.md | Performance tips |
Templates
Templates are in generating-components skill for implementation examples.
Quick Reference
OKLCH Color Token
:root {
--color-primary: oklch(55% 0.20 260);
--color-primary-foreground: oklch(98% 0.01 260);
}
.dark {
--color-primary: oklch(65% 0.20 260);
}
→ See color-system.md for full palette
Typography Scale
--font-display: 'Clash Display', sans-serif;
--font-sans: 'Satoshi', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
→ See typography.md for approved fonts
Tailwind v4 @theme
@import "tailwindcss";
@theme {
--color-primary: var(--color-primary);
--font-display: var(--font-display);
}
→ See tailwind-best-practices.md for config
Best Practices
DO
- Use OKLCH for wide gamut colors
- Define semantic tokens (primary, success, destructive)
- Support dark mode from the start
- Follow 60-30-10 color distribution
- Use approved fonts only
DON'T
- Hard-code hex/RGB colors
- Use Inter, Roboto, Arial fonts
- Skip dark mode variables
- Create tokens without semantic meaning
- Mix color spaces (stick to OKLCH)