{
 "name": "HeyGoal",
 "version": 1,
 "meta": {
  "source": "HeyGoal design system 0.6.0 — tokens.json (W3C 2025.10) in D:\\Claude Projects\\Workdeck\\design-system, built by tools/build-tokens.mjs"
 },
 "color": {
  "themes": [
   {
    "id": "dark",
    "name": "Dark"
   },
   {
    "id": "light",
    "name": "Light"
   }
  ],
  "tokens": [
   {
    "name": "neutral-50",
    "value": "#f2f2f0",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-100",
    "value": "#d4d4d1",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-200",
    "value": "#b7b7b3",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-300",
    "value": "#9a9a96",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-400",
    "value": "#848480",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-500",
    "value": "#6e6e6b",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-600",
    "value": "#4d4d4b",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-700",
    "value": "#2e2e2e",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-750",
    "value": "#232323",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-800",
    "value": "#1c1c1c",
    "usage": "Dark-theme neutral ramp step. Use the semantic tokens (bg, surface, text…) in UI, never the ramp directly."
   },
   {
    "name": "neutral-900",
    "value": "#141414",
    "usage": "Dark theme canvas (#141414 anchor)."
   },
   {
    "name": "warm-50",
    "value": "#fbfbf8",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-100",
    "value": "#f2f1ec",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-150",
    "value": "#efeee9",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-200",
    "value": "#dcdad2",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-300",
    "value": "#b2b0a8",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-400",
    "value": "#898780",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-500",
    "value": "#7a7872",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-600",
    "value": "#6b6a64",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-700",
    "value": "#4f4e4a",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-800",
    "value": "#343331",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "warm-900",
    "value": "#1b1b1a",
    "usage": "Light-theme warm neutral ramp step. Use the semantic tokens in UI, never the ramp directly."
   },
   {
    "name": "sage",
    "value": "#c4d2bf",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "mint",
    "value": "#b3dcc9",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "teal",
    "value": "#93c9c0",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "sky",
    "value": "#b6d8ee",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "blue",
    "value": "#a8c3e4",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "periwinkle",
    "value": "#b3bbeb",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "lilac",
    "value": "#bdb2d6",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "blush",
    "value": "#e7cbde",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "rose",
    "value": "#eaaebb",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "peach",
    "value": "#f2c4a5",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "clay",
    "value": "#d8a88c",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "taupe",
    "value": "#c6bbab",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "stone",
    "value": "#bdb9b0",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "olive",
    "value": "#cdd09b",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "butter",
    "value": "#eee0a2",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "lime",
    "value": "#c4e85f",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "amber",
    "value": "#efb44a",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "coral",
    "value": "#e96a4a",
    "usage": "Palette swatch: an accent choice in Settings and a project/client color. Always dark `ink` text on top. Name is stored in saved data — never rename."
   },
   {
    "name": "bone",
    "value": "#e9e7df",
    "usage": "Clock card only. Not in PALETTE."
   },
   {
    "name": "green-400",
    "value": "#5fe09a",
    "usage": "Status green ramp: feeds good, good-text and live."
   },
   {
    "name": "green-500",
    "value": "#3ecf7e",
    "usage": "Status green ramp: feeds good, good-text and live."
   },
   {
    "name": "green-600",
    "value": "#1f9d5a",
    "usage": "Status green ramp: feeds good, good-text and live."
   },
   {
    "name": "brand-blue",
    "value": "#0080ff",
    "usage": "The check in the final HeyGoal logo."
   },
   {
    "name": "brand-navy",
    "value": "#080044",
    "usage": "The letters of the final HeyGoal logo on light."
   },
   {
    "name": "ink",
    "value": "#191919",
    "usage": "Text and icons on any palette fill, both themes."
   },
   {
    "name": "ink-soft",
    "value": "#000000b5",
    "usage": "Secondary text on palette fills. 0.71 alpha: the lowest that passes 4.5:1 on all 19 swatches (1.19.0: .56)."
   },
   {
    "name": "paper",
    "value": "#ffffff",
    "usage": "Paper white: invoice sheet, report, calendar print."
   },
   {
    "name": "paper-ink",
    "value": "#161616",
    "usage": "Text on paper."
   },
   {
    "name": "paper-muted",
    "value": "#6b6b66",
    "usage": "Labels on paper."
   },
   {
    "name": "paper-line",
    "value": "#e4e3dc",
    "usage": "Rules on paper."
   },
   {
    "name": "paper-line-strong",
    "value": "#c9c8c2",
    "usage": "Grid lines on the printed calendar, where --paper-line is too light to see."
   },
   {
    "name": "paper-soft",
    "value": "#f2f1ec",
    "usage": "Tinted cells on paper."
   },
   {
    "name": "paper-good",
    "value": "#2f8f5b",
    "usage": "Paid stamp."
   },
   {
    "name": "paper-critical",
    "value": "#b02c16",
    "usage": "Overdue on paper."
   },
   {
    "name": "bg",
    "value": {
     "dark": "{neutral-900}",
     "light": "{warm-150}"
    },
    "usage": "Page canvas. Text on it: `text`, `muted`."
   },
   {
    "name": "surface",
    "value": {
     "dark": "{neutral-800}",
     "light": "{warm-50}"
    },
    "usage": "Cards, panels, inputs. Text on it: `text` (AA), `muted` (4.5:1)."
   },
   {
    "name": "surface-2",
    "value": {
     "dark": "{neutral-750}",
     "light": "{warm-100}"
    },
    "usage": "A second surface: hovered rows, nested wells."
   },
   {
    "name": "line",
    "value": {
     "dark": "{neutral-700}",
     "light": "{warm-200}"
    },
    "usage": "Dividers and card edges. Decorative."
   },
   {
    "name": "line-strong",
    "value": {
     "dark": "{neutral-500}",
     "light": "{warm-400}"
    },
    "usage": "Edges that identify a control: inputs, checks. 3:1 on every surface."
   },
   {
    "name": "faint",
    "value": {
     "dark": "{neutral-500}",
     "light": "{warm-400}"
    },
    "usage": "Non-text marks: grips, pins, empty-state glyphs. 3:1; never text."
   },
   {
    "name": "text",
    "value": {
     "dark": "{neutral-50}",
     "light": "{warm-900}"
    },
    "usage": "Primary text on `bg`, `surface` and `surface-2`."
   },
   {
    "name": "muted",
    "value": {
     "dark": "{neutral-300}",
     "light": "{warm-600}"
    },
    "usage": "Secondary text. 4.5:1."
   },
   {
    "name": "brand-ink",
    "value": {
     "dark": "{neutral-50}",
     "light": "{brand-navy}"
    },
    "usage": "The logo letters."
   },
   {
    "name": "accent-text",
    "value": {
     "dark": "#c4e85f",
     "light": "#5a6c28"
    },
    "usage": "The accent as text. Lightness raised to at least 0.72 (OKLCH), which holds 4.5:1 for any color."
   },
   {
    "name": "accent-ring",
    "value": {
     "dark": "#c4e85f",
     "light": "#748b36"
    },
    "usage": "Focus ring: 2 px outline, 2 px offset. 3:1 for any color."
   },
   {
    "name": "on-accent",
    "value": {
     "dark": "#191919",
     "light": "#191919"
    },
    "usage": "Text on an accent fill: --ink on every palette color; off-white on a dark one."
   },
   {
    "name": "good",
    "value": {
     "dark": "{green-500}",
     "light": "{green-600}"
    },
    "usage": ""
   },
   {
    "name": "good-text",
    "value": {
     "dark": "{green-400}",
     "light": "#166e3f"
    },
    "usage": "70% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --good-soft tint."
   },
   {
    "name": "warning",
    "value": {
     "dark": "{amber}",
     "light": "{amber}"
    },
    "usage": ""
   },
   {
    "name": "warning-text",
    "value": {
     "dark": "{amber}",
     "light": "#7f5f27"
    },
    "usage": "53% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --warning-soft tint."
   },
   {
    "name": "critical",
    "value": {
     "dark": "{coral}",
     "light": "{coral}"
    },
    "usage": ""
   },
   {
    "name": "critical-text",
    "value": {
     "dark": "#eb7a5e",
     "light": "#9c4732"
    },
    "usage": "89% coral with white: passes 4.5:1 on dark surfaces and on --critical-soft (raw coral reads 4.1:1 on its tint)."
   },
   {
    "name": "info",
    "value": {
     "dark": "{sky}",
     "light": "{sky}"
    },
    "usage": ""
   },
   {
    "name": "info-text",
    "value": {
     "dark": "{sky}",
     "light": "#596a75"
    },
    "usage": "49% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --info-soft tint."
   },
   {
    "name": "accent",
    "value": "{lime}",
    "usage": "The user accent. Settings writes var(--<swatch>) on <html>; lime by default. Default swatch: lime. Derived per theme: `accent-text`, `accent-ring`, `on-accent`."
   },
   {
    "name": "accent-soft",
    "value": "#c4e85f29",
    "usage": "Accent fills: selected and arranged states."
   },
   {
    "name": "accent-halo",
    "value": "#c4e85f38",
    "usage": "The 3 px focus halo on inputs. Decoration only; --accent-ring carries the 3:1."
   },
   {
    "name": "brand",
    "value": "{brand-blue}",
    "usage": "Top bar tint, front door, favicon, PDF stamp. Never a button, never a link, never the accent."
   },
   {
    "name": "scrim",
    "value": "#00000080",
    "usage": "Behind dialogs."
   },
   {
    "name": "glass-line",
    "value": {
     "dark": "{line}",
     "light": "{line}"
    },
    "usage": ""
   },
   {
    "name": "glass-bg",
    "value": {
     "dark": "#1c1c1c99",
     "light": "#fbfbf899"
    },
    "usage": "Floating glass (timer). The top bar uses its own brand-tinted --topbar-bg on the same blur and line."
   },
   {
    "name": "good-soft",
    "value": {
     "dark": "#3ecf7e24",
     "light": "#1f9d5a24"
    },
    "usage": "Tinted background. Paid, done, synced."
   },
   {
    "name": "warning-soft",
    "value": "#efb44a24",
    "usage": "Tinted background. Paused, offline, upsell."
   },
   {
    "name": "critical-soft",
    "value": "#e96a4a24",
    "usage": "Tinted background. Error, overdue, danger."
   },
   {
    "name": "info-soft",
    "value": "#b6d8ee24",
    "usage": "Tinted background. Neutral notices."
   },
   {
    "name": "live",
    "value": {
     "dark": "{good}",
     "light": "{good}"
    },
    "usage": "The live dot: running timer, synced."
   },
   {
    "name": "live-text",
    "value": {
     "dark": "{good-text}",
     "light": "{good-text}"
    },
    "usage": ""
   },
   {
    "name": "good-soft-hover",
    "value": {
     "dark": "#3ecf7e38",
     "light": "#1f9d5a38"
    },
    "usage": "The synced account card on hover."
   },
   {
    "name": "good-edge",
    "value": {
     "dark": "#3ecf7e66",
     "light": "#1f9d5a66"
    },
    "usage": "The edge of a good-state surface: the synced account card."
   },
   {
    "name": "warning-edge",
    "value": "#efb44a66",
    "usage": "The edge of a warning-state surface: the offline account card."
   },
   {
    "name": "critical-edge",
    "value": "#e96a4a66",
    "usage": "The edge of a critical-state surface, and the danger button (45% in 1.19.0)."
   },
   {
    "name": "on-color-hover",
    "value": "#00000014",
    "usage": "A hover tint on a pastel fill: icon buttons on cards."
   },
   {
    "name": "on-color-fill",
    "value": "#0000001a",
    "usage": "A resting control on a pastel fill: the edit tools, the status select (.09 in 1.19.0)."
   },
   {
    "name": "on-color-fill-hover",
    "value": "#0000002e",
    "usage": "The same control on hover."
   },
   {
    "name": "on-color-edge",
    "value": "#00000024",
    "usage": "A hairline edge on a color: the color pill, the client pill (.18 in 1.19.0)."
   },
   {
    "name": "on-color-track",
    "value": "#0000001f",
    "usage": "A meter track on a pastel card."
   },
   {
    "name": "on-color-line",
    "value": "#0000001f",
    "usage": "A divider on a pastel card: rows, the calendar grid, the At a glance list (.1 and .12 in 1.19.0)."
   },
   {
    "name": "on-color-edge-strong",
    "value": "#00000059",
    "usage": "The edge of a control on a pastel card, such as a task check: 3:1 on every swatch."
   },
   {
    "name": "on-color-surface",
    "value": "#ffffff57",
    "usage": "A surface inside a pastel card: At a glance cards, shortcuts, calendar chips (.28 to .4 in 1.19.0)."
   },
   {
    "name": "on-color-surface-strong",
    "value": "#ffffff8c",
    "usage": "An input on a pastel card, in edit mode."
   },
   {
    "name": "critical-on-color",
    "value": "#8a1f10",
    "usage": "Overdue text on a pastel card."
   },
   {
    "name": "on-ink",
    "value": "{neutral-50}",
    "usage": "Text on an ink fill: a primary button or the today mark on a pastel card."
   },
   {
    "name": "image-backdrop",
    "value": "#111111",
    "usage": "Behind a photo: the lightbox and image thumbnails."
   },
   {
    "name": "image-scrim",
    "value": "#0000008c",
    "usage": "Under tools that sit on a photo."
   },
   {
    "name": "on-image",
    "value": "#ffffff",
    "usage": "Icons on --image-scrim."
   },
   {
    "name": "accent-dash",
    "value": {
     "dark": "#889e4b",
     "light": "#cee28d"
    },
    "usage": "The dashed frame of arrange mode."
   },
   {
    "name": "zone-invoices",
    "value": "{amber}",
    "usage": "Billing zone. Fixed; never a status."
   },
   {
    "name": "zone-project",
    "value": "{periwinkle}",
    "usage": "Billing zone. Fixed; never a status."
   },
   {
    "name": "zone-expenses",
    "value": "{peach}",
    "usage": "Billing zone. Fixed; never a status."
   },
   {
    "name": "zone-payments",
    "value": "{mint}",
    "usage": "Billing zone. Fixed; never a status."
   },
   {
    "name": "zone-neutral",
    "value": "{stone}",
    "usage": "Billing zone. Fixed; never a status."
   },
   {
    "name": "priority-high",
    "value": {
     "dark": "{text}",
     "light": "{text}"
    },
    "usage": "Priority is an order, not a status: four strengths of one neutral, always with the word."
   },
   {
    "name": "priority-medium",
    "value": {
     "dark": "{muted}",
     "light": "{muted}"
    },
    "usage": ""
   },
   {
    "name": "priority-low",
    "value": {
     "dark": "{faint}",
     "light": "{faint}"
    },
    "usage": ""
   },
   {
    "name": "priority-backburner",
    "value": {
     "dark": "{faint}",
     "light": "{faint}"
    },
    "usage": "Drawn as a hollow ring."
   },
   {
    "name": "topbar-tint",
    "value": {
     "dark": "#121f2c",
     "light": "#d7e3eb"
    },
    "usage": "10% `brand` mixed into `bg`: the glass top bar tint."
   },
   {
    "name": "topbar-bg",
    "value": {
     "dark": "#121f2c59",
     "light": "#d7e3eb59"
    },
    "usage": "Over a --glass-blur backdrop."
   },
   {
    "name": "scrim-drawer",
    "value": "#00000073",
    "usage": ""
   },
   {
    "name": "muted-2",
    "value": {
     "dark": "{faint}",
     "light": "{faint}"
    },
    "usage": "Deprecated. Text uses move to --muted; marks and edges to --faint / --line-strong."
   },
   {
    "name": "logo-ink",
    "value": {
     "dark": "{brand-ink}",
     "light": "{brand-ink}"
    },
    "usage": "1.19.0 alias of `brand-ink`."
   },
   {
    "name": "logo-blue",
    "value": "{brand}",
    "usage": "1.19.0 alias of `brand`."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Bricolage Grotesque",
    "file": "fonts/bricolage-grotesque-latin.woff2",
    "weight": "200 800",
    "style": "normal"
   },
   {
    "family": "Inter",
    "file": "fonts/inter-latin.woff2",
    "weight": "100 900",
    "style": "normal"
   }
  ],
  "families": {
   "display": "\"Bricolage Grotesque\", system-ui, sans-serif",
   "ui": "Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
   "pdf": "Helvetica, Arial, sans-serif"
  },
  "groups": [
   {
    "name": "Display",
    "family": "display",
    "styles": [
     {
      "name": "display",
      "fontSize": "50px",
      "lineHeight": 1.04,
      "fontWeight": 800,
      "letterSpacing": "-0.035em",
      "sample": "Good morning, Gabriel",
      "usage": "Page titles and the Home greeting. Bricolage 800, −.035em. Fluid clamp(32px, 4.4vw, 50px) in the app.",
      "family": "display",
      "opticalSize": 96
     },
     {
      "name": "title",
      "fontSize": "24px",
      "lineHeight": 1.1,
      "fontWeight": 800,
      "letterSpacing": "-0.025em",
      "sample": "Projects",
      "usage": "Card and dialog titles.",
      "family": "display"
     },
     {
      "name": "heading",
      "fontSize": "18px",
      "lineHeight": 1.3,
      "fontWeight": 700,
      "letterSpacing": "-0.01em",
      "sample": "Due soon",
      "usage": "Section heads inside a page or card.",
      "family": "display"
     },
     {
      "name": "number",
      "fontSize": "46px",
      "lineHeight": 1.05,
      "fontWeight": 800,
      "letterSpacing": "-0.04em",
      "sample": "US$12,480",
      "usage": "The big number on Home tiles: always tabular, sizes to its card 28–46 px (`text-number-fit`).",
      "family": "display"
     }
    ]
   },
   {
    "name": "Interface",
    "family": "ui",
    "styles": [
     {
      "name": "body",
      "fontSize": "15px",
      "lineHeight": 1.5,
      "fontWeight": 400,
      "letterSpacing": "0",
      "sample": "Saved in this browser only, until you sign in.",
      "usage": "Running text and list rows.",
      "family": "ui"
     },
     {
      "name": "button",
      "fontSize": "14px",
      "lineHeight": 1.3,
      "fontWeight": 600,
      "letterSpacing": "0",
      "sample": "Add a client",
      "usage": "Buttons and segment labels.",
      "family": "ui"
     },
     {
      "name": "label",
      "fontSize": "14px",
      "lineHeight": 1.3,
      "fontWeight": 500,
      "letterSpacing": "0",
      "sample": "Client name",
      "usage": "Field labels, menu items, pills.",
      "family": "ui"
     },
     {
      "name": "note",
      "fontSize": "13px",
      "lineHeight": 1.45,
      "fontWeight": 400,
      "letterSpacing": "0",
      "sample": "Last synced 3:42 PM",
      "usage": "Secondary lines, help-tip text, meta.",
      "family": "ui"
     },
     {
      "name": "small",
      "fontSize": "12px",
      "lineHeight": 1.4,
      "fontWeight": 400,
      "letterSpacing": "0",
      "sample": "day 4 of 12",
      "usage": "Captions and dense meta.",
      "family": "ui"
     },
     {
      "name": "kicker",
      "fontSize": "11px",
      "lineHeight": 1.3,
      "fontWeight": 800,
      "letterSpacing": "0.14em",
      "sample": "AT A GLANCE",
      "usage": "Kickers above a section — the only uppercase in the UI. Uppercase, +.14em.",
      "family": "ui"
     },
     {
      "name": "micro",
      "fontSize": "11px",
      "lineHeight": 1.3,
      "fontWeight": 600,
      "letterSpacing": "0",
      "sample": "3 of 5 done",
      "usage": "Counts and the tiniest labels. Nothing goes below 11 px.",
      "family": "ui"
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-4",
    "value": "4px",
    "usage": "Icon-to-label gap, tight inline gaps."
   },
   {
    "name": "space-8",
    "value": "8px",
    "usage": "Gap inside a control group, chip padding."
   },
   {
    "name": "space-12",
    "value": "12px",
    "usage": "Gap between form fields in an add row."
   },
   {
    "name": "space-16",
    "value": "16px",
    "usage": "Card padding (small), list row padding."
   },
   {
    "name": "space-20",
    "value": "20px",
    "usage": "Panel padding."
   },
   {
    "name": "space-24",
    "value": "24px",
    "usage": "Card padding, gap between Home cards."
   },
   {
    "name": "space-32",
    "value": "32px",
    "usage": "Gap between page sections."
   },
   {
    "name": "space-40",
    "value": "40px",
    "usage": "Large section breaks."
   },
   {
    "name": "space-56",
    "value": "56px",
    "usage": "Maximum page padding (`page-pad-max`)."
   },
   {
    "name": "page-pad",
    "value": "56px",
    "usage": "Page side padding: clamp(18px, 4vw, 56px) in the app; 56 at desktop."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-chip",
    "value": "8px",
    "usage": "Chips, filter pills, checkboxes, calendar chips and bars."
   },
   {
    "name": "radius-control",
    "value": "10px",
    "usage": "Buttons, inputs, icon buttons, menu rows and the nav highlight."
   },
   {
    "name": "radius-inner",
    "value": "12px",
    "usage": "A surface nested in a card or dialog: overview cards, stats, quick-access cards, previews, thumbnails; and tooltips."
   },
   {
    "name": "radius-card",
    "value": "16px",
    "usage": "Panels, tiles, project cards, lists and other top-level cards."
   },
   {
    "name": "radius-floating",
    "value": "24px",
    "usage": "Dialogs, popovers, the toast, the account menu, the floating timer."
   },
   {
    "name": "radius-round",
    "value": "999px",
    "usage": "Avatars and status pills."
   },
   {
    "name": "radius-8",
    "value": "8px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "radius-10",
    "value": "10px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "radius-12",
    "value": "12px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "radius-16",
    "value": "16px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "radius-24",
    "value": "24px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "radius-full",
    "value": "999px",
    "usage": "Radius scale step. Use the role tokens (radius-chip … radius-round) in UI."
   },
   {
    "name": "r",
    "value": "16px",
    "usage": "1.19.0 alias of `radius-card` (was 18). Kept two minor versions."
   }
  ]
 },
 "shadow": {
  "note": "Flat by default. Only floating layers cast a shadow.",
  "tokens": [
   {
    "name": "elevation-0",
    "value": "none",
    "usage": "Flat: cards, panels, tiles. Shadows never decorate containers."
   },
   {
    "name": "elevation-1",
    "value": "0 12px 34px rgba(0,0,0,.22)",
    "usage": "Raised: popover, toast, floating timer (timer also glass)."
   },
   {
    "name": "elevation-2",
    "value": "0 30px 70px rgba(0,0,0,.45)",
    "usage": "Floating: dialogs, always with `scrim` behind."
   },
   {
    "name": "shadow-drag",
    "value": "0 24px 50px rgba(0,0,0,.4)",
    "usage": "A tile or menu item held while dragging."
   },
   {
    "name": "shadow-drawer",
    "value": "16px 0 40px rgba(0,0,0,.35)",
    "usage": "The phone drawer."
   },
   {
    "name": "shadow-paper",
    "value": "0 24px 60px rgba(0,0,0,.18)",
    "usage": "The invoice sheet on screen: paper over the app. Print drops it."
   }
  ]
 },
 "size": {
  "note": "Control, shell and icon sizes.",
  "tokens": [
   {
    "name": "control-height",
    "value": "44px",
    "usage": "Every add-form box: input, select, date, button, color pill."
   },
   {
    "name": "control-height-compact",
    "value": "36px",
    "usage": "Compact buttons in dense rows."
   },
   {
    "name": "icon-button-size",
    "value": "40px",
    "usage": "40 px icon buttons; reach 44 px touch area under pointer: coarse."
   },
   {
    "name": "topbar-height",
    "value": "56px",
    "usage": "The glass top bar."
   },
   {
    "name": "topbar-line",
    "value": "1.25px",
    "usage": "Bottom divider, drawn as an inset shadow so the fraction survives 125–200% display scale."
   },
   {
    "name": "sidebar-width",
    "value": "248px",
    "usage": "Full sidebar."
   },
   {
    "name": "sidebar-width-rail",
    "value": "76px",
    "usage": "Collapsed icon rail."
   },
   {
    "name": "nav-indicator-width",
    "value": "4.5px",
    "usage": ""
   },
   {
    "name": "main-max-width",
    "value": "1240px",
    "usage": "Main content column max width."
   },
   {
    "name": "page-pad-min",
    "value": "18px",
    "usage": "Page padding floor at phone width."
   },
   {
    "name": "page-pad-max",
    "value": "56px",
    "usage": "Page padding ceiling."
   },
   {
    "name": "breakpoint-phone",
    "value": "860px",
    "usage": "Reference only: @media cannot read custom properties. Phone layout at ≤ 860 px."
   },
   {
    "name": "icon-size-sm",
    "value": "16px",
    "usage": "In text and pills."
   },
   {
    "name": "icon-size",
    "value": "20px",
    "usage": "Menu and controls."
   },
   {
    "name": "icon-size-lg",
    "value": "24px",
    "usage": "Phone bar."
   },
   {
    "name": "logo-height-bar",
    "value": "24px",
    "usage": "Logo on the desktop top bar."
   },
   {
    "name": "logo-height-phone",
    "value": "20px",
    "usage": "Logo on the phone bar."
   },
   {
    "name": "logo-height-door",
    "value": "52px",
    "usage": "Logo on the front door (sign-in)."
   },
   {
    "name": "favicon-size",
    "value": "16px",
    "usage": "Favicon."
   },
   {
    "name": "avatar-size",
    "value": "36px",
    "usage": "The account card and lists."
   },
   {
    "name": "avatar-size-sm",
    "value": "32px",
    "usage": "The phone bar."
   },
   {
    "name": "avatar-size-xl",
    "value": "112px",
    "usage": "The Account page."
   },
   {
    "name": "border-width",
    "value": "1px",
    "usage": "Every hairline (`line`)."
   },
   {
    "name": "border-width-strong",
    "value": "1.5px",
    "usage": "Task check, help bubble, client pill."
   },
   {
    "name": "glass-blur",
    "value": "16px",
    "usage": "Backdrop blur on the top bar and floating timer."
   },
   {
    "name": "scrim-blur",
    "value": "2px",
    "usage": "Backdrop blur behind dialogs."
   },
   {
    "name": "text-number-min",
    "value": "28px",
    "usage": "The smallest a big number gets in a narrow card."
   }
  ]
 },
 "duration": {
  "note": "Motion timings. Under Reduced, movement durations go to 0 and page changes crossfade (.12s out, .18s in).",
  "tokens": [
   {
    "name": "duration-fast",
    "value": "0.16s",
    "usage": "Color, opacity and press (1.19.0 --t-fast)."
   },
   {
    "name": "duration-in",
    "value": "0.26s",
    "usage": "The way in: hover, enter, page-out (1.19.0 --t)."
   },
   {
    "name": "duration-out",
    "value": "0.4s",
    "usage": "The way back: hover out, toast (1.19.0 --t-slow)."
   },
   {
    "name": "duration-page",
    "value": "0.36s",
    "usage": "Page blocks rising in."
   },
   {
    "name": "duration-wipe",
    "value": "0.42s",
    "usage": "Menu highlight wipe and indicator fade."
   },
   {
    "name": "duration-crossfade-out",
    "value": "0.12s",
    "usage": "Reduced motion: old page fades."
   },
   {
    "name": "duration-crossfade-in",
    "value": "0.18s",
    "usage": "Reduced motion: new page and menu highlight fade."
   },
   {
    "name": "duration-drawer",
    "value": "0.25s",
    "usage": "Phone drawer and scrim."
   },
   {
    "name": "duration-collapse",
    "value": "0.2s",
    "usage": "Sidebar and timer-dock column change."
   },
   {
    "name": "duration-theme",
    "value": "0.3s",
    "usage": "Theme switch color fade; Billing zone flash."
   },
   {
    "name": "duration-page-out",
    "value": "0.26s",
    "usage": "The old page fading out on a page change."
   },
   {
    "name": "duration-intro",
    "value": "0.55s",
    "usage": "The Home intro: each tile rising in."
   },
   {
    "name": "duration-door",
    "value": "0.9s",
    "usage": "The front door: the wordmark scaling and fading in."
   },
   {
    "name": "duration-door-rise",
    "value": "0.65s",
    "usage": "The front door: the wordmark moving up for the sign-in card."
   },
   {
    "name": "duration-door-card",
    "value": "0.5s",
    "usage": "The front door: the sign-in card coming in."
   },
   {
    "name": "duration-pulse",
    "value": "1.6s",
    "usage": "One cycle of the live dot pulse."
   },
   {
    "name": "duration-ring",
    "value": "2.4s",
    "usage": "One cycle of the synced dot ring."
   },
   {
    "name": "duration-sync-pulse",
    "value": "1.1s",
    "usage": "The account card dot while it syncs (1.19.0: ease-in-out, now --ease-fade)."
   },
   {
    "name": "duration-flash",
    "value": "0.3s",
    "usage": "A Billing zone flashing when its jump pill is used."
   },
   {
    "name": "delay-door-card",
    "value": "0.15s",
    "usage": "The sign-in card waits this long after the wordmark starts to move."
   }
  ]
 },
 "easing": {
  "note": "Every curve kept from 1.19.0.",
  "tokens": [
   {
    "name": "ease-out",
    "value": "cubic-bezier(0,0,0,1)",
    "usage": "The HeyGoal curve: hovers, entrances, presses. Default for everything."
   },
   {
    "name": "ease-in",
    "value": "cubic-bezier(.4,0,1,1)",
    "usage": "Exits only, over `duration-fast`."
   },
   {
    "name": "ease-soft",
    "value": "cubic-bezier(.2,.7,.2,1)",
    "usage": "The Home intro and the front door."
   },
   {
    "name": "ease-fade",
    "value": "ease",
    "usage": "Plain fades."
   }
  ]
 },
 "zIndex": {
  "tokens": [
   {
    "name": "z-raised",
    "value": "2",
    "usage": "A lifted card over its siblings."
   },
   {
    "name": "z-local",
    "value": "5",
    "usage": "Local stacking inside a component."
   },
   {
    "name": "z-tip",
    "value": "20",
    "usage": "The ? help tip."
   },
   {
    "name": "z-shell",
    "value": "45",
    "usage": "Top bar and sidebar."
   },
   {
    "name": "z-floating",
    "value": "50",
    "usage": "Floating timer."
   },
   {
    "name": "z-gate",
    "value": "55",
    "usage": "Front door (sign-in)."
   },
   {
    "name": "z-scrim",
    "value": "55",
    "usage": "Dialog scrim."
   },
   {
    "name": "z-drawer",
    "value": "60",
    "usage": "Phone drawer."
   },
   {
    "name": "z-toast",
    "value": "60",
    "usage": "Toast."
   },
   {
    "name": "z-popover",
    "value": "70",
    "usage": "Popovers and the account menu."
   }
  ]
 },
 "opacity": {
  "tokens": [
   {
    "name": "opacity-disabled",
    "value": "0.5",
    "usage": "A control that cannot be used right now, such as a button while a PDF builds."
   },
   {
    "name": "opacity-hover",
    "value": "0.8",
    "usage": "The logo on hover."
   },
   {
    "name": "opacity-placeholder",
    "value": "0.28",
    "usage": "The empty slot a Home card leaves while it is dragged."
   },
   {
    "name": "glass-saturate",
    "value": "1.4",
    "usage": "Backdrop saturate on the floating timer glass."
   }
  ]
 }
}