---
name: m7kni
version: "0.1"
description: >-
  Shared design system for every m7kni / rknightion product. Petrol accent, petrol-tinted
  neutrals, compact operator density, precise 3px radius, Hanken Grotesk + JetBrains Mono,
  Phosphor icons. Light default, first-class dark.
colors_light:
  bg-canvas: "oklch(0.962 0.007 227)"
  bg-surface: "oklch(0.982 0.004 227)"
  bg-raised: "oklch(1 0 0)"
  bg-hover: "oklch(0.945 0.009 227)"
  bg-selected: "oklch(0.925 0.012 227)"
  bg-track: "oklch(0.85 0.01 227)"
  bg-inverse: "oklch(0.27 0.012 227)"
  bg-accent: "#1d6a8a"
  bg-accent-soft: "#e4eef4"
  fg-default: "oklch(0.24 0.012 227)"
  fg-soft: "oklch(0.37 0.015 227)"
  fg-muted: "oklch(0.5 0.018 227)"
  fg-faint: "oklch(0.65 0.015 227)"
  fg-on-accent: "oklch(1 0 0)"
  border-default: "oklch(0.9 0.008 227)"
  border-strong: "oklch(0.82 0.01 227)"
  status-ok: "#2f7d4f"
  status-warn: "#8f6410"
  status-fail: "#a83a2e"
  accent-hover: "#175874"
colors_dark:
  bg-canvas: "oklch(0.195 0.01 227)"
  bg-surface: "oklch(0.225 0.011 227)"
  bg-raised: "oklch(0.26 0.012 227)"
  bg-hover: "oklch(0.245 0.012 227)"
  bg-selected: "oklch(0.28 0.014 227)"
  bg-track: "oklch(0.36 0.012 227)"
  bg-inverse: "oklch(0.245 0.012 227)"
  bg-accent: "#66aecb"
  bg-accent-soft: "#1f2f38"
  fg-default: "oklch(0.92 0.006 227)"
  fg-soft: "oklch(0.8 0.01 227)"
  fg-muted: "oklch(0.7 0.015 227)"
  fg-faint: "oklch(0.55 0.015 227)"
  fg-on-accent: "#0e161b"
  border-default: "oklch(0.31 0.012 227)"
  border-strong: "oklch(0.4 0.014 227)"
  status-ok: "#5fae7f"
  status-warn: "#c9a04a"
  status-fail: "#d97b64"
  accent-hover: "#7cbcd6"
typography:
  sans: "Hanken Grotesk,system-ui,sans-serif"
  mono: "JetBrains Mono,ui-monospace,monospace"
space:
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  8: "32px"
  12: "48px"
  16: "64px"
radius:
  control: "3px"
  container: "0px"
  overlay: "6px"
  full: "9999px"
font_size:
  2xs: "10px"
  xs: "11px"
  sm: "12.5px"
  md: "13.5px"
  lg: "15px"
  xl: "18px"
  2xl: "24px"
font_weight:
  regular: "400"
  medium: "500"
  semibold: "600"
  bold: "700"
duration:
  fast: "120ms"
  base: "160ms"
  slow: "200ms"
row:
  table: "36px"
---

## Overview

Quiet, dense, precise operator tooling. Data tables carry the product: inline meters, contextual
status notes, saved views. Hairlines and rules over cards; one container level fewer than feels
natural. Personality comes from the petrol-tinted neutrals, the precise radius, and mono machine
text — never from decoration. Full rationale: FOUNDATIONS.md. Voice and glossary: docs/voice.md.

## Colors

Application code consumes semantic tokens only (`--color-*` from `@m7kni/tokens`); primitives are
an implementation detail. Dark mode re-points the same names — no component knows a theme exists.
The accent is the only colour that may mean "interactive". Status colours always pair with a shape
and a word (■ OK, ◆ WARN, ● FAIL); colour never carries meaning alone. In-cell furniture (meter
tracks, tick-lines) derives from ink via `color-mix(in oklab, var(--color-fg-default) 12-15%,
var(--color-bg-surface))` so it survives hover/selected rows. `--color-fg-faint` is decorative and
placeholder text only, never readable copy.

## Typography

Hanken Grotesk 400/500/600/700 for UI; JetBrains Mono 400/500/600 for machine text — hostnames,
versions, counts, timestamps, IDs. Micro-labels are mono, uppercase, 0.13em tracking, 10-11px.
Body 13.5px; table mono text 12.5px; stat figures 24px semibold. `tabular-nums` wherever digits
align. No other families, no other weights.

## Layout

Fixed app shell: sidebar, top bar, stat strip and filters never scroll; the content region (usually
a table) scrolls alone with sticky headers. Bulk-action bar pins to the bottom edge when rows are
selected. Spacing on the 4px scale (4/8/12/16/20/24/32/48/64). Table rows 36px. Density is compact:
these are operator screens.

## Elevation & Depth

Nearly flat. Surfaces separate by tint (canvas → surface → raised) and hairlines, not shadows.
Shadows only for true overlays (menus, dialogs, toasts). No glassmorphism, no blur except overlay
backdrops.

## Shapes

Radius: 3px controls, 0px containers, 6px overlays, full only for dots and avatars. The shape
personality is precise — no rounded cards, no pill buttons.

## Components

Buttons: verb-first labels, 3px radius, one primary (accent fill) per view region. Tables: mono
hostnames, inline meters with ink-derived tracks (zero renders as a dim 0, no empty track),
status word + shape + optional note. Segmented filters, saved views in the sidebar, mono counts
beside nav items. Icons: Phosphor regular, one set, 15-16px, never emoji.

## Do's and Don'ts

Do: light default with first-class dark · one accent used sparingly · rules over cards · dense
tables with real information design · fast functional motion (120-200ms ease-out, reduced-motion
collapses all) · sentence case · verb-first buttons.

Don't: purple-cyan gradients or neon glows · glassmorphism as a default surface · Inter/Geist as an
unchosen default · grey-bordered cards as the universal container · three-column icon-feature grids
· centred hero + logo row marketing pages · identical sidebar/topbar/breadcrumb/card-grid shells ·
emoji as icons · mixed icon sets · bounce or scale on hover · over-saturated accents · jade green
or teal-cyan-on-dark accents · colour as the only carrier of meaning.