SAMUEL_RATZEL
Contact
BACK TO THE LAB LAB_02

LAB_02 // DIALECT_MORPHER

DIALECT
MORPHER

11 Design Systems // One Slider

The Dialect UI project defines eleven complete design languages as CSS token files. This machine interpolates between any two of them, live. Colors and radii blend, fonts and easings snap at the midpoint. Watch Swiss melt into Y2K.

THE DIALECTS THEMSELVES: DIALECT_UI [→]
01

THE_MACHINE

SWISS → Y2K

Every pixel here is a token

Background, text, borders, accent, radius, fonts and motion all come from the interpolated variable set. Nothing in this panel has a hardcoded color.

#token
HOW IT'S MADE [+]
/* 1. import every dialect as raw text, parse the custom properties */
const vars = raw.match(/--d-[\w-]+\s*:\s*[^;]+;/g)

/* 2. per variable: pick an interpolation strategy */
color   -> parse to rgba, lerp each channel (incl. alpha)
length  -> parse number + unit, rem normalized to px, lerp
discrete-> fonts & easings snap at t = 0.5

/* 3. write the result as CSS custom properties on the stage */
.stage { --m-bg: <mixed>; --m-accent: <mixed>; ... }
/* the preview only ever reads var(--m-*), so the whole
   morph is one style-object update per slider tick */
02

MORPH_RULES

COLORS // LERP IN RGB

Hex and rgba values are parsed to channels and linearly interpolated, including alpha. Halfway between Swiss red and Y2K lavender is a real color you can see.

LENGTHS // LERP WITH UNITS

Radii and durations interpolate numerically. A brutalist 0px corner grows smoothly into a candy 24px pill. Rem values are normalized to px first.

FONTS & EASINGS // SNAP AT 50%

You cannot show half a typeface. Discrete values switch at the midpoint, which is exactly the moment the morph feels like it commits to the destination.