{
  "$schema": "https://design-system-three-gold.vercel.app/tokens.schema.json",
  "name": "Varick Agents",
  "version": "1.0.0",
  "color": {
    "core": {
      "brand-navy": {
        "hex": "#002870",
        "name": "Navy",
        "use": "The brand. Headings, wordmark, table header fills, the first chart series."
      },
      "foreground": {
        "hex": "#111111",
        "name": "Ink",
        "use": "Primary text and values on web. Near-black, never pure black."
      },
      "background": {
        "hex": "#FFFFFF",
        "name": "White",
        "use": "The canvas. Cards, tooltips, page ground."
      },
      "brand": {
        "hex": "#3B7CF6",
        "name": "Accent blue",
        "use": "Web and product UI only. Interactive states, second chart series."
      }
    },
    "web": {
      "brand-wash": {
        "hex": "#E8F1FE",
        "name": "Accent wash",
        "use": "Tinted fills behind accent content, selection background."
      },
      "accent-foreground": {
        "hex": "#2F6BE0",
        "name": "Accent text",
        "use": "Accent-coloured text where #3B7CF6 fails contrast."
      },
      "muted": {
        "hex": "#F6F6F6",
        "name": "Muted",
        "use": "Secondary surfaces, inert fills."
      },
      "page": {
        "hex": "#FBFBFB",
        "name": "Page",
        "use": "The ground behind cards. One step off white."
      },
      "muted-foreground": {
        "hex": "#757575",
        "name": "Muted text",
        "use": "Axis ticks, sub-labels, captions, notes."
      },
      "fg-low": {
        "hex": "#B1B1B1",
        "name": "Low text",
        "use": "The quietest legible text. Placeholders, disabled."
      },
      "border": {
        "hex": "#EBEBEB",
        "name": "Hairline",
        "use": "Every border and grid dash. The structural line of the system."
      },
      "hairline-hover": {
        "hex": "#DEDEDE",
        "name": "Hairline strong",
        "use": "Border on hover, or where a hairline needs to assert itself."
      },
      "destructive": {
        "hex": "#D55F5A",
        "name": "Destructive",
        "use": "Errors and destructive actions. The only warm hue in the system."
      },
      "fill-soft": {
        "hex": "#FDFDFD",
        "name": "Fill soft",
        "use": "The quietest surface. One step off white, used inside component cards."
      },
      "accent-sep": {
        "hex": "#C6DBFC",
        "name": "Accent separator",
        "use": "Hairline inside an accent-tinted surface, where the standard border would vanish."
      }
    },
    "chart": {
      "chart-1": {
        "hex": "#002870",
        "name": "Chart 1",
        "use": "Primary navy. First and most important series, ridges."
      },
      "chart-2": {
        "hex": "#3B7CF6",
        "name": "Chart 2",
        "use": "Accent blue. Second series."
      },
      "chart-3": {
        "hex": "#8B95A1",
        "name": "Chart 3",
        "use": "Mid grey. Third series, or a de-emphasised one."
      },
      "chart-4": {
        "hex": "#C4CBD4",
        "name": "Chart 4",
        "use": "Light grey. Fourth series."
      },
      "chart-5": {
        "hex": "#E4E8ED",
        "name": "Chart 5",
        "use": "Lightest grey. Fifth series, or the \"other\" bucket."
      }
    },
    "document": {
      "NAVY": {
        "hex": "#002870",
        "name": "Navy",
        "use": "Headings, title, labels, table header fill, bullets."
      },
      "NAVY_MID": {
        "hex": "#3E6FA8",
        "name": "Navy mid",
        "use": "Indicative gantt bars. Nothing else, ever."
      },
      "INK": {
        "hex": "#1A1A1A",
        "name": "Ink",
        "use": "Body text."
      },
      "INK_SOFT": {
        "hex": "#3F3F3F",
        "name": "Ink soft",
        "use": "Secondary text inside tables."
      },
      "GREY": {
        "hex": "#8A8A8A",
        "name": "Grey",
        "use": "Meta labels, notes, footer."
      },
      "RULE": {
        "hex": "#D9D9D9",
        "name": "Rule",
        "use": "Table strokes."
      },
      "HAIRLINE": {
        "hex": "#E7E7E7",
        "name": "Hairline",
        "use": "Dividers inside meta rows and signature fields."
      },
      "BAND": {
        "hex": "#F3F6FB",
        "name": "Band",
        "use": "Band and callout fill."
      },
      "LABEL_BG": {
        "hex": "#FAFAFA",
        "name": "Label bg",
        "use": "The deflist label column."
      },
      "WHITE": {
        "hex": "#FFFFFF",
        "name": "White",
        "use": "Page."
      }
    },
    "semantic": {
      "success": {
        "hex": "#3E7C4A",
        "name": "Success",
        "use": "Completed runs, healthy status, positive delta."
      },
      "warn": {
        "hex": "#B64D05",
        "name": "Warning",
        "use": "Needs attention, degraded, approaching a limit. Text colour; its soft fill keeps the brighter #F97316 at 12%."
      },
      "danger": {
        "hex": "#C93933",
        "name": "Danger",
        "use": "Failed runs and destructive actions. Same value as --destructive. Text colour; its soft fill keeps the brighter #D55F5A at 10%."
      },
      "teal": {
        "hex": "#0B7C84",
        "name": "Teal",
        "use": "Informational and in-progress states, where blue would read as interactive."
      }
    },
    "fills": {
      "fill": {
        "hex": "#F6F6F6",
        "name": "Fill",
        "use": "Inert surfaces inside a card."
      },
      "fill-soft": {
        "hex": "#FDFDFD",
        "name": "Fill soft",
        "use": "The quietest surface. One step off white."
      },
      "hairline-soft": {
        "hex": "#F0F0F0",
        "name": "Hairline soft",
        "use": "A divider inside an already-bordered container."
      }
    }
  },
  "paletteRule": {
    "question": "When is accent blue allowed?",
    "allowed": [
      "Web and product UI: links, focus rings, active states, selected rows.",
      "Charts, as the second series (`--chart-2`).",
      "Marketing imagery and social templates, as a tint."
    ],
    "forbidden": [
      "Any document the company issues: memo, proposal, report, invoice, engagement letter.",
      "Print of any kind.",
      "Deck body pages. Navy carries the hierarchy there."
    ],
    "why": "Documents outlive the app. A memo from 2024 and an invoice from today have to read as one company, so the document palette is deliberately narrower and frozen. The web can move faster."
  },
  "type": {
    "faces": [
      {
        "name": "Season Mix",
        "cssVar": "--font-season",
        "stack": "var(--font-season), ui-serif, Georgia, \"Times New Roman\", serif",
        "weights": "400 only",
        "role": "Editorial serif. Display headlines and the brand wordmark.",
        "licence": "TRIAL licence in the repo. Buy before any paid placement or print run."
      },
      {
        "name": "Helvetica Neue",
        "cssVar": "--font-sans",
        "stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "weights": "400, 500",
        "role": "The interface face and the document face. One family for both.",
        "licence": "System font on macOS and iOS. Falls back to Helvetica then Arial elsewhere; that is accepted, do not substitute a different family to \"fix\" it."
      },
      {
        "name": "Menlo",
        "cssVar": "--font-mono",
        "stack": "'Menlo', ui-monospace, monospace",
        "weights": "400",
        "role": "Code, tokens, hex values, terminal output.",
        "licence": "System font. Nothing to buy and nothing to load."
      }
    ],
    "webScale": [
      {
        "role": "Display",
        "size": "64px / 1.02",
        "weight": "400",
        "tracking": "-0.03em",
        "notes": "Section landing headline. Season Mix, scoped to the home page and /brand."
      },
      {
        "role": "H1",
        "size": "48px / 1.06",
        "weight": "400",
        "tracking": "-0.025em",
        "notes": "Page title. Every page has exactly one."
      },
      {
        "role": "H2",
        "size": "32px / 1.15",
        "weight": "400",
        "tracking": "-0.02em",
        "notes": "Section heading, set in navy so the navy-carries-hierarchy rule is visibly true."
      },
      {
        "role": "H3",
        "size": "22px / 1.3",
        "weight": "500",
        "tracking": "-0.015em",
        "notes": "Subhead. 500 is the heaviest weight in the system."
      },
      {
        "role": "Body",
        "size": "16px / 1.6",
        "weight": "400",
        "tracking": "-0.01em",
        "notes": "Running prose. The default, and the only size prose is ever set at."
      },
      {
        "role": "Small",
        "size": "14px / 1.55",
        "weight": "400",
        "tracking": "-0.01em",
        "notes": "Table cells, captions, secondary copy. Replaces the old 11 to 13.5px cluster."
      },
      {
        "role": "UI body",
        "size": "13px / 1.4",
        "weight": "400",
        "tracking": "-0.01em",
        "notes": "Product UI: navigation items, table cells, menu items, breadcrumbs."
      },
      {
        "role": "UI control",
        "size": "12.5px / 1.4",
        "weight": "400 or 500",
        "tracking": "-0.01em",
        "notes": "Product UI: buttons, tabs, form fields, card titles, row titles. 500 for the control label, 400 for the value."
      },
      {
        "role": "UI meta",
        "size": "11.5px / 1.4",
        "weight": "400 or 500",
        "tracking": "0",
        "notes": "Product UI: status pills, meta lines, hints, code chips. The smallest size that carries words."
      },
      {
        "role": "Label",
        "size": "11px / 1.4",
        "weight": "400",
        "tracking": "0.04em",
        "notes": "Uppercase. 11px is the legibility floor; do not go below it."
      }
    ],
    "documentScale": [
      {
        "token": "SZ_TITLE",
        "halfPt": 34,
        "pt": "17pt",
        "role": "Document title",
        "colour": "Navy"
      },
      {
        "token": "SZ_H1",
        "halfPt": 28,
        "pt": "14pt",
        "role": "Numbered section heading",
        "colour": "Navy"
      },
      {
        "token": "SZ_H2",
        "halfPt": 24,
        "pt": "12pt",
        "role": "Subhead inside a section",
        "colour": "Navy"
      },
      {
        "token": "SZ_BODY",
        "halfPt": 21,
        "pt": "10.5pt",
        "role": "Body copy and every table cell",
        "colour": "Ink"
      },
      {
        "token": "SZ_META",
        "halfPt": 18,
        "pt": "9pt",
        "role": "Meta rows, footer, gantt labels",
        "colour": "Grey"
      },
      {
        "token": "SZ_LABEL",
        "halfPt": 16,
        "pt": "8pt",
        "role": "Small-caps kicker, column labels",
        "colour": "Grey"
      },
      {
        "token": "SZ_NOTE",
        "halfPt": 15,
        "pt": "7.5pt",
        "role": "Grey qualifier, \"illustrative only\"",
        "colour": "Grey"
      }
    ],
    "chartSizes": [
      {
        "role": "Card label",
        "value": "10px uppercase, 0.04em, 400"
      },
      {
        "role": "Card heading",
        "value": "14–22px, 500"
      },
      {
        "role": "Axis tick",
        "value": "12px, 400"
      },
      {
        "role": "Tooltip",
        "value": "12px"
      },
      {
        "role": "Standings name",
        "value": "14px, 500"
      },
      {
        "role": "Value",
        "value": "13px, 500, tabular-nums"
      },
      {
        "role": "Legend",
        "value": "12px, 400"
      }
    ],
    "rules": {
      "allowed": [
        "Weights 400 and 500. 500 is the heaviest weight in the system.",
        "`font-variant-numeric: tabular-nums` on any column of figures.",
        "Uppercase at 0.04em tracking for labels.",
        "Body tracking -0.01em; headings -0.02em.",
        "`font-synthesis: none`, so no browser fakes a weight the family does not have."
      ],
      "forbidden": [
        "Weight 600, 700, 800, 900 or the keyword `bold`.",
        "Italic, and especially synthesised italic: set `font-synthesis: none`.",
        "A monospace face inside a chart or a document.",
        "A serif face inside a chart or a document.",
        "Centred text. The whole system is left-aligned."
      ]
    }
  },
  "space": {
    "base": 4,
    "unit": "px",
    "scale": [
      {
        "step": "0.5",
        "px": 2
      },
      {
        "step": "1",
        "px": 4
      },
      {
        "step": "2",
        "px": 8
      },
      {
        "step": "3",
        "px": 12
      },
      {
        "step": "4",
        "px": 16
      },
      {
        "step": "5",
        "px": 20
      },
      {
        "step": "6",
        "px": 24
      },
      {
        "step": "8",
        "px": 32
      },
      {
        "step": "10",
        "px": 40
      },
      {
        "step": "12",
        "px": 48
      },
      {
        "step": "16",
        "px": 64
      },
      {
        "step": "20",
        "px": 80
      },
      {
        "step": "24",
        "px": 96
      }
    ]
  },
  "elevation": [
    {
      "token": "shadow-card",
      "value": "0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.04)",
      "use": "Cards and asset tiles at rest."
    },
    {
      "token": "shadow-card-hover",
      "value": "0 2px 4px rgba(17, 17, 17, 0.05), 0 12px 28px rgba(17, 17, 17, 0.07)",
      "use": "The same surface on hover, to signal it is interactive."
    },
    {
      "token": "shadow-tooltip",
      "value": "0 8px 24px rgba(0, 0, 0, 0.08)",
      "use": "Chart tooltips and the copy toast. Floats over content."
    }
  ],
  "radius": {
    "base": "8px",
    "scale": [
      {
        "token": "radius-sm",
        "calc": "4px",
        "px": 4,
        "use": "Buttons, inputs, chips, badges, checkboxes, tabs, table cells, kbd."
      },
      {
        "token": "radius-lg",
        "calc": "8px",
        "px": 8,
        "use": "Cards, panels, menus, dialogs, tiles, the navigation and the search bar."
      }
    ],
    "chart": [
      {
        "where": "Card",
        "px": 8
      },
      {
        "where": "Control, segmented",
        "px": 4
      },
      {
        "where": "Bar",
        "px": 4,
        "note": "[4,4,0,0] for columns"
      },
      {
        "where": "Track",
        "px": 4
      }
    ]
  },
  "motion": {
    "easing": [
      {
        "token": "ease-out",
        "value": "cubic-bezier(0.23, 1, 0.32, 1)",
        "use": "Everything entering. The house curve."
      },
      {
        "token": "ease-in-out",
        "value": "cubic-bezier(0.77, 0, 0.175, 1)",
        "use": "Anything that moves and returns."
      }
    ],
    "durations": [
      {
        "what": "Press feedback",
        "ms": 160,
        "detail": "`:active { transform: scale(0.97) }`"
      },
      {
        "what": "Colour settle",
        "ms": 150,
        "detail": "Every link and control, applied at the base rather than per call site"
      },
      {
        "what": "Fade",
        "ms": 300,
        "detail": "Opacity-only changes"
      },
      {
        "what": "Page and nav enter",
        "ms": 480,
        "detail": "`opacity` plus a 10px `translateY`, once per navigation"
      },
      {
        "what": "Standings bar fill",
        "ms": 280,
        "detail": "30ms stagger per row"
      },
      {
        "what": "Bar chart mount",
        "ms": 800,
        "detail": "`scaleX()` from `left center`"
      },
      {
        "what": "Line and area draw",
        "ms": 900,
        "detail": "Recharts `animationDuration`"
      },
      {
        "what": "Logo marquee",
        "ms": 40000,
        "detail": "linear, infinite, pauses on hover"
      }
    ],
    "rules": [
      "Enter once, on mount. Nothing re-animates on scroll.",
      "Only animate `transform` and `opacity`. Never width, height or layout.",
      "Never animate a keyboard-triggered action. A tab switch changes content instantly.",
      "Never enter from `scale(0)`. Start at `scale(0.95)` with opacity if you must fade in.",
      "Every interactive element gets press feedback.",
      "Honour `prefers-reduced-motion`: render the final frame, do not just shorten the animation."
    ]
  },
  "documentLayout": {
    "unit": "dxa",
    "inchesPerUnit": 0.0006944444444444445,
    "values": [
      {
        "token": "PAGE_W × PAGE_H",
        "dxa": "12240 × 15840",
        "inches": "8.5in × 11in",
        "note": "US Letter."
      },
      {
        "token": "MARGIN_X",
        "dxa": "1296",
        "inches": "0.9in",
        "note": "Left and right."
      },
      {
        "token": "MARGIN_TOP",
        "dxa": "1900",
        "inches": "1.32in",
        "note": "Clears the masthead by ~0.3in."
      },
      {
        "token": "MARGIN_BOTTOM",
        "dxa": "1080",
        "inches": "0.75in",
        "note": ""
      },
      {
        "token": "CONTENT_W",
        "dxa": "9648",
        "inches": "6.7in",
        "note": "The wordmark scales to exactly this."
      },
      {
        "token": "HEADER_DIST",
        "dxa": "720",
        "inches": "0.5in",
        "note": ""
      },
      {
        "token": "FOOTER_DIST",
        "dxa": "620",
        "inches": "0.43in",
        "note": ""
      },
      {
        "token": "LINE",
        "dxa": "276",
        "inches": "1.15",
        "note": "Line height, all body copy."
      },
      {
        "token": "SP_BEFORE / SP_AFTER",
        "dxa": "200 / 140",
        "inches": "n/a",
        "note": "Fixed for every block. Do not tune per block."
      }
    ]
  }
}