{
  "$description": "Leapshot brand system v1.0.0. Source: src/design-system/tokens/tokens.ts. CSS custom properties: /tokens.css. Style guide: /system/.",
  "color": {
    "$type": "color",
    "paper": {
      "$value": "#FAF9F5",
      "$description": "The page. A near-white with a little warmth, never cream."
    },
    "chalk": {
      "$value": "#F1F0EA",
      "$description": "A quieter second page for alternating bands and sunken areas."
    },
    "white": {
      "$value": "#FFFFFF"
    },
    "black": {
      "$value": "#000000"
    },
    "ink": {
      "200": {
        "$value": "#DEDED5"
      },
      "300": {
        "$value": "#C2C2B7"
      },
      "400": {
        "$value": "#97978B"
      },
      "500": {
        "$value": "#6E6E64"
      },
      "600": {
        "$value": "#55554D"
      },
      "700": {
        "$value": "#3B3B35"
      },
      "800": {
        "$value": "#262622"
      },
      "900": {
        "$value": "#181815"
      },
      "950": {
        "$value": "#0E0E0C"
      },
      "$description": "Text, rules and the dark surface. A warm black, never pure #000."
    },
    "leap": {
      "100": {
        "$value": "#FFF8D0"
      },
      "300": {
        "$value": "#FFEA75"
      },
      "500": {
        "$value": "#FFDD21"
      },
      "600": {
        "$value": "#E8C400"
      },
      "$description": "Leap Yellow, the one signature colour. It is the dot at the top of the mark."
    },
    "agent": {
      "100": {
        "$value": "#E4E7FF"
      },
      "300": {
        "$value": "#A3AEFF"
      },
      "500": {
        "$value": "#2A41F5"
      },
      "$description": "Agent Blue marks anything a machine reads: the agent view, data sources, code."
    },
    "positive": {
      "$value": "#1B7F4B",
      "$description": "Confirmation states only."
    },
    "critical": {
      "$value": "#C5341F",
      "$description": "Error states only."
    }
  },
  "surface": {
    "paper": {
      "$type": "color",
      "$description": "Default. Most of every page. Apply with data-surface=\"paper\".",
      "surface": {
        "$value": "#FAF9F5"
      },
      "surface-raised": {
        "$value": "#FFFFFF"
      },
      "surface-sunken": {
        "$value": "#F1F0EA"
      },
      "text": {
        "$value": "#0E0E0C"
      },
      "text-muted": {
        "$value": "#55554D"
      },
      "text-subtle": {
        "$value": "#6E6E64"
      },
      "rule": {
        "$value": "rgb(14 14 12 / 0.16)"
      },
      "rule-strong": {
        "$value": "#0E0E0C"
      },
      "accent": {
        "$value": "#FFDD21"
      },
      "on-accent": {
        "$value": "#0E0E0C"
      },
      "accent-edge": {
        "$value": "#0E0E0C"
      },
      "highlight": {
        "$value": "#FFEA75"
      },
      "on-highlight": {
        "$value": "#0E0E0C"
      },
      "action": {
        "$value": "#0E0E0C"
      },
      "on-action": {
        "$value": "#FAF9F5"
      },
      "action-hover": {
        "$value": "#FFDD21"
      },
      "on-action-hover": {
        "$value": "#0E0E0C"
      },
      "focus": {
        "$value": "#0E0E0C"
      },
      "focus-halo": {
        "$value": "#FFDD21"
      },
      "machine": {
        "$value": "#2A41F5"
      },
      "machine-soft": {
        "$value": "#E4E7FF"
      },
      "positive": {
        "$value": "#1B7F4B"
      },
      "critical": {
        "$value": "#C5341F"
      },
      "scrim": {
        "$value": "rgb(14 14 12 / 0.6)"
      },
      "logo-tile": {
        "$value": "#0E0E0C"
      },
      "logo-arc": {
        "$value": "#FAF9F5"
      },
      "logo-dot": {
        "$value": "#FFDD21"
      },
      "hairline-plate": {
        "$value": "#FAF9F5"
      },
      "hairline-hi": {
        "$value": "#0E0E0C"
      },
      "hairline-edge": {
        "$value": "#3B3B35"
      },
      "hairline-mid": {
        "$value": "#97978B"
      },
      "hairline-lo": {
        "$value": "#DEDED5"
      }
    },
    "chalk": {
      "$type": "color",
      "$description": "Quiet alternate band. Apply with data-surface=\"chalk\".",
      "surface": {
        "$value": "#F1F0EA"
      },
      "surface-raised": {
        "$value": "#FAF9F5"
      },
      "surface-sunken": {
        "$value": "#DEDED5"
      },
      "text": {
        "$value": "#0E0E0C"
      },
      "text-muted": {
        "$value": "#55554D"
      },
      "text-subtle": {
        "$value": "#55554D"
      },
      "rule": {
        "$value": "rgb(14 14 12 / 0.18)"
      },
      "rule-strong": {
        "$value": "#0E0E0C"
      },
      "accent": {
        "$value": "#FFDD21"
      },
      "on-accent": {
        "$value": "#0E0E0C"
      },
      "accent-edge": {
        "$value": "#0E0E0C"
      },
      "highlight": {
        "$value": "#FFEA75"
      },
      "on-highlight": {
        "$value": "#0E0E0C"
      },
      "action": {
        "$value": "#0E0E0C"
      },
      "on-action": {
        "$value": "#FAF9F5"
      },
      "action-hover": {
        "$value": "#FFDD21"
      },
      "on-action-hover": {
        "$value": "#0E0E0C"
      },
      "focus": {
        "$value": "#0E0E0C"
      },
      "focus-halo": {
        "$value": "#FFDD21"
      },
      "machine": {
        "$value": "#2A41F5"
      },
      "machine-soft": {
        "$value": "#E4E7FF"
      },
      "positive": {
        "$value": "#1B7F4B"
      },
      "critical": {
        "$value": "#C5341F"
      },
      "scrim": {
        "$value": "rgb(14 14 12 / 0.6)"
      },
      "logo-tile": {
        "$value": "#0E0E0C"
      },
      "logo-arc": {
        "$value": "#FAF9F5"
      },
      "logo-dot": {
        "$value": "#FFDD21"
      },
      "hairline-plate": {
        "$value": "#F1F0EA"
      },
      "hairline-hi": {
        "$value": "#0E0E0C"
      },
      "hairline-edge": {
        "$value": "#3B3B35"
      },
      "hairline-mid": {
        "$value": "#97978B"
      },
      "hairline-lo": {
        "$value": "#C2C2B7"
      }
    },
    "ink": {
      "$type": "color",
      "$description": "The machine room: demos, data, the agent layer. Apply with data-surface=\"ink\".",
      "surface": {
        "$value": "#0E0E0C"
      },
      "surface-raised": {
        "$value": "#181815"
      },
      "surface-sunken": {
        "$value": "#000000"
      },
      "text": {
        "$value": "#FAF9F5"
      },
      "text-muted": {
        "$value": "#C2C2B7"
      },
      "text-subtle": {
        "$value": "#97978B"
      },
      "rule": {
        "$value": "rgb(250 249 245 / 0.2)"
      },
      "rule-strong": {
        "$value": "#FAF9F5"
      },
      "accent": {
        "$value": "#FFDD21"
      },
      "on-accent": {
        "$value": "#0E0E0C"
      },
      "accent-edge": {
        "$value": "#FFDD21"
      },
      "highlight": {
        "$value": "#FFDD21"
      },
      "on-highlight": {
        "$value": "#0E0E0C"
      },
      "action": {
        "$value": "#FFDD21"
      },
      "on-action": {
        "$value": "#0E0E0C"
      },
      "action-hover": {
        "$value": "#FAF9F5"
      },
      "on-action-hover": {
        "$value": "#0E0E0C"
      },
      "focus": {
        "$value": "#FFDD21"
      },
      "focus-halo": {
        "$value": "#0E0E0C"
      },
      "machine": {
        "$value": "#A3AEFF"
      },
      "machine-soft": {
        "$value": "rgb(163 174 255 / 0.16)"
      },
      "positive": {
        "$value": "#FAF9F5"
      },
      "critical": {
        "$value": "#FAF9F5"
      },
      "scrim": {
        "$value": "rgb(0 0 0 / 0.7)"
      },
      "logo-tile": {
        "$value": "#FFDD21"
      },
      "logo-arc": {
        "$value": "#0E0E0C"
      },
      "logo-dot": {
        "$value": "#0E0E0C"
      },
      "hairline-plate": {
        "$value": "#0E0E0C"
      },
      "hairline-hi": {
        "$value": "#FFDD21"
      },
      "hairline-edge": {
        "$value": "#FAF9F5"
      },
      "hairline-mid": {
        "$value": "#97978B"
      },
      "hairline-lo": {
        "$value": "#3B3B35"
      }
    },
    "leap": {
      "$type": "color",
      "$description": "Full-bleed yellow. One or two moments per page, never more. Apply with data-surface=\"leap\".",
      "surface": {
        "$value": "#FFDD21"
      },
      "surface-raised": {
        "$value": "#FAF9F5"
      },
      "surface-sunken": {
        "$value": "#E8C400"
      },
      "text": {
        "$value": "#0E0E0C"
      },
      "text-muted": {
        "$value": "#262622"
      },
      "text-subtle": {
        "$value": "#3B3B35"
      },
      "rule": {
        "$value": "rgb(14 14 12 / 0.26)"
      },
      "rule-strong": {
        "$value": "#0E0E0C"
      },
      "accent": {
        "$value": "#0E0E0C"
      },
      "on-accent": {
        "$value": "#FFDD21"
      },
      "accent-edge": {
        "$value": "#0E0E0C"
      },
      "highlight": {
        "$value": "#FAF9F5"
      },
      "on-highlight": {
        "$value": "#0E0E0C"
      },
      "action": {
        "$value": "#0E0E0C"
      },
      "on-action": {
        "$value": "#FAF9F5"
      },
      "action-hover": {
        "$value": "#FAF9F5"
      },
      "on-action-hover": {
        "$value": "#0E0E0C"
      },
      "focus": {
        "$value": "#0E0E0C"
      },
      "focus-halo": {
        "$value": "#FAF9F5"
      },
      "machine": {
        "$value": "#0E0E0C"
      },
      "machine-soft": {
        "$value": "rgb(14 14 12 / 0.1)"
      },
      "positive": {
        "$value": "#0E0E0C"
      },
      "critical": {
        "$value": "#0E0E0C"
      },
      "scrim": {
        "$value": "rgb(14 14 12 / 0.6)"
      },
      "logo-tile": {
        "$value": "#0E0E0C"
      },
      "logo-arc": {
        "$value": "#FAF9F5"
      },
      "logo-dot": {
        "$value": "#FFDD21"
      },
      "hairline-plate": {
        "$value": "#FFDD21"
      },
      "hairline-hi": {
        "$value": "#0E0E0C"
      },
      "hairline-edge": {
        "$value": "#262622"
      },
      "hairline-mid": {
        "$value": "#3B3B35"
      },
      "hairline-lo": {
        "$value": "#E8C400"
      }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": {
        "$value": [
          "Archivo",
          "Archivo Fallback",
          "Helvetica Neue",
          "Helvetica",
          "Arial",
          "sans-serif"
        ],
        "$description": "Structure. Headlines, interface and body copy. The system speaking."
      },
      "serif": {
        "$value": [
          "Newsreader",
          "Newsreader Fallback",
          "Georgia",
          "Times New Roman",
          "serif"
        ],
        "$description": "Voice. Ledes, quotes and answers. People speaking."
      },
      "mono": {
        "$value": [
          "Geist Mono",
          "ui-monospace",
          "SF Mono",
          "Menlo",
          "Consolas",
          "monospace"
        ],
        "$description": "Machine. Labels, data and code. What agents read."
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": {
        "$value": 400
      },
      "medium": {
        "$value": 500
      },
      "semibold": {
        "$value": 600
      },
      "bold": {
        "$value": 700
      },
      "heavy": {
        "$value": 800
      }
    },
    "width": {
      "$type": "string",
      "condensed": {
        "$value": "62%",
        "$description": "CSS font-stretch value on the Archivo width axis."
      },
      "narrow": {
        "$value": "80%",
        "$description": "CSS font-stretch value on the Archivo width axis."
      },
      "normal": {
        "$value": "100%",
        "$description": "CSS font-stretch value on the Archivo width axis."
      },
      "wide": {
        "$value": "112%",
        "$description": "CSS font-stretch value on the Archivo width axis."
      },
      "expanded": {
        "$value": "125%",
        "$description": "CSS font-stretch value on the Archivo width axis."
      }
    },
    "leading": {
      "$type": "number",
      "flat": {
        "$value": 0.88
      },
      "tight": {
        "$value": 1
      },
      "snug": {
        "$value": 1.12
      },
      "heading": {
        "$value": 1.2
      },
      "body": {
        "$value": 1.5
      },
      "loose": {
        "$value": 1.65
      }
    },
    "tracking": {
      "$type": "dimension",
      "display": {
        "$value": "-0.035em"
      },
      "tight": {
        "$value": "-0.02em"
      },
      "normal": {
        "$value": "0em"
      },
      "label": {
        "$value": "0.08em"
      }
    },
    "size": {
      "$type": "dimension",
      "$description": "Fluid scale. Each step interpolates between its min and max across a 360px to 1440px viewport.",
      "2xs": {
        "$value": "0.6875rem",
        "$extensions": {
          "design.leapshot": {
            "minPx": 11,
            "maxPx": 11
          }
        }
      },
      "xs": {
        "$value": "clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 12,
            "maxPx": 13
          }
        }
      },
      "sm": {
        "$value": "clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 14,
            "maxPx": 15
          }
        }
      },
      "md": {
        "$value": "clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 16,
            "maxPx": 18
          }
        }
      },
      "lg": {
        "$value": "clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 18,
            "maxPx": 22
          }
        }
      },
      "xl": {
        "$value": "clamp(1.3125rem, 1.1667rem + 0.6481vw, 1.75rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 21,
            "maxPx": 28
          }
        }
      },
      "2xl": {
        "$value": "clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 24,
            "maxPx": 36
          }
        }
      },
      "3xl": {
        "$value": "clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 28,
            "maxPx": 48
          }
        }
      },
      "4xl": {
        "$value": "clamp(2.125rem, 1.4167rem + 3.1481vw, 4.25rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 34,
            "maxPx": 68
          }
        }
      },
      "5xl": {
        "$value": "clamp(2.5rem, 1.3333rem + 5.1852vw, 6rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 40,
            "maxPx": 96
          }
        }
      },
      "6xl": {
        "$value": "clamp(2.875rem, 1.0833rem + 7.963vw, 8.25rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 46,
            "maxPx": 132
          }
        }
      },
      "7xl": {
        "$value": "clamp(3.25rem, 0.5rem + 12.2222vw, 11.5rem)",
        "$extensions": {
          "design.leapshot": {
            "minPx": 52,
            "maxPx": 184
          }
        }
      }
    }
  },
  "space": {
    "0": {
      "$value": "0px"
    },
    "1": {
      "$value": "4px"
    },
    "2": {
      "$value": "8px"
    },
    "3": {
      "$value": "12px"
    },
    "4": {
      "$value": "16px"
    },
    "5": {
      "$value": "24px"
    },
    "6": {
      "$value": "32px"
    },
    "7": {
      "$value": "48px"
    },
    "8": {
      "$value": "64px"
    },
    "9": {
      "$value": "96px"
    },
    "10": {
      "$value": "128px"
    },
    "11": {
      "$value": "160px"
    },
    "$type": "dimension",
    "margin": {
      "$value": "clamp(1.25rem, 0.1667rem + 4.8148vw, 4.5rem)",
      "$description": "Page margin, left and right of every container."
    },
    "gutter": {
      "$value": "clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem)",
      "$description": "Gap between grid columns."
    },
    "section": {
      "$value": "clamp(4.5rem, 2.8333rem + 7.4074vw, 9.5rem)",
      "$description": "Vertical padding of a full section."
    },
    "section-sm": {
      "$value": "clamp(3rem, 2rem + 4.4444vw, 6rem)",
      "$description": "Vertical padding of a compact section."
    },
    "block": {
      "$value": "clamp(2rem, 1.3333rem + 2.963vw, 4rem)",
      "$description": "Gap between a section header and its content."
    }
  },
  "grid": {
    "columns": {
      "$type": "number",
      "$value": 12
    },
    "container": {
      "$type": "dimension",
      "prose": {
        "$value": "40rem"
      },
      "narrow": {
        "$value": "64rem"
      },
      "wide": {
        "$value": "90rem"
      },
      "full": {
        "$value": "100%"
      }
    },
    "breakpoint": {
      "$type": "dimension",
      "sm": {
        "$value": "30rem"
      },
      "md": {
        "$value": "48rem"
      },
      "lg": {
        "$value": "64rem"
      },
      "xl": {
        "$value": "80rem"
      }
    }
  },
  "radius": {
    "$type": "dimension",
    "none": {
      "$value": "0",
      "$description": "Sections, cards, frames. Containers are square, like print."
    },
    "xs": {
      "$value": "2px",
      "$description": "Inputs, code blocks, swatches."
    },
    "sm": {
      "$value": "6px",
      "$description": "Small media and thumbnails."
    },
    "md": {
      "$value": "12px",
      "$description": "Chat bubbles only."
    },
    "pill": {
      "$value": "999px",
      "$description": "Anything you press: buttons, chips, badges, toggles."
    }
  },
  "border": {
    "$type": "dimension",
    "hairline": {
      "$value": "1px"
    },
    "rule": {
      "$value": "2px"
    },
    "heavy": {
      "$value": "4px"
    }
  },
  "shadow": {
    "0": {
      "$value": "none",
      "$description": "Default. Hierarchy comes from rules and surfaces, not shadows."
    },
    "1": {
      "$value": "0 1px 0 rgb(14 14 12 / 0.06), 0 2px 6px -2px rgb(14 14 12 / 0.12)",
      "$description": "Sticky bars once content scrolls beneath them."
    },
    "2": {
      "$value": "0 2px 4px -2px rgb(14 14 12 / 0.12), 0 12px 28px -12px rgb(14 14 12 / 0.28)",
      "$description": "Raised cards and menus."
    },
    "3": {
      "$value": "0 4px 8px -4px rgb(14 14 12 / 0.16), 0 32px 72px -24px rgb(14 14 12 / 0.45)",
      "$description": "Floating panels: the agent view."
    },
    "$type": "string"
  },
  "z": {
    "$type": "number",
    "base": {
      "$value": 0
    },
    "raised": {
      "$value": 10
    },
    "sticky": {
      "$value": 100
    },
    "overlay": {
      "$value": 200
    },
    "panel": {
      "$value": 300
    }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "instant": {
        "$value": "80ms",
        "$description": "Colour and opacity feedback on press."
      },
      "fast": {
        "$value": "160ms",
        "$description": "Hover states."
      },
      "base": {
        "$value": "280ms",
        "$description": "Most transitions: reveals, toggles, accordions."
      },
      "slow": {
        "$value": "520ms",
        "$description": "Panels and anything that crosses the page."
      },
      "slower": {
        "$value": "900ms",
        "$description": "Signature moments only: the headline widening, the curve drawing."
      }
    },
    "easing": {
      "$type": "cubicBezier",
      "standard": {
        "$value": [
          0.2,
          0,
          0,
          1
        ],
        "$description": "Things that move from A to B."
      },
      "enter": {
        "$value": [
          0.16,
          1,
          0.3,
          1
        ],
        "$description": "Things arriving. Fast start, long settle."
      },
      "exit": {
        "$value": [
          0.4,
          0,
          1,
          1
        ],
        "$description": "Things leaving. Slow start, fast finish."
      },
      "leap": {
        "$value": [
          0.34,
          1.56,
          0.64,
          1
        ],
        "$description": "The signature. A small overshoot, like landing a jump."
      },
      "linear": {
        "$value": [
          0,
          0,
          1,
          1
        ],
        "$description": "Continuous loops and progress only."
      }
    }
  },
  "hairline": {
    "$description": "Colours come from the surface: --hairline-plate, -hi, -edge, -mid and -lo are surface roles, so a figure re-colours itself on any surface.",
    "stroke": {
      "$type": "number",
      "$value": 1,
      "$description": "Stroke width of the line figures, in CSS pixels at any size. Matches --border-hairline."
    }
  },
  "principles": {
    "The mark is the layout": {
      "$type": "string",
      "$value": "An arc and a dot: the leap and the shot. The same curve plots the five layers and sweeps the hero, so the logo is never just a logo."
    },
    "One file, every format": {
      "$type": "string",
      "$value": "Archivo is a variable font with a width axis. Headlines stretch from condensed to expanded, the way one idea is resized for every placement."
    },
    "Print rules": {
      "$type": "string",
      "$value": "Flat ink, flat colour, hairline rules, square corners. No gradients, no glows, no glass. Anything you can press is a pill."
    },
    "Yellow is earned": {
      "$type": "string",
      "$value": "Leap Yellow is a highlighter, not wallpaper. It marks the one thing that matters on a surface, and takes over a full band once or twice a page."
    },
    "Three voices": {
      "$type": "string",
      "$value": "Archivo is the system speaking. Newsreader is people speaking. Geist Mono is what machines read. Blue marks the machine layer."
    },
    "Motion explains": {
      "$type": "string",
      "$value": "Things move when a change travels: a headline widening, a record reaching five surfaces. Nothing fades in for decoration, and reduced motion is respected everywhere."
    }
  }
}