design systems / compare

DK Design Systems

Preset docs show the same component contract across four seeded systems, then give you a comparison workspace to inspect where they intentionally diverge.

Presets
4
Shipped components
38
Comparison
Deep-linkable

Compare

Side-by-side comparison

Pick any shipped component and compare two presets using the same live implementation.

launch

Cobalt

The crisp default DK action system: bright primary, roomy spacing, and direct editorial rhythm.

light comfortable perfect-fourth snappy

Cobalt

solid / md / label

launch

The crisp default DK action system: bright primary, roomy spacing, and a direct editorial rhythm.

calm

Linen

A quieter product shell with restrained scale growth and a softer, neutral-leaning primary.

light comfortable major-second calm

Linen

solid / md / label

calm

A quieter product shell with restrained scale growth and a softer, neutral leaning primary.

Presets

Preset docs

Each preset describes the same system contract through a different seed, ratio, density, and motion profile.

launch

Cobalt

The crisp default DK action system: bright primary, roomy spacing, and direct editorial rhythm.

#295dff light comfortable perfect-fourth snappy
  • Primary product shell and general-purpose UI.
  • Launch or rollout-heavy workflows.
  • Teams that want DK at full expressive energy.

Button

TextField

# ok

Use a short name the team can scan quickly.

Card

Launch checklist
Ready for review.
3 tasks left

Dialog

colortype-scalemotionproof-system

compact

Sage

Compact and calmer with softer chroma, tighter spacing, and quieter motion for denser tools.

#1f8a70 light compact major-third smooth
  • Tooling-heavy internal apps.
  • Compact dashboards and admin surfaces.
  • Teams that want a quieter, denser expression of DK.

Button

TextField

# ok

Use a short name the team can scan quickly.

Card

Launch checklist
Ready for review.
3 tasks left

Dialog

spacingtype-scalemotionlayout-composition

dark

Ember

A dark-mode operations system with hotter accents and stronger contrast separation.

#ff6b3d dark comfortable augmented-fourth snappy
  • Operational control surfaces.
  • Dark-mode-first environments.
  • Products that need stronger separation between overlays and base surfaces.

Button

TextField

# ok

Use a short name the team can scan quickly.

Card

Launch checklist
Ready for review.
3 tasks left

Dialog

colorcontrast-distinctnessradius-elevationproof-system

calm

Linen

A quieter product shell with restrained scale growth and a softer, neutral-leaning primary.

#8a6f47 light comfortable major-second calm
  • Documentation and knowledge surfaces.
  • Calmer customer-facing flows.
  • Teams that want DK to feel gentler and more neutral.

Button

TextField

# ok

Use a short name the team can scan quickly.

Card

Launch checklist
Ready for review.
3 tasks left

Dialog

type-scalespacingmotionproof-system

Differences

Token and foundation deltas

The preset docs make the intended differences explicit instead of hiding them behind surface-level screenshots.

Cobalt

  • Higher action contrast and more generous spacing steps.
  • Confident surface separation without going ornamental.
  • Fast motion profile with crisp interactive states.

Linen

  • Softer chroma and more restrained scale growth.
  • Calm motion and quieter surface hierarchy.
  • Still uses the same semantic token families and proof surface as the other presets.