{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "brand": "Searchpanel",
  "version": "1.0",
  "source": "https://searchpanelapp.com/",
  "color": {
    "cobalt": {
      "$type": "color",
      "$value": "#3355ff",
      "$description": "The brand colour. Logo mark, primary buttons, links, eyebrows, serif emphasis words, score bars."
    },
    "ink": {
      "$type": "color",
      "$value": "#0e0f13",
      "$description": "Headlines, body copy on light, dark buttons (\"Run a free audit\"), wordmark."
    },
    "paper": {
      "$type": "color",
      "$value": "#fafaf8",
      "$description": "The page. A warm off-white, never pure grey. Every layout starts here."
    },
    "white": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Cards, answer panels, inputs, ghost buttons. Lifts content off Paper."
    },
    "periwinkle": {
      "$type": "color",
      "$value": "#5c77ff",
      "$description": "Gradient start, score-bar fills, list bullets and the mark on dark backgrounds."
    },
    "mist": {
      "$type": "color",
      "$value": "#eef1ff",
      "$description": "Soft accent fills: icon tiles, \"New shelf\" pill, highlighted rows."
    },
    "pressed": {
      "$type": "color",
      "$value": "#2443f0",
      "$description": "Hover / pressed state of the Cobalt button only."
    },
    "deep-cobalt": {
      "$type": "color",
      "$value": "#1e2fb8",
      "$description": "End stop of the Cobalt gradient (case-study panel, app icon)."
    },
    "haze": {
      "$type": "color",
      "$value": "#8fa2ff",
      "$description": "Eyebrows and numerals on Night panels."
    },
    "night": {
      "$type": "color",
      "$value": "#0d0f17",
      "$description": "The one dark surface: platform section and closing CTA. Use at most once or twice per page."
    },
    "graphite": {
      "$type": "color",
      "$value": "#3b3f4a",
      "$description": "Lead paragraphs, secondary text, nav links."
    },
    "slate": {
      "$type": "color",
      "$value": "#6b7080",
      "$description": "Captions, meta, \"by XENA\" endorsement, ticks."
    },
    "hairline": {
      "$type": "color",
      "$value": "#e6e7ec",
      "$description": "Every border and divider."
    },
    "fog": {
      "$type": "color",
      "$value": "#f4f5f8",
      "$description": "Prompt bubbles and quiet fills."
    },
    "recommended": {
      "$type": "color",
      "$value": "#0f9f6e",
      "$description": "Positive states: \"Recommended\", ticks, score up. Pair with #e7f7ef fill."
    },
    "watch": {
      "$type": "color",
      "$value": "#e08a00",
      "$description": "Warnings and partial visibility. Never for text on white below 18 px."
    },
    "not-found": {
      "$type": "color",
      "$value": "#e5484d",
      "$description": "Absent from the answer, score down. Pair with #fdecec fill."
    }
  },
  "gradient": {
    "cobalt": "linear-gradient(150deg,#3355ff,#1e2fb8)",
    "bar": "linear-gradient(90deg,#5c77ff,#3355ff)",
    "glow": "radial-gradient(60% 70% at 78% 18%,rgba(92,119,255,.22),transparent 60%)"
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "Plus Jakarta Sans",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "Segoe UI",
        "Roboto",
        "Arial",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "Instrument Serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "monospace"
      ]
    }
  },
  "type": {
    "display": {
      "weight": "800",
      "size": "clamp(2.7rem,6vw,4.6rem)",
      "lineHeight": "1.04",
      "letterSpacing": "-0.04em",
      "use": "Hero headlines only. One per page."
    },
    "h2": {
      "weight": "700",
      "size": "clamp(2rem,4.2vw,3.2rem)",
      "lineHeight": "1.08",
      "letterSpacing": "-0.025em",
      "use": "Section titles. End with an Instrument Serif phrase."
    },
    "h3": {
      "weight": "700",
      "size": "1.375rem",
      "lineHeight": "1.25",
      "letterSpacing": "-0.02em",
      "use": "Card and feature titles."
    },
    "lead": {
      "weight": "400",
      "size": "clamp(1.05rem,1.6vw,1.2rem)",
      "lineHeight": "1.6",
      "letterSpacing": "0",
      "use": "Intro paragraph under a headline. Graphite."
    },
    "body": {
      "weight": "400",
      "size": "1.0625rem",
      "lineHeight": "1.6",
      "letterSpacing": "0",
      "use": "Running text (17 px)."
    },
    "small": {
      "weight": "500",
      "size": "0.875rem",
      "lineHeight": "1.5",
      "letterSpacing": "0",
      "use": "Captions, meta, footnotes. Slate."
    },
    "eyebrow": {
      "weight": "700",
      "size": "0.8125rem",
      "lineHeight": "1",
      "letterSpacing": "0.12em",
      "use": "UPPERCASE, Cobalt. Sits above every H2."
    },
    "button": {
      "weight": "600",
      "size": "1rem",
      "lineHeight": "1",
      "letterSpacing": "0",
      "use": "Buttons and nav links."
    }
  },
  "space": {
    "4": "4px",
    "8": "8px",
    "12": "12px",
    "16": "16px",
    "20": "20px",
    "24": "24px",
    "32": "32px",
    "40": "40px",
    "56": "56px",
    "72": "72px",
    "96": "96px",
    "128": "128px"
  },
  "radius": {
    "xs": "7px",
    "sm": "10px",
    "md": "12px",
    "lg": "14px",
    "card": "18px",
    "panel": "22px",
    "xl": "28px",
    "cta": "32px",
    "pill": "999px"
  },
  "shadow": {
    "card": "0 30px 60px -30px rgba(20,24,60,.28),0 2px 6px rgba(20,24,60,.05)",
    "button": "0 6px 20px -6px rgba(51,85,255,.6)"
  },
  "layout": {
    "maxWidth": "1180px",
    "gutter": "24px",
    "sectionPadding": "96px (72px < 760px)"
  }
}