adds design

docs/design/tokens/base.css

@@ -0,0 +1,23 @@
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--color-stone);
+  color: var(--color-ink-body);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  font-weight: var(--weight-body);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--color-amber-deep); text-decoration-color: var(--color-stone-rule); text-underline-offset: 3px; transition: var(--transition-color); }
+a:hover { color: var(--color-ink-body); text-decoration-color: var(--color-ink-dim); }
+[data-surface="slate"] a { color: var(--color-amber); }
+[data-surface="slate"] a:hover { color: var(--color-neutral-1); }
+
+::selection { background: var(--color-amber-ring); color: var(--color-ink-body); }
+
+:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }

docs/design/tokens/colors.css

@@ -0,0 +1,66 @@
+/* Kade palette — cool stone paper, slate-ink dark punctuation, amber as the only accent. */
+:root {
+  /* Stone — the default canvas. Cool, quarried, never white. */
+  --color-stone: #EFF0EE;
+  --color-stone-2: #E5E7E4;
+  --color-stone-3: #D8DBD7;
+  --color-stone-rule: #CDD1CD;
+
+  /* Ink ramp — text on stone. */
+  --color-ink-body: #171C22;
+  --color-ink-muted: #3A424C;
+  --color-ink-dim: #6B7480;
+
+  /* Slate — the sparing dark surface. One or two blocks per page. */
+  --color-slate: #101720;
+  --color-slate-2: #18202B;
+  --color-slate-3: #232C39;
+
+  /* Neutral ramp — text on slate. Pure white does not exist in this system. */
+  --color-neutral-1: #F4F5F4;
+  --color-neutral-2: #E4E7E6;
+  --color-neutral-3: #BAC0C0;
+  --color-neutral-4: #6C7783;
+
+  /* Amber — the single accent. Reserved for action, state and signal. */
+  --color-amber: #E8913A;
+  --color-amber-deep: #C4741F;
+  --color-amber-soft: #F0B476;
+  --color-amber-tint: rgba(232, 145, 58, 0.10);
+  --color-amber-ring: rgba(232, 145, 58, 0.22);
+
+  /* Semantic aliases — prefer these in component code. */
+  --surface-page: var(--color-stone);
+  --surface-card: var(--color-stone-2);
+  --surface-card-hover: var(--color-stone-3);
+  --surface-dark: var(--color-slate);
+  --surface-dark-card: var(--color-slate-2);
+
+  --text-body: var(--color-ink-body);
+  --text-muted: var(--color-ink-muted);
+  --text-dim: var(--color-ink-dim);
+  --text-accent: var(--color-amber-deep);
+  --text-on-accent: var(--color-ink-body);
+
+  --border-hairline: var(--color-stone-rule);
+  --border-strong: var(--color-ink-muted);
+
+  --action-fill: var(--color-amber);
+  --action-fill-hover: var(--color-amber-deep);
+  --focus-ring: var(--color-amber-ring);
+  --focus-border: var(--color-amber);
+  --signal-error: var(--color-amber-deep);
+}
+
+/* Slate scope — inside a dark block the ramps invert. Apply to the block, not the page. */
+[data-surface="slate"] {
+  --surface-page: var(--color-slate);
+  --surface-card: var(--color-slate-2);
+  --surface-card-hover: var(--color-slate-3);
+  --text-body: var(--color-neutral-1);
+  --text-muted: var(--color-neutral-2);
+  --text-dim: var(--color-neutral-4);
+  --text-accent: var(--color-amber);
+  --border-hairline: var(--color-slate-3);
+  --border-strong: var(--color-neutral-3);
+}

docs/design/tokens/elevation.css

@@ -0,0 +1,8 @@
+/* Elevation is carried by the stone ramp, not by shadow. Shadows exist only for layers that
+   cross the page plane (dropdown, modal) and for the amber focus ring. */
+:root {
+  --shadow-none: none;
+  --shadow-dropdown: 0 4px 16px rgba(23, 28, 34, 0.10);
+  --shadow-modal: 0 16px 48px rgba(23, 28, 34, 0.18);
+  --ring-focus: 0 0 0 2px var(--color-amber-ring);
+}

docs/design/tokens/fonts.css

@@ -0,0 +1,10 @@
+/* Kade type stack — IBM Plex Mono (display + labels) and IBM Plex Sans (body + UI).
+   No licensed binaries shipped with the source skills, so the families load from Google Fonts.
+   Replace this @import with local @font-face rules once real woff2 files are supplied. */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");
+
+:root {
+  --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+}

docs/design/tokens/motion.css

@@ -0,0 +1,10 @@
+/* Colour shifts only. Kade never translates, lifts, or scales on hover. */
+:root {
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
+  --duration-fast: 120ms; /* @kind other */
+  --duration-base: 160ms; /* @kind other */
+  --duration-slow: 260ms; /* @kind other */
+  --transition-color: color var(--duration-base) var(--ease-out),
+    background-color var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+}

docs/design/tokens/radius.css

@@ -0,0 +1,11 @@
+/* Kade is rectangular. A rounded card is an antipattern. */
+:root {
+  --radius-none: 0px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+
+  --border-width: 1px;
+  --border-width-accent: 2px;
+}

docs/design/tokens/spacing.css

@@ -0,0 +1,21 @@
+/* 4px base step. Section rhythm is deliberately generous; the calm comes from air, not decoration. */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  --gutter: var(--space-6);
+  --section-y: var(--space-24);
+  --section-y-tight: var(--space-16);
+  --container: 1140px;
+  --measure: 68ch;
+}

docs/design/tokens/typography.css

@@ -0,0 +1,31 @@
+/* One scale for display (Plex Mono 700) and body (Plex Sans). Line-height tightens as size grows. */
+:root {
+  --text-2xs: 10px;
+  --text-xs: 11px;
+  --text-sm: 13px;
+  --text-base: 15px;
+  --text-md: 17px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 32px;
+  --text-4xl: 44px;
+  --text-6xl: 58px;
+  --text-7xl: 76px;
+
+  --leading-display: 1.02;
+  --leading-tight: 1.15;
+  --leading-snug: 1.3;
+  --leading-normal: 1.6;
+  --leading-loose: 1.7;
+
+  /* Plex Mono display tracking is negative; label tracking is wide. */
+  --tracking-display: -0.04em;
+  --tracking-heading: -0.02em;
+  --tracking-normal: 0;
+  --tracking-label: 0.14em;
+
+  --weight-body: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-display: 700;
+}