AI Matrx Logo

Design system — Dark-first developer tool

Kernelpine · Design systems — developer and data tools · Seattle, WA

Ravi Subramaniam starts Kernelpine's design system from the Dark-first developer tool starter and adapts it to the brand.

Any businessContentTables8 tables · 8 views · 1 form · 1 agent
Use this template

All colours

Colors
NameGroupValueRead onUsage note
backgroundSurfaces{"light":"#f7f8fa","dark":"#0b0d10"}—The page itself. Everything else sits on it.
foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}backgroundBody text and icons on the page.
cardSurfaces{"light":"#ffffff","dark":"#12151a"}—Raised panels, dialogs and menus.
card-foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}cardText inside a card.
popoverSurfaces{"light":"#ffffff","dark":"#161a20"}—Menus, tooltips and pickers that float over content.
popover-foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}popoverText inside a menu or tooltip.
mutedMuted{"light":"#eceff3","dark":"#191d23"}—Quiet fills: table headers, empty states, code blocks.
muted-foregroundMuted{"light":"#505966","dark":"#8d97a5"}mutedHints and captions. Also reads on the page and on cards.
primaryPrimary{"light":"#0a7550","dark":"#3ddc97"}—The one main action on a screen.
primary-foregroundPrimary{"light":"#ffffff","dark":"#03140c"}primaryLabel on a primary button.
secondarySecondary{"light":"#e5e8ed","dark":"#1f242c"}—Second actions and quiet selected states.
secondary-foregroundSecondary{"light":"#1b2027","dark":"#d9dfe7"}secondaryLabel on a secondary button.

9 more rows

Tables

Colors

21 sample rows · 5 columns

Every colour the product uses, light and dark, and what each is read on.

NameGroupValueRead onUsage note
backgroundSurfaces{"light":"#f7f8fa","dark":"#0b0d10"}—The page itself. Everything else sits on it.
foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}backgroundBody text and icons on the page.
cardSurfaces{"light":"#ffffff","dark":"#12151a"}—Raised panels, dialogs and menus.
card-foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}cardText inside a card.
popoverSurfaces{"light":"#ffffff","dark":"#161a20"}—Menus, tooltips and pickers that float over content.
popover-foregroundSurfaces{"light":"#11151b","dark":"#d9dfe7"}popoverText inside a menu or tooltip.
mutedMuted{"light":"#eceff3","dark":"#191d23"}—Quiet fills: table headers, empty states, code blocks.
muted-foregroundMuted{"light":"#505966","dark":"#8d97a5"}mutedHints and captions. Also reads on the page and on cards.
primaryPrimary{"light":"#0a7550","dark":"#3ddc97"}—The one main action on a screen.
primary-foregroundPrimary{"light":"#ffffff","dark":"#03140c"}primaryLabel on a primary button.
secondarySecondary{"light":"#e5e8ed","dark":"#1f242c"}—Second actions and quiet selected states.
secondary-foregroundSecondary{"light":"#1b2027","dark":"#d9dfe7"}secondaryLabel on a secondary button.

9 more rows

Typography

7 sample rows · 4 columns

The text styles: font, weight, size, line height and spacing.

NameGroupStyleUsage note
titleHeadings{"font":"Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":600,"size":22,"lineHeight":28,"letterSpacing":-0.01}The page title.
headingHeadings{"font":"Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":600,"size":15,"lineHeight":22,"letterSpacing":0}Panel and section headings.
bodyText{"font":"Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":400,"size":13,"lineHeight":20,"letterSpacing":0}Everything people read; the default size.
labelText{"font":"Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":500,"size":12,"lineHeight":16,"letterSpacing":0}Buttons, field labels and column headers.
captionText{"font":"Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":400,"size":11,"lineHeight":14,"letterSpacing":0.02}Timestamps and status lines.
codeCode{"font":"'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace","weight":400,"size":12.5,"lineHeight":18,"letterSpacing":0}Code, logs, ids and keys.
code-blockCode{"font":"'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace","weight":400,"size":13,"lineHeight":20,"letterSpacing":0}Multi-line code and terminal output.

Spacing

7 sample rows · 3 columns

The spacing scale every layout is built from.

NameValueUsage note
space-0-52Inside a badge.
space-14Between an icon and its label.
space-1-56Table cell padding, top and bottom.
space-28Between related controls.
space-312Padding of a panel.
space-416Between groups.
space-624Between sections.

Corner radius

3 sample rows · 3 columns

How round corners are, from chips to avatars.

NameValueUsage note
radius-sm3Badges, keys and checkboxes.
radius-md6Buttons, fields and menus.
radius-lg8Panels and dialogs.

Shadows

3 sample rows · 3 columns

Elevation: how far something floats above the page, in light and dark.

NameValueUsage note
shadow-sm{"light":{"x":0,"y":1,"blur":2,"spread":0,"color":"#0b0d1014"},"dark":{"x":0,"y":0,"blur":0,"spread":1,"color":"#ffffff0f"}}Panels: a shadow on light, a hairline glow on dark.
shadow-md{"light":{"x":0,"y":8,"blur":20,"spread":-6,"color":"#0b0d1029"},"dark":{"layers":[{"x":0,"y":8,"blur":24,"spread":-6,"color":"#000000cc"},{"x":0,"y":0,"blur":0,"spread":1,"color":"#ffffff14"}]}}Menus, command palette and dialogs.
shadow-lg{"light":{"x":0,"y":20,"blur":40,"spread":-12,"color":"#0b0d1033"},"dark":{"layers":[{"x":0,"y":20,"blur":48,"spread":-12,"color":"#000000e6"},{"x":0,"y":0,"blur":0,"spread":1,"color":"#ffffff1a"}]}}Modal dialogs over the whole console.

Opacity

3 sample rows · 3 columns

How see-through things get: disabled controls, tints and overlays.

NameValueUsage note
opacity-disabled0.4A control that cannot be used yet.
opacity-hover0.06The tint over a row on hover.
opacity-selected0.12The tint over a selected row.

Motion

3 sample rows · 3 columns

How fast things move and how they ease in and out.

NameValueUsage note
motion-instant{"duration":80,"easing":"linear"}Hover and focus; nearly instant.
motion-fast{"duration":140,"easing":"cubic-bezier(0.2, 0, 0, 1)"}Menus and the command palette.
motion-base{"duration":200,"easing":"cubic-bezier(0.2, 0, 0, 1)"}Side panels and dialogs.

Components

9 sample rows · 4 columns

Each component family, drawn as it looks in light and dark, with where to use it.

NameGroupSampleUsage note
ButtonActions<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:500;line-height:1;height:28px;padding:0 10px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:none;letter-spacing:0em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.p{background:var(--primary);color:var(--primary-foreground)}.p.h{filter:brightness(1.08)}.p.f{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.p:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w r"><button class="b p">Save</button><button class="b p h">Hover</button><button class="b p f">Focus</button><button class="b p" disabled>Disabled</button></div>The one main action of a screen. Never two primary buttons side by side.
Button variantsActions<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:500;line-height:1;height:28px;padding:0 10px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:none;letter-spacing:0em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.s{background:var(--secondary);color:var(--secondary-foreground)}.o{background:transparent;color:var(--foreground);border-color:var(--border)}.q{background:transparent;color:var(--muted-foreground);box-shadow:none}.d{background:var(--destructive);color:var(--destructive-foreground)}</style><div class="w r"><button class="b s">Secondary</button><button class="b o">Outline</button><button class="b q">Quiet</button><button class="b d">Delete</button></div>Outline and quiet for everything else; delete only for what cannot be undone.
Text fieldInputs<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.f{display:grid;gap:6px;max-width:320px}.l{font-size:12px;font-weight:600;color:var(--foreground)}.i{font:inherit;font-size:14px;height:34px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--input);background:var(--background);color:var(--foreground);transition:box-shadow var(--motion-fast, 120ms ease-out)}.i:focus,.i.f{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.h{font-size:12px;color:var(--muted-foreground)}.e .i{border-color:var(--destructive)}.e .h{color:var(--destructive)}</style><div class="w g"><label class="f"><span class="l">Email</span><input class="i" placeholder="name@company.com"><span class="h">We send the receipt here.</span></label><label class="f"><span class="l">Name</span><input class="i f" value="Dana Ruiz"><span class="h">Focused.</span></label><label class="f e"><span class="l">Phone</span><input class="i" value="555-01"><span class="h">Enter all ten digits.</span></label></div>Every field has a visible label above it and a hint or error below.
CardContainers<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:500;line-height:1;height:28px;padding:0 10px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:none;letter-spacing:0em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.c{max-width:380px;padding:16px;border-radius:var(--radius-lg, 8px);border:1px solid var(--border);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-sm, none)}.k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.t{margin:0 0 4px;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;font-weight:600}.m{margin:0 0 14px;font-size:13px;color:var(--muted-foreground)}.a{display:flex;gap:8px}.p{background:var(--primary);color:var(--primary-foreground)}.o{background:transparent;color:var(--card-foreground);border-color:var(--border);box-shadow:none}</style><div class="w c"><p class="k">Report</p><h3 class="t">Quarterly summary</h3><p class="m">Updated 2 hours ago by Dana Ruiz</p><div class="a"><button class="b p">Open</button><button class="b o">Share</button></div></div>One idea per card: a kicker, a title, one line of detail and at most two actions.
BadgeStatus<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.r{display:flex;flex-wrap:wrap;gap:8px}.x{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-sm, 3px);font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--foreground);background:var(--muted)}.x i{width:7px;height:7px;border-radius:50%;background:currentColor}.ok{color:var(--success)}.wa{color:var(--warning)}.er{color:var(--destructive)}.pr{background:var(--primary);color:var(--primary-foreground);border-color:transparent}</style><div class="w r"><span class="x">Draft</span><span class="x pr">New</span><span class="x ok"><i></i>Live</span><span class="x wa"><i></i>Waiting</span><span class="x er"><i></i>Failed</span></div>A status always pairs its colour with a word.
Toggle listSelection<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.l{display:grid;max-width:440px;border:1px solid var(--border);border-radius:var(--radius-lg, 8px);background:var(--card)}.o{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;color:var(--card-foreground)}.o+.o{border-top:1px solid var(--border)}.o small{display:block;font-size:12px;color:var(--muted-foreground)}.t{appearance:none;flex:none;width:36px;height:22px;border-radius:var(--radius-full, 999px);background:var(--input);position:relative;cursor:pointer;margin:0;transition:background var(--motion-fast, 120ms ease-out)}.t::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--background);transition:transform var(--motion-fast, 120ms ease-out)}.t:checked{background:var(--primary)}.t:checked::after{transform:translateX(14px)}.t:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w l"><label class="o"><span>Email alerts<small>When a task is assigned to you</small></span><input type="checkbox" class="t" checked></label><label class="o"><span>Weekly digest<small>Every Monday morning</small></span><input type="checkbox" class="t"></label><label class="o"><span>Text messages<small>Needs a verified phone</small></span><input type="checkbox" class="t" disabled></label></div>A switch acts at once. When a choice needs a Save, use a checkbox.
Collapsible listDisclosure<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.d{max-width:500px;border:1px solid var(--border);border-radius:var(--radius-lg, 8px);background:var(--card);color:var(--card-foreground)}details+details{border-top:1px solid var(--border)}summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--muted-foreground)}details[open] summary::after{content:"\2212"}p{margin:0;padding:0 16px 14px;font-size:13px;color:var(--muted-foreground)}</style><div class="w d"><details open><summary>What is included</summary><p>Every table, view and page in the template.</p></details><details><summary>Who can see it</summary><p>Everyone in your organization.</p></details><details><summary>Can I undo it</summary><p>Yes, from the history of each item.</p></details></div>For answers people look up once. Never hide a step people must take.
TabsDisclosure<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.t{display:flex;gap:4px;border-bottom:1px solid var(--border)}.t span{padding:10px 14px;font-size:14px;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;text-transform:none;letter-spacing:0em}.t .on{color:var(--foreground);font-weight:600;border-color:var(--primary)}</style><div class="w t"><span class="on">Overview</span><span>Activity</span><span>Settings</span></div>Tabs switch views of one thing. Three to five, short names.
Code and keysStatus<style>.w{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px;color:var(--foreground)}.c{font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;font-size:12.5px;padding:10px 12px;border-radius:var(--radius);background:var(--muted);color:var(--foreground);border:1px solid var(--border);margin:0 0 10px;white-space:pre-wrap}.c b{color:var(--success);font-weight:400}.k{font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;font-size:11px;padding:1px 6px;border-radius:var(--radius-sm, 3px);border:1px solid var(--border);border-bottom-width:2px;background:var(--card);color:var(--muted-foreground)}</style><div class="w"><pre class="c"><b>$</b> pipeline run nightly --env prod ✓ 14 steps · 2m 18s</pre>Open the palette with <span class="k">⌘</span> <span class="k">K</span></div>Mono for anything a person copies or types: commands, ids, keys.

Related templates