{
  "$description": "gbbns.co design tokens. Design Tokens Format Module 2025.10. Three tiers: primitive, semantic, component. Token paths map one to one onto the custom properties in tokens.css (color.stone.100 is --color-stone-100, button.primary.bg is --button-primary-bg). Dark values live in $extensions.mode.dark. Fluid sizes carry their clamp() in $extensions['co.gbbns.fluid']; $value is the minimum.",

  "color": {
    "$type": "color",
    "stone": {
      "$description": "Tier 1. Neutral. Limestone at the top, peat at the bottom.",
      "0":   { "$value": { "colorSpace": "oklch", "components": [0.992, 0.004, 100], "hex": "#fdfcf9" } },
      "50":  { "$value": { "colorSpace": "oklch", "components": [0.978, 0.006, 100], "hex": "#f9f8f3" } },
      "100": { "$value": { "colorSpace": "oklch", "components": [0.958, 0.009, 100], "hex": "#f2f1eb" } },
      "200": { "$value": { "colorSpace": "oklch", "components": [0.926, 0.012, 100], "hex": "#e8e7de" } },
      "300": { "$value": { "colorSpace": "oklch", "components": [0.875, 0.014, 102], "hex": "#d7d6cc" } },
      "400": { "$value": { "colorSpace": "oklch", "components": [0.77, 0.015, 105], "hex": "#b5b5aa" } },
      "500": { "$value": { "colorSpace": "oklch", "components": [0.6, 0.016, 112], "hex": "#808177" } },
      "600": { "$value": { "colorSpace": "oklch", "components": [0.49, 0.017, 125], "hex": "#5e6258" } },
      "700": { "$value": { "colorSpace": "oklch", "components": [0.4, 0.018, 140], "hex": "#434a41" } },
      "800": { "$value": { "colorSpace": "oklch", "components": [0.31, 0.018, 150], "hex": "#2a332c" } },
      "850": { "$value": { "colorSpace": "oklch", "components": [0.265, 0.017, 152], "hex": "#1f2821" } },
      "900": { "$value": { "colorSpace": "oklch", "components": [0.225, 0.016, 155], "hex": "#161e18" } },
      "950": { "$value": { "colorSpace": "oklch", "components": [0.185, 0.014, 155], "hex": "#0e1510" } }
    },
    "heather": {
      "$description": "Tier 1. Accent.",
      "100": { "$value": { "colorSpace": "oklch", "components": [0.945, 0.026, 345], "hex": "#fbe6f1" } },
      "200": { "$value": { "colorSpace": "oklch", "components": [0.89, 0.055, 345], "hex": "#f7cde3" } },
      "300": { "$value": { "colorSpace": "oklch", "components": [0.81, 0.1, 345], "hex": "#f0a7d0" } },
      "400": { "$value": { "colorSpace": "oklch", "components": [0.73, 0.135, 345], "hex": "#e383bb" } },
      "500": { "$value": { "colorSpace": "oklch", "components": [0.56, 0.17, 345], "hex": "#b5418b" } },
      "600": { "$value": { "colorSpace": "oklch", "components": [0.435, 0.16, 345], "hex": "#891c65" } },
      "700": { "$value": { "colorSpace": "oklch", "components": [0.38, 0.14, 345], "hex": "#711653" } },
      "800": { "$value": { "colorSpace": "oklch", "components": [0.3, 0.1, 345], "hex": "#4e1239" } },
      "900": { "$value": { "colorSpace": "oklch", "components": [0.25, 0.06, 345], "hex": "#351428" } }
    },
    "moss": {
      "$description": "Tier 1. Support.",
      "100": { "$value": { "colorSpace": "oklch", "components": [0.945, 0.022, 160], "hex": "#e1f2e8" } },
      "200": { "$value": { "colorSpace": "oklch", "components": [0.89, 0.04, 160], "hex": "#c5e3d2" } },
      "300": { "$value": { "colorSpace": "oklch", "components": [0.81, 0.065, 160], "hex": "#9dceb3" } },
      "400": { "$value": { "colorSpace": "oklch", "components": [0.71, 0.085, 160], "hex": "#71b28f" } },
      "500": { "$value": { "colorSpace": "oklch", "components": [0.57, 0.095, 160], "hex": "#3d8864" } },
      "600": { "$value": { "colorSpace": "oklch", "components": [0.46, 0.085, 160], "hex": "#236647" } },
      "700": { "$value": { "colorSpace": "oklch", "components": [0.38, 0.07, 160], "hex": "#194e35" } },
      "800": { "$value": { "colorSpace": "oklch", "components": [0.3, 0.05, 160], "hex": "#143525" } },
      "900": { "$value": { "colorSpace": "oklch", "components": [0.25, 0.035, 160], "hex": "#11271c" } }
    },

    "bg": {
      "$description": "Tier 2. Surfaces: page, then three steps of tinted elevation.",
      "page":         { "$value": "{color.stone.100}",   "$extensions": { "mode": { "dark": "{color.stone.950}" } } },
      "surface-1":    { "$value": "{color.stone.200}",   "$extensions": { "mode": { "dark": "{color.stone.900}" } }, "$description": "Tinted section" },
      "surface-2":    { "$value": "{color.stone.50}",    "$extensions": { "mode": { "dark": "{color.stone.850}" } }, "$description": "Card on a section" },
      "surface-3":    { "$value": "{color.stone.0}",     "$extensions": { "mode": { "dark": "{color.stone.800}" } }, "$description": "Inputs and anything raised" },
      "accent-soft":  { "$value": "{color.heather.100}", "$extensions": { "mode": { "dark": "{color.heather.900}" } } },
      "support-soft": { "$value": "{color.moss.100}",    "$extensions": { "mode": { "dark": "{color.moss.900}" } } },
      "accent":       { "$value": "{color.heather.600}", "$extensions": { "mode": { "dark": "{color.heather.300}" } } },
      "accent-hover": { "$value": "{color.heather.700}", "$extensions": { "mode": { "dark": "{color.heather.200}" } } }
    },
    "text": {
      "$description": "Tier 2.",
      "primary":          { "$value": "{color.stone.900}",   "$extensions": { "mode": { "dark": "{color.stone.100}" } } },
      "secondary":        { "$value": "{color.stone.700}",   "$extensions": { "mode": { "dark": "{color.stone.300}" } } },
      "muted":            { "$value": "{color.stone.600}",   "$extensions": { "mode": { "dark": "{color.stone.400}" } } },
      "accent":           { "$value": "{color.heather.600}", "$extensions": { "mode": { "dark": "{color.heather.300}" } } },
      "support":          { "$value": "{color.moss.700}",    "$extensions": { "mode": { "dark": "{color.moss.300}" } } },
      "on-accent":        { "$value": "{color.stone.50}",    "$extensions": { "mode": { "dark": "{color.stone.950}" } } }
    },
    "border": {
      "$description": "Tier 2. Subtle is decorative only. Strong carries 3:1 for controls.",
      "subtle": { "$value": "{color.stone.300}", "$extensions": { "mode": { "dark": "{color.stone.800}" } } },
      "strong": { "$value": "{color.stone.500}" },
      "accent": { "$value": "{color.text.accent}" }
    },
    "focus": { "$value": "{color.heather.600}", "$extensions": { "mode": { "dark": "{color.heather.300}" } } },
    "topo":  { "$value": "{color.moss.400}",    "$extensions": { "mode": { "dark": "{color.moss.600}" } }, "$description": "Contour motif. Decorative." }
  },

  "font": {
    "family": {
      "$type": "fontFamily",
      "display": { "$value": ["Bricolage Grotesque", "Avenir Next", "Segoe UI", "system-ui", "sans-serif"] },
      "body":    { "$value": ["Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Verdana", "system-ui", "sans-serif"] },
      "mono":    { "$value": ["Atkinson Hyperlegible Mono", "ui-monospace", "SF Mono", "Menlo", "Consolas", "monospace"] }
    },
    "weight": {
      "$type": "fontWeight",
      "regular":  { "$value": 400 },
      "semibold": { "$value": 600 },
      "bold":     { "$value": 700 }
    },
    "size": {
      "$type": "dimension",
      "$description": "Fluid between a 20rem and an 80rem viewport. $value is the minimum.",
      "xs":  { "$value": { "value": 0.8125, "unit": "rem" } },
      "sm":  { "$value": { "value": 0.875, "unit": "rem" },  "$extensions": { "co.gbbns.fluid": { "max": { "value": 0.9375, "unit": "rem" }, "css": "clamp(0.875rem, 0.854rem + 0.104vi, 0.9375rem)" } } },
      "md":  { "$value": { "value": 1.0625, "unit": "rem" }, "$extensions": { "co.gbbns.fluid": { "max": { "value": 1.1875, "unit": "rem" }, "css": "clamp(1.0625rem, 1.021rem + 0.208vi, 1.1875rem)" } } },
      "lg":  { "$value": { "value": 1.25, "unit": "rem" },   "$extensions": { "co.gbbns.fluid": { "max": { "value": 1.5, "unit": "rem" }, "css": "clamp(1.25rem, 1.167rem + 0.417vi, 1.5rem)" } } },
      "xl":  { "$value": { "value": 1.5, "unit": "rem" },    "$extensions": { "co.gbbns.fluid": { "max": { "value": 2, "unit": "rem" }, "css": "clamp(1.5rem, 1.333rem + 0.833vi, 2rem)" } } },
      "2xl": { "$value": { "value": 1.875, "unit": "rem" },  "$extensions": { "co.gbbns.fluid": { "max": { "value": 2.75, "unit": "rem" }, "css": "clamp(1.875rem, 1.583rem + 1.458vi, 2.75rem)" } } },
      "3xl": { "$value": { "value": 2.375, "unit": "rem" },  "$extensions": { "co.gbbns.fluid": { "max": { "value": 3.75, "unit": "rem" }, "css": "clamp(2.375rem, 1.917rem + 2.292vi, 3.75rem)" } } },
      "4xl": { "$value": { "value": 2.875, "unit": "rem" },  "$extensions": { "co.gbbns.fluid": { "max": { "value": 5, "unit": "rem" }, "css": "clamp(2.875rem, 2.167rem + 3.542vi, 5rem)" } } },
      "body":  { "$value": "{font.size.md}", "$description": "Tier 2." },
      "prose": { "$value": { "value": 1.125, "unit": "rem" }, "$description": "Tier 2. Long-form reading size.", "$extensions": { "co.gbbns.fluid": { "max": { "value": 1.3125, "unit": "rem" }, "css": "clamp(1.125rem, 1.0625rem + 0.3125vi, 1.3125rem)" } } }
    },
    "heading": { "$type": "fontFamily", "$value": "{font.family.display}", "$description": "Tier 2." },
    "body":    { "$type": "fontFamily", "$value": "{font.family.body}", "$description": "Tier 2." },
    "code":    { "$type": "fontFamily", "$value": "{font.family.mono}", "$description": "Tier 2." }
  },

  "line-height": {
    "$type": "number",
    "tight": { "$value": 1.05, "$description": "Display headings" },
    "snug":  { "$value": 1.2,  "$description": "Headings" },
    "ui":    { "$value": 1.45, "$description": "Interface text" },
    "prose": { "$value": 1.7,  "$description": "Long-form reading" }
  },

  "letter-spacing": {
    "$type": "number",
    "$description": "In em. The format has no em unit for dimensions, so these are unitless numbers.",
    "tight":  { "$value": -0.02 },
    "normal": { "$value": 0 },
    "caps":   { "$value": 0.08 }
  },

  "measure": {
    "$type": "number",
    "$description": "Tier 2. In ch. ch is the width of 0, so 60ch sets roughly 68 to 72 characters.",
    "prose": { "$value": 60 },
    "ui":    { "$value": 44 }
  },

  "space": {
    "$type": "dimension",
    "1":  { "$value": { "value": 0.25, "unit": "rem" } },
    "2":  { "$value": { "value": 0.5, "unit": "rem" } },
    "3":  { "$value": { "value": 0.75, "unit": "rem" } },
    "4":  { "$value": { "value": 1, "unit": "rem" } },
    "5":  { "$value": { "value": 1.5, "unit": "rem" } },
    "6":  { "$value": { "value": 2, "unit": "rem" } },
    "7":  { "$value": { "value": 3, "unit": "rem" } },
    "8":  { "$value": { "value": 4, "unit": "rem" } },
    "9":  { "$value": { "value": 6, "unit": "rem" } },
    "10": { "$value": { "value": 8, "unit": "rem" } },
    "gutter":  { "$value": { "value": 1, "unit": "rem" }, "$description": "Tier 2. Page side padding and grid gap.", "$extensions": { "co.gbbns.fluid": { "max": { "value": 2.5, "unit": "rem" }, "css": "clamp(1rem, 0.5rem + 2.5vi, 2.5rem)" } } },
    "section": { "$value": { "value": 3, "unit": "rem" }, "$description": "Tier 2. Vertical rhythm between sections.", "$extensions": { "co.gbbns.fluid": { "max": { "value": 6, "unit": "rem" }, "css": "clamp(3rem, 2rem + 5vi, 6rem)" } } }
  },

  "size": {
    "$type": "dimension",
    "1": { "$value": { "value": 1, "unit": "rem" } },
    "2": { "$value": { "value": 1.25, "unit": "rem" } },
    "3": { "$value": { "value": 1.5, "unit": "rem" } },
    "4": { "$value": { "value": 2, "unit": "rem" } },
    "5": { "$value": { "value": 2.75, "unit": "rem" } },
    "6": { "$value": { "value": 4, "unit": "rem" } },
    "prose":   { "$value": { "value": 44, "unit": "rem" }, "$description": "Prose container" },
    "wide":    { "$value": { "value": 72, "unit": "rem" }, "$description": "Wide container" },
    "sidebar": { "$value": { "value": 15, "unit": "rem" }, "$description": "Table of contents rail" },
    "target":     { "$value": "{size.5}", "$description": "Tier 2. 44px default hit area." },
    "target-min": { "$value": "{size.3}", "$description": "Tier 2. 24px WCAG 2.2 floor. Inline targets only." },
    "icon":       { "$value": "{size.2}", "$description": "Tier 2." }
  },

  "radius": {
    "$type": "dimension",
    "xs":   { "$value": { "value": 0.25, "unit": "rem" } },
    "sm":   { "$value": { "value": 0.5, "unit": "rem" } },
    "md":   { "$value": { "value": 0.75, "unit": "rem" } },
    "lg":   { "$value": { "value": 1.25, "unit": "rem" } },
    "xl":   { "$value": { "value": 2, "unit": "rem" } },
    "2xl":  { "$value": { "value": 3, "unit": "rem" } },
    "full": { "$value": { "value": 999, "unit": "px" } },
    "inline":  { "$value": "{radius.xs}",   "$description": "Tier 2. Inline code, link focus." },
    "control": { "$value": "{radius.md}",   "$description": "Tier 2. Inputs, items inside panels." },
    "card":    { "$value": "{radius.lg}",   "$description": "Tier 2. Cards, code blocks, images." },
    "panel":   { "$value": "{radius.xl}",   "$description": "Tier 2. Panels." },
    "section": { "$value": "{radius.2xl}",  "$description": "Tier 2. Hero and section surfaces." },
    "pill":    { "$value": "{radius.full}", "$description": "Tier 2. Buttons, tags, filters." }
  },

  "border": {
    "width": {
      "$type": "dimension",
      "1": { "$value": { "value": 1, "unit": "px" } },
      "2": { "$value": { "value": 2, "unit": "px" } },
      "3": { "$value": { "value": 3, "unit": "px" } }
    }
  },

  "shadow": {
    "$type": "shadow",
    "1": {
      "$value": { "color": { "colorSpace": "oklch", "components": [0.225, 0.016, 155], "alpha": 0.06 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 1, "unit": "px" }, "blur": { "value": 2, "unit": "px" }, "spread": { "value": 0, "unit": "px" } },
      "$extensions": { "mode": { "dark": { "color": { "colorSpace": "oklch", "components": [0, 0, 0], "alpha": 0.3 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 1, "unit": "px" }, "blur": { "value": 2, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } } }
    },
    "2": {
      "$value": { "color": { "colorSpace": "oklch", "components": [0.225, 0.016, 155], "alpha": 0.16 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 6, "unit": "px" }, "blur": { "value": 24, "unit": "px" }, "spread": { "value": -8, "unit": "px" } },
      "$extensions": { "mode": { "dark": { "color": { "colorSpace": "oklch", "components": [0, 0, 0], "alpha": 0.5 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 6, "unit": "px" }, "blur": { "value": 24, "unit": "px" }, "spread": { "value": -8, "unit": "px" } } } }
    }
  },

  "duration": {
    "$type": "duration",
    "$description": "All three collapse to 0.01ms under prefers-reduced-motion.",
    "1": { "$value": { "value": 120, "unit": "ms" } },
    "2": { "$value": { "value": 200, "unit": "ms" } },
    "3": { "$value": { "value": 320, "unit": "ms" } }
  },
  "ease": {
    "$type": "cubicBezier",
    "out":    { "$value": [0.2, 0.7, 0.2, 1] },
    "in-out": { "$value": [0.4, 0, 0.2, 1] }
  },
  "transition": {
    "$type": "transition",
    "$description": "Tier 2.",
    "quick":  { "$value": { "duration": "{duration.1}", "delay": { "value": 0, "unit": "ms" }, "timingFunction": "{ease.out}" } },
    "gentle": { "$value": { "duration": "{duration.2}", "delay": { "value": 0, "unit": "ms" }, "timingFunction": "{ease.out}" } }
  },

  "z": {
    "$type": "number",
    "base":      { "$value": 0 },
    "raised":    { "$value": 1 },
    "sticky":    { "$value": 10 },
    "header":    { "$value": 20 },
    "skip-link": { "$value": 100 }
  },

  "breakpoint": {
    "$type": "dimension",
    "$description": "Used as container query thresholds on the page container.",
    "sm": { "$value": { "value": 30, "unit": "rem" } },
    "md": { "$value": { "value": 48, "unit": "rem" } },
    "lg": { "$value": { "value": 64, "unit": "rem" } },
    "xl": { "$value": { "value": 80, "unit": "rem" } }
  },

  "focus-ring": {
    "$description": "Tier 3.",
    "width":  { "$type": "dimension", "$value": "{border.width.3}" },
    "offset": { "$type": "dimension", "$value": "{border.width.3}" },
    "color":  { "$type": "color", "$value": "{color.focus}" }
  },
  "link": {
    "$description": "Tier 3. Underline thickness is in em: 0.08 at rest, 0.16 on hover.",
    "color":       { "$type": "color", "$value": "{color.text.accent}" },
    "color-hover": { "$type": "color", "$value": "{color.text.primary}" },
    "underline-thickness":       { "$type": "number", "$value": 0.08 },
    "underline-thickness-hover": { "$type": "number", "$value": 0.16 }
  },
  "button": {
    "$description": "Tier 3.",
    "height":         { "$type": "dimension", "$value": "{size.target}" },
    "padding-inline": { "$type": "dimension", "$value": "{space.5}" },
    "radius":         { "$type": "dimension", "$value": "{radius.pill}" },
    "font-weight":    { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
    "primary": {
      "$type": "color",
      "bg":       { "$value": "{color.bg.accent}" },
      "bg-hover": { "$value": "{color.bg.accent-hover}" },
      "text":     { "$value": "{color.text.on-accent}" }
    },
    "secondary": {
      "$type": "color",
      "bg":       { "$value": "{color.bg.surface-1}" },
      "bg-hover": { "$value": "{color.bg.accent-soft}" },
      "text":     { "$value": "{color.text.primary}" }
    }
  },
  "tag": {
    "$description": "Tier 3.",
    "radius":         { "$type": "dimension", "$value": "{radius.pill}" },
    "padding-inline": { "$type": "dimension", "$value": "{space.3}" },
    "bg":           { "$type": "color", "$value": "{color.bg.surface-1}" },
    "text":         { "$type": "color", "$value": "{color.text.secondary}" },
    "accent-bg":    { "$type": "color", "$value": "{color.bg.accent-soft}" },
    "accent-text":  { "$type": "color", "$value": "{color.text.accent}" },
    "support-bg":   { "$type": "color", "$value": "{color.bg.support-soft}" },
    "support-text": { "$type": "color", "$value": "{color.text.support}" }
  },
  "card": {
    "$description": "Tier 3.",
    "bg":      { "$type": "color", "$value": "{color.bg.surface-2}" },
    "radius":  { "$type": "dimension", "$value": "{radius.card}" },
    "padding": { "$type": "dimension", "$value": "{space.5}" }
  },
  "panel": {
    "$description": "Tier 3. Padding is clamp(space.5, 4cqi, space.7) in CSS.",
    "bg":     { "$type": "color", "$value": "{color.bg.surface-1}" },
    "radius": { "$type": "dimension", "$value": "{radius.panel}" }
  },
  "input": {
    "$description": "Tier 3.",
    "height":       { "$type": "dimension", "$value": "{size.target}" },
    "radius":       { "$type": "dimension", "$value": "{radius.control}" },
    "bg":           { "$type": "color", "$value": "{color.bg.surface-3}" },
    "border":       { "$type": "color", "$value": "{color.border.strong}" },
    "border-hover": { "$type": "color", "$value": "{color.text.primary}" }
  },
  "code": {
    "$description": "Tier 3.",
    "bg":            { "$type": "color", "$value": "{color.bg.surface-1}" },
    "text":          { "$type": "color", "$value": "{color.text.primary}" },
    "comment":       { "$type": "color", "$value": "{color.text.muted}" },
    "keyword":       { "$type": "color", "$value": "{color.text.accent}" },
    "string":        { "$type": "color", "$value": "{color.text.support}" },
    "radius":        { "$type": "dimension", "$value": "{radius.card}" },
    "inline-radius": { "$type": "dimension", "$value": "{radius.inline}" }
  },
  "header": {
    "$description": "Tier 3.",
    "height": { "$type": "dimension", "$value": "{size.6}" }
  },
  "prose": {
    "$description": "Tier 3. Flow spacing is 1.25em in CSS.",
    "font-size":   { "$type": "dimension", "$value": "{font.size.prose}" },
    "line-height": { "$type": "number", "$value": "{line-height.prose}" },
    "measure":     { "$type": "number", "$value": "{measure.prose}" }
  }
}