{
  "$description": "Design tokens for the Folio style. Generated from tokens.css by scripts/sync-tokens.mjs; edit tokens.css, not this file.",
  "modes": {
    "default": "light",
    "alternate": "dark"
  },
  "color": {
    "page": {
      "$type": "color",
      "$value": "#f6f7f9",
      "$dark": "#0b0d11",
      "$description": "the showroom floor: cool, never cream"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff",
      "$dark": "#15181e",
      "$description": "index cards, option cards, FAQ"
    },
    "sunk": {
      "$type": "color",
      "$value": "#eef0f3",
      "$dark": "#1c2028",
      "$description": "letter tiles, wells"
    },
    "ink": {
      "$type": "color",
      "$value": "#0e1116",
      "$dark": "#eef0f4"
    },
    "ink-2": {
      "$type": "color",
      "$value": "#3b414d",
      "$dark": "#c3c8d2"
    },
    "muted": {
      "$type": "color",
      "$value": "#5c6370",
      "$dark": "#969dab",
      "$description": "body-small text; 5.6:1 on page"
    },
    "fade": {
      "$type": "color",
      "$value": "#858c98",
      "$dark": "#6c7380",
      "$description": "the grey second half of headlines; large text only (3.2:1)"
    },
    "line": {
      "$type": "color",
      "$value": "#e2e5ea",
      "$dark": "#23272f"
    },
    "line-2": {
      "$type": "color",
      "$value": "#cfd4dc",
      "$dark": "#333945"
    },
    "accent": {
      "$type": "color",
      "$value": "#3d5afe",
      "$dark": "#8c9dff",
      "$description": "focus rings and inline links only"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#ffffff",
      "$dark": "#0b0d11"
    },
    "live": {
      "$type": "color",
      "$value": "#3ee08f",
      "$description": "the live dot on \"Play it live\""
    },
    "stop": {
      "$type": "color",
      "$value": "#ff5a5a",
      "$description": "the dot once a demo is playing"
    },
    "tool": {
      "$type": "color",
      "$value": "rgba(10, 12, 16, 0.78)",
      "$dark": "rgba(6, 7, 10, 0.82)",
      "$description": "stage tool pills over the frames"
    },
    "invert": {
      "$type": "color",
      "$value": "#0e1116",
      "$dark": "#f4f5f7",
      "$description": "the last option card, the closing plate"
    },
    "invert-2": {
      "$type": "color",
      "$value": "#1d2230",
      "$dark": "#dde1e8"
    },
    "on-invert": {
      "$type": "color",
      "$value": "#ffffff",
      "$dark": "#0e1116"
    },
    "on-invert-muted": {
      "$type": "color",
      "$value": "#b9bfcc",
      "$dark": "#3b414d"
    },
    "plate-ink": {
      "$type": "color",
      "$value": "#0b0c10",
      "$dark": "#17191f",
      "$description": "dark ground"
    },
    "plate-ink-text": {
      "$type": "color",
      "$value": "#f4f5f7"
    },
    "plate-ink-muted": {
      "$type": "color",
      "$value": "#b3b8c2"
    },
    "plate-paper": {
      "$type": "color",
      "$value": "#eceff4",
      "$dark": "#1b1f27",
      "$description": "gridded paper ground"
    },
    "plate-grid": {
      "$type": "color",
      "$value": "#dde2ea",
      "$dark": "#252a34",
      "$description": "its 24px grid"
    },
    "plate-paper-text": {
      "$type": "color",
      "$value": "#131a2c",
      "$dark": "#eef0f4"
    },
    "plate-paper-muted": {
      "$type": "color",
      "$value": "#4a5470",
      "$dark": "#a4abba"
    },
    "plate-night": {
      "$type": "color",
      "$value": "#090d1d",
      "$dark": "#10152c",
      "$description": "night ground"
    },
    "plate-night-lift": {
      "$type": "color",
      "$value": "#161c40",
      "$dark": "#222a5c",
      "$description": "the lit corner of the night ground"
    },
    "plate-night-text": {
      "$type": "color",
      "$value": "#f1f2fa"
    },
    "plate-night-muted": {
      "$type": "color",
      "$value": "#a3a9c4"
    }
  },
  "shadow": {
    "shadow-lift": {
      "$type": "shadow",
      "$value": "0 24px 50px -28px rgba(14, 17, 22, 0.35)",
      "$dark": "0 24px 50px -24px rgba(0, 0, 0, 0.7)"
    },
    "shadow-browser": {
      "$type": "shadow",
      "$value": "0 40px 80px -36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(127, 127, 127, 0.18)"
    },
    "shadow-phone": {
      "$type": "shadow",
      "$value": "0 30px 60px -24px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08)"
    },
    "shadow-detail": {
      "$type": "shadow",
      "$value": "0 18px 40px -24px rgba(0, 0, 0, 0.55)"
    }
  },
  "type": {
    "ui": {
      "$type": "fontFamily",
      "$value": "\"Geist\", \"SF Pro Text\", \"Segoe UI\", system-ui, sans-serif"
    },
    "mono": {
      "$type": "fontFamily",
      "$value": "\"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace"
    },
    "serif": {
      "$type": "fontFamily",
      "$value": "\"Instrument Serif\", \"Iowan Old Style\", Georgia, serif",
      "$description": "a plate face, for work that wants it"
    },
    "display": {
      "$type": "fontFamily",
      "$value": "\"Bricolage Grotesque\", \"Geist\", system-ui, sans-serif",
      "$description": "a plate face, for work that wants it"
    },
    "fs-h1": {
      "$type": "fontFamily",
      "$value": "clamp(44px, 7vw, 104px)"
    },
    "fs-h2": {
      "$type": "fontFamily",
      "$value": "clamp(38px, 5.4vw, 76px)"
    },
    "fs-name": {
      "$type": "fontFamily",
      "$value": "clamp(64px, 8.4vw, 132px)"
    },
    "fs-one": {
      "$type": "fontFamily",
      "$value": "clamp(18px, 1.6vw, 22px)"
    },
    "fs-lead": {
      "$type": "fontFamily",
      "$value": "clamp(17px, 1.5vw, 20px)"
    },
    "fs-body": {
      "$type": "dimension",
      "$value": "16px"
    },
    "fs-small": {
      "$type": "dimension",
      "$value": "14.5px"
    },
    "fs-eyebrow": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "space": {
    "s-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "s-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "s-3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "s-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "s-5": {
      "$type": "dimension",
      "$value": "22px"
    },
    "s-6": {
      "$type": "dimension",
      "$value": "28px"
    },
    "s-7": {
      "$type": "dimension",
      "$value": "40px"
    },
    "s-8": {
      "$type": "dimension",
      "$value": "56px"
    },
    "s-9": {
      "$type": "dimension",
      "$value": "72px"
    },
    "s-10": {
      "$type": "dimension",
      "$value": "96px"
    },
    "wrap": {
      "$type": "dimension",
      "$value": "1320px"
    },
    "gutter": {
      "$type": "dimension",
      "$value": "24px"
    }
  },
  "radius": {
    "r-plate": {
      "$type": "dimension",
      "$value": "36px",
      "$description": "26px under 640px"
    },
    "r-card": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "index cards"
    },
    "r-path": {
      "$type": "dimension",
      "$value": "22px",
      "$description": "option cards, detail cards"
    },
    "r-browser": {
      "$type": "dimension",
      "$value": "14px"
    },
    "r-phone": {
      "$type": "dimension",
      "$value": "26px"
    },
    "r-tile": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "letter tiles, mini frames"
    },
    "r-pill": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "motion": {
    "ease": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.2, 0.8, 0.2, 1)"
    },
    "spring": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.34, 1.4, 0.5, 1)"
    },
    "d-rise": {
      "$type": "duration",
      "$value": "1.1s",
      "$description": "plates rise in"
    },
    "d-load": {
      "$type": "duration",
      "$value": "0.9s",
      "$description": "headline lines on load, 90ms apart"
    },
    "d-swap": {
      "$type": "duration",
      "$value": "0.5s",
      "$description": "static frame to live demo"
    },
    "d-tilt": {
      "$type": "duration",
      "$value": "0.6s",
      "$description": "pointer tilt settles back"
    },
    "d-drift": {
      "$type": "duration",
      "$value": "16s",
      "$description": "glows on dark plates"
    }
  }
}