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 kernicGenerate 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:
knSystems 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 --yesExport 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-systemTune 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 onlyThis 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.