Getting started

kernic builds you a complete design system from the terminal: colors that work together, font pairings, text sizes, corner radii and gradients. You answer a few questions. It saves the result as plain JSON you own.

Install

Requires Node 20+.

shell
npm install -g kernic
# or run instantly:
npx kernic

Generate a system

The wizard walks you through it: name, overall style ("vibe"), palette tuning with live color swatches, fonts, corner rounding and text sizes:

shell
kernic
# same, shorter:
kn

Systems are saved as plain JSON in ~/.config/kernic/systems/. No account, no cloud. Just files.

Skip the wizard

shell
kernic create launch-page --vibe corporate-clean --yes

Export tokens

Every format goes to stdout, so you pipe it wherever it belongs:

shell
# Tailwind v4 app.css
kernic export midnight-neon -f tailwind > src/app.css

# Plain CSS vars anywhere
kernic export midnight-neon -f css >> styles/global.css

# Machine-readable tokens for tools
kernic export midnight-neon -f json > design/tokens.json

# All of them at once
kernic export midnight-neon -f all -o ./design-system

Tune it visually or by hand

Every export is regenerated from the saved JSON system. Tweak the file directly, or open the local visual editor:

shell
kernic studio midnight-neon   # local web editor, 127.0.0.1 only
This very site is built that way: its npm run build runskernic export kernic-io -f css > src/styles/tokens.css before Astro compiles. No hand-written hex anywhere.

Next steps