{
  "$description": "Your Next Store (YNS) design tokens in W3C DTCG format. The single source of values: tokens.css, tailwind.css and the tables in brand.md are generated from it. The `note` field is the usage rule for people and AI agents.",
  "color": {
    "$type": "color",
    "black": { "$value": "#050505", "note": "Headings, calls to action (black pill), logo on light backgrounds." },
    "ink": { "$value": "#0A0A0A", "note": "Body text." },
    "muted": { "$value": "#6B6B6B", "note": "Secondary text: lead under a heading, descriptions, captions." },
    "subtle": { "$value": "#A3A3A3", "note": "Helper text and placeholders. Not for long text (contrast too low)." },
    "background": { "$value": "#FAFAFA", "note": "Page background. Near-white – never pure white for a whole page." },
    "surface": { "$value": "#FFFFFF", "note": "Cards on the page background, glass, form fields." },
    "surface-muted": { "$value": "#F3F3F3", "note": "Section cards (bento), illustration backgrounds." },
    "surface-strong": { "$value": "#E9E9EA", "note": "Large section containers, secondary buttons." },
    "border": { "$value": "#E5E5E5", "note": "Dividers and borders." },
    "violet": { "$value": "#8D22FD", "note": "The only accent color in the UI: selection outlines, click highlights, background lines. Accents are violet, never blue." },
    "violet-soft": { "$value": "#F3E8FF", "note": "Very light accent background (badges, selection)." },
    "pink": { "$value": "#FD477B", "note": "Only as part of the YNS gradient. Never on its own." },
    "rose": { "$value": "#F4A0A6", "note": "Only in the background aura and the comet tail." },
    "magenta": { "$value": "#B234F9", "note": "Only as the middle of the YNS gradient." },
    "purple": { "$value": "#9529F6", "note": "Only in the comet (end of the arc)." }
  },
  "gradient": {
    "$type": "gradient",
    "yns": {
      "$value": [
        { "color": "#FD477B", "position": 0 },
        { "color": "#B234F9", "position": 0.55 },
        { "color": "#8D22FD", "position": 1 }
      ],
      "angle": "100deg",
      "css": "linear-gradient(100deg, #FD477B 0%, #B234F9 55%, #8D22FD 100%)",
      "note": "The brand gradient. On text: one or two words in a headline (e.g. “ready”). As a comet on an edge or a small blurred aura. Never as a large solid area of color."
    },
    "aura": {
      "$value": [
        { "color": "#F4A0A6", "position": 0 },
        { "color": "#B234F9", "position": 0.6 },
        { "color": "#8D22FD", "position": 1 }
      ],
      "css": "radial-gradient(60% 50% at 75% 60%, rgba(178,52,249,.35) 0%, rgba(244,160,166,.25) 45%, rgba(250,250,250,0) 75%)",
      "note": "A heavily blurred glow in the hero background, always on one side and always fading into the #FAFAFA background."
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": { "$value": ["Geist", "Helvetica", "Arial", "sans-serif"], "note": "All text: headings, UI, body. SIL Open Font License 1.1." },
      "mono": { "$value": ["Geist Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"], "note": "Code, technical values, eyebrow labels." }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400 },
      "medium": { "$value": 500 },
      "semibold": { "$value": 600 }
    }
  },
  "type": {
    "$type": "typography",
    "display": { "$value": { "fontSize": "82px", "lineHeight": 1, "fontWeight": 600, "letterSpacing": "-0.03em" }, "mobile": "48px", "note": "Hero, one sentence. Two lines at most." },
    "h1": { "$value": { "fontSize": "56px", "lineHeight": 1.05, "fontWeight": 600, "letterSpacing": "-0.03em" }, "mobile": "38px", "note": "Page title." },
    "h2": { "$value": { "fontSize": "40px", "lineHeight": 1.25, "fontWeight": 400, "letterSpacing": "-0.01em" }, "mobile": "30px", "note": "Section heading. Regular weight, not bold." },
    "h3": { "$value": { "fontSize": "20px", "lineHeight": 1.4, "fontWeight": 500, "letterSpacing": "0" }, "note": "Card or feature title." },
    "lead": { "$value": { "fontSize": "18px", "lineHeight": 1.55, "fontWeight": 400, "letterSpacing": "0" }, "color": "muted", "note": "Paragraph under a heading, two sentences at most." },
    "body": { "$value": { "fontSize": "16px", "lineHeight": 1.5, "fontWeight": 400, "letterSpacing": "0" }, "note": "Body copy." },
    "ui": { "$value": { "fontSize": "14px", "lineHeight": 1.7, "fontWeight": 500, "letterSpacing": "0" }, "note": "Buttons, navigation, labels." },
    "caption": { "$value": { "fontSize": "13px", "lineHeight": 1.5, "fontWeight": 400, "letterSpacing": "0" }, "color": "muted", "note": "Captions, footnotes." },
    "eyebrow": { "$value": { "fontSize": "12px", "lineHeight": 1.4, "fontWeight": 500, "letterSpacing": "0.08em" }, "fontFamily": "mono", "transform": "uppercase", "note": "A short label above a heading." }
  },
  "radius": {
    "$type": "dimension",
    "sm": { "$value": "10px", "note": "Thumbnails, small tiles." },
    "md": { "$value": "14px", "note": "Inputs, small cards." },
    "lg": { "$value": "22px", "note": "Cards and bento blocks (default)." },
    "xl": { "$value": "32px", "note": "Large section containers, illustration frames." },
    "pill": { "$value": "9999px", "note": "All buttons, chips and badges." }
  },
  "space": {
    "$type": "dimension",
    "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", "note": "Space between page sections." }
  },
  "layout": {
    "$type": "dimension",
    "container": { "$value": "1208px", "note": "Content width (a 1440 px viewport leaves 116 px margins)." },
    "gutter": { "$value": "24px", "note": "Minimum side margin on mobile." }
  },
  "shadow": {
    "$type": "shadow",
    "button": {
      "css": "0 40px 24px rgba(0,0,0,.02), 0 23px 14px rgba(0,0,0,.02), 0 10px 10px rgba(0,0,0,.03), 0 2px 4px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.05)",
      "note": "A layered, barely visible shadow for pill buttons."
    },
    "glass": {
      "css": "0 18px 50px rgba(36,26,77,.12), 0 3px 10px rgba(0,0,0,.05), inset 0 1.5px 0 #fff",
      "note": "White glass (captions, floating panels). With backdrop-filter: blur(18px) saturate(1.3)."
    },
    "card": {
      "css": "0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04)",
      "note": "A white card on the #FAFAFA background. Gray cards (surface-muted) have no shadow."
    }
  },
  "component": {
    "button-primary": {
      "background": "linear-gradient(radial 100% 50% at 50% 0, rgba(255,255,255,.25), transparent) over #050505",
      "css": "background: radial-gradient(100% 50% at 50% 0, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%), #050505; color: #fff; border-radius: 9999px; padding: 12px 24px; font: 500 14px/24px Geist;",
      "note": "Main call to action: a black pill with a subtle sheen at the top. One per view."
    },
    "button-secondary": {
      "css": "background: radial-gradient(100% 50% at 50% 0, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%), linear-gradient(#EBEBEB, #EEEEEE); color: #3F3F3F; border-radius: 9999px; padding: 8px 20px; font: 500 14px/24px Geist;",
      "note": "A light gray pill (Log in, Explore All Features)."
    },
    "button-ghost": {
      "css": "background: none; color: #6B6B6B; font: 400 14px/24px Geist;",
      "note": "Text only, next to the main call to action (Start for Free)."
    }
  },
  "comet": {
    "$description": "The gradient comet on an element's edge: small and subtle. An arc of about 60°, moving at 45°/s at most.",
    "line": { "width": "1.6px", "opacity": 0.85, "maxOpacity": 0.9 },
    "glow": { "width": "5px", "blur": "6px", "opacity": 0.3, "maxOpacity": 0.35 },
    "haze": { "width": "20px", "blur": "26px", "opacity": 0.07, "maxOpacity": 0.08 }
  },
  "motion": {
    "$type": "duration",
    "fast": { "$value": "150ms", "note": "Hover, state changes." },
    "base": { "$value": "250ms", "note": "Screen transitions, entrances." },
    "slow": { "$value": "600ms", "note": "Camera moves in videos, large entrances." },
    "ease": { "$value": "cubic-bezier(0.22, 1, 0.36, 1)", "$type": "cubicBezier", "note": "Default curve (ease-out)." }
  }
}