Design System

A comprehensive design playbook for building elegant, agent-native interfaces. Use this as a reference when working with Claude Code.

Principles

Restrained Elegance

Purposeful animations, subtle depth, and premium feel without visual noise. Every effect should serve a purpose.

Performance First

CSS-only animations where possible. No heavy JavaScript libraries. IntersectionObserver for scroll detection. Respect prefers-reduced-motion.

Agent-Native

Designed for AI agents as first-class users. Clear semantic structure, predictable patterns, and accessible to both humans and machines.

Quick Reference