{
  "$schema": "https://whitelist.video/brand/design-tokens.json",
  "name": "WhitelistVideo Design Tokens",
  "version": "2026.09",
  "updated": "2026-09-09",
  "source": "app/globals.css (:root) — canonical; this file mirrors it for designers and AI systems",
  "brand": {
    "product": "WhitelistVideo",
    "tagline": "Parents control the algorithm, not the other way around",
    "audience": "Parents of children ages 8-15",
    "personality": [
      "warm",
      "reassuring",
      "plain-spoken",
      "confident",
      "never alarmist"
    ],
    "logos": {
      "parentFacing": {
        "description": "Teal/green + tan wordmark on off-white. Use for website, parent dashboard, parent apps, installers, social profiles.",
        "primary": "/images/brand/parent/Parent-logo-offwhite-bg.jpeg",
        "onDark": "/images/brand/parent/white-text-transparent.png",
        "onLight": "/images/brand/parent/black-text-transparent.png",
        "profileIcon": "/images/brand/parent/icon-offwhite-bg.jpeg",
        "backgroundHex": "#F7F5F0"
      },
      "childFacing": {
        "description": "Blue/cyan legacy mark on white or transparent. Use only inside the browser extension and child apps.",
        "colors": [
          "blue",
          "cyan"
        ]
      },
      "clearSpace": "Minimum clear space equal to the height of the icon on all sides",
      "minimumSize": "24px icon, 120px wordmark"
    }
  },
  "color": {
    "cream": {
      "primary": "#FFFDF7",
      "secondary": "#FFF8DC",
      "dark": "#F5F0E1",
      "brandSurface": "#F7F5F0"
    },
    "teal": {
      "50": "#e6f4f4",
      "100": "#b3dede",
      "200": "#80c8c8",
      "300": "#4db2b2",
      "400": "#14919B",
      "500": "#0D7377",
      "600": "#0a5c5f",
      "700": "#084547",
      "800": "#052e2f",
      "900": "#031717"
    },
    "charcoal": {
      "50": "#f5f5f7",
      "100": "#e1e1e5",
      "200": "#c4c4cc",
      "300": "#9e9eab",
      "400": "#78788a",
      "500": "#52526b",
      "600": "#3d3d54",
      "700": "#2d2d40",
      "800": "#1a1a2e",
      "900": "#0d0d17"
    },
    "accent": {
      "coral": "#FF6B35",
      "coralLight": "#FF8A5C",
      "coralDark": "#E55A2B",
      "gold": "#D4A574",
      "coralText": "#B8411B"
    },
    "semantic": {
      "success": "#10B981",
      "successLight": "#D1FAE5",
      "successDark": "#065F46",
      "warning": "#F59E0B",
      "warningLight": "#FEF3C7",
      "warningDark": "#B45309",
      "error": "#EF4444",
      "errorLight": "#FEE2E2",
      "errorDark": "#B91C1C",
      "info": "#0D7377",
      "infoLight": "#b3dede",
      "infoDark": "#084547"
    },
    "decorative": {
      "blobTeal": "#E8F5F5",
      "blobWarm": "#FFF3E0",
      "blobTealGradient": "linear-gradient(135deg, #E8F5F5 0%, rgba(13, 115, 119, 0.15) 100%)",
      "blobWarmGradient": "linear-gradient(145deg, #FFF3E0 0%, rgba(255, 107, 53, 0.12) 100%)",
      "blobSubtleGradient": "linear-gradient(160deg, rgba(13, 115, 119, 0.1) 0%, rgba(20, 145, 155, 0.15) 100%)",
      "tealGlow": "rgba(13, 115, 119, 0.15)",
      "tealGlowStrong": "rgba(13, 115, 119, 0.25)"
    },
    "roles": {
      "pageBackground": "{color.cream.primary}",
      "sectionBackground": "{color.cream.dark}",
      "textHeading": "{color.charcoal.800}",
      "textBody": "{color.charcoal.700}",
      "textMuted": "{color.charcoal.500}",
      "primaryAction": "{color.teal.500}",
      "primaryActionHover": "{color.teal.600}",
      "accentAction": "{color.accent.coral}",
      "border": "{color.cream.dark}",
      "focusRing": "{color.teal.500}",
      "darkSectionBackground": "{color.teal.800}",
      "maxColorsPerComposition": 3
    }
  },
  "typography": {
    "fontFamily": {
      "display": "'Fraunces', Georgia, serif",
      "body": "'Inter', system-ui, -apple-system, sans-serif",
      "mono": "'JetBrains Mono', ui-monospace, monospace"
    },
    "fluidScale": {
      "displayXl": "clamp(2.5rem, 5vw + 1rem, 4rem)",
      "displayLg": "clamp(2rem, 4vw + 1rem, 3.5rem)",
      "h1": "clamp(1.5rem, 2.5vw + 0.5rem, 2rem)",
      "h2": "clamp(1.25rem, 2vw + 0.5rem, 1.75rem)",
      "h3": "clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem)",
      "base": "1rem",
      "sm": "0.875rem",
      "xs": "0.75rem"
    },
    "rules": {
      "headings": "Fraunces, weight 600-700, tight letter-spacing (-0.01em)",
      "body": "Inter 400/500, line-height 1.6, 2-3 sentence paragraphs",
      "code": "JetBrains Mono for tokens, hex codes, file names"
    }
  },
  "spacing": {
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem",
    "xl": "2rem",
    "2xl": "3rem",
    "3xl": "4rem",
    "4xl": "6rem",
    "5xl": "8rem",
    "6xl": "12rem",
    "sectionPaddingY": "clamp(4rem, 10vw, 8rem)",
    "heroPaddingY": "clamp(6rem, 15vw, 12rem)",
    "sectionPaddingX": "clamp(1rem, 5vw, 2rem)"
  },
  "radius": {
    "sm": "0.5rem",
    "md": "0.75rem",
    "lg": "1rem",
    "xl": "1.5rem",
    "2xl": "2rem",
    "full": "9999px",
    "shadcnBase": "0.625rem"
  },
  "shadow": {
    "subtleSm": "0 2px 8px rgba(13, 115, 119, 0.08)",
    "subtleMd": "0 4px 12px rgba(13, 115, 119, 0.08)",
    "subtleLg": "0 8px 20px rgba(13, 115, 119, 0.08)",
    "mediumSm": "0 4px 12px rgba(13, 115, 119, 0.12)",
    "mediumMd": "0 8px 20px rgba(13, 115, 119, 0.12)",
    "mediumLg": "0 12px 32px rgba(13, 115, 119, 0.12)",
    "strongSm": "0 8px 16px rgba(13, 115, 119, 0.16)",
    "strongMd": "0 12px 32px rgba(13, 115, 119, 0.16)",
    "strongLg": "0 20px 60px rgba(13, 115, 119, 0.16)",
    "stepNumber": "0 4px 12px rgba(13, 115, 119, 0.3)",
    "stepNumberAccent": "0 4px 12px rgba(255, 107, 53, 0.3)",
    "rule": "Shadows are always teal-tinted, never neutral grey"
  },
  "motion": {
    "easing": {
      "outExpo": "cubic-bezier(0.16, 1, 0.3, 1)",
      "outBack": "cubic-bezier(0.34, 1.56, 0.64, 1)",
      "spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
    },
    "duration": {
      "micro": "150ms",
      "fast": "250ms",
      "normal": "500ms",
      "slow": "800ms"
    },
    "transition": {
      "interactive": "all 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
      "fast": "all 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
      "slow": "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "rule": "One cohesive CSS-first entrance animation per page; respect prefers-reduced-motion"
  },
  "breakpoint": {
    "xs": "0px",
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "2xl": "1440px",
    "3xl": "1920px"
  },
  "iconSize": {
    "xs": "1rem",
    "sm": "1.25rem",
    "md": "1.5rem",
    "lg": "2rem",
    "xl": "2.5rem",
    "2xl": "3rem"
  },
  "imagery": {
    "style": "Hand-painted editorial storybook illustration, warm gouache texture, flat single-colour background, generous negative space",
    "palette": "Brand palette only: cream/off-white or soft teal backgrounds, teal primaries, coral and tan accents, charcoal linework",
    "avoid": [
      "text or lettering in images",
      "logos",
      "UI screenshots as hero art",
      "stock photography look",
      "gradients on illustration backgrounds"
    ],
    "aspectRatios": {
      "blogCover": "16:9",
      "openGraph": "1200x630",
      "instagramFeed": "1080x1080",
      "story": "1080x1920"
    }
  },
  "voice": {
    "principles": [
      "Answer first: the first 2-3 sentences directly answer the question",
      "Write to the parent in second person; plain language, no jargon",
      "Confident and warm, never fear-mongering",
      "Always frame WhitelistVideo positively: state facts plainly, end with what it gives parents",
      "Never disparage competitors; win with specifics"
    ],
    "facts": {
      "ageRange": "8-15",
      "model": "Whitelist: every YouTube video blocked by default, parents approve channels",
      "billing": "Per child (Basic, Premium); Lifetime one-time for up to 5 children",
      "trial": "Free 2-hour test period, no credit card, no day-count trial",
      "platforms": [
        "Windows",
        "macOS",
        "Chromebook",
        "iPhone/iPad",
        "Android",
        "Android TV / Google TV"
      ]
    }
  },
  "cssVariableMap": {
    "note": "Exact custom property names as defined in app/globals.css :root (no prefix).",
    "color.cream.primary": "--cream-primary",
    "color.cream.secondary": "--cream-secondary",
    "color.cream.dark": "--cream-dark",
    "color.teal.*": "--teal-50 … --teal-900",
    "color.charcoal.*": "--charcoal-50 … --charcoal-900",
    "color.accent.coral": "--accent-coral",
    "color.accent.coralLight": "--accent-coral-light",
    "color.accent.coralDark": "--accent-coral-dark",
    "color.accent.gold": "--accent-gold",
    "color.semantic.*": "--success, --warning, --error, --info (+ -light / -dark)",
    "typography.fontFamily.display": "--font-display",
    "typography.fontFamily.body": "--font-body",
    "typography.fluidScale.*": "--text-display-xl, --text-display-lg, --text-h1, --text-h2, --text-h3, --text-base, --text-sm, --text-xs",
    "spacing.*": "--space-xs … --space-6xl, --section-padding-y, --hero-padding-y, --section-padding-x",
    "radius.*": "--radius-sm … --radius-2xl, --radius-full, --radius",
    "shadow.*": "--shadow-subtle-sm … --shadow-strong-lg, --shadow-step-number",
    "motion.easing.*": "--ease-out-expo, --ease-out-back, --ease-spring",
    "motion.duration.*": "--duration-micro, --duration-fast, --duration-normal, --duration-slow",
    "breakpoint.*": "--breakpoint-xs … --breakpoint-3xl",
    "iconSize.*": "--icon-xs … --icon-2xl",
    "color.accent.coralText": "--accent-coral-text"
  }
}