MICWEP / living style guide

MICWEP / Token Sheet

Static verification of the design-token contract — the single source of truth for every surface on the platform.

Width axis — Archivo wdth 75 / 100

PRESS

Color — semantic layer

--bg

--surface

--surface-raised

--fg

--fg-dim

--accent

--accent-deep

--line

--molten

--ember

Type — fluid scale

Display

Heading one

Heading two

Heading three

Body — Instrument Sans. Websites that convert, templates that scale. The token contract feeds Tailwind, GSAP, and every template sold on the platform from a single source of truth.

Label — Martian Mono 0.8125rem

Mutation — theme + chapter

data-theme="dark-harbor"

Dark Harbor remaps --accent / --accent-deep via the registry.

data-chapter="paper"

Light editorial chapter — the same semantic tokens, flooded to paper and ink.

Motion — durations, eases, staggers

CSS

--dur-xs: 120ms

--dur-s: 240ms

--dur-m: 600ms

--dur-l: 1000ms

--ease-settle: cubic-bezier(0.16, 1, 0.3, 1)

--ease-micro: cubic-bezier(0.25, 1, 0.5, 1)

GSAP

DUR: {"xs":0.12,"s":0.24,"m":0.6,"l":1}

EASE: {"settle":"expo.out","micro":"power2.out","molten":"power3.inOut","flapIn":"power2.in","magnet":"power3.out","linear":"none","breathe":"sine.inOut","drop":"power4.out","burst":"power3.out"}

STAGGER: {"lines":0.08,"cards":0.08,"cast":0.06}