kernic

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

Running kernic opens Studio, the visual editor, in your browser. Prefer the terminal? kernic wizard walks you through the same thing: name, overall style ("vibe"), palette tuning with live color swatches, fonts, corner rounding and text sizes.

shell
kernic
# or stay in the terminal:
kernic wizard

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 --yes

Export tokens

Every format prints to stdout. 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

# W3C design tokens for Terrazzo, Style Dictionary, Figma
kernic export midnight-neon -f dtcg > design/tokens.json

# DESIGN.md, tokens.json and shadcn.json for your agent and your app
kernic context midnight-neon -o .

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

Tune it visually or by hand

Every export regenerates from the saved JSON. Tweak the file by hand, 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