Colors that just work
Scales are generated in OKLCH, a color space that keeps every step evenly bright. Nothing muddy, no guesswork.
One command to a real design system.
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.
$ kernic ◆ name kernic-io ◆ vibe neon (Stripe-style gradient fintech) ◆ palette OKLCH ramps · analogous harmony · tinted neutrals ◆ fonts Inter / JetBrains Mono ◇ radius soft ◇ scale 1.25 └── saved → ~/.config/kernic/systems/kernic-io.json $ kernic export kernic-io -f css > src/styles/tokens.css $ kernic export kernic-io -f tailwind > src/app.css $ ▊
One system. Every output.
These aren't mockups. This site runs on kernic export kernic-io, run at build time.
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;
--color-primary-700: #1344b1;
--color-primary-800: #0c3185;
--color-primary-900: #041f5f;
--color-primary-950: #000e3b;
--color-accent-50: #eff8ff;
--color-accent-100: #d8efff;
--color-accent-200: #aedfff;
--color-accent-300: #7cc8f7;
--color-accent-400: #45ace7;
--color-accent-500: #008dc9;
--color-accent-600: #0071a2;
--color-accent-700: #00567d;
--color-accent-800: #003f5d;
--color-accent-900: #002a40;
--color-accent-950: #001624;
--color-neutral-50: #f0f8fd;
--color-neutral-100: #e3edf2;
--color-neutral-200: #ced9df;
--color-neutral-300: #b3c0c7;
--color-neutral-400: #96a4ac;
--color-neutral-500: #76868e;
--color-neutral-600: #5d6c73;
--color-neutral-700: #455259;
--color-neutral-800: #323c42;
--color-neutral-900: #1f282c;
--color-neutral-950: #0e1518;
/* Semantic (light) */
--background: #f0f8fd;
--surface: #e3edf2;
--text: #0e1518;
--muted-text: #5d6c73;
--border: #ced9df;
--ring: #205cde;
/* Semantic (dark) — activate via .dark class or media query below */
--dark-background: #0e1518;
--dark-surface: #1f282c;
--dark-text: #f0f8fd;
--dark-muted-text: #96a4ac;
--dark-border: #323c42;
--dark-ring: #205cde;
/* Gradients */
--gradient-primary: linear-gradient(120deg, #45ace7 0%, #3a79ff 52%, #0c3185 100%);
--gradient-mesh: radial-gradient(60% 85% at 12% 8%, #7cc8f755 0%, transparent 60%), radial-gradient(55% 75% at 88% 10%, #e74ea963 0%, transparent 58%), radial-gradient(80% 95% at 55% 96%, #3a79ff40 0%, transparent 62%), linear-gradient(180deg, #1f282c, #0e1518);
--gradient-text: linear-gradient(92deg, #008dc9 0%, #6e9fff 55%, #e74ea9 100%);
/* Typography */
--text-xs: 0.800rem;
--text-sm: 0.894rem;
--text-base: 1.000rem;
--text-lg: 1.250rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 3.052rem;
--text-4xl: 4.768rem;
--text-5xl: 7.451rem;
--font-heading: "Inter", ui-serif, Georgia, serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* Radius & spacing */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--space-0-5: 0.5rem;
--space-1: 1rem;
--space-1-5: 1.5rem;
--space-2: 2rem;
--space-3: 3rem;
--space-4: 4rem;
--space-6: 6rem;
--space-8: 8rem;
--space-12: 12rem;
--space-16: 16rem;
}
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--background: var(--dark-background);
--surface: var(--dark-surface);
--text: var(--dark-text);
--muted-text: var(--dark-muted-text);
--border: var(--dark-border);
}
}app.css
/* kernic — "kernic-io" Tailwind v4 theme (vibe: corporate) */
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");
@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;
--color-primary-700: #1344b1;
--color-primary-800: #0c3185;
--color-primary-900: #041f5f;
--color-primary-950: #000e3b;
--color-accent-50: #eff8ff;
--color-accent-100: #d8efff;
--color-accent-200: #aedfff;
--color-accent-300: #7cc8f7;
--color-accent-400: #45ace7;
--color-accent-500: #008dc9;
--color-accent-600: #0071a2;
--color-accent-700: #00567d;
--color-accent-800: #003f5d;
--color-accent-900: #002a40;
--color-accent-950: #001624;
--color-neutral-50: #f0f8fd;
--color-neutral-100: #e3edf2;
--color-neutral-200: #ced9df;
--color-neutral-300: #b3c0c7;
--color-neutral-400: #96a4ac;
--color-neutral-500: #76868e;
--color-neutral-600: #5d6c73;
--color-neutral-700: #455259;
--color-neutral-800: #323c42;
--color-neutral-900: #1f282c;
--color-neutral-950: #0e1518;
--color-background: #f0f8fd;
--color-surface: #e3edf2;
--color-foreground: #0e1518;
--color-muted: #5d6c73;
--color-border-default: #ced9df;
--background-image-primary: linear-gradient(120deg, #45ace7 0%, #3a79ff 52%, #0c3185 100%);
--background-image-mesh: radial-gradient(60% 85% at 12% 8%, #7cc8f755 0%, transparent 60%), radial-gradient(55% 75% at 88% 10%, #e74ea963 0%, transparent 58%), radial-gradient(80% 95% at 55% 96%, #3a79ff40 0%, transparent 62%), linear-gradient(180deg, #1f282c, #0e1518);
--background-image-text: linear-gradient(92deg, #008dc9 0%, #6e9fff 55%, #e74ea9 100%);
--font-heading: "Inter", ui-serif, serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}tokens.json
{
"schemaVersion": 1,
"name": "kernic-io",
"vibe": "corporate",
"createdAt": "2026-08-25T22:22:11.208Z",
"colors": {
"primary": {
"50": "#f3f7ff",
"100": "#e1ecff",
"200": "#c3d8ff",
"300": "#9bbeff",
"400": "#6e9fff",
"500": "#3a79ff",
"600": "#205cde",
"700": "#1344b1",
"800": "#0c3185",
"900": "#041f5f",
"950": "#000e3b"
},
"accent": {
"50": "#eff8ff",
"100": "#d8efff",
"200": "#aedfff",
"300": "#7cc8f7",
"400": "#45ace7",
"500": "#008dc9",
"600": "#0071a2",
"700": "#00567d",
"800": "#003f5d",
"900": "#002a40",
"950": "#001624"
},
"neutral": {
"50": "#f0f8fd",
"100": "#e3edf2",
"200": "#ced9df",
"300": "#b3c0c7",
"400": "#96a4ac",
"500": "#76868e",
"600": "#5d6c73",
"700": "#455259",
"800": "#323c42",
"900": "#1f282c",
"950": "#0e1518"
}
},
"semantic": {
"background": {
"light": "#f0f8fd",
"dark": "#0e1518"
},
"surface": {
"light": "#e3edf2",
"dark": "#1f282c"
},
"text": {
"light": "#0e1518",
"dark": "#f0f8fd"
},
"mutedText": {
"light": "#5d6c73",
"dark": "#96a4ac"
},
"border": {
"light": "#ced9df",
"dark": "#323c42"
},
"ring": "#205cde"
},
"fonts": {
"heading": "Inter",
"body": "Inter",
"mono": "IBM Plex Mono"
},
"radius": {
"style": "soft",
"sm": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem"
},
"typeScale": {
"ratio": 1.25,
"baseRem": 1
},
"gradients": {
"primary": "linear-gradient(120deg, #45ace7 0%, #3a79ff 52%, #0c3185 100%)",
"mesh": "radial-gradient(60% 85% at 12% 8%, #7cc8f755 0%, transparent 60%), radial-gradient(55% 75% at 88% 10%, #e74ea963 0%, transparent 58%), radial-gradient(80% 95% at 55% 96%, #3a79ff40 0%, transparent 62%), linear-gradient(180deg, #1f282c, #0e1518)",
"text": "linear-gradient(92deg, #008dc9 0%, #6e9fff 55%, #e74ea9 100%)"
}
}markdown
# kernic-io — design system
> Generated by [kernic](https://github.com/intentionaut/kernic) · vibe: **corporate** · created 2026-08-25
> This file is the single source of truth for visual decisions in this project.
## Rules for AI agents
1. Use ONLY the tokens below. Never invent raw hex, rgb(), or named CSS colors.
2. Page backgrounds use `--background`; cards/panels use `--surface`; body text uses `--text`; secondary text uses `--muted-text`; hairlines use `--border`.
3. Primary actions use `--color-primary-600` (hover: `--color-primary-500`). Focus rings use `--ring`.
4. Dark mode: swap semantic tokens for their `dark:` counterparts — do not darken colors by hand.
5. Headings: "Inter" · Body: "Inter" · Code: "IBM Plex Mono". No other families.
6. Type sizes come only from `--text-*` (ratio 1.25). Corner radii only from `--radius-*` (soft).
7. Accent color is for highlights, badges, and secondary emphasis — never for large surfaces.
## Semantic tokens
| Token | Light | Dark |
| --- | --- | --- |
| `--background` | `#f0f8fd` | `#0e1518` |
| `--surface` | `#e3edf2` | `#1f282c` |
| `--text` | `#0e1518` | `#f0f8fd` |
| `--muted-text` | `#5d6c73` | `#96a4ac` |
| `--border` | `#ced9df` | `#323c42` |
| `--ring` | `#205cde` | `#205cde` |
## Color ramps
### primary
| Token | Hex |
| --- | --- |
`--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` | 
`--color-primary-700` | `#1344b1` | What's in the box
A whole look in one pick
Choose a style like retro or neon and kernic fills in everything: colors, fonts, spacing. Change whatever you want later.
Gradients included
Ready-made gradients for backgrounds, buttons and headlines ship as tokens with the neon looks.
~2k Google Fonts
Search Google Fonts from your terminal, with an offline fallback. Pick heading, body and mono fonts.
Exports that pipe anywhere
css, tailwind, json and fonts print to stdout. Send them to a file, a build step or another tool.
Works with AI coding tools
One command writes design.md and tokens.json so your agent stops inventing random colors. MCP server included.
Pick a vibe
This site uses neon. Here's its primary color scale, taken straight from the generated system:
--color-primary-*
--color-accent-*
--color-neutral-*
--color-semantic-*
--color-gradient-primary-*
--color-gradient-mesh-*
--color-gradient-text-*
retrotechcorporateneonminimalsoft-pastelfunearthy
Free forever, MIT licensed
The CLI runs on your machine. Your design system is a plain JSON file you keep.
$ npx kernic