_ui

A CSS system in 7 properties, 7 functions, and 9 layers.

Install

Usage

--_color: oklch(50% 0.2 270); /* set a color — full palette out */ --_type: 3; /* set a number — full typography out */ gap: --space(2); /* fluid spacing that scales */

Engine

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

Color

Set --_color. Get surfaces, fills, text, borders, shadows — light and dark.

5 functions 2 properties

Type

Set --_type. Get fluid size, tightened tracking, compressed leading.

1 function 1 property

Space

Call --space(step). Fluid geometric rhythm from the same engine as type.

1 function same config

Properties

Property	Type	Default	Purpose
`--_color`	<color>	purple	palette source
`--_dark`	0 \| 1	0	light/dark mode
`--_bg`	<color>	white	current background (for contrast)
`--_type`	<number>	-999	type scale step (sentinel = inactive)
`--_motion`	0 \| 1	1	animation toggle
`--_type-scale`	<number>	1	global type multiplier
`--_space-scale`	<number>	1	global space multiplier

Functions

Function	Returns	Purpose
`--surface(level)`	<color>	background at perceptual depth
`--fill(level)`	<color>	interactive color, full chroma
`--contrast(amt, bg)`	<color>	text for any bg, auto direction
`--alpha(a, base)`	<color>	transparency
`--shadow(level)`	<shadow>	colored depth
`--type(step)`	<length>	fluid geometric font size
`--space(step)`	<length>	fluid geometric spacing

Layers

reset CSSWG corrections

props static design constants

theme brand config, fluid scale settings

color OS prefs, user prefs (data-ui-*)

typography type system, element defaults

composition layout primitives

layout page-level semantic regions

components card, button, inputs, popover

overrides responsive, a11y, print

User Preferences

Attribute	Values	Effect
`data-ui-scheme`	light · dark	force color scheme
`data-ui-motion`	none	disable transitions
`data-ui-size`	small · large	scale all type
`data-ui-density`	compact · comfortable	scale all spacing