stnd.build — The Ratio Engine

One number. Every surface. Screen, page, and hand.

The stnd.build framework (utopie repo, packages/styles) is built on a single architectural principle: a single ratio variable cascades into every typographic and spatial decision, from the smallest UI label to the largest display heading. This is not a convention — it is the same mathematical logic used in Proportional Systems — The Hidden Wisdom of Ratio, expressed in CSS custom properties.

The Single Lever

/* packages/styles/_standard-01-token.scss */
--optical-ratio: var(--ratio-silver); /* default: 1.414 */

Every heading size, every spacing step, every size alias in the system is derived from this one value:

--scale-2: calc(var(--font-size) * pow(var(--optical-ratio), 1));
--scale-3: calc(var(--font-size) * pow(var(--optical-ratio), 2));
--scale-4: calc(var(--font-size) * pow(var(--optical-ratio), 3));
/* ... up to --scale-8 at pow(ratio, 7) */

Change --optical-ratio. The entire scale — all headings, all sizes — recalibrates instantly.

The Named Ratios

Defined in _standard-01-token.scss and referenced throughout:

The halfstep (1.272) and quarterstep (1.128) are the geometric means between φ and √2, and between √2 and 1.0. They are not classical named systems — they are practical intermediaries unique to this framework.

What It Produces — Heading Sizes at 1rem Base

The clamps in _standard-03-typography.scss — current values after fix:

h1 { font-size: clamp(var(--size-xl), 5.5vw, var(--size-2xl)); }
h2 { font-size: clamp(var(--size-lg),   4vw, var(--size-xl));  }
h3 { font-size: clamp(var(--size-base), 3vw, var(--size-lg));  }

The vw coefficient is a second amplifier on top of the ratio scale step. At 10vw and Golden ratio, h1 reached ~110px — theatrical but out of register for most contexts. Dropping to 5.5vw / 4vw / 3vw restrains the absolute display size while preserving the proportional relationships between levels. The ratio still governs the scale — the clamp only caps the ceiling.

The Silver themes (editorial, newspaper, chalky) already felt right at 10vw not because they used a different clamp, but because 1.414 naturally produces a smaller --size-2xl — the ceiling was never reached. The fix makes Golden themes behave with the same restraint, without touching the ratio.

How Themes Override It

Each theme in packages/themes/ overrides --optical-ratio to express a different proportional character. The entire scale shifts without touching a single heading size definition.

/* editorial — measured, newspaper feel */
[data-theme="editorial"] { --optical-ratio: 1.414; }

/* forest, gallery, swiss — organic, dramatic */
[data-theme="forest"]    { --optical-ratio: var(--ratio-golden); }

/* adrien, calm — classical, restrained */
[data-theme="adrien"]    { --optical-ratio: 1.333; /* Perfect Fourth */ }

/* documentation — dense, monospace */
[data-theme="documentation"] { /* inherits default 1.414 */ }

This is a direct CSS implementation of the proportional system selector in the Onshape FeatureScript — same architecture, different surface.

The Physics Layer

_standard-03-typography.scss derives fluid behavior directly from the ratio:

/* The slope of growth — steeper for golden, gentler for silver */
--physics-slope: calc(var(--optical-ratio) - 1);

/* Viewport-relative growth factor */
--fluid-growth: calc(var(--physics-slope) * 0.8vw);

/* Leading tension — large text needs tighter leading */
--fluid-tension: calc(var(--physics-slope) * 0.3vw);

A golden ratio theme not only produces larger text — it produces faster-growing text as the viewport widens, because its slope (0.618) is steeper than silver (0.414). The ratio governs both the size and the velocity of growth.

The Connection to Physical Space

This is the same system as the FeatureScript Proportional Scale feature in Onshape. The mapping is exact:

The only difference is the unit: rem on screen, mm in hand. The math is identical. When a heading in a forest theme and the body of a 3D-printed enclosure both use φ, they share the same proportional language — one is just rendered in light, the other in PETG.

File Map

Related

• Proportional Systems — The Hidden Wisdom of Ratio — the root note on all six systems
• Golden Scale — the Onshape FeatureScript that applies the same ratios to 3D geometry
• Fuild System — fluid layout system built on the same scale