dkcli Svelte Themes

Dkcli

Proof-driven design CLI for OKLCH palettes, APCA contrast, fluid scales, motion curves, layout audits, tokens, and Svelte components.

#apca#cli#design-system#oklch#svelte#typography#vitepress
Demo Download

DesignKit CLI

Proof-driven design tooling for teams that want interface decisions to leave evidence behind.

DesignKit ships a deterministic CLI and package workspace for OKLCH palettes, APCA contrast, fluid scales, motion curves, optical corrections, layout rails, composition scoring, typography recommendations, CSS audits, token emission, and Svelte 5 component recipes.

Docs

The docs site uses DesignKit itself. pnpm docs:build runs scripts/generate-docs-design.mjs, which invokes the local dk CLI to generate the docs palette, fluid scale, typography rhythm, motion curve, and proof JSON before VitePress builds.

Install

npm install -g @dkcli/cli

Or run it one-off:

npx @dkcli/cli --help

Inside this repository, use the source-owned wrapper:

pnpm install
pnpm dk --help

Quick Start

dk perfect --seed "#D96F32" --ratio perfect-fourth --motion snappy
dk palette "#D96F32" --harmony split-complementary --json
dk scale --fluid --ratio perfect-fourth --base-min 15 --base-max 19
dk text --font 18 --measure 680 --contrast 72
dk audit --css app.css

Packages

  • @dkcli/cli: the dk and dkcli command line tools.
  • @dkcli/core: framework-agnostic math, proofs, specs, and recipe compilation.
  • @dkcli/tokens: compiled themes, token aliases, and CSS/JSON emitters.
  • @dkcli/components: Svelte 5 components backed by DesignKit recipes and themes.

Command Families

Family Commands Purpose
Proof perfect, contrast, target, audit Generate evidence for readability, interaction burden, CSS quality, and complete design states.
Foundations palette, distinct, scale, text, typeset, linebreak Build color, spacing, and typography systems with measurable constraints.
Motion ease, jerk Convert spring physics and minimum-jerk motion into CSS-ready curves.
Layout layout, compose, saliency, future Solve rails, score composition, and explore content topology.
Product components, cms Verify component recipes and manage hosted DKCMS content.

Local Development

Use Node 22 or newer and pnpm 10.33.0.

corepack enable
corepack prepare [email protected] --activate
pnpm install
pnpm lint
pnpm check:strict
pnpm test
pnpm build

Docs Development

pnpm docs:tokens
pnpm docs:dev
pnpm docs:build
pnpm docs:preview

docs:tokens is safe in a fresh checkout: it builds the workspace packages required by the local CLI before generating docs tokens.

Release Checks

Run the full public release gate before publishing packages or tagging a release:

pnpm release:verify

This runs linting, strict checks, tests, builds, package verification, dry packs, package-content checks, and starter verification.

Architecture

  • src/bin/dk.ts is the publishable CLI entrypoint compiled into dist/bin/dk.js.
  • bin/dk.js is the local development wrapper used by docs and source commands.
  • src/lib/dk contains deterministic CLI helpers and command implementations.
  • src/lib/dkcms contains typed payload helpers used by dk cms commands.
  • packages/core contains framework-agnostic design math and proof contracts.
  • packages/tokens emits theme tokens and CSS/JSON artifacts.
  • packages/components contains the Svelte component package.
  • examples/svelte-starter verifies the published package tarballs in a small consumer app.

Contributing And Security

  • Read CONTRIBUTING.md before opening a PR.
  • Report sensitive security issues through SECURITY.md.
  • Do not commit .env files, .npmrc, service tokens, or deployment overlays.

Released under the MIT License.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes