Mathematical Precision
Design is intelligence made visible. Use constants to define layout.
Golden Ratio (φ)
1.618Large (A)
741.6
61.8%
Small (B)
458.4
38.2%
A
B
Aspect Ratio
aspect-ratio: 16 / 9;
Interactive Bezier Curve
Chromatic Science
Harmonies, contrast ratios, and accessible perception.
H: 220
S: 90%
L: 60%
Generated Harmony
WCAG Contrast Check (AA/AAA)
4.5:1
Text Large
Text Small
Text Large
Text Small
AA PASS
AAA FAIL
Typography Systems
Modular scales and fluid typography calculator.
Grid & Spacing
Linear scales and 12-column logic.
Linear Spacing Scale
12-Column Grid Preview
display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;