Design Kit
Mathematical design tools — live in the browser
Perfect
A live proof that palette, scale, contrast, motion, and optics can cohere
Layout
Solve min, preferred, and max constraints into stable stack layouts
Compose
Score balance, symmetry, rhythm, density, and order from rectangles
Distinct
Measure perceptual distance and simulate color-vision deficiency
Target
Estimate interaction burden with Fitts, Hick-Hyman, and steering
Text
Tune line measure and spacing against crowding and contrast
Jerk
Generate minimum-jerk trajectories for calmer interface motion
Linebreak
Balance headlines with dynamic-programming line breaking
Palette
Generate perceptually uniform color scales from any hex
Scale
Mathematical spacing and sizing from modular ratios
Glass
Layered glass morphism with blur, noise, and tint
Optical
Perceptual corrections for icons, text, and shapes
Contrast
APCA perceptual contrast checking for WCAG 3.0
Ease
Spring physics to CSS linear() easing curves
Audit
Score any CSS against mathematical design principles
CLI equivalents
Every tool has a dk CLI counterpart for automation and CI pipelines.
$ dk perfect --seed "#295dff" --ratio perfect-fourth --motion snappy$ dk layout --container 960 --gap 24$ dk compose --frame 1440x900 --rects layout.json$ dk distinct "#295dff" --harmony split-complementary$ dk target --distance 320 --width 44 --choices 9$ dk text --font 18 --measure 620 --contrast 72$ dk jerk --duration 0.6 --samples 32$ dk linebreak --chars 22 --lines 3$ dk palette "#3b82f6" --mode both$ dk scale --ratio golden --base 16$ dk glass --blur 16 --layers 2 --mode light$ dk optical icon --size 48$ dk contrast "#fff" "#2563eb" --size 16$ dk ease --preset snappy$ dk audit --css=app.css