Design verification

Adjust a color seed and scale ratio. Compare computed styles with browser measurements.

Open palette tools

Spring: Snappy

Base #295dff Light

Preview Interface preview

Computed color, spacing, and motion.

APCA 76.6 min 60

Ratio perfect-fourth 1.3333333333333333

Settling time 493 ms snappy

Distinct ΔE 22.26 deutan 5.12

Base color

Scale ratio

Dashed outline: calculated bounds Measuring Select a failure mode to inspect overflow.

Surface mode

Spring curve

Failure mode

Color and contrast

Tonal scale
#eef6ff Lc 99.9
#d7e9ff Lc 91.7
#b5d6ff Lc 80.3
#85b9ff Lc 64.5
#5497fb Lc 60.6
#2072e4 Lc 76.6
#0052c3 Lc 88.4
#00359a Lc 97.7
#002075 Lc 103.3
#000f4d Lc 106.3
#00042a Lc 107.6

APCA contrast checks

These APCA checks do not establish WCAG conformance.

Pass Lc 98.5

Body on surface

Pass (Lc 98.5 >= 60)

Aa #16181c

Pass Lc 76.6

Primary action

Pass (Lc 76.6 >= 60)

Aa #ffffff

Pass Lc 77.7

Signal accent

Pass (Lc 77.7 >= 60)

Aa #ffffff

Space and structure

Spacing and type scale

--proof-xs clamp(0.703rem, 0.625rem + 0.347vw, 0.938rem)

15 px

--proof-base clamp(0.938rem, 0.8333rem + 0.463vw, 1.25rem)

20 px

--proof-sm clamp(1.25rem, 1.1111rem + 0.617vw, 1.667rem)

26.7 px

--proof-md clamp(1.667rem, 1.4815rem + 0.823vw, 2.222rem)

35.6 px

--proof-lg clamp(2.222rem, 1.9753rem + 1.097vw, 2.963rem)

47.4 px

--proof-xl clamp(2.963rem, 2.6337rem + 1.463vw, 3.951rem)

63.2 px

--proof-2xl clamp(3.951rem, 3.5117rem + 1.951vw, 5.267rem)

84.3 px

Optical corrections

Geometric

Optically corrected

width 80.6px

Circle size after correction from 72 px

height 80.6px

Circle size after correction from 72 px

transform translateX(3.6px)

Shifts the icon horizontally by 5% to center its visual mass

transform translateY(-1.4px)

Shifts the icon vertically by -2% to adjust baseline alignment

Generated CSS

:root {
  --perfect-base-color: #295dff;
  --perfect-primary: #2072e4;
  --perfect-surface: #f2f5fb;
  --perfect-ratio: 1.3333333333333333;
  --perfect-curve: linear( 0.000, 0.041, 0.141, 0.272, 0.413, 0.549, 0.672, 0.777, 0.863, 0.929, 0.977, 1.010, 1.031, 1.042, 1.046, 1.045, 1.041, 1.035, 1.029, 1.022, 1.016, 1.011, 1.007, 1.004, 1.002, 1.000, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 1.000 );
}

Glass styles

.perfect-glass {
  position: relative;
  isolation: isolate;
  background-color: rgba(242, 245, 251, 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(242, 245, 251, 0.336);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  z-index: -1;
}

Compiled and rendered checks

Compile Fail 14/15 invariants

Browser measurements Waiting Measuring elements

Failures 1 Error-level differences

Score 93 compiled

Failure mode Inject a layout error

Turn on overflow or drift to inspect measurement failures.

compile Deutan distinctness

Checks the minimum semantic color difference under deuteranopia simulation.

Expected >= 15 5.12 -9.88

Layout comparison

Bounds comparison Measuring Dashed outlines show calculated bounds. Solid outlines show measured elements.

signal 119 px +19.32 px

body 264 px +31.62 px

assist 116 px +14.05 px

Compression 1

Remaining width 0 px

Total 37

Safe-region penalty 6552

Composition scores

signal

body

assist

Order score 72

Weighted balance 60

Hierarchy 88

Baseline 63

Element importance

body role:title · area:0.467 · contrast:0.78 · spatial:0.953

40%

signal role:cta · area:0.239 · contrast:0.78 · spatial:0.671

33%

assist role:support · area:0.265 · contrast:0.78 · spatial:0.719 · edge-density:0.581

28%

Color distinctness

1 #2072e4

2 #af3f00

3 #706c00

4 #85b9ff

Base color distance (ΔE) 22.26

Protan simulation 11.29

Deutan simulation 5.12

Tritan simulation 18.91

Input time estimates

Pointer movement 515.9 ms

Choice time 478.6 ms

Path steering 891.7 ms

Total 1899.7 ms

Touch occlusion 13.5 ms

Rendered fit

Ratio control Measuring

Browser measurements for the selected state.

Horizontal overflow 0 px

Layout drift 0 px

Missing elements 0

Fit score 0

III

Time and language

Typography

Mathematical typography becomes proof when measure, line height, spacing, and contrast stay in agreement.

Chars / line 55.1

Line height 1.45

Crowding low

Line breaking

Balanced line penalty: 246 A proof solver shouldresolve layout,distinction, movement,and reading comforttogether.

Greedy line penalty: 344 A proof solver shouldresolve layout,distinction, movement,and reading comforttogether.

Advanced line penalty: 13828 A proof solver should resolve layout,distinction, movement, and readingcomfort together.

Widest flow line 391.48 px

Segments 23

Chunks 1

Lead 81 px 2 lines before handoff A proofsolver

Body 367 px continues to the end should resolve layout, distinction, movement,and reading comfort together.

Minimum-jerk motion

Duration 0.493 s

Samples 25

Final position 1