What Is a Design System?

A design system is a collection of reusable decisions - colors, fonts, spacing, shadows, motion, and layout rules - that keep your product visually consistent. Instead of picking values ad hoc, you define them once and reference them everywhere.

Why Tokens Matter

Design tokens are the smallest units of your system: --color-primary: #d4940a or --shadow-md: 0 4px 8px rgba(0,0,0,.1). They bridge design and code. Change a token, and every component using it updates. Compose generates these tokens from the tools you've configured.

The Ensemble Workflow

Each Ensemble tool focuses on one part of your system. Harmony handles colors. Duet pairs fonts. Tempo sets your scale. Compose pulls everything together so you can export one cohesive system instead of copying values from eight different tools.

Export Formats

Compose exports to CSS custom properties (works everywhere), Tailwind config (drop into tailwind.config.js), SCSS variables (for Sass projects), and JSON design tokens compatible with Style Dictionary. Pick the format your project needs.

Getting Started

Open any Ensemble tool, configure your values, and come back to Compose. Your choices sync automatically via your browser's local storage. No accounts, no cloud, no tracking. Everything stays on your machine.