Prerequisites

Fancy Etch is built on top of a CSS variable system that governs colors, typography, spacing, and the rest of your design tokens. This is what allows every component to automatically adapt to your project's style. To work properly, Fancy Etch needs a framework that provides those base variables.

You have two compatible options:

• Fancy Framework — our free solution, designed to work natively with Etch.
• ACSS 4 (Automatic.css) — a premium framework widely adopted across the community.

Pick whichever suits your workflow — both provide the same category of tokens (spacing, type scale, color, responsive breakpoints), so a component built against one works against the other without changes to its markup or classes.