DesignKit

Components, tokens, and design tools for the web.

Explore components Build a design system Use the CLI

Seed color

11 stops Contrast 78 Lc Color distance 33.6 ΔE

Tonal palette

50 500 950

Perceptual contrast

78 Aa

Pass

Harmony

Split-complementary

Scale

perfect-fourth · 1.333

Spring 493 ms settling time

Open design verification

Color

Palette

Generate tonal and semantic colors from a hex seed

Distinct

Measure perceptual distance and simulate color-vision deficiency

Contrast

Measure APCA perceptual contrast

Glass

Generate layered blur, noise, and tint styles

Space

Layout

Calculate stack layouts from minimum, preferred, and maximum sizes

Compose

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

Scale

Generate spacing and type scales from modular ratios

Optical

Calculate optical offsets for icons, text, and shapes

Motion

Ease

Generate CSS spring easing curves

Jerk

Generate minimum-jerk motion trajectories

Text

Typeset

Calculate paragraph layout, hyphenation, and spacing

Linebreak

Balance headline text across lines

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

Semantic analysis

Compare content similarity and grouping suggestions

Command-line tools

Run design calculations from the command line or in CI.

Install

$ npm install -g @dkcli/cli

Show command help

$ dk --help

CLI package on npm · DesignKit source on GitHub

Command examples

Design verification

$ 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

Semantic analysis

$ curl -X POST /api/dk/future/embedding-topology