# Greenlight Palette Study Jude's ask, verbatim: "can you look into what a better color rendering would look like. Mixing black, white, creme, brown, and green. Images will do. You dont need to push it the website." Below are five new color directions plus "Today" for comparison — all built and screenshotted on the real, live landing page (nothing simulated or mocked up). Nothing here is deployed or pushed anywhere; this is images only, for a look and a reaction. Screenshots referenced below (hero, "How Greenlight Works", offer story card, mobile hero, full scrolled page — desktop + mobile) live only in the visual page, `index.html` / `palette-study.html`; this file carries the same words, numbers, and swatch hex values without the images. ## How this was actually made We built the real Greenlight frontend locally, then for each direction we swapped only the site's color variables (the ground color, card color, text color, hairline color, gold accent, and so on) and re-photographed the exact same page, section by section, at both desktop and mobile size. Every screenshot in the visual page is what the real site would actually render with that palette — not a mockup. One real constraint worth knowing: the site currently uses a single text color across the whole page, whether that text sits on the page background or inside a card. That means every direction below had to pick one text color that stays readable in both places — we couldn't, for example, do a dark brown page background with light cream cards and have text look right on both without a small code change first (adding a second text-color variable). Every variant here works within that real constraint rather than faking a look that wouldn't actually render. Contrast numbers under each variant are the standard accessibility measurement (WCAG relative-luminance contrast ratio); 4.5:1 is the bar for normal body text. One rendering note: the traffic-light artwork carries its own fixed cream backdrop baked into the image, so on lighter grounds (Porcelain especially) you'll see a faint warmer box behind the signal — that's the asset, not the palette. --- ## Today — the current site, for comparison Swatches: - Ground: `#F7F1E3` - Card: `#FFFCF5` - Ink (text): `#2A2420` - Gold accent: `#7A5A22` - Deep green (ink): `#0E3D22` - Brand green (buttons, lamp): `#00C753` Verdict: This is the site as it looks right now, shown so the other five have something to be compared against. Warm cream everywhere, dark brown-black text, brand green kept mostly for buttons and the traffic light. Pre-existing site quirk, not introduced by this variant: the site already uses the raw brand green as text color in two spots (the italic word in the headline, and the small all-caps section labels). On this variant's background that pairing measures **2.01:1** against the 4.5:1 accessibility minimum for normal text — and it does not clear the bar, the same as it doesn't on the current live site today. Contrast table (this variant's own colors): | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 13.59:1 | Passes AA | | Body text on card background | 14.94:1 | Passes AA | | Muted/secondary text on background | 8.04:1 | Passes AA | | Gold accent text on background | 5.63:1 | Passes AA | | Deep-green ink text on background | 10.91:1 | Passes AA | --- ## Espresso — brown-forward, the warm coffee-shop version Swatches: - Ground: `#2B1C12` - Card: `#3C2A1A` - Ink (text): `#F3E6D2` - Gold accent: `#E8B563` - Green (ink accent): `#6BE39A` - Brand green (buttons, lamp): `#00C753` Verdict: Cozy, a little bit date-night-at-dusk. The green button and the traffic light both pop harder against dark brown than they do on cream, and every piece of text we checked stays easy to read. The tradeoff: this is a much bigger mood swing than the others — it reads more "craft coffee brand" than "dating app," and would want a gut check with real people before going further. Pre-existing site quirk, not introduced by this variant: same raw-brand-green-as-text spots as above. On this variant's background that pairing measures **7.28:1** — and it actually clears the bar here, because green reads well against a dark ground. Contrast table: | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 13.35:1 | Passes AA | | Body text on card background | 11.09:1 | Passes AA | | Muted/secondary text on background | 8.01:1 | Passes AA | | Gold accent text on background | 8.78:1 | Passes AA | | Deep-green ink text on background | 10.24:1 | Passes AA | --- ## Night — near-black, a taste of real dark mode Swatches: - Ground: `#0D0D0C` - Card: `#1A1917` - Ink (text): `#F5F2EA` - Gold accent: `#D9B872` - Green (ink accent): `#4FD47F` - Brand green (buttons, lamp): `#00C753` Verdict: Near-black with warm off-white text and a brighter mint-green accent. This is genuinely the best-looking version of the traffic light section — the red, amber and green lamps glow like they're supposed to. It's premium-looking, but it's a bigger identity shift than a color tune-up — this reads as a deliberate dark-mode option, not a retheme of the current cream site. Pre-existing site quirk, not introduced by this variant: same raw-brand-green-as-text spots. On this variant's background that pairing measures **8.61:1** — and it actually clears the bar here, because green reads well against a dark ground. Contrast table: | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 17.38:1 | Passes AA | | Body text on card background | 15.70:1 | Passes AA | | Muted/secondary text on background | 9.29:1 | Passes AA | | Gold accent text on background | 10.23:1 | Passes AA | | Deep-green ink text on background | 10.24:1 | Passes AA | --- ## Porcelain — white-forward and airy Swatches: - Ground: `#FEFDFB` - Card: `#F4ECD9` - Ink (walnut brown): `#3A2A1C` - Gold/walnut accent: `#8A6428` - Deep green (ink): `#0E3D22` - Brand green (buttons, lamp): `#00C753` Verdict: The lightest and airiest option — closer to true white than today's cream, with warm walnut-brown text instead of near-black. It reads a little more modern-lifestyle-app and a little less vintage-stationery than today. Contrast is excellent everywhere we measured. If the goal is to feel brighter and more open without losing the brown/cream warmth, this is the safe, obvious next step. Pre-existing site quirk, not introduced by this variant: same raw-brand-green-as-text spots. On this variant's background that pairing measures **2.22:1** — and it does not clear the bar, the same as it doesn't on the current live site today. Contrast table: | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 13.52:1 | Passes AA | | Body text on card background | 11.68:1 | Passes AA | | Muted/secondary text on background | 6.72:1 | Passes AA | | Gold accent text on background | 5.25:1 | Passes AA | | Deep-green ink text on background | 12.09:1 | Passes AA | --- ## Grove — green-washed neutrals Swatches: - Ground (sage): `#DDE3D2` - Card (cream): `#F4EEDA` - Ink (text): `#2E2A1E` - Gold accent: `#7A5A22` - Deep green (ink): `#0E3D22` - Brand green (buttons, lamp): `#00C753` Verdict: Same cream cards as today, but the page background shifts from warm cream to a soft, desaturated sage green. Honestly, this is the weakest of the five: at a glance it can read as "today, but slightly duller" rather than a clear new direction, and the green-tinted ground competes with the brand-green accent instead of setting it off. We'd cut this one first unless the team specifically wants a quieter, more muted feel. Pre-existing site quirk, not introduced by this variant: same raw-brand-green-as-text spots. On this variant's background that pairing measures **1.72:1** — and it does not clear the bar, the same as it doesn't on the current live site today. Contrast table: | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 10.91:1 | Passes AA | | Body text on card background | 12.34:1 | Passes AA | | Muted/secondary text on background | 5.72:1 | Passes AA | | Gold accent text on background | 4.83:1 | Passes AA | | Deep-green ink text on background | 9.36:1 | Passes AA | --- ## Paper & Bark — high-contrast cream, black type, brown structure Swatches: - Ground: `#F8F4E9` - Card: `#FDFBF4` - Ink (near-black): `#0E0B08` - Structural line (bark): `#3A2A1A` - Deep green (ink): `#0E3D22` - Brand green (buttons, lamp — used sparingly): `#00C753` Verdict: Cream and near-black with bold brown structural lines instead of today's soft tan hairlines — think a nicely printed invitation. Green is dialed back to just the Accept button and the traffic light, so it reads as a real accent instead of a mascot color. This is the most editorial, highest-contrast version, and probably the safest one-notch-bolder update if the goal is to sharpen up the current look rather than replace it. Pre-existing site quirk, not introduced by this variant: same raw-brand-green-as-text spots. On this variant's background that pairing measures **2.06:1** — and it does not clear the bar, the same as it doesn't on the current live site today. Contrast table: | Pairing | Contrast ratio | Result | | --- | --- | --- | | Body text on page background | 17.86:1 | Passes AA | | Body text on card background | 18.95:1 | Passes AA | | Muted/secondary text on background | 9.10:1 | Passes AA | | Gold accent text on background | 8.96:1 | Passes AA | | Deep-green ink text on background | 11.18:1 | Passes AA | --- ## Bottom line Two honest findings first. One: the current site already has a contrast issue — the green italic word in the headline and the small green section labels are brand green directly on cream, which measures about 2:1 against the 4.5:1 accessibility minimum. That's true today, and stays true in every light-background direction above (Porcelain, Grove, Paper & Bark). It only fixes itself in the two dark directions (Espresso, Night), where green text against a dark ground comfortably clears the bar. Two: every other text-and-background pairing we control — body text, muted text, gold accents, deep-green ink — passes accessibility contrast comfortably across all six directions; see the numbers table under each one. Our two picks worth a longer look: - **Porcelain** — the safe move. Brighter and airier, still clearly the same warm cream-and-brown brand, nothing to get used to. - **Paper & Bark** — the bolder move. Higher contrast, more editorial, and it fixes the "green is used for everything" issue by making green a true rare accent instead of a mascot color. Espresso and Night both look genuinely good — Night in particular makes the traffic light glow the way it's supposed to — but both are a bigger identity swing than "better color rendering," closer to a deliberate dark-mode product decision. Grove is the weakest of the five as designed; we'd drop it unless there's a specific reason to want a quieter, more muted feel. --- Machine readable: [palette-study.md](palette-study.md) (this file) / [palettes.json](palettes.json) (structured token data). Full visual page: `index.html`.