{
 "name": "ShopperzKey",
 "version": 1,
 "meta": {
  "source": "local",
  "paths": {
   "tokens": [
    "src/app/globals.css"
   ],
   "fonts": [
    "src/app/local-fonts.css"
   ],
   "assets": [
    "public/assets/brand/"
   ],
   "docs": [
    "src/app/design-guide/page.tsx"
   ]
  },
  "synced": "2026-10-24"
 },
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "Light"
   },
   {
    "id": "dark",
    "name": "Dark"
   }
  ],
  "tokens": [
   {
    "name": "bg",
    "value": {
     "light": "#f2f2f2",
     "dark": "#000000"
    },
    "usage": "Page ground. Canvas Gray in light; Pure Black in dark sections (hero, CTA bands)."
   },
   {
    "name": "bg-raised",
    "value": {
     "light": "#ffffff",
     "dark": "#141414"
    },
    "usage": "Cards, sheets, the nav bar and form fields sitting on `bg`."
   },
   {
    "name": "bg-soft",
    "value": {
     "light": "#f7f7f7",
     "dark": "#222222"
    },
    "usage": "Quiet inset panels and table stripes inside a `bg-raised` card."
   },
   {
    "name": "line",
    "value": {
     "light": "#e1e1e1",
     "dark": "#333333"
    },
    "usage": "Hairlines, dividers and outline-button borders. Decorative only: never the only edge of a control."
   },
   {
    "name": "fg",
    "value": {
     "light": "#111111",
     "dark": "#f7f7f7"
    },
    "usage": "Headlines and body copy on `bg`, `bg-raised` and `bg-soft` (16.9:1 light, 17.6:1 dark)."
   },
   {
    "name": "fg-muted",
    "value": {
     "light": "#555555",
     "dark": "#a3a3a3"
    },
    "usage": "Secondary copy, descriptions and metadata on `bg` and `bg-raised` (6.7:1 light, 7.5:1 dark)."
   },
   {
    "name": "accent",
    "value": {
     "light": "#b6142c",
     "dark": "#f76d85"
    },
    "usage": "Crimson used AS TEXT or an icon: highlighted words, active nav, prices on sale. On `bg`/`bg-raised` (6.0:1 light, 7.5:1 dark)."
   },
   {
    "name": "accent-fill",
    "value": {
     "light": "#d01f3f",
     "dark": "#d01f3f"
    },
    "usage": "Crimson used AS A FILL: the primary CTA, the live dot, a badge. Always carries `on-accent` text (5.3:1)."
   },
   {
    "name": "accent-fill-deep",
    "value": {
     "light": "#b6142c",
     "dark": "#b6142c"
    },
    "usage": "Bottom stop of the CTA gradient and pressed state; the logo's own crimson."
   },
   {
    "name": "on-accent",
    "value": {
     "light": "#ffffff",
     "dark": "#ffffff"
    },
    "usage": "Text and icons on `accent-fill` and `accent-fill-deep`."
   },
   {
    "name": "accent-soft",
    "value": {
     "light": "#fff1f3",
     "dark": "#460611"
    },
    "usage": "Tinted ground behind crimson text: tags, toasts, the 'New' chip. Pair with `accent`."
   },
   {
    "name": "focus",
    "value": {
     "light": "#b6142c",
     "dark": "#f76d85"
    },
    "usage": "2px focus outline with 2px offset on every interactive element (≥6:1 on both grounds)."
   },
   {
    "name": "pure-black",
    "value": "#000000",
    "usage": "Hero and video stages; the darkest ground. Source token."
   },
   {
    "name": "ink",
    "value": "#111111",
    "usage": "Default text colour in code (`body { color }`) and the toast/dark card fill."
   },
   {
    "name": "ink-soft",
    "value": "#141414",
    "usage": "Raised surface on dark sections."
   },
   {
    "name": "charcoal",
    "value": "#222222",
    "usage": "`brand` fill: the dark primary button and the floating demo pill."
   },
   {
    "name": "surface-dark",
    "value": "#333333",
    "usage": "Borders and dividers on dark grounds; also legacy --sd-dark-4 text."
   },
   {
    "name": "muted",
    "value": "#555555",
    "usage": "Secondary text on light grounds (6.7:1 on canvas)."
   },
   {
    "name": "subtle",
    "value": "#888888",
    "usage": "Captions and placeholder text. FAILS body contrast on canvas (3.2:1): use for 24px+ text or decoration only, or switch to `muted`."
   },
   {
    "name": "border",
    "value": "#e1e1e1",
    "usage": "Card and input hairlines on light grounds."
   },
   {
    "name": "frame",
    "value": "#eeeeee",
    "usage": "Row-highlight flash in table animations; image frames."
   },
   {
    "name": "canvas",
    "value": "#f2f2f2",
    "usage": "Light page background (`body`)."
   },
   {
    "name": "soft-white",
    "value": "#f7f7f7",
    "usage": "Card fill on canvas; text on dark."
   },
   {
    "name": "pure-white",
    "value": "#ffffff",
    "usage": "Raised cards, secondary button fill, text on crimson."
   },
   {
    "name": "action",
    "value": "#007cff",
    "usage": "Link / Action Blue from the design guide. Product UI links only, never marketing. 3.9:1 on white, so keep it to 18px+ or underline it; flagged."
   },
   {
    "name": "danger",
    "value": "#f84f65",
    "usage": "Error and destructive states. 3.3:1 on white: pair with an icon and a dark label, never as small text alone; flagged."
   },
   {
    "name": "brand",
    "value": "{charcoal}",
    "usage": "Semantic alias in code for the dark primary fill."
   },
   {
    "name": "brand-fg",
    "value": "{pure-white}",
    "usage": "Text on `brand`."
   },
   {
    "name": "crimson-50",
    "value": "#fff1f3",
    "usage": "Lightest tint: chip and toast grounds on light."
   },
   {
    "name": "crimson-100",
    "value": "#ffe3e7",
    "usage": "Hover tint behind crimson text."
   },
   {
    "name": "crimson-200",
    "value": "#fecbd3",
    "usage": "Dividers inside crimson-tinted panels."
   },
   {
    "name": "crimson-300",
    "value": "#fca3b2",
    "usage": "Crimson text on dark grounds, small sizes (9.9:1 on ink)."
   },
   {
    "name": "crimson-400",
    "value": "#f76d85",
    "usage": "Crimson text and glows on dark grounds."
   },
   {
    "name": "crimson-500",
    "value": "#ea3d5c",
    "usage": "Gradient top stop on dark (hero rotating word)."
   },
   {
    "name": "crimson-600",
    "value": "#d01f3f",
    "usage": "Primary CTA fill (top stop) and the live dot."
   },
   {
    "name": "crimson-700",
    "value": "#b6142c",
    "usage": "THE logo crimson. Fills, and crimson text on light (6.7:1 on white)."
   },
   {
    "name": "crimson-800",
    "value": "#971428",
    "usage": "Pressed state of crimson fills."
   },
   {
    "name": "crimson-900",
    "value": "#7e1526",
    "usage": "Deep crimson panels with white text."
   },
   {
    "name": "crimson-950",
    "value": "#460611",
    "usage": "Crimson-tinted ground on dark."
   },
   {
    "name": "logo-ink",
    "value": "#231f20",
    "usage": "The black of the wordmark artwork (sampled from logo-dark.png). Print and reproduction only; UI uses `ink`."
   }
  ]
 },
 "type": {
  "fonts": [],
  "families": {
   "display": "\"Inter Tight\", -apple-system, BlinkMacSystemFont, sans-serif",
   "body": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif"
  },
  "groups": [
   {
    "name": "Display",
    "family": "display",
    "styles": [
     {
      "name": "display-1",
      "fontSize": "80px",
      "lineHeight": 1,
      "fontWeight": 600,
      "sample": "Your Store. Your Brand. Your Growth.",
      "usage": "Hero headline at ≥1024px. One per page.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "display-2",
      "fontSize": "72px",
      "lineHeight": 1,
      "fontWeight": 600,
      "sample": "Stop renting your business.",
      "usage": "Section-opening statement on large screens.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "display-md",
      "fontSize": "60px",
      "lineHeight": 1,
      "fontWeight": 600,
      "sample": "Sell locally, everywhere.",
      "usage": "Hero at 640–1023px; social post headlines at 1080px.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "display-sm",
      "fontSize": "40px",
      "lineHeight": 1,
      "fontWeight": 600,
      "sample": "Your URL. Your brand. Your data.",
      "usage": "Hero on phones; card headlines in social posts.",
      "letterSpacing": "-0.04em"
     }
    ]
   },
   {
    "name": "Headings",
    "family": "display",
    "styles": [
     {
      "name": "heading-1",
      "fontSize": "64px",
      "lineHeight": 1.3,
      "fontWeight": 700,
      "sample": "See the difference for yourself.",
      "usage": "Section titles on desktop.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "heading-2",
      "fontSize": "48px",
      "lineHeight": 1.1,
      "fontWeight": 700,
      "sample": "Search that thinks like your customer.",
      "usage": "Section titles on tablet; feature block titles.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "statement",
      "fontSize": "28px",
      "lineHeight": 1.25,
      "fontWeight": 600,
      "sample": "Everything your business needs to sell, in one dashboard.",
      "usage": "Pull statements and card titles.",
      "letterSpacing": "-0.04em"
     }
    ]
   },
   {
    "name": "Text",
    "family": "body",
    "styles": [
     {
      "name": "body-lg",
      "fontSize": "20px",
      "lineHeight": 1.4,
      "fontWeight": 500,
      "sample": "Launch a fully independent online store. No developers. No infrastructure headaches.",
      "usage": "Hero and section intros, max 36rem wide.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "body-md",
      "fontSize": "17px",
      "lineHeight": 1.2,
      "fontWeight": 500,
      "sample": "Watch a 2-minute demo",
      "usage": "Link buttons and short supporting lines.",
      "letterSpacing": "-0.04em"
     },
     {
      "name": "body",
      "fontSize": "16px",
      "lineHeight": 1.4,
      "fontWeight": 400,
      "sample": "A customer database that's yours. Not shared, not rented.",
      "usage": "Running copy, feature descriptions."
     },
     {
      "name": "ui",
      "fontSize": "15px",
      "lineHeight": 1.4,
      "fontWeight": 500,
      "sample": "Orders · Products · Customers",
      "usage": "Nav links, small buttons, tabs, table cells."
     },
     {
      "name": "caption",
      "fontSize": "12px",
      "lineHeight": 1.4,
      "fontWeight": 600,
      "sample": "THE COMMERCE OPERATING SYSTEM",
      "usage": "Eyebrows and labels, set UPPERCASE.",
      "letterSpacing": "0.05em"
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Icon-to-label gap, hairline offsets."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Gap inside buttons and chips; compact mobile gutter (≤360px)."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Eyebrow padding; mobile gutter (≤480px)."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Gap between stacked CTAs; card inner gap."
   },
   {
    "name": "space-5",
    "value": "20px",
    "usage": "Default page gutter on phones and tablets; button side padding (sm/md)."
   },
   {
    "name": "space-6",
    "value": "24px",
    "usage": "Card padding; gap between hero blocks."
   },
   {
    "name": "space-7",
    "value": "28px",
    "usage": "Large button side padding (px-7)."
   },
   {
    "name": "space-8",
    "value": "32px",
    "usage": "Gap between hero copy and CTAs on desktop."
   },
   {
    "name": "space-10",
    "value": "40px",
    "usage": "Desktop gutter at >1280px."
   },
   {
    "name": "space-12",
    "value": "48px",
    "usage": "Hero side padding on desktop."
   },
   {
    "name": "space-20",
    "value": "80px",
    "usage": "Hero bottom padding on desktop; section rhythm."
   },
   {
    "name": "space-24",
    "value": "96px",
    "usage": "Vertical space between homepage sections."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-xs",
    "value": "4px",
    "usage": "Buttons (every size but card). The brand's button corner."
   },
   {
    "name": "radius-md",
    "value": "8px",
    "usage": "Floating demo pill, toasts, inputs, small cards."
   },
   {
    "name": "radius-lg",
    "value": "14px",
    "usage": "Product and dashboard cards."
   },
   {
    "name": "radius-xl",
    "value": "16px",
    "usage": "Feature cards and design-guide panels."
   },
   {
    "name": "radius-2xl",
    "value": "24px",
    "usage": "Large showcase frames and social post cards."
   },
   {
    "name": "radius-pill",
    "value": "999px",
    "usage": "Eyebrow pills, tags, the live dot."
   }
  ]
 },
 "shadow": {
  "tokens": [
   {
    "name": "shadow-card",
    "value": "0 2px 20px rgba(0, 0, 0, 0.03)",
    "usage": "Resting cards on canvas."
   },
   {
    "name": "shadow-card-hover",
    "value": "0 12px 30px rgba(0, 0, 0, 0.08)",
    "usage": "Card hover lift."
   },
   {
    "name": "shadow-cta",
    "value": "0 2px 16px rgba(0, 0, 0, 0.2)",
    "usage": "Floating demo pill and dark CTAs."
   },
   {
    "name": "shadow-accent",
    "value": "0 10px 28px -10px rgba(182, 20, 44, 0.6)",
    "usage": "Crimson glow under the accent button only."
   }
  ]
 },
 "blur": {
  "tokens": [
   {
    "name": "blur-nav",
    "value": "50px",
    "usage": "backdrop-filter on the sticky nav."
   },
   {
    "name": "blur-glass",
    "value": "40px",
    "usage": "Glass panels and modal sheets."
   }
  ]
 },
 "layout": {
  "tokens": [
   {
    "name": "max-width-site",
    "value": "1440px",
    "usage": "Outer container width."
   },
   {
    "name": "height-hero-sm",
    "value": "85vh",
    "usage": "Hero min height on phones."
   },
   {
    "name": "height-hero-md",
    "value": "90vh",
    "usage": "Hero min height on larger screens."
   }
  ]
 }
}