/* ───────────────────────────────────────────────────────────── * ShopConnect Design System — tokens.css * v0.3 · forked from Mitchell's v0.2 (2026-05-16) · shared team system * * The chassis is Mitchell's curated set of moves; ShopConnect is now the * default brand. Not a regulatory framework — curated defaults you * override deliberately. Two layers: * * 1. STRUCTURAL Neutrals, system colors, type, radius, spacing, * motion. The chassis. Stable across builds because * consistency is doing work here; override only when * a specific brand has a genuine reason. * * 2. BRAND One accent color per build. Override via * [data-brand="..."] or :root in your app. Used for * primary CTAs and active states. * * The editorial lime and reporting blue below are PATTERNS Mitchell * likes, not gods. The lime-highlighter-under-H1 move and the * blue-numerics-in-reporting move are good defaults. Diverge when the * brand genuinely calls for it — just be deliberate. * ───────────────────────────────────────────────────────────── */ :root { /* ── 1. Neutrals (warm-cool agnostic, slightly warm cast) ── */ --bg: #fafaf8; /* page background, warm off-white */ --paper: #ffffff; /* card / input surfaces */ --text: #1c1917; /* near-black, warm */ --muted: #78716c; /* secondary text, labels */ --faint: #a8a29e; /* tertiary text, placeholders, dividers when subtle */ --border: #e7e5e4; /* default 1px borders */ --rule: #f5f5f4; /* table header fill, row hover, inline code bg */ /* ── 2. System color (preferred patterns, see header note) ── */ --editorial: #d4ff3a; /* default move: list-page H1 highlighter */ --report: #2563eb; /* default move: reporting headline numerics */ /* ── 3. Status (pastel pair per state — bg for tiles, fg for text) ── */ --success: #15803d; --success-bg: #f0fdf4; --error: #be123c; --error-bg: #fff1f2; --warning: #b45309; --warning-bg: #fffbeb; --info: #0e7490; --info-bg: #ecfeff; /* ── 4. Brand (SWAPPABLE — override per build) ── * DEFAULT IS SHOPCONNECT. Our house brand is a teal-green, pulled live * from shopconnectpro.com (oklch 58% 0.10 h168). This is the default so * any surface built without a data-brand still lands on-brand for us. * To build for a different brand, set (e.g. one * of Mitch's reference presets below, or "mono" for chromeless). */ --brand: oklch(58% 0.10 168); /* ShopConnect teal-green (~#1f9e88) */ --brand-fg: #ffffff; /* foreground that sits on --brand */ --brand-soft: oklch(94% 0.04 168); /* soft tint (~#e3f3ee), icon-tile bgs */ /* ── 5. Type ── * Suisse Int'l first — Mitchell's preferred running font. Picks up * automatically if installed via Adobe Fonts or system. Geist is the * free fallback and reads close enough that builds without a Suisse * license still feel right. */ --font-sans: "Suisse Int'l", "Suisse Intl", "Geist", "Inter", system-ui, sans-serif; --font-mono: "Geist Mono", "Inconsolata", ui-monospace, monospace; /* Display slots — second-mode type, NOT chrome. Use sparingly: * * --font-display-sans chunky condensed. Hero blocks, stadium-scale * editorial moments, wordmarks. Single weight, * all-caps usually. Anton (free) ships; Druk * (paid, Commercial Type) is the real-deal * Sam-Fender-DARLINGS-block move. * * --font-display-serif transitional italic. Quiet moments — empty * states, confirmation/thank-you screens, * lyrical product copy. Never chrome, never * a running heading. EB Garamond (free) is * a Caslon analog; Fraunces (free, variable) * is a modern alt. * * Reach for these maybe 1-2 times per surface, not throughout. */ --font-display-sans: "Anton", "Druk", "Bebas Neue", "Geist", sans-serif; --font-display-serif: "EB Garamond", "Fraunces", "Caslon", Georgia, serif; /* Type scale (stop at --text-2xl for app chrome — bigger is editorial) */ --text-xs: 12px; --lh-xs: 16px; /* eyebrow, caption */ --text-sm: 14px; --lh-sm: 20px; /* body small, labels */ --text-base: 15px; --lh-base: 22px; /* body */ --text-md: 16px; --lh-md: 24px; /* body large, lead */ --text-lg: 18px; --lh-lg: 26px; /* card title, table head emphasis */ --text-xl: 20px; --lh-xl: 28px; /* sub-section heading */ --text-2xl: 24px; --lh-2xl: 30px; /* H1 — app chrome ceiling */ --text-3xl: 28px; --lh-3xl: 34px; /* H1 — list page with highlighter */ --text-hero: 44px; --lh-hero: 48px; /* marketing only */ /* Weight aliases */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Tracking (negative on display sizes only) */ --track-tight: -0.018em; /* H1, H2 */ --track-normal: 0; --track-wide: 0.08em; /* mono eyebrow caps */ /* ── 6. Radius ── */ --radius-xs: 4px; /* thumbnails, table-cell highlights */ --radius-sm: 8px; /* inputs, small buttons */ --radius-md: 12px; /* cards, KPI tiles */ --radius-lg: 16px; /* large surfaces, modal */ --radius-full: 999px; /* pills, badges, circular icons */ /* ── 7. Spacing (4px base, exponential-ish) ── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ── 8. Layout ── */ --content-narrow: 640px; /* forms — single column max */ --content-prose: 720px; /* article copy */ --content-app: 1180px; /* app chrome canvas */ /* ── 9. Borders, shadows, focus ── */ --border-w: 1px; --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent); /* Shadows are intentionally minimal — earn them, don't sprinkle them */ --shadow-pop: 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 12px rgba(28, 25, 23, 0.06); --shadow-modal: 0 8px 24px rgba(28, 25, 23, 0.12), 0 24px 60px rgba(28, 25, 23, 0.10); /* ── 10. Motion ── */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* general transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* enter / appear */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exit / dismiss */ --dur-instant: 0ms; --dur-fast: 120ms; /* hovers, color shifts */ --dur: 180ms; /* default — toggles, expansions */ --dur-slow: 260ms; /* modal in, drawer slide */ /* ── 11. Z-index ── */ --z-base: 1; --z-sticky: 10; --z-overlay: 20; --z-modal: 30; --z-toast: 40; } /* ───────────────────────────────────────────────────────────── * BRAND PRESETS * * Each preset only overrides --brand / --brand-fg / --brand-soft. * Apply at the root: * Or per-section if you're showcasing brands side-by-side. * ───────────────────────────────────────────────────────────── */ /* Black on white — no chromatic brand. The most restrained option. * Use when: the product is the brand (Dnero POS chrome), the build * needs to feel utilitarian, or when there's no committed accent yet. */ [data-brand="mono"] { --brand: #1c1917; --brand-fg: #ffffff; --brand-soft: #f5f5f4; } /* Burnt orange — warm, confident, hospitality-leaning. * Reads as Dnero-flavored without copying it. */ [data-brand="ember"] { --brand: #c2410c; --brand-fg: #ffffff; --brand-soft: #fff1e6; } /* Forest green — Stripe-ish sophistication. Reads as "trusted, calm, * grown-up product". Pairs well with the editorial lime. */ [data-brand="forest"] { --brand: #166534; --brand-fg: #ffffff; --brand-soft: #ecfdf5; } /* Plum — premium, slightly editorial without tipping over. * Closest neighbour to BurgerFuel purple. */ [data-brand="plum"] { --brand: #6d28d9; --brand-fg: #ffffff; --brand-soft: #f3edff; } /* Cobalt — the cool option. Distinct from --report blue (different * hue + weight) but tests well in cool-toned builds. */ [data-brand="cobalt"] { --brand: #1d4ed8; --brand-fg: #ffffff; --brand-soft: #eff4ff; } /* Terracotta — warm, paper-feeling. Pairs naturally with a cream bg * if you also override --bg to #f6efe4. */ [data-brand="terracotta"] { --brand: #b14a2c; --brand-fg: #fdf9f0; --brand-soft: #f7e6d8; } /* Peach — the original calibration default. Kept here so it's still * a one-line opt-in if you change your mind. */ [data-brand="peach"] { --brand: #f29d64; --brand-fg: #ffffff; --brand-soft: #fef0e3; } /* ── Bright family — high-contrast on black. Use when you want the * brand itself to do the "lime highlighter on near-black text" move, * not just the editorial slot. * * These pair best with chunky hard-cornered chrome — keep --radius-sm * on buttons and category pills. Rounded-full on bright + small = * AI-generated SaaS sheen. * ───────────────────────────────────────────────────────────── */ /* Hot magenta — the pink-on-black move. */ [data-brand="magenta"] { --brand: #ec1e79; --brand-fg: #ffffff; --brand-soft: #fde2ee; } /* Tangerine — saturated orange, not the muted peach. */ [data-brand="tangerine"] { --brand: #f97316; --brand-fg: #ffffff; --brand-soft: #ffedd5; } /* Cyan — high-vis aquatic. */ [data-brand="cyan"] { --brand: #06b6d4; --brand-fg: #ffffff; --brand-soft: #cffafe; } /* Lemon — true bright yellow, the Sam-Fender-DARLINGS-block yellow. * Distinct from --editorial lime (yellow-green); this is yellow-yellow. * Auto-derived foreground will be near-black because of high luminance. */ [data-brand="lemon"] { --brand: #fde047; --brand-fg: #1c1917; --brand-soft: #fef9c3; } /* ───────────────────────────────────────────────────────────── * SHOPCONNECT — our house brand (the default; explicit preset here * so it can also be applied per-section or alongside others). * Source of truth: shopconnectpro.com styles.css (--accent, hue 168). * Ink/near-black on our surfaces is the warm-green #0a1f1a, not the * warm-brown --text above — override --text per surface if matching * the marketing site exactly. Update this preset when the site reskins. * ───────────────────────────────────────────────────────────── */ [data-brand="shopconnect"] { --brand: oklch(58% 0.10 168); /* teal-green (~#1f9e88) */ --brand-fg: #ffffff; --brand-soft: oklch(94% 0.04 168); /* ~#e3f3ee */ } /* ───────────────────────────────────────────────────────────── * MITCH'S REFERENCE PRESETS — committed brands from Mitchell's own * products. NOT ShopConnect brands. Kept here as a reference library * to browse and cherry-pick moves from (see reference-library/). * Each is the live brand for that surface as of Mitch's v0.2. * ───────────────────────────────────────────────────────────── */ /* TicketFlo — event ticketing platform (ticketflo.org) */ [data-brand="ticketflo"] { --brand: #f97316; --brand-fg: #ffffff; --brand-soft: #ffedd5; } /* givvv — donation experiences for churches (givvv.org) */ [data-brand="givvv"] { --brand: #166534; --brand-fg: #ffffff; --brand-soft: #ecfdf5; } /* kepa — payment gateway / terminal platform (kepapay.co) */ [data-brand="kepa"] { --brand: #10b981; --brand-fg: #ffffff; --brand-soft: #d1fae5; } /* kōdo — status page + uptime monitoring (kodostatus.com) */ [data-brand="kodo"] { --brand: #d4ff3a; --brand-fg: #1c1917; --brand-soft: #f0ffc4; } /* nexus — POS platform (nexuspos.org). No accent committed yet — * defaults to mono. Try any of the experimental brights via harness. */ [data-brand="nexus"] { --brand: #1c1917; --brand-fg: #ffffff; --brand-soft: #f5f5f4; } /* Lloy — enterprise payment loyalty (TBD brand). Placeholder. */ [data-brand="lloy"] { --brand: #1c1917; --brand-fg: #ffffff; --brand-soft: #f5f5f4; } /* ───────────────────────────────────────────────────────────── * Utility classes — opt-in, not mandatory. * Most components should use the tokens above directly via var(). * ───────────────────────────────────────────────────────────── */ .font-mono { font-family: var(--font-mono); } .tabular { font-variant-numeric: tabular-nums; } .h-highlighted { background: var(--editorial); padding: 2px 8px; margin-left: -8px; display: inline-block; } .report-num { color: var(--report); font-variant-numeric: tabular-nums; }