Theme

Every Fancy Etch component reads from the same shared token set, provided by whichever base framework you picked in Prerequisites (Fancy Framework or ACSS 4). These are the tokens Fancy Framework ships with — component authors and template authors alike should reach for these instead of hardcoding a raw value.

Spacing scale

Fluid, clamp()-based — each token scales smoothly between a mobile and a desktop value rather than jumping at a breakpoint.

Token	Range (mobile → desktop)
--space-xs	0.56rem → 0.69rem
--space-s	0.81rem → 1rem
--space-m	1.25rem → 1.5rem
--space-l	1.88rem (fixed)
--space-xl	2.81rem → 3.38rem
--space-xxl	2.81rem → 5.06rem
--space-section	6.25rem → 7.5rem

Derived spacing tokens built from the scale above: --grid-gap, --grid-gap-s, --card-gap, --card-padding, --content-gap, --container-gap, --padding-section.

Type scale

Also fluid. Body text tokens:

Token	Range
--text-xs	0.63rem → 0.75rem
--text-s	0.81rem → 0.88rem
--text-m	1rem → 1.13rem
--text-mm	1.13rem → 1.25rem
--text-l	1.25rem → 1.44rem
--text-xl	1.56rem → 1.75rem
--text-xxl	1.94rem → 2.19rem

Heading tokens:

Token	Range
--h1	2.75rem → 3.44rem
--h2	2.19rem → 2.75rem
--h3	1.75rem → 2.19rem
--h4	1.38rem → 1.75rem
--h5	1.13rem → 1.38rem
--h6	0.88rem → 1.13rem

Weight and color are set once and inherited everywhere: --text-font-weight (400), --heading-font-weight (600), --text-color, --heading-color — components reference --heading-color rather than relying on inheritance, so a dark-variant skin only needs to override that one variable (see Accordion's dark skin for a concrete example of this pattern).

Color

Fancy Etch expects a primary, secondary and base color family, each with its shades — light, ultra-light, dark, ultra-dark and so on (e.g. --primary, --primary-light, --base-ultra-dark) — plus --white. The exact palette is project-specific: set it once in your framework and every component picks it up automatically.

Transparencies

ACSS 4 has no transparent color variables, so Fancy Etch does not rely on them. A transparent color is the framework's own color mixed with transparent:

color-mix(in oklch, var(--base-ultra-dark) 60%, transparent)

The percentage is how much of the color stays — 60% is that color at 60% opacity. It works the same with Fancy Framework and with ACSS 4, and an overlay built this way follows the palette when the brand changes.

Note

Fancy Framework's -trans- variables

Fancy Framework also ships ready-made transparencies — --primary-trans-20, --base-ultra-dark-trans-60, --white-trans-40 and the like. They are fine in a project that only uses Fancy Framework, but anything that has to work with ACSS 4 too should use color-mix().

Shape

• --radius — base corner radius (20px by default), with --radius-inside (0.5×) and --radius-outside (1.4×) derived from it for nested/containing elements.
• --btn-radius — fully-rounded by default (999px).

Responsive breakpoints

Fancy Etch is mobile-first: base CSS targets the smallest viewport, and @custom-media container queries layer overrides on top for larger screens — the inverse of a desktop-first approach. The full list of breakpoint tokens lives on the Quickstart page.