dk / live theorem

Perfect is computable.

This page treats palette, rhythm, contrast, motion, and optics as one system. Touch a single variable and the entire interface re-solves around it.

Open palette engine
Primary APCA 71.6 min 60
Ratio perfect-fourth 1.333
Settle 500ms snappy
Distinct ΔE 24.2 deutan 1.68
motion / snappy
base #295dff light
signal ratio drives rhythm

Every gap, tint, and easing cue is derived from dk primitives.

primary #365aff
secondary #ab5a00
tertiary #6d7c00
Surface mode
Spring curve

Proof / chroma

Tonal scale stays perceptually even.

50 #f1f5ff Lc 101.7
100 #dee8ff Lc 94.4
200 #c2d4ff Lc 83.6
300 #98b5ff Lc 68.1
400 #6b91ff Lc 55.3
500 #3c63ff Lc 71.6
600 #2333ec Lc 84.8
700 #1705bd Lc 95.3
800 #0e008b Lc 101.3
900 #06005a Lc 105.2
950 #020034 Lc 107.3

Proof / contrast

Readable states, not hopeful ones.

PASS Lc 99.4

Body on surface

PASS (Lc 99.4 >= 60)

Aa #151820
PASS Lc 71.6

Primary action

PASS (Lc 71.6 >= 60)

Aa #ffffff
PASS Lc 70.8

Signal accent

PASS (Lc 70.8 >= 60)

Aa #ffffff

Proof / rhythm

Spacing and type move as one ladder.

--proof-xs clamp(0.703rem, 0.6252rem + 0.347vw, 0.938rem)
15px
--proof-base clamp(0.938rem, 0.8333rem + 0.463vw, 1.25rem)
20px
--proof-sm clamp(1.25rem, 1.1108rem + 0.617vw, 1.666rem)
26.7px
--proof-md clamp(1.666rem, 1.4807rem + 0.823vw, 2.221rem)
35.5px
--proof-lg clamp(2.221rem, 1.9738rem + 1.097vw, 2.961rem)
47.4px
--proof-xl clamp(2.96rem, 2.6311rem + 1.462vw, 3.947rem)
63.1px
--proof-2xl clamp(3.946rem, 3.5073rem + 1.948vw, 5.261rem)
84.2px

Proof / optics

Geometry is not perception.

geometric
corrected
transform scale(1.12)

Circles appear ~12% smaller than same-dimension squares -- scale to match

width 80.6px

Optically corrected circle size (geometric: 72px)

height 80.6px

Optically corrected circle size (geometric: 72px)

transform translateX(3.6px)

Shift directional icon right by 5% to center visual mass

transform translateY(-1.4px)

Shift icon up by 2% to compensate for baseline alignment

Proof / equation

Generated surface variables.

:root {
  --perfect-base-color: #295dff;
  --perfect-primary: #3c63ff;
  --perfect-surface: #f1f5ff;
  --perfect-ratio: 1.333;
  --perfect-curve: linear( 0.000, 0.042, 0.144, 0.278, 0.420, 0.558, 0.681, 0.786, 0.871, 0.935, 0.982, 1.014, 1.033, 1.043, 1.046, 1.044, 1.040, 1.034, 1.027, 1.021, 1.015, 1.010, 1.006, 1.003, 1.001, 0.999, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 1.000 );
}

Proof / glass

The preview shell is generated from dk glass.

.perfect-glass {
  position: relative;
  isolation: isolate;
  background-color: rgba(241, 245, 255, 0.48);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4wMTIiLz48L3N2Zz4=");
  background-size: 200px 200px;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 30px;
}

.perfect-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(241, 245, 255, 0.336);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  z-index: -1;
}

Proof / layout

The rail solves before the browser paints it.

signal 119px +19.32px
body 264px +31.62px
assist 116px +14.05px
compression 1
free 0px

Proof / composition

Order is measurable, not mystical.

signal
body
assist
order 63
balance 98
rhythm 52

Proof / distinction

Semantic colors stay apart under stress.

1 #3c63ff
2 #ab5a00
3 #6d7c00
4 #98b5ff
base ΔE 24.2
protan 6.49
deutan 1.68
tritan 18.92

Proof / targeting

The interface predicts the cost to touch it.

fitts 443.9ms
choice 478.6ms
steer 668.8ms
total 1591.3ms

Proof / fit

The browser has to honor the solve, not just admire it.

ratio control drifting

Measured after render. If CSS breaks the budget, this section fails.

overflow x 0px
layout drift 0px
missing 0
fit score 0

Proof / typography

Spacing adapts when reading conditions change.

Mathematical typography becomes proof when measure, line height, spacing, and contrast stay in agreement.
chars / line 55
line height 1.45
crowding low

Proof / line break

Balanced lines beat accidental ragging.

balanced 246 A proof solver shouldresolve layout,distinction, movement,and reading comforttogether.
greedy 344 A proof solver shouldresolve layout,distinction, movement,and reading comforttogether.

Proof / minimum jerk

There is a calmer curve than springiness.

duration 0.5s
samples 25
curve 1