{
  "$schema": "https://brand.kwik.com/tokens.json",
  "name": "Kwik design tokens",
  "version": "2.1.0",
  "updated": "2026-10-19",
  "note": "Software/product tokens v2.1 \u2014 derived from the shipped Kwik Rewards app (kwik-app src/styles.css + Home.tsx, verified live) and the Kwik rep dashboard. Use only the --k-* names. Cards are flat and text-led; buttons are pills; no coloured icon tiles.",
  "source": {
    "css": "https://brand.kwik.com/tokens.css",
    "softwareRules": "https://brand.kwik.com/software-rules.md",
    "softwareSpec": "https://brand.kwik.com/software",
    "websiteRules": "https://brand.kwik.com/website-rules.md",
    "websiteSpec": "https://brand.kwik.com/website"
  },
  "color": {
    "ink": {
      "--k-ink": "#0B0B0F",
      "--k-ink-2": "#3A3A40",
      "--k-muted": "#6A6A70",
      "--k-faint": "#84848A"
    },
    "yellow": {
      "--k-yellow": "#FFD836",
      "--k-yellow-soft": "#FFF6CC",
      "--k-yellow-ring": "#FFEFC2",
      "--k-yellow-deep": "#D99A00"
    },
    "peach": {
      "--k-peach": "#FDBA9A",
      "role": "the only secondary accent-bar colour"
    },
    "surfaces": {
      "--k-white": "#FFFFFF",
      "--k-canvas": "#F2F2F3",
      "--k-chip": "#F4F4F5",
      "--k-feature": "#E6E6E9"
    },
    "lines": {
      "--k-line": "#EDEDEF",
      "--k-line-2": "#E7E7E9",
      "--k-row": "#F0F0F2",
      "--k-track": "#ECECEF",
      "--k-placeholder": "#D4D4D8"
    },
    "status": {
      "--k-green": "#138A5B",
      "--k-green-2": "#1FB57A",
      "--k-green-soft": "#E3F6EC",
      "--k-green-on-feature": "#0E744B",
      "--k-red": "#C2410C",
      "--k-red-soft": "#FEE2E2",
      "--k-orange": "#B4471A",
      "--k-warning": "#B7791F",
      "--k-warning-soft": "#FFF4CC",
      "--k-disabled-bg": "#CFCFD4",
      "--k-disabled-text": "#FFFFFF"
    },
    "semantic": {
      "--k-bg": "var(--k-canvas)",
      "--k-card": "var(--k-white)",
      "--k-bg-subtle": "var(--k-chip)",
      "--k-action": "var(--k-ink)",
      "--k-on-action": "#FFFFFF",
      "--k-action-hover": "#1C1C21",
      "--k-accent": "var(--k-yellow)",
      "--k-accent-soft": "var(--k-yellow-soft)",
      "--k-accent-ring": "var(--k-yellow-ring)",
      "--k-accent-bar": "var(--k-yellow)",
      "--k-accent-bar-2": "var(--k-peach)",
      "--k-text": "var(--k-ink)",
      "--k-text-2": "var(--k-ink-2)",
      "--k-text-3": "var(--k-muted)",
      "--k-summary": "var(--k-ink)",
      "--k-on-summary": "#FFFFFF",
      "--k-on-summary-2": "rgba(255,255,255,.6)",
      "--k-feature-bg": "var(--k-feature)",
      "--k-on-feature": "#3F3F46",
      "--k-feature-cell": "#FFFFFF",
      "--k-feature-line": "#D6D6DA",
      "--k-focus": "var(--k-ink)",
      "--k-focus-ring": "0 0 0 3px var(--k-yellow-ring)",
      "--k-accentbar-w": "8px",
      "--k-accentbar-h": "24px"
    }
  },
  "typography": {
    "family": "'Kwik','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif",
    "weights": [
      400,
      500,
      600,
      700
    ],
    "baseSize": "14px",
    "lineHeight": "1.4",
    "sizes": {
      "--k-fs-overline": "11px",
      "--k-fs-caption": "12px",
      "--k-fs-label": "12px",
      "--k-fs-ui": "13px",
      "--k-fs-body": "14px",
      "--k-fs-input": "15px",
      "--k-fs-section": "16px",
      "--k-fs-app-section": "18px",
      "--k-fs-card-metric": "20px",
      "--k-fs-stat": "24px",
      "--k-fs-greeting": "26px",
      "--k-fs-page": "28px",
      "--k-fs-summary": "28px",
      "--k-fs-hero": "36px",
      "--k-fs-feature": "52px"
    },
    "tracking": {
      "--k-tracking-overline": ".08em",
      "--k-tracking-hero": "-.02em",
      "--k-tracking-feature": "-.04em"
    },
    "scale": {
      "hero-metric": {
        "px": "36\u201340",
        "weight": 700,
        "lineHeight": 1.05,
        "tracking": "-.02em",
        "tabular": true,
        "use": "the one headline number on a dashboard"
      },
      "page-title": {
        "px": 28,
        "weight": 700,
        "lineHeight": 1.15,
        "tracking": "-.02em",
        "use": "page H1; dashboard greeting 28/600"
      },
      "summary-metric": {
        "px": 28,
        "weight": 700,
        "lineHeight": 1.1,
        "tabular": true,
        "use": "number on the Ink summary card"
      },
      "card-metric": {
        "px": 20,
        "weight": 700,
        "lineHeight": 1.2,
        "tabular": true,
        "use": "stat tiles, list values"
      },
      "section-title": {
        "px": 16,
        "weight": 600,
        "lineHeight": 1.3,
        "use": "card header after the accent bar"
      },
      "body-strong": {
        "px": 14,
        "weight": 600,
        "use": "row title, button label, segment label; 15 in the sidebar"
      },
      "body": {
        "px": 14,
        "weight": 400,
        "lineHeight": 1.4
      },
      "value": {
        "px": 14,
        "weight": 700,
        "tabular": true,
        "use": "right-aligned money in lists"
      },
      "label": {
        "px": 12,
        "weight": 600,
        "use": "field label, list meta"
      },
      "caption": {
        "px": 12,
        "weight": 400,
        "lineHeight": 1.4,
        "use": "helper, timestamp; axis labels 11"
      },
      "overline": {
        "px": 11,
        "weight": 500,
        "tracking": ".08em",
        "transform": "uppercase",
        "use": "date line, summary-card label, table header"
      },
      "feature-amount": {
        "px": "52 (clamp 40\u201352)",
        "weight": 800,
        "lineHeight": 1,
        "tracking": "-.04em",
        "tabular": true,
        "use": "cash balance on the feature card"
      },
      "stat-value": {
        "px": 24,
        "weight": 700,
        "lineHeight": 1.2,
        "tracking": "-.02em",
        "tabular": true,
        "use": "stat tile value"
      },
      "app-section-title": {
        "px": 18,
        "weight": 700,
        "lineHeight": 1.3,
        "tracking": "-.01em",
        "use": "list/feed card titles in the app, with a 13/600 link"
      },
      "greeting": {
        "px": 26,
        "weight": 700,
        "tracking": "-.02em",
        "use": "time-aware greeting on the app home"
      }
    }
  },
  "space": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px",
    "7": "32px",
    "8": "40px",
    "9": "48px"
  },
  "radius": {
    "--k-r-card": "20px",
    "--k-r-media": "16px",
    "--k-r-panel": "14px",
    "--k-r-control": "12px",
    "--k-r-segment": "10px",
    "--k-r-iconbox": "10px",
    "--k-r-pill": "999px",
    "--k-r-btn": "999px",
    "--k-r-btn-inline": "12px",
    "--k-r-accentbar": "3px"
  },
  "radiusRoles": {
    "20": "cards, sheets",
    "16": "media images, user panel",
    "14": "inner panels, inputs, segmented track",
    "12": "inline-form buttons, nav items, icon buttons, notices, value tiles",
    "10": "segments, stat-tile icon box",
    "999": "buttons, chips, pills, search, avatars, rank badges, switches, brand marks"
  },
  "elevation": {
    "--k-shadow": "0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)",
    "--k-shadow-seg": "0 1px 3px rgba(0,0,0,.10)",
    "--k-shadow-menu": "0 16px 40px -8px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.06)",
    "note": "--k-shadow is for hover on tappable cards and for sheets/menus; resting cards have no shadow"
  },
  "stroke": {
    "--k-hairline": "1px solid var(--k-line)",
    "--k-input-line": "1px solid var(--k-line-2)",
    "--k-row-line": "1px solid var(--k-row)",
    "--k-focus-ring": "0 0 0 3px var(--k-yellow-ring)"
  },
  "sizing": {
    "--k-h-btn": "48px",
    "--k-h-btn-sm": "36px",
    "--k-h-btn-xs": "30px",
    "--k-h-btn-inline": "44px",
    "--k-h-input": "48px",
    "--k-h-input-inline": "44px",
    "--k-h-search": "40px",
    "--k-h-chip": "32px",
    "--k-h-segment": "38px",
    "--k-h-view": "36px",
    "--k-h-pill": "22px",
    "--k-h-nav": "46px",
    "--k-h-iconbtn": "44px",
    "--k-h-row": "56px",
    "--k-h-topbar": "76px",
    "--k-h-topbar-mobile": "64px",
    "--k-w-sidebar": "256px",
    "--k-w-rail": "360px",
    "--k-w-search": "260px",
    "--k-content-max": "1480px",
    "--k-page-pad": "24px 28px 40px",
    "--k-page-pad-mobile": "8px 16px 32px",
    "--k-accentbar-w": "8px",
    "--k-accentbar-h": "24px",
    "--k-rank": "28px",
    "--k-avatar": "36px",
    "--k-avatar-lg": "56px",
    "--k-iconbox": "36px",
    "--k-valuetile": "52px",
    "--k-media-h": "280px",
    "--k-bar-h": "6px",
    "--k-card-pad": "18px",
    "--k-card-pad-tile": "16px",
    "--k-card-pad-feature": "20px"
  },
  "motion": {
    "--k-fast": "120ms",
    "--k-base": "200ms",
    "--k-ease": "cubic-bezier(.2,.8,.2,1)",
    "--k-spring": "cubic-bezier(.3,1.3,.5,1)"
  },
  "components": {
    "accentBar": {
      "size": "8x24",
      "radius": 3,
      "colors": [
        "yellow (default)",
        "peach (second group)"
      ],
      "then": "16/600 title; nothing else precedes a title"
    },
    "card": {
      "radius": 20,
      "padding": "18 (16 stat tile, 20 feature, 24 wide dashboard)",
      "border": "none",
      "shadow": "none at rest; --k-shadow on hover when tappable",
      "nestedSoft": "#F2F2F3"
    },
    "summaryCard": {
      "bg": "#0B0B0F",
      "text": "#FFFFFF",
      "sparkline": "#FFD836 1.8px",
      "limit": "one per screen"
    },
    "featureCard": {
      "bg": "#E6E6E9",
      "radius": 20,
      "padding": 20,
      "gap": 16,
      "label": "14 #3F3F46",
      "delta": "12/600 #0E744B",
      "amount": "52/800 -.04em",
      "legend": "12 #52525B with 6px dot (green/yellow) over 18/700",
      "bars": "30 wide r8, h 20\u201380, #D4D4D8, current #1FB57A, 10px labels",
      "innerPanel": "white r14, cells p12 14, 1px #D6D6DA divider",
      "actions": "accent pill + white pill + white outline pill, equal width"
    },
    "button": {
      "height": {
        "default": 48,
        "sm": 36,
        "xs": 30,
        "inline": 44
      },
      "padding": {
        "default": "0 20",
        "sm": "0 14",
        "xs": "0 12",
        "inline": "0 18"
      },
      "label": {
        "default": "15/600",
        "sm": "13/600",
        "xs": "12/600",
        "inline": "14/600"
      },
      "radius": {
        "default": 999,
        "inline": 12
      },
      "variants": [
        "accent (app primary CTA, one per view)",
        "black (dashboard primary / app second-rank)",
        "dim/white",
        "ghost",
        "outline"
      ]
    },
    "segmented": {
      "light": "track #F4F4F5 p4 r14; segment h38 r10 13/500; active white + shadow",
      "dark": "no track; segment h32 r999 12/600; active Ink/white"
    },
    "viewSwitch": "track #F4F4F5 p4 r999; segment h36 r999 13/600; active Ink/white",
    "chip": "h32 r999 #F4F4F5 13/600; on = Ink",
    "pill": "h22 r999 11/600",
    "input": "h48 r14 1px #E7E7E9 15px; inline h44 r12; focus border Ink",
    "rankBadge": "28 round; #1 yellow, others #F4F4F5; 12/700",
    "progress": "h6 r99 track #ECECEF fill Ink (green when complete)",
    "navItem": "h46 r12 15/500; active #FFF6CC 700",
    "notice": "#FFF6CC r12 p8 12 13/500",
    "appSectionTitle": "18/700 -.01em + right-aligned 13/600 link with 14px chevron; margin-bottom 12; no bar, no icon",
    "statTile": {
      "card": "white r20 p16, tappable",
      "iconBox": "36x36 r10 white, 1px #EDEDEF, 17px line icon \u2014 the only icon container allowed",
      "status": "11/600 text top-right: #138A5B good, #B4471A warn, muted",
      "value": "24/700 -.02em tabular, mt 14",
      "label": "12 muted, truncates"
    },
    "valueTile": "52x52 r12 #FFF6CC 15/800; optional 22px round brand mark bottom-right",
    "mediaCard": "image block r16 h280 with bottom scrim rgba(0,0,0,0) 35% -> rgba(0,0,0,.7); product/giveaway imagery only",
    "search": "pill h40 r999 #F2F2F3 1px #EDEDEF p0 14 w260; 13px input, placeholder #84848A",
    "userPanel": "#F2F2F3 r16 p12 gap 12: 36 avatar + name 14/600 + email 12 muted",
    "brandMark": "round, 800 initials -.02em on the brand tile colour, 1px #EDEDEF; 22 / 40 / 60 (ringed 2px Ink when selected)",
    "page": "max 1480, padding 24 28 40 (8 16 32 mobile), column gap 20"
  },
  "darkMode": {
    "selector": "html[data-mode=\"dark\"]",
    "tokens": {
      "--k-ink": "#F4F4F5",
      "--k-ink-2": "#D4D4D8",
      "--k-muted": "#A1A1AA",
      "--k-faint": "#8B8B93",
      "--k-bg": "#0D0D0F",
      "--k-card": "#18181B",
      "--k-chip": "#232328",
      "--k-bg-subtle": "#232328",
      "--k-line": "#26262B",
      "--k-line-2": "#303036",
      "--k-row": "#232328",
      "--k-track": "#2C2C31",
      "--k-action": "#F4F4F5",
      "--k-on-action": "#0B0B0F",
      "--k-action-hover": "#E4E4E7",
      "--k-accent-soft": "#3A3214",
      "--k-accent-ring": "#5C4E12",
      "--k-text": "#F4F4F5",
      "--k-text-2": "#D4D4D8",
      "--k-text-3": "#A1A1AA",
      "--k-feature-bg": "#222227",
      "--k-on-feature": "#E4E4E7",
      "--k-feature-cell": "#2C2C32",
      "--k-feature-line": "#38383F",
      "--k-green-on-feature": "#4ADE80",
      "--k-green": "#4ADE80",
      "--k-green-2": "#22C55E",
      "--k-green-soft": "#12301F",
      "--k-red": "#F87171",
      "--k-orange": "#FB923C",
      "--k-disabled-bg": "#2C2C31",
      "--k-disabled-text": "#6B6B73",
      "--k-shadow": "0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)"
    }
  },
  "prohibited": [
    "any blue / navy / indigo / blue-tinted grey",
    "icon tiles, coloured squares or pastel fills on cards or rows",
    "accent-bar colours other than yellow (default) or peach (secondary)",
    "borders on cards",
    "shadows on buttons, chips, pills, inputs, rows",
    "yellow as a page background; yellow text on white (use #D99A00)",
    "more than one yellow button per page; more than one Ink summary card per screen",
    "radii off the 20/14/12/10/999 ladder",
    "photography in product; emoji in data; exclamation marks in system copy"
  ]
}