import React, { useState } from "react"; // ---------- Brand tokens ---------- // Fonts: "Happy OK" (marquee/accent) and "Gomme Sans" (headers) are paid fonts // not available via CDN here — Baloo 2 and Archivo Black stand in as close // free approximations (bubbly marquee energy / wide bold display) until the // real files are swapped in for production. const FONT_IMPORT = "@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Archivo+Black&display=swap');"; const C = { bg: "#FAFAF8", ink: "#141414", pink: "#E63A86", lime: "#9BCB3C", sky: "#5FB8DE", gold: "#D9A22B", paper: "#FFFFFF", line: "rgba(20,20,20,0.14)", }; // ---------- Palette data ---------- const PALETTES = { zorn: { name: "Zorn", tag: "Portrait control", pop: C.pink, blurb: "Four colors, total control. Ivory black and yellow ochre do the work most people expect from a dozen tubes — this is the palette for someone who feels like color has been running the show.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Ivory Black", h: "#2A2723" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Cadmium Red Medium", h: "#B23A2E" }, ], }, classicRYB: { name: "Classic Primaries", tag: "The workhorse", pop: C.sky, blurb: "Cad yellow, a red, ultramarine, white. The greens and purples stay a little muted, but the reds stay full — built for landscape, and honest, unglamorous mixing practice.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cad Yellow Medium", h: "#F6C324" }, { n: "Cadmium Red Medium / Alizarin Crimson", h: "#A2302B" }, { n: "Ultramarine Blue", h: "#28398A" }, ], }, warmCoolDrill: { name: "Indigo & Pyrrole Orange", tag: "Warm/cool bootcamp", pop: C.gold, blurb: "A drill, not a forever palette. One warm, one cool, one white — nowhere to hide. Everything you paint has to be built out of temperature.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Indigo", h: "#1D2951" }, { n: "Pyrrole Orange", h: "#D8481C" }, ], }, cmy: { name: "CMY Split", tag: "Printer's primaries", pop: C.lime, blurb: "Cad yellow light, phthalo blue green shade, and a red pinned halfway between naphthol red and quinacridone magenta. A modern, saturated training palette for anyone who wants real range.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cad Yellow Light", h: "#F9D949" }, { n: "Phthalo Blue (GS)", h: "#0C3C63" }, { n: "Naphthol Red / Quin. Magenta", h: "#C0295A" }, ], }, southwest: { name: "Southwest", tag: "Forever palette", pop: C.gold, blurb: "A signature palette built to live with, not just drill with. Muted and earthy at its core, with a punchy coral and a pale violet so it never goes flat.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cadmium Green", h: "#4B7447" }, { n: "Cobalt Teal", h: "#1E8C8A" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Burnt Sienna", h: "#8A431F" }, { n: "Transparent Red Oxide", h: "#7A3420" }, { n: "Ultramarine Blue", h: "#28398A" }, { n: "Punchy Coral", h: "#F0684F" }, { n: "Pale Violet", h: "#B79FC7" }, ], }, warmCoolAdvanced: { name: "Crimson & Phthalo", tag: "Advanced warm/cool", pop: C.pink, blurb: "Alizarin crimson against phthalo green (blue shade) — the hardest warm/cool split in the set. Punishing on paper, genuinely fun on faces.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Alizarin Crimson", h: "#7E1F2E" }, { n: "Phthalo Green (BS)", h: "#0B3B33" }, ], }, renaissance: { name: "Renaissance", tag: "Historical", pop: C.gold, blurb: "The Old Master's kit, minus the lead — a modern lead-white substitute stands in. Ochres, siennas, and a single blue used sparingly, the way it once cost a fortune to.", colors: [ { n: "Lead White Substitute", h: "#F2EEDF" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Raw Sienna", h: "#9C6B2E" }, { n: "Burnt Umber", h: "#4A3324" }, { n: "Ivory Black", h: "#2A2723" }, { n: "Vermilion", h: "#C7391F" }, { n: "Ultramarine Blue", h: "#28398A" }, ], }, impressionist: { name: "Impressionist", tag: "Historical", pop: C.sky, blurb: "No black, on principle. Built to paint light itself — straight out of the tube, mixed on the eye more than on the palette.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cadmium Yellow", h: "#F6C324" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Vermilion", h: "#C7391F" }, { n: "Alizarin Crimson", h: "#7E1F2E" }, { n: "Viridian", h: "#1C6B54" }, { n: "Cobalt Blue", h: "#1E4E8C" }, { n: "Ultramarine Blue", h: "#28398A" }, ], }, rubens: { name: "Rubens", tag: "Baroque grandeur", pop: C.gold, blurb: "Reconstructed from pigments found in Rubens' own studio trunk: lead white, vermilion, and lapis-grade ultramarine used sparingly against a foundation of ochre and earth. Built for grand, fleshy, larger-than-life figures.", colors: [ { n: "Lead White Substitute", h: "#F2EEDF" }, { n: "Vermilion", h: "#C7391F" }, { n: "Ultramarine (Lapis)", h: "#28398A" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Cassel Earth / Burnt Umber", h: "#4A3324" }, { n: "Hematite Red Earth", h: "#7A3420" }, { n: "Ivory Black", h: "#2A2723" }, ], }, rembrandt: { name: "Rembrandt", tag: "Dutch Golden Age", pop: C.gold, blurb: "Analysis of Rembrandt's own paintings keeps turning up the same restricted set: ochres, lead white, and black doing almost all the work, with a little vermilion and a cool blue held in reserve. Deliberately narrow — he pushed a handful of pigments further than most painters push twenty.", colors: [ { n: "Lead White Substitute", h: "#F2EEDF" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Red Ochre", h: "#9C4A2E" }, { n: "Burnt Sienna", h: "#8A431F" }, { n: "Raw Umber", h: "#5C4A32" }, { n: "Vermilion", h: "#C7391F" }, { n: "Azurite Blue", h: "#3E6E8C" }, { n: "Ivory Black", h: "#2A2723" }, ], }, caravaggio: { name: "Caravaggio", tag: "Chiaroscuro", pop: C.ink, blurb: "A tight, earthen palette built entirely in service of light and shadow — brighter colors always veiled, darks pushed as far as they'll go. This is the palette of someone who thought mostly in terms of where the light stops.", colors: [ { n: "Lead White Substitute", h: "#F2EEDF" }, { n: "Lead-Tin Yellow", h: "#E8C33E" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Venetian Red", h: "#9C3D2A" }, { n: "Vermilion", h: "#C7391F" }, { n: "Raw Umber", h: "#5C4A32" }, { n: "Verdigris", h: "#4A7A64" }, { n: "Bone Black", h: "#211F1C" }, ], }, kahlo: { name: "Frida Kahlo", tag: "Symbolic & bold", pop: C.pink, blurb: "Colors drawn from Mexican folk art and worn with real symbolic weight in her own words — electric blue for purity, magenta for the oldest and brightest color she knew, marigold for warmth. Meant to be read as much as looked at.", colors: [ { n: "Electric Blue", h: "#215E9A" }, { n: "Magenta", h: "#B81C6B" }, { n: "Marigold Yellow", h: "#F2A11E" }, { n: "Vibrant Green", h: "#3F8F3E" }, { n: "Terracotta Red", h: "#C24C2E" }, { n: "Deep Purple", h: "#5B2A82" }, ], }, hockney: { name: "Hockney", tag: "California pop", pop: C.sky, blurb: "Built around the saturated pool-water blue that made him famous, played off warm California light. Bright, flat, confident color — nothing muted, nothing apologizing for itself.", colors: [ { n: "Pool Turquoise", h: "#1E9E9E" }, { n: "Sunshine Yellow", h: "#F5C531" }, { n: "Warm Orange", h: "#E8641E" }, { n: "Grass Green", h: "#5FA83E" }, { n: "Hot Pink", h: "#E8317A" }, { n: "Titanium White", h: "#F7F4EC" }, ], }, mono: { name: "Black & White", tag: "Values only", pop: C.ink, blurb: "No color to hide behind. Your paintings look cartoony less because of hue and more because the values underneath aren't doing their job — this strips color out entirely so you can hear what's happening underneath it.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Ivory Black", h: "#2A2723" }, ], }, "mono-alt-prussian": { name: "Prussian & White", tag: "Values only", pop: C.sky, blurb: "Same drill as black and white, without committing to true black — Prussian blue reads dark enough to build a full value range, with a cooler mood.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Prussian Blue", h: "#0B2545" }, ], }, "mono-alt-violet": { name: "Dioxazine & White", tag: "Values only", pop: C.pink, blurb: "Same drill as black and white, without committing to true black — dioxazine violet reads dark enough to build a full value range, with a moodier cast.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Dioxazine Violet", h: "#3B1F5C" }, ], }, "mono-alt-green": { name: "Sap Green & White", tag: "Values only", pop: C.lime, blurb: "Same drill as black and white, without committing to true black — sap green reads dark enough to build a full value range, with an earthier cast.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Sap Green", h: "#4C6B2E" }, ], }, monoAccent: { name: "Black, White & One", tag: "Counterintuitive pick", pop: C.pink, blurb: "For the painter who can draw, has a decent color sense, and still can't shake the cartoony look. One transparent, vibrant color — a bright blue or a hot magenta — layered over black and white forces you to think in hue instead of local color.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Ivory Black", h: "#2A2723" }, { n: "Transparent Blue / Bright Magenta", h: "#C5177E" }, ], }, softGreens: { name: "The Mud Fix", tag: "Ultramarine + ochre", pop: C.lime, blurb: "Mud and plasticky greens almost always trace back to one thing: mixing green from a phthalo. Swap it. Ultramarine blue and yellow ochre make soft, believable greens instead — this is less a forever palette than a fix for the one you're already using.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Ultramarine Blue", h: "#28398A" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Cadmium Red Medium", h: "#B23A2E" }, ], }, secondaries: { name: "Secondaries Only", tag: "The hardest one", pop: C.gold, blurb: "No true primaries at all — just the three secondaries. Cad orange and sap green do the expected work, but the real trick is the bright violet standing in for red and blue both. For someone who already has value down and wants color to be the entire fight.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cad Orange", h: "#E8621E" }, { n: "Sap Green", h: "#4C6B2E" }, { n: "Quinacridone Violet", h: "#6B2A6E" }, ], }, bigLandscapes: { name: "Big Landscapes", tag: "Blues & greens", pop: C.sky, blurb: "Prussian blue does double duty — fresh or gloomy depending on what you mix it with. Sap green, yellow ochre, and burnt umber round it into something built to sit outside all afternoon.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Prussian Blue", h: "#0B2545" }, { n: "Sap Green", h: "#4C6B2E" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Naphthol Red / Cad Red Medium", h: "#B23A2E" }, { n: "Burnt Umber", h: "#4A3324" }, ], }, signature: { name: "The Studio Go-To", tag: "Sari's personal palette", pop: C.pink, blurb: "One warm and one cool of each primary, plus an earth or two for range you'd otherwise have to mix for. Counterintuitively more versatile than a clean set of three.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Cad Red Medium", h: "#B23A2E" }, { n: "Quinacridone Magenta", h: "#9E1450" }, { n: "Cad Yellow", h: "#F6C324" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Ultramarine Blue", h: "#28398A" }, { n: "Phthalo Blue", h: "#0C3C63" }, ], }, pleinAir: { name: "Earthy Primaries", tag: "Plein air", pop: C.gold, blurb: "Terra rosa and pyrrole orange for warmth, cobalt and sap green for a cooler register. Feels a little constrained on the palette, but light in the hand outdoors.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Terra Rosa", h: "#9E4A3A" }, { n: "Pyrrole Orange", h: "#D8481C" }, { n: "Cobalt Blue", h: "#1E4E8C" }, { n: "Sap Green", h: "#4C6B2E" }, { n: "Cad Yellow Light", h: "#F9D949" }, ], }, coolTones: { name: "Cool Tones", tag: "Atmosphere", pop: C.sky, blurb: "Built for painters chasing fog, dusk, and distance. Naples yellow is the only real warmth in the box — everything else leans back.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Prussian Blue", h: "#0B2545" }, { n: "Pale Violet", h: "#B79FC7" }, { n: "Viridian", h: "#1C6B54" }, { n: "Naples Yellow", h: "#E8D08A" }, { n: "Alizarin Crimson", h: "#7E1F2E" }, ], }, skinTone: { name: "Skin Tones", tag: "Portrait-focused", pop: C.pink, blurb: "Built specifically for flesh — transparent red oxide and burnt sienna carry most of the range, with ultramarine to knock things back into shadow.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Transparent Red Oxide", h: "#7A3420" }, { n: "Cad Red Light", h: "#E8452E" }, { n: "Yellow Ochre", h: "#C8963E" }, { n: "Burnt Sienna", h: "#8A431F" }, { n: "Ultramarine Blue", h: "#28398A" }, ], }, nocturne: { name: "Nocturne", tag: "Moody & deep", pop: C.ink, blurb: "You'd think painting at night meant reaching for black. It doesn't — mixing your own darks out of dioxazine violet, phthalo green, and Prussian blue is where the fun actually is.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Dioxazine Violet", h: "#3B1F5C" }, { n: "Phthalo Green (BS)", h: "#0B3B33" }, { n: "Alizarin Crimson", h: "#7E1F2E" }, { n: "Prussian Blue", h: "#0B2545" }, { n: "Cad Red", h: "#C2321E" }, { n: "Cad Yellow Medium", h: "#F6C324" }, ], }, bobRoss: { name: "Happy Little Palette", tag: "Just for fun", pop: C.lime, blurb: "Titanium white, Prussian blue, alizarin crimson, van dyke brown, sap green, cad yellow, bright red, indian yellow, dark sienna, black gesso. No mistakes — only happy accidents.", colors: [ { n: "Titanium White", h: "#F7F4EC" }, { n: "Prussian Blue", h: "#0B2545" }, { n: "Alizarin Crimson", h: "#7E1F2E" }, { n: "Van Dyke Brown", h: "#3B2A1E" }, { n: "Sap Green", h: "#4C6B2E" }, { n: "Cad Yellow", h: "#F6C324" }, { n: "Bright Red", h: "#D8241C" }, { n: "Indian Yellow", h: "#E8A937" }, { n: "Dark Sienna", h: "#4A2C1D" }, { n: "Black Gesso", h: "#1A1917" }, ], }, }; // ---------- Swatch ---------- function Swatch({ color }) { return (