{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "name": "Thumbkiss Design System",
  "version": "1.0.0",
  "updated": "2026-08-03",
  "source": "https://thumbkiss.app/brand/",
  "color": {
    "brand": {
      "red-50":  { "$type": "color", "$value": "#FFF1F4" },
      "red-100": { "$type": "color", "$value": "#FFE0E7" },
      "red-200": { "$type": "color", "$value": "#FFC2CE" },
      "red-300": { "$type": "color", "$value": "#FF94AB" },
      "red-400": { "$type": "color", "$value": "#FF5C7F" },
      "red-500": { "$type": "color", "$value": "#FF2E57", "$description": "Thumbkiss Red. The primary brand colour. Used in the logo and app icon." },
      "red-600": { "$type": "color", "$value": "#E31048", "$description": "Text-safe red on white (4.74:1). Use for links and small text on light backgrounds." },
      "red-700": { "$type": "color", "$value": "#BE0A3D" },
      "red-800": { "$type": "color", "$value": "#9B0D37" },
      "red-900": { "$type": "color", "$value": "#800F33" },
      "red-950": { "$type": "color", "$value": "#470217" },
      "wine":    { "$type": "color", "$value": "#5A1F2B" }
    },
    "neutral": {
      "night":      { "$type": "color", "$value": "#080604", "$description": "Website page background." },
      "night-soft": { "$type": "color", "$value": "#120F0A" },
      "ink":        { "$type": "color", "$value": "#0B0A0A", "$description": "Text on light backgrounds. Also the black logo colour." },
      "slate":      { "$type": "color", "$value": "#5A5560" },
      "mist":       { "$type": "color", "$value": "#8A8590" },
      "paper":      { "$type": "color", "$value": "#FFFFFF" }
    },
    "alpha": {
      "surface":        { "$type": "color", "$value": "rgba(255,255,255,0.04)" },
      "surface-strong": { "$type": "color", "$value": "rgba(255,255,255,0.07)" },
      "line":           { "$type": "color", "$value": "rgba(255,255,255,0.12)" },
      "text-muted":     { "$type": "color", "$value": "rgba(255,255,255,0.72)" },
      "text-soft":      { "$type": "color", "$value": "rgba(255,255,255,0.48)" }
    }
  },
  "font": {
    "family": {
      "brand":   { "$type": "fontFamily", "$value": ["General Sans", "Helvetica Neue", "Arial", "sans-serif"], "$description": "Wordmark and all product UI on iOS and Android. Fontshare, ITF Free Font Licence." },
      "display": { "$type": "fontFamily", "$value": ["Fraunces", "Georgia", "Times New Roman", "serif"], "$description": "Website and blog display headlines only, 28px and above. Google Fonts, SIL OFL." },
      "mono":    { "$type": "fontFamily", "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"] }
    },
    "weight": { "regular": 400, "medium": 500, "semibold": 600, "bold": 700 },
    "scale": {
      "display-xl": { "size": 64, "lineHeight": 68, "family": "display", "weight": 600, "tracking": "-0.015em" },
      "display-lg": { "size": 48, "lineHeight": 54, "family": "display", "weight": 600, "tracking": "-0.015em" },
      "display-md": { "size": 32, "lineHeight": 38, "family": "display", "weight": 600, "tracking": "-0.01em" },
      "title-lg":   { "size": 24, "lineHeight": 30, "family": "brand",   "weight": 600, "tracking": "-0.01em" },
      "title-md":   { "size": 20, "lineHeight": 26, "family": "brand",   "weight": 600, "tracking": "-0.005em" },
      "body-lg":    { "size": 17, "lineHeight": 26, "family": "brand",   "weight": 400, "tracking": "0" },
      "body-md":    { "size": 15, "lineHeight": 22, "family": "brand",   "weight": 400, "tracking": "0" },
      "label":      { "size": 13, "lineHeight": 18, "family": "brand",   "weight": 500, "tracking": "0.01em" },
      "caption":    { "size": 12, "lineHeight": 16, "family": "brand",   "weight": 500, "tracking": "0.01em" },
      "overline":   { "size": 11, "lineHeight": 14, "family": "brand",   "weight": 600, "tracking": "0.16em", "textTransform": "uppercase" }
    }
  },
  "space": {
    "base": 4,
    "sp-1": 4, "sp-2": 8, "sp-3": 12, "sp-4": 16, "sp-5": 24,
    "sp-6": 32, "sp-7": 48, "sp-8": 64, "sp-9": 96, "sp-10": 128
  },
  "radius": {
    "r-sm": "8px", "r-md": "14px", "r-lg": "22px", "r-xl": "32px",
    "r-pill": "999px", "r-squircle": "22.37%"
  },
  "elevation": {
    "elev-1": "0 1px 2px rgba(0,0,0,0.24)",
    "elev-2": "0 8px 24px rgba(0,0,0,0.32)",
    "elev-glow": "0 0 40px rgba(255,46,87,0.35)"
  },
  "motion": {
    "fast":  { "duration": "160ms", "easing": "ease-out" },
    "base":  { "duration": "240ms", "easing": "cubic-bezier(0.2,0.8,0.2,1)" },
    "heart": { "duration": "720ms", "easing": "spring(1, 180, 18, 0)", "$description": "The thumbkiss send animation." }
  },
  "logo": {
    "clearSpace": "25% of mark height on all sides",
    "minSize": { "symbolScreen": "24px", "symbolPrint": "8mm", "horizontalScreen": "96px", "stackedScreen": "64px" },
    "files": {
      "primary": "https://thumbkiss.app/brand/thumbkiss-logo.svg",
      "white": "https://thumbkiss.app/brand/thumbkiss-logo-white.svg",
      "black": "https://thumbkiss.app/brand/thumbkiss-logo-black.svg",
      "onRed": "https://thumbkiss.app/brand/thumbkiss-logo-on-red.svg",
      "horizontal": "https://thumbkiss.app/brand/thumbkiss-logo-horizontal.svg",
      "stacked": "https://thumbkiss.app/brand/thumbkiss-logo-stacked.svg",
      "wordmark": "https://thumbkiss.app/brand/thumbkiss-wordmark.svg",
      "appIcon": "https://thumbkiss.app/brand/png/thumbkiss-app-icon-1024.png"
    }
  },
  "accessibility": {
    "note": "Thumbkiss Red #FF2E57 on white is 3.63:1 — large text, icons and borders only. Use red-600 #E31048 or darker for body text on light backgrounds. On #080604, #FF2E57 is 5.44:1 and passes AA for all text.",
    "contrast": {
      "#FF2E57 on #FFFFFF": 3.63,
      "#E31048 on #FFFFFF": 4.74,
      "#BE0A3D on #FFFFFF": 6.36,
      "#FFFFFF on #FF2E57": 3.63,
      "#FF2E57 on #080604": 5.44,
      "#FFFFFF on #080604": 20.23
    }
  }
}