Core Engine

Three orthogonal systems. Each takes one input. Everything else derives.

Color

Set --_color. Eight functions derive everything. --_dark flips mode. --_bg tracks background for auto contrast.

Function	Signature	Returns
`--surface`	`(level, color)`	background at perceptual depth
`--fill`	`(level, color)`	interactive color, full chroma
`--contrast`	`(amount, bg)`	text — auto light/dark direction
`--alpha`	`(opacity, base)`	transparent variant
`--shadow`	`(level, color)`	colored box-shadow
`--hue`	`(angle, color)`	hue-rotated color
`--mute`	`(amount, color)`	desaturated variant
`--vibrant`	`(amount, color)`	boosted chroma variant

--surface(level)

-1

0

1

2

3

--fill(level)

-1

0

+1

+2

+3

--contrast(amount) on surface(1)

.95 .85 .70 .50 .30 .15

alpha border

shadow(3)

shadow(8)

pattern — set --_bg, read it everywhere

--_bg: --surface(1); background: var(--_bg); color: --contrast(0.7); border: 1px solid --alpha(0.15, --fill());

Color Transforms

Three transforms feed --_color. Set one on any element — every descendant re-derives surfaces, fills, contrast, and shadows from the new color.

--hue(angle) — color theory relationships

0° base

30° analog

120° triad

150° split

180° comp

240° triad

--hue(angle) — as surfaces

base

+30°

+120°

+150°

+180°

+240°

--mute(amount) — desaturate

0

.2

.4

.6

.8

1

--vibrant(amount) — boost chroma

0

.2

.4

.6

.8

1

complementary

--hue(180)

subdued

--mute(0.6)

accent

--vibrant(.8)

Surface

Set --_surface explicitly, or use class="surface" to auto-increment depth. --_bg is computed once per boundary — children inherit it for free.

auto-nesting — .surface increments depth automatically

surface 1

surface 2

surface 3

surface 4

explicit — --_surface: N for precise control

0

1

2

3

4

pattern

<div class="surface"> <div class="surface">...</div> </div>  <div style="--_surface: 2">...</div>

Type

Set --_type on any element. One number activates fluid size, tightened tracking, compressed leading. Unset elements inherit normally.

Mechanism	Formula	Effect
Size	`--type(step) × --_type-scale`	geometric fluid scale
Tracking	`0.01em − step × 0.01em`	tighter at large sizes
Leading	`1.5 − step × 0.075`	compressed at large sizes
Scale	`--_type-scale (default 1)`	global multiplier

-1Small — captions, labels

0Base body text

1Subheading

2Section

3Heading

5Display

pattern

h1 { --_type: 5; } .caption { --_type: -1; } <span style="--_type: 3">Any element.</span>

Space

--space(step) — fluid geometric spacing. Same engine as type. Scaled by --_space-scale.

-2

-1

0

1

2

3

4

5

pattern

gap: --space(1); padding: --space(0) --space(1); margin-bottom: --space(3);

Composition

The three systems compose naturally. A card uses all three:

.card { --_surface: 1; color: --contrast(0.7); padding: --space(2); border-radius: 0.5rem; } .card h3 { --_type: 2; color: --contrast(0.92); }

Card title

Body text at 0.7 contrast.

Muted caption at 0.4.

Properties

Property	Type	Inherits	Default
`--_color`	<color>	yes	purple
`--_dark`	0 \| 1	yes	0 (auto)
`--_bg`	<color>	yes	white
`--_surface`	<integer>	no	-999 (off)
`--_type`	<number>	no	-999 (off)
`--_motion`	0 \| 1	yes	1 (auto)
`--_type-scale`	<number>	yes	1
`--_space-scale`	<number>	yes	1

Functions

Function	Signature	Returns
`--surface`	`(level: 0, color: --_color)`	<color>
`--fill`	`(level: 0, color: --_color)`	<color>
`--contrast`	`(amount: 0.85, bg: --_bg)`	<color>
`--alpha`	`(opacity: 0.5, base: --_bg)`	<color>
`--shadow`	`(level: 1, color: --_color)`	<shadow>
`--hue`	`(angle: 180, color: --_color)`	<color>
`--mute`	`(amount: 0.5, color: --_color)`	<color>
`--vibrant`	`(amount: 0.5, color: --_color)`	<color>
`--type`	`(step: 0)`	<length>
`--space`	`(step: 0)`	<length>