{
  "system": "Luckiest Man Ventures Design System",
  "version": "1.0",
  "updated": "2026-06-17",
  "northStar": "Quality earns credibility. Personality earns attention. We need both. Warm editorial meets restrained neo-brutalism. Not generic SaaS.",
  "usage": "Load this with lmv-tokens.css. Build only from these values. Never hardcode a hex, duration, or easing. Apply a surface class (.on-cream/.on-navy/.on-rust/.on-sand/.on-dark) to every section and card; children inherit the correct on-surface colors automatically.",

  "color": {
    "primary": {
      "navy": "#123260", "navy-2": "#0d2449", "navy-dark": "#0b1624",
      "rust": "#c24c32", "rust-2": "#a33e28", "rust-soft": "#fff0ea",
      "gold": "#e6bf4a", "gold-2": "#d4a832"
    },
    "paper": { "paper": "#f5efe3", "paper-2": "#ede5d4", "paper-3": "#e4d9c5", "canvas": "#f3eee2", "white": "#fffaf0" },
    "ink": { "ink": "#171717", "ink-2": "#3a3530", "ink-3": "#68635b", "ink-4": "#9a9488" },
    "rule": { "rule": "#d8cdbb", "rule-2": "#c8bba4" },
    "status": { "money-green": "#2d6a4f", "amber": "#b45309", "error": "#dc2626", "error-2": "#b91c1c" },
    "softSurfaces": {
      "soft-sand": "#efe7d6", "soft-sand-bd": "#ddd1b9",
      "soft-clay": "#f3e4dc", "soft-clay-bd": "#e6cdc1",
      "soft-sage": "#e4ebdf", "soft-sage-bd": "#cdd9c4",
      "soft-ink": "#2c2a25", "soft-ink-2": "#5a534a", "soft-accent": "#8a5a3c", "sage-ink": "#2d5a43",
      "note": "Warm, low-saturation. For dense/calm areas. NEVER use cold blue-grays."
    },
    "darkShell": { "dark-bg": "#0e1f3d", "dark-surface": "#162a52", "dark-border": "#1e3a6e", "dark-text": "#e8edf5", "dark-sub": "#8fa3c0", "note": "SaaS product UI only, never marketing pages." }
  },

  "gradients": {
    "note": "Controlled. SURFACES ONLY (heroes, section bands, large fills). NEVER on buttons, tags, or small UI.",
    "grad-navy": "linear-gradient(155deg,#16386b,#123260 52%,#0b1d3c)",
    "grad-rust": "linear-gradient(155deg,#cb5639,#c24c32 54%,#a23d27)",
    "grad-cream": "linear-gradient(160deg,#f7f1e6,#f0e7d6)",
    "grad-dark": "linear-gradient(160deg,#11294a,#0b1624)",
    "grad-gold-line": "linear-gradient(90deg,#c24c32,#e6bf4a 60%,#d4a832)"
  },

  "surfaceContract": {
    "note": "For each surface, the complete set of element colors on top. Implemented as .on-* classes. This is the permanent color-on-color fix and the basis for the recolor engine.",
    "on-cream": { "bg": "#f5efe3", "heading": "navy", "body": "ink-2", "muted": "ink-3", "kicker": "rust", "border": "rule", "link": "rust", "buttonBg": "rust", "buttonText": "white" },
    "on-navy": { "bg": "#123260", "heading": "white", "body": "#e6ddcd", "muted": "#b9b0a0", "kicker": "gold", "border": "rgba(255,250,240,.18)", "link": "gold", "buttonBg": "rust", "buttonText": "white" },
    "on-rust": { "bg": "#c24c32", "heading": "white", "body": "#f6e7df", "muted": "#f0d4c8", "kicker": "gold", "border": "rgba(255,250,240,.28)", "link": "white", "buttonBg": "white", "buttonText": "rust-2" },
    "on-sand": { "bg": "#efe7d6", "heading": "navy", "body": "soft-ink-2", "muted": "ink-3", "kicker": "soft-accent", "border": "soft-sand-bd", "link": "rust", "buttonBg": "navy", "buttonText": "white" },
    "on-dark": { "bg": "#0b1624", "heading": "white", "body": "#cfc7b8", "muted": "#8f877a", "kicker": "gold", "border": "rgba(255,250,240,.12)", "link": "gold", "buttonBg": "gold", "buttonText": "ink" }
  },

  "typography": {
    "families": {
      "display": "Fraunces - headlines, big numbers, pull quotes",
      "body": "Source Serif 4 - editorial reading body",
      "sans": "Inter - UI, nav, buttons, SaaS body",
      "mono": "JetBrains Mono - metadata, datelines, status, kickers",
      "hand": "Caveat - PERSONALITY ACCENTS ONLY (captions, margin notes, attributions). Never headlines/body/UI."
    },
    "weights": { "light": 300, "regular": 400, "medium": 500, "semibold": 600, "bold": 700 },
    "leading": { "tight": 1.1, "snug": 1.3, "normal": 1.5, "relaxed": 1.7 }
  },

  "radius": { "sm": "2px", "md": "4px", "lg": "8px", "circle": "50%", "rule": "PILL BAN: no radius > 8px on non-circular elements. Only a true circular icon button or status dot may be round." },
  "spacing": { "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "80px" },
  "shadows": {
    "shadow": "0 1px 3px rgba(11,22,36,.05),0 4px 16px rgba(11,22,36,.07)",
    "shadow-hover": "0 4px 20px rgba(11,22,36,.12)",
    "shadow-card": "0 2px 8px rgba(58,40,20,.08)",
    "shadow-brutal": "4px 4px 0 #171717 - neo-brutalist offset, UPRIGHT elements only, max 1 per view"
  },

  "motion": {
    "durations": { "mo-1": "120ms (hover/focus/press)", "mo-2": "200ms (tab/accordion/validation)", "mo-3": "320ms (cards/drawers/toasts)", "mo-4": "520ms (narrative reveal)", "mo-5": "800ms (deliberate/title)" },
    "easings": { "stamp": "cubic-bezier(.2,.9,.2,1)", "rule": "cubic-bezier(.65,0,.35,1)", "warm": "cubic-bezier(.32,.72,.32,1)", "out": "cubic-bezier(.16,1,.3,1)", "in": "cubic-bezier(.7,0,.9,.2)", "spring": "cubic-bezier(.34,1.56,.64,1) - playful overshoot, personality moments only" },
    "tiers": {
      "T1-ambient": "Reacts to the cursor. Tiny, always-on polish you don't consciously notice. Hover lift, dot-pulse, button shimmer, link underline, icon tilt.",
      "T2-reveal": "Reacts to the scroll. Content arrives as you reach a section: staggered deal-in, count-up, bar-fill, rule-draw. Choreography of real content. Fire-once via IntersectionObserver.",
      "T3-scrollScene": "Driven by scroll position. A scene unfolds as you scroll (e.g. a newsletter assembling step-by-step). Pinned stage + scroll-scrub, OR pin + autoplay on entry. The signature 'how'd they do that'.",
      "T4-showpiece": "Plays on its own. A self-contained product-demo animation (e.g. drag-and-drop newsletter build). The hero rule: must depict what THIS product does, or it's decoration."
    },
    "performance": "Animate only opacity/transform/SVG stroke-dashoffset. IntersectionObserver, never scroll-event listeners for fire-once. Pause off-screen. Hero SVGs inline, <20KB.",
    "feel": "Mechanical & editorial for structure (cards/sections/UI). Reserve the spring/overshoot for 1-2 personality moments per page.",
    "noFly": ["autoplay video on load", "parallax fighting scroll", "confetti/sparkles", "bouncing/jiggling", "cursor-following", "3D page curls", "Ken Burns drifts", "hover-dependent on mobile"]
  },

  "personalityLayer": {
    "rule": "Every page has at least 1 personality moment, never more than 3. Intentional imperfection, not sloppiness.",
    "elements": {
      "neo-brutalist-shadow": "4px 4px 0 var(--ink), hard edge no blur, bottom-right. UPRIGHT elements only, max 1 per view.",
      "polaroid": "Warm-white frame, even top/sides padding + taller bottom chin, ONE centered tape strip overhanging the top, soft hard-offset shadow, Caveat caption centered in chin, slight tilt, hover straightens. Horizontal or square. Image well accepts photo or GIF.",
      "tape": "One translucent warm-tan strip, slightly rotated, overhanging an edge. Squared, never a pill.",
      "caveat-hand": "Handwriting for captions, margin notes, pull-quote attributions ONLY.",
      "animated-buttons": "Shimmer sweep (primary CTA) or snake border (secondary/coming-soon). Solid fills, never gradient buttons.",
      "announcement-banner": "Fixed top, dismissible (sessionStorage)."
    }
  },

  "hardRules": [
    "--white is #fffaf0, never #ffffff.",
    "PILL BAN: no border-radius > 8px on non-circular elements, ever.",
    "Never a white/light card on a cream section. Dark cards on cream; light/paper cards on navy or rust.",
    "Never same-tone-on-same-tone for any filled element. No faint translucent tints that inherit the section color.",
    "Section rhythm: cream -> navy -> cream -> rust -> cream. Two dark sections never adjacent.",
    "Caveat is personality accents only - never headlines, body, UI, nav.",
    "No em dashes in visible copy.",
    "Gradients on surfaces only, never on buttons/tags/small UI.",
    "Every animation resolves to a clean static state under prefers-reduced-motion.",
    "Product casing: lightbreak, greetform (lowercase); Luckiest Man Ventures, Skip School (title); LMV (caps); WilcoGuide (camel)."
  ],

  "productNames": { "lightbreak": "lowercase", "greetform": "lowercase", "Luckiest Man Ventures": "title", "LMV": "caps", "WilcoGuide": "camel", "Skip School": "title" }
}