// ============================================================ // Abstract symbolic illustrations // Brand vocabulary: lips, speech bubbles, soft organic blobs, // hand-drawn squiggles. Palette: eminence purples + champagne. // Each illo fills its container; aspect-ratio comes from parent. // ============================================================ const ILLO_COLORS = { ink: "#3D1E54", // ssm-eminence-deep purple: "#6F3F8E", // ssm-eminence lavender: "#E8DDF1", // ssm-eminence-tint champagne: "#E8D88C", // ssm-champagne paper: "#F6F2EA", // ssm-paper mist: "#F0EAF7" }; // Hand-drawn squiggle (reusable) function Squiggle({ x = 0, y = 0, w = 80, color = ILLO_COLORS.purple, sw = 3, rotate = 0 }) { return ( ); } // Speech bubble (rounded ellipse w/ tail) function Bubble({ cx, cy, rx, ry, fill, stroke, strokeWidth = 0, tailX, tailY, tailDx = 0, tailDy = 0 }) { return ( {tailX != null && } ); } // Lip outline (stylized) function Lips({ cx, cy, w = 100, color = ILLO_COLORS.purple, sw = 2.2 }) { const h = w * 0.45; return ( {/* upper lip */} {/* lower lip */} {/* center line */} ); } // Soft blob (organic shape) function Blob({ cx, cy, r, fill, opacity = 1, seed = 0 }) { // Slightly irregular blob using cubic curves const k = 0.55; // bezier handle const j = (i) => Math.sin(seed + i) * r * 0.08; return ( ); } // ============================================================ // 1. Home hero (full-bleed) — "two voices meeting" // Two large overlapping speech bubbles, lavender on champagne wash. // ============================================================ function IlloHomeHeroBleed() { return ( {/* big lavender blob bottom-left */} {/* purple bubble top-right */} {/* small champagne bubble */} {/* squiggles */} {/* tiny dots */} ); } // ============================================================ // 2. Home hero (split) — "the right words finding you" // Stacked bubble + lips, vertical 4:5 composition. // ============================================================ function IlloHomeHeroSplit() { return ( {/* champagne blob top */} {/* purple bubble center */} {/* lips on bubble */} {/* hand-drawn marks */} {/* small dots */} ); } // ============================================================ // 3. Home mission — "community / founded 2020" // Three overlapping circles like silhouetted figures. // ============================================================ function IlloHomeMission() { return ( {/* Soft organic petal/pebble forms overlapping at center — individual people meeting in shared space */} {/* large lavender pebble, tilted */} {/* champagne pebble overlapping right */} {/* deep purple pebble at the intersection — the meeting point */} {/* hand-drawn loop tying them together */} {/* small accent dots */} ); } // ============================================================ // 4. About / Problem — "the bad-fit therapist" // Misaligned / disconnected shapes — bubble facing away, // a closed lip, broken arrows. // ============================================================ function IlloAboutProblem() { return ( {/* A shape that should be whole, fractured down the middle — two halves that don't quite meet. Misalignment as form. */} {/* left half — purple, anchored top-left */} {/* right half — champagne, OFFSET down and right */} {/* the gap — a thin ink line where the seam should have been */} {/* small mismatched markers on each side — circle vs triangle */} {/* tiny corner glyph — questioning */} ); } // ============================================================ // 5. About / Founder — "founder's voice" // One large bubble, hand-marks like notes, signature squiggle. // ============================================================ function IlloAboutFounder() { return ( {/* big purple bubble center */} {/* hand-written-style marks INSIDE bubble — three lines */} {/* signature squiggle below */} {/* small star/sparkle */} ); } // ============================================================ // 6. Match hero — "your shortlist arrives" // Three aligned bubble-cards, ascending — "the right options". // ============================================================ function IlloMatchHero() { return ( {/* Three steps along a gentle path — 1, 2, 3 → done. Reads as: easy, linear, finished. */} {/* the path itself — single confident curve */} {/* Step 1 — champagne dot */} 1 {/* Step 2 — purple dot */} 2 {/* Step 3 — ink dot with check (done) */} {/* small sparkle at the destination */} ); } // ============================================================ // Dispatcher: // ============================================================ function BrandIllo({ name }) { const map = { "home-hero-bleed": IlloHomeHeroBleed, "home-hero-split": IlloHomeHeroSplit, "home-mission": IlloHomeMission, "about-problem": IlloAboutProblem, "about-founder": IlloAboutFounder, "match-hero": IlloMatchHero }; const C = map[name]; return C ? : null; } Object.assign(window, { BrandIllo });