{
  "name": "Focus Insite Design System",
  "version": 1,
  "color": {
    "themes": [{ "id": "light", "name": "Light" }],
    "tokens": [
      { "name": "brand", "value": "#ec1f26", "usage": "Signature red. Display type 24px and up (or 18.66px bold), graphics and fills only; 4.38:1 on `surface-page`, below AA for body text. One decisive red move per view." },
      { "name": "brand-action", "value": "#d31921", "usage": "Interactive fills that carry a white body-size label (`on-brand`), 5.34:1; also link color on `surface-page`." },
      { "name": "brand-action-hover", "value": "#c4141b", "usage": "Hover state of `brand-action`: darker, never lighter." },
      { "name": "brand-action-active", "value": "#b3161c", "usage": "Pressed state of `brand-action`." },
      { "name": "brand-container", "value": "#fdecec", "usage": "Brand wash behind brand badges and callouts; text on it is `ink-primary`, `ink-secondary` or `on-container`." },
      { "name": "surface-brand-wash", "value": "#fdecec", "usage": "Callout fill, same value as `brand-container`, named for the surface role." },
      { "name": "on-brand", "value": "#ffffff", "usage": "White label on `brand-action`, and display-size type (24px and up) on bright `brand`. Never body size on bright `brand`." },
      { "name": "on-container", "value": "#b3161c", "usage": "Text on `brand-container`: brand badges and the brand tone of an eyebrow." },
      { "name": "ink-primary", "value": "#040507", "usage": "Headings and the strongest text on `surface-page`, `surface-subtle` and `surface-sunken`; also body-size text on bright `brand` (4.65:1)." },
      { "name": "ink-secondary", "value": "#383b41", "usage": "Body copy on `surface-page`, `surface-subtle` and `surface-sunken`." },
      { "name": "ink-muted", "value": "#71757c", "usage": "Labels and captions on `surface-page` (4.63:1); the lightest ink allowed for text. On `surface-subtle` it measures about 4.2:1, so keep it to large or non-essential labels there." },
      { "name": "surface-page", "value": "#ffffff", "usage": "Default page ground; cards sit on it with a `border-default` edge." },
      { "name": "surface-subtle", "value": "#f4f5f6", "usage": "Section band that sets one part of the page apart from `surface-page`." },
      { "name": "surface-sunken", "value": "#e9eaeb", "usage": "Deeper band and inset wells; same value as `border-subtle`." },
      { "name": "border-subtle", "value": "#e9eaeb", "usage": "1px dividers inside quiet areas." },
      { "name": "border-default", "value": "#d7d9dc", "usage": "1px edge of cards and fields; decorative, the label next to it carries the meaning." },
      { "name": "rule-strong", "value": "#040507", "usage": "Structural rule: the logo divider and section breaks, at `rule-width-strong`." },
      { "name": "text-heading", "value": "{ink-primary}", "usage": "Semantic alias: headings." },
      { "name": "text-body", "value": "{ink-secondary}", "usage": "Semantic alias: body copy." },
      { "name": "text-label", "value": "{ink-muted}", "usage": "Semantic alias: labels and captions." },
      { "name": "text-on-brand-display", "value": "{on-brand}", "usage": "Semantic alias: display-size type (24px and up) on bright `brand`." },
      { "name": "text-on-brand-body", "value": "{ink-primary}", "usage": "Semantic alias: body-size text on bright `brand`." },
      { "name": "text-link", "value": "{brand-action}", "usage": "Semantic alias: links on `surface-page`." },
      { "name": "text-link-hover", "value": "{brand-action-hover}", "usage": "Semantic alias: link hover." },
      { "name": "surface-card", "value": "{surface-page}", "usage": "Semantic alias: plain card fill." },
      { "name": "surface-section", "value": "{surface-subtle}", "usage": "Semantic alias: section band." },
      { "name": "graphic-brand", "value": "{brand}", "usage": "Semantic alias: graphics and large marks in bright red." },
      { "name": "accent-rule", "value": "{brand}", "usage": "Semantic alias: the left accent rule of a callout, at `accent-rule-width`." }
    ]
  },
  "type": {
    "fonts": [
      { "family": "Inter", "file": "fonts/inter-latin-400-normal.woff2", "weight": "400", "style": "normal" },
      { "family": "Inter", "file": "fonts/inter-latin-500-normal.woff2", "weight": "500", "style": "normal" },
      { "family": "Inter", "file": "fonts/inter-latin-600-normal.woff2", "weight": "600", "style": "normal" },
      { "family": "Inter", "file": "fonts/inter-latin-800-normal.woff2", "weight": "800", "style": "normal" },
      { "family": "Inter", "file": "fonts/inter-latin-900-normal.woff2", "weight": "900", "style": "normal" },
      { "family": "Inter", "file": "fonts/inter-latin-400-italic.woff2", "weight": "400", "style": "italic" }
    ],
    "families": {
      "sans": "\"Inter\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    "groups": [
      {
        "name": "Display and headings",
        "family": "sans",
        "styles": [
          { "name": "display", "fontSize": "4.5rem", "lineHeight": "1.02", "fontWeight": 900, "letterSpacing": "-0.02em", "sample": "The right people. Verified.", "usage": "Positioning line and hero, two short lines. Bright `brand` is allowed at this size." },
          { "name": "h1", "fontSize": "3rem", "lineHeight": "1.05", "fontWeight": 800, "letterSpacing": "-0.02em", "sample": "Verified people", "usage": "Page titles." },
          { "name": "h2", "fontSize": "2rem", "lineHeight": "1.05", "fontWeight": 800, "letterSpacing": "-0.02em", "sample": "Recruiting, handled", "usage": "Section headlines, sentence case with a full stop." },
          { "name": "h3", "fontSize": "1.5rem", "lineHeight": "1.05", "fontWeight": 700, "letterSpacing": "-0.015em", "sample": "Dedicated project manager", "usage": "Card and callout titles." }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          { "name": "body", "fontSize": "1.125rem", "lineHeight": "1.5", "fontWeight": 400, "letterSpacing": "0", "sample": "We identify, call, screen, and schedule respondents.", "usage": "Body copy in `ink-secondary`, measure about 68ch." },
          { "name": "small", "fontSize": "0.875rem", "lineHeight": "1.5", "fontWeight": 400, "sample": "Incentives and confirmation details.", "usage": "Fine print and captions in `ink-muted`." },
          { "name": "eyebrow", "fontSize": "0.875rem", "lineHeight": "1.2", "fontWeight": 500, "letterSpacing": "0.08em", "sample": "Why Focus Insite", "usage": "Label above a heading in `ink-muted`; set it UPPERCASE in markup." }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      { "name": "space-1", "value": "4px", "usage": "Base step of the 4px scale." },
      { "name": "space-2", "value": "8px", "usage": "Scale step." },
      { "name": "space-3", "value": "12px", "usage": "Scale step." },
      { "name": "space-4", "value": "16px", "usage": "Scale step." },
      { "name": "space-5", "value": "24px", "usage": "Scale step; low end of card padding." },
      { "name": "space-6", "value": "32px", "usage": "Scale step; matches `card-pad`." },
      { "name": "space-7", "value": "48px", "usage": "Scale step." },
      { "name": "space-8", "value": "64px", "usage": "Scale step; matches `section-y-tight`." },
      { "name": "space-9", "value": "96px", "usage": "Scale step; matches `section-y`." },
      { "name": "space-10", "value": "128px", "usage": "Largest step of the scale." },
      { "name": "section-y", "value": "96px", "usage": "Vertical padding of a section (`Container` with pad=\"section\")." },
      { "name": "section-y-tight", "value": "64px", "usage": "Vertical padding of a tight section (`Container` with pad=\"tight\")." },
      { "name": "container-max", "value": "1200px", "usage": "Maximum width of content inside a `Container`." },
      { "name": "btn-pad-y", "value": "14px", "usage": "Vertical padding of a medium `Button`." },
      { "name": "btn-pad-x", "value": "28px", "usage": "Horizontal padding of a medium `Button`." },
      { "name": "card-pad", "value": "32px", "usage": "Padding of a `Callout` and of plain cards at full size." }
    ]
  },
  "radius": {
    "tokens": [
      { "name": "radius-button", "value": "10px", "usage": "Buttons." },
      { "name": "radius-card", "value": "16px", "usage": "Cards and callouts." },
      { "name": "radius-pill", "value": "999px", "usage": "Badges." },
      { "name": "radius-input", "value": "10px", "usage": "Inputs and fields." }
    ]
  },
  "shadow": {
    "tokens": [
      { "name": "shadow-none", "value": "none", "usage": "Default: elevation comes from borders and surfaces." },
      { "name": "shadow-raised", "value": "0 1px 2px rgba(4,5,7,.06)", "usage": "Rare hover lift; a 1px hairline shadow." },
      { "name": "shadow-overlay", "value": "0 12px 32px rgba(4,5,7,.12)", "usage": "True overlays only: modals and menus. Never on the logo." }
    ]
  },
  "borderWidth": {
    "tokens": [
      { "name": "border-width", "value": "1px", "usage": "Card and field edges, and dividers." },
      { "name": "rule-width-strong", "value": "3px", "usage": "Width of `rule-strong`: the logo divider and section breaks." },
      { "name": "accent-rule-width", "value": "4px", "usage": "Width of the left accent rule on a callout." }
    ]
  }
}