Design Kit

Computed, not curated.

perfect-fourth · 1.3333333333333333 · step 5
$ npm i -g @dkcli/cli on npm → GitHub →
→ 11 stops → Lc 78 → ΔE 33.6 → 1.3333333333333333 → 493ms
Tonal
50 500 950
APCA
78 Aa
PASS
Harmony
split-comp
Scale
perfect-fourth 1.3333333333333333
Spring 493ms settle
Explore the full proof — one seed in, computed system out →
Agent bootstrap

Start Claude or Codex with npm, then load the dkcli skill.

The agent path is not a tour of APIs. Install the public CLI, load the skill, and let dkcli compute the evidence behind palette, contrast, scale, motion, layout, and audit choices.

Install 
npm install -g @dkcli/cli
Load skill 
curl -fsSL https://dkcli.com/.well-known/agent-skills/dkcli/SKILL.md
Prompt curl -fsSL https://dkcli.com/.well-known/dkcli/bootstrap.txt and use what it returns as your live bootstrap contract for dkcli DesignKit. Install or run @dkcli/cli from npm, then load the dkcli skill before design work.
Open bootstrap → Agent guide → Bootstrap JSON →
Public Git repo

sawfwair/dkcli is where the engine ships.

The open-source repo holds the CLI, reusable packages, examples, and verification workflow. This site stays the proving ground for the web runtime, docs, and DkCms surface.

Open GitHub repo → Issues

Color

Palette

Generate perceptually uniform color scales from any hex

Distinct

Measure perceptual distance and simulate color-vision deficiency

Aa Aa

Contrast

APCA perceptual contrast checking for WCAG 3.0

Glass

Layered glass morphism with blur, noise, and tint

Space

Layout

Solve min, preferred, and max constraints into stable stack layouts

Compose

Score balance, symmetry, rhythm, density, and order from rectangles

Scale

Mathematical spacing and sizing from modular ratios

Optical

Perceptual corrections for icons, text, and shapes

Motion

Ease

Spring physics to CSS linear() easing curves

Jerk

Generate minimum-jerk trajectories for calmer interface motion

Text

Typeset

Width-aware paragraph setting, hyphenation, and measured typography

Linebreak

Balance headlines with dynamic-programming line breaking

Analysis

Audit

Audit source CSS or rendered output against mathematical design principles

Target

Estimate interaction burden with Fitts, Hick-Hyman, steering, and touch occlusion

Saliency

Rank visual importance from a design document and inspect focus regions

Future

Test whether embedding topology can improve semantic grouping before layout solving

Now on npm

The dk CLI

Every tool on this site has a CLI counterpart for automation and CI pipelines. Install it once, run it anywhere.

Install 
$ npm install -g @dkcli/cli
Try it 
$ npx @dkcli/cli --help
npmjs.com/package/@dkcli/cli · github.com/sawfwair/dkcli
Perfect 
$ dk perfect --seed "#295dff" --ratio perfect-fourth --motion snappy
Color
Palette 
$ dk palette "#3b82f6" --mode both
Distinct 
$ dk distinct "#295dff" --harmony split-complementary
Contrast 
$ dk contrast "#fff" "#2563eb" --size 16
Glass 
$ dk glass --blur 16 --layers 2 --mode light
Space
Layout 
$ dk layout --container 960 --gap 24
Compose 
$ dk compose --frame 1440x900 --rects layout.json
Scale 
$ dk scale --ratio golden --base 16
Optical 
$ dk optical icon --size 48
Motion
Ease 
$ dk ease --preset snappy
Jerk 
$ dk jerk --duration 0.6 --samples 32
Text
Typeset 
$ dk typeset --font 18 --measure 620 --contrast 72
Linebreak 
$ dk linebreak --chars 22 --lines 3
Analysis
Audit 
$ dk audit --css=app.css
Target 
$ dk target --distance 320 --width 44 --choices 9 --modality touch
Saliency 
$ dk saliency --input hero.json --importance auto
Future 
$ curl -X POST /api/dk/future/embedding-topology