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)