Vibe coding gets a facelift.

Answer a few questions in your terminal. Kernic picks colors, fonts, and spacing that work together, then exports them as CSS or Tailwind tokens. No design experience needed.

$ npm install -g kernicGet started GitHub

zsh: kernic

$ kernic

  ◆ vibe      corporate (quiet, professional)
  ◆ fonts     Inter / IBM Plex Mono
  ◇ radius    soft   ◇ scale  1.25
  └── saved → ~/.config/kernic/systems/kernic-io.json

$ kernic export kernic-io -f css > src/styles/tokens.css
  ✓ 63 tokens written

$ npm run dev
  └── ready ▊

One system. Every output.

This site is styled by its own product. One command at build time writes exactly what your stack needs. Each snippet below is cut from this site's real files.

Custom properties. Paste into any stylesheet and the site is themed.

tokens.css

/* kernic — "kernic-io" (vibe: corporate) */

:root {
  --color-primary-50: #f3f7ff;
  --color-primary-100: #e1ecff;
  --color-primary-200: #c3d8ff;
  --color-primary-300: #9bbeff;
  --color-primary-400: #6e9fff;
  --color-primary-500: #3a79ff;
  --color-primary-600: #205cde;
  /* … every color step, font stack, radius & gradient token */
}

A Tailwind v4 @theme. Utilities like bg-primary-600 just work after import.

app.css

/* kernic — "kernic-io" Tailwind v4 theme (vibe: corporate) */
@import "tailwindcss";

@theme {
  --color-primary-50: #f3f7ff;
  --color-primary-100: #e1ecff;
  --color-primary-200: #c3d8ff;
  --color-primary-300: #9bbeff;
  --color-primary-400: #6e9fff;
  --color-primary-500: #3a79ff;
  --color-primary-600: #205cde;
  /* … */
}

W3C Design Tokens, 2025.10. Colors as OKLCH with a hex fallback; Terrazzo, Style Dictionary and Figma importers read it as-is.

tokens.json

{
  "color": {
    "primary": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "oklch",
          "components": [
            0.9754,
            0.0115,
            264.511
          ],
          "hex": "#f3f7ff"
        }
    …
}

Google's DESIGN.md spec: every token in the front matter, the rules in the prose. Coding agents already know the file.

markdown

---
# Generated by [kernic](https://github.com/intentionaut/kernic) · vibe: corporate · created 2026-08-25
version: alpha
name: kernic-io
description: Trustworthy, crisp, ship-safe.
omitted:
  - section: components
    reason: Component contracts arrive in a later kernic release.
colors:
  primary-50: "#f3f7ff"
  primary-100: "#e1ecff"
  primary-200: "#c3d8ff"
  primary-300: "#9bbeff"
  primary-400: "#6e9fff"
  primary-500: "#3a79ff"
  primary-600: "#205cde"
  primary-700: "#1344b1"
  primary-800: "#0c3185"
  primary-900: "#041f5f"
  primary-950: "#000e3b"
  accent-50: "#eff8ff"
  accent-100: "#d8efff"
…

A shadcn registry item. npx shadcn add ./shadcn.json applies the theme, light and dark, and the shadcn MCP server reads it too.

shadcn.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kernic-io",
  "type": "registry:style",
  "title": "kernic-io",
  …
    "light": {
      "radius": "0.375rem",
      "shadow-xs": "0px 1px 2px 0px #0e151814",
      "shadow-sm": "0px 1px 3px 0px #0e15181a, 0px 1px 2px -1px #0e15181a",
      "shadow-md": "0px 4px 6px -1px #0e15181a, 0px 2px 4px -2px #0e15181a",
      "shadow-lg": "0px 10px 15px -3px #0e15181a, 0px 4px 6px -4px #0e15181a",
      "shadow-xl": "0px 20px 25px -5px #0e15181a, 0px 8px 10px -6px #0e15181a",
      "background": "oklch(0.9746 0.0108 234.815)",
      "foreground": "oklch(0.19 0.0122 225.965)",
      …
}

What's in the box

A whole look in one pick

Pick a style like retro or neon. Kernic fills in the rest: colors, fonts, spacing. Change anything later.

Colors that just work

Scales generated in OKLCH, a color space where every step stays evenly bright. No muddy colors.

Speaks the standards

DESIGN.md in Google's spec, W3C design tokens, a shadcn theme, CSS variables and a Tailwind v4 theme. One command in your build and it stays current.

Your agent stops guessing

Vibe-coded apps look generic because the agent makes up colors as it goes. Hand it DESIGN.md once and it uses your system.

~2k Google Fonts

Search ~2k Google Fonts from your terminal. Pick heading, body, and mono fonts. Offline fallback included.

The whole token set

Type scale with line heights, spacing, shadows tinted from your own neutrals, motion, breakpoints and gradients. Every export carries all of it.

Pick a vibe

Eight presets, each one real inside kernic. Click one and watch the preview change. Then push the controls. This site runs on corporate.

kernicDocsGitHub

Design system

Vibe coding gets a facelift.

Color, type and spacing that work together. Generated once, applied everywhere.

Get startedaccent

RadiusType scale

The real editor runs locally with live OKLCH ramps, hue harmonies and ~2k Google Fonts. Studio, the cloud tier, adds multi-brand management, sync across repos and version history on top.

$ npx kernic studio

Free forever. MIT licensed.

Runs on your machine. Your design system is a plain JSON file you own.

$ npx kernic

Vibe coding gets a facelift.

One system. Every output.

What's in the box

A whole look in one pick

Colors that just work

Speaks the standards

Your agent stops guessing

~2k Google Fonts

The whole token set

Pick a vibe

Free forever. MIT licensed.

Kernic comes out of a newsletter.