{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "name": "HackerContent design tokens",
  "version": "1.0.0",
  "updated": "2026-08-21",
  "description": "Canonical tokens for the HackerContent brand. Colours are authored in oklch; hex/rgb values are the sRGB renderings. Source of truth: resources/css/base.css on hackercontent.com.",
  "color": {
    "ink-900": { "value": "oklch(0.13 0.008 60)", "hex": "#0a0705", "rgb": "rgb(10, 7, 5)", "role": "Page base / bezel. The default background." },
    "ink-850": { "value": "oklch(0.15 0.009 60)", "hex": "#0e0a08", "rgb": "rgb(14, 10, 8)", "role": "Panel background." },
    "ink-800": { "value": "oklch(0.18 0.010 60)", "hex": "#15110d", "rgb": "rgb(21, 17, 13)", "role": "Raised panel." },
    "ink-700": { "value": "oklch(0.23 0.012 60)", "hex": "#211c17", "rgb": "rgb(33, 28, 23)", "role": "Inputs, raised surfaces." },
    "ink-600": { "value": "oklch(0.32 0.012 60)", "hex": "#38322d", "rgb": "rgb(56, 50, 45)", "role": "Scrollbar thumb, subtle chrome." },
    "chalk": { "value": "oklch(0.95 0.005 80)", "hex": "#f0eeeb", "rgb": "rgb(240, 238, 235)", "role": "Primary text on dark." },
    "mute-300": { "value": "oklch(0.74 0.010 70)", "hex": "#afaaa4", "rgb": "rgb(175, 170, 164)", "role": "Secondary text on dark." },
    "mute-500": { "value": "oklch(0.58 0.012 70)", "hex": "#7f7973", "rgb": "rgb(127, 121, 115)", "role": "Muted labels on dark. AA at 4.67:1 — do not use on lighter grounds." },
    "trace": { "value": "oklch(0.72 0.19 45)", "hex": "#ff7527", "rgb": "rgb(255, 117, 39)", "role": "THE accent — the live signal. One accent, rationed. Never as text on paper (2.46:1)." },
    "trace-hot": { "value": "oklch(0.80 0.17 55)", "hex": "#ff9c41", "rgb": "rgb(255, 156, 65)", "role": "Hover / pressed-hot accent." },
    "trace-dim": { "value": "oklch(0.62 0.17 45)", "hex": "#d55c13", "rgb": "rgb(213, 92, 19)", "role": "Pressed / deep accent." },
    "trace-ink": { "value": "oklch(0.48 0.15 45)", "hex": "#9e3800", "rgb": "rgb(158, 56, 0)", "role": "AA-safe accent on paper (6.39:1). --trace remaps to this on paper surfaces." },
    "paper": { "value": "oklch(0.97 0.006 85)", "hex": "#f7f5f1", "rgb": "rgb(247, 245, 241)", "role": "Document surface — long-form reading." },
    "paper-2": { "value": "oklch(0.94 0.008 85)", "hex": "#edebe5", "rgb": "rgb(237, 235, 229)", "role": "Raised paper surface." },
    "paper-ink": { "value": "oklch(0.21 0.010 60)", "hex": "#1c1714", "rgb": "rgb(28, 23, 20)", "role": "Text on paper." },
    "paper-mute": { "value": "oklch(0.46 0.012 65)", "hex": "#5d5751", "rgb": "rgb(93, 87, 81)", "role": "Muted text on paper." },
    "line": { "value": "oklch(0.72 0.02 70 / 0.14)", "role": "Calibration lines on dark." },
    "line-firm": { "value": "oklch(0.72 0.02 70 / 0.26)", "role": "Firm borders on dark." },
    "line-paper": { "value": "oklch(0.21 0.01 60 / 0.13)", "role": "Calibration lines on paper." },
    "semantic-ok": { "value": "oklch(0.85 0.12 150)", "hex": "#93e4a4", "border": "oklch(0.7 0.15 150 / 0.4)", "role": "Success notice text on dark." },
    "semantic-bad": { "value": "oklch(0.82 0.14 25)", "hex": "#ff9e96", "border": "oklch(0.65 0.2 25 / 0.4)", "role": "Error notice text on dark." }
  },
  "font": {
    "display": { "family": "Bricolage Grotesque Variable", "fallback": "'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif", "axes": { "wght": "200–800", "opsz": "12–96", "wdth": "75–100" }, "weightsInUse": [400, 500, 600, 700, 800], "role": "Display and body", "source": "Self-hosted via @fontsource-variable/bricolage-grotesque (SIL OFL 1.1)" },
    "mono": { "family": "JetBrains Mono Variable", "fallback": "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace", "axes": { "wght": "100–800" }, "weightsInUse": [400, 500, 600], "role": "Labels, data, code", "source": "Self-hosted via @fontsource-variable/jetbrains-mono (SIL OFL 1.1)" }
  },
  "typescale": {
    "step--2": "clamp(0.69rem, 0.67rem + 0.09vw, 0.75rem)",
    "step--1": "clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem)",
    "step-0": "clamp(1rem, 0.96rem + 0.21vw, 1.13rem)",
    "step-1": "clamp(1.2rem, 1.12rem + 0.4vw, 1.44rem)",
    "step-2": "clamp(1.44rem, 1.3rem + 0.7vw, 1.94rem)",
    "step-3": "clamp(1.73rem, 1.5rem + 1.15vw, 2.61rem)",
    "step-4": "clamp(2.07rem, 1.7rem + 1.85vw, 3.5rem)",
    "step-5": "clamp(2.49rem, 1.9rem + 2.95vw, 4.71rem)",
    "step-6": "clamp(2.99rem, 2.05rem + 4.7vw, 6.35rem)",
    "display": "clamp(2.75rem, 1.1rem + 8.2vw, 8.5rem)"
  },
  "space": {
    "3xs": "clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem)",
    "2xs": "clamp(0.5rem, 0.48rem + 0.11vw, 0.56rem)",
    "xs": "clamp(0.75rem, 0.72rem + 0.16vw, 0.88rem)",
    "s": "clamp(1rem, 0.96rem + 0.21vw, 1.13rem)",
    "m": "clamp(1.5rem, 1.43rem + 0.32vw, 1.69rem)",
    "l": "clamp(2rem, 1.91rem + 0.43vw, 2.25rem)",
    "xl": "clamp(3rem, 2.87rem + 0.64vw, 3.38rem)",
    "2xl": "clamp(4rem, 3.83rem + 0.86vw, 4.5rem)",
    "3xl": "clamp(6rem, 5.74rem + 1.28vw, 6.75rem)",
    "4xl": "clamp(8rem, 7.4rem + 3vw, 10rem)"
  },
  "radius": { "default": "4px", "lg": "10px", "pill": "99px" },
  "structure": { "shell": "78rem", "shell-narrow": "46rem", "gutter": "clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem)" },
  "shadow": {
    "button-glow": "0 14px 34px -14px oklch(0.72 0.19 45 / 0.7)",
    "note": "The system avoids drop shadows; depth comes from borders (--line), surface steps and the accent glow on hover."
  },
  "motion": {
    "ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
    "ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
    "duration-fast": "160ms",
    "duration": "320ms",
    "duration-slow": "700ms",
    "rule": "Motion is instrumentation, not decoration. Everything respects prefers-reduced-motion."
  }
}