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.

How this was actually made (skip if you just want the pictures)

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 below 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

Ground#F7F1E3
Card#FFFCF5
Ink (text)#2A2420
Gold accent#7A5A22
Deep green (ink)#0E3D22
Brand green (buttons, lamp)#00C753

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.

Today desktop hero section
Hero (desktop)
Today how it works section with traffic light
How Greenlight Works
Today story / offer card
Offer story card
Today mobile hero
Mobile hero
See the full scrolled page (click to expand) Today full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background13.59:1Passes AA
Body text on card background14.94:1Passes AA
Muted/secondary text on background8.04:1Passes AA
Gold accent text on background5.63:1Passes AA
Deep-green ink text on background10.91:1Passes AA

Espresso

brown-forward — the warm coffee-shop version

Ground#2B1C12
Card#3C2A1A
Ink (text)#F3E6D2
Gold accent#E8B563
Green (ink accent)#6BE39A
Brand green (buttons, lamp)#00C753

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: 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 7.28:1 against the 4.5:1 accessibility minimum for normal text — and it actually clears the bar here, because green reads well against a dark ground.

Espresso desktop hero section
Hero (desktop)
Espresso how it works section with traffic light
How Greenlight Works
Espresso story / offer card
Offer story card
Espresso mobile hero
Mobile hero
See the full scrolled page (click to expand) Espresso full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background13.35:1Passes AA
Body text on card background11.09:1Passes AA
Muted/secondary text on background8.01:1Passes AA
Gold accent text on background8.78:1Passes AA
Deep-green ink text on background10.24:1Passes AA

Night

near-black — a taste of real dark mode

Ground#0D0D0C
Card#1A1917
Ink (text)#F5F2EA
Gold accent#D9B872
Green (ink accent)#4FD47F
Brand green (buttons, lamp)#00C753

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: 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 8.61:1 against the 4.5:1 accessibility minimum for normal text — and it actually clears the bar here, because green reads well against a dark ground.

Night desktop hero section
Hero (desktop)
Night how it works section with traffic light
How Greenlight Works
Night story / offer card
Offer story card
Night mobile hero
Mobile hero
See the full scrolled page (click to expand) Night full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background17.38:1Passes AA
Body text on card background15.70:1Passes AA
Muted/secondary text on background9.29:1Passes AA
Gold accent text on background10.23:1Passes AA
Deep-green ink text on background10.24:1Passes AA

Porcelain

white-forward and airy

Ground#FEFDFB
Card#F4ECD9
Ink (walnut brown)#3A2A1C
Gold/walnut accent#8A6428
Deep green (ink)#0E3D22
Brand green (buttons, lamp)#00C753

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: 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.22: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.

Porcelain desktop hero section
Hero (desktop)
Porcelain how it works section with traffic light
How Greenlight Works
Porcelain story / offer card
Offer story card
Porcelain mobile hero
Mobile hero
See the full scrolled page (click to expand) Porcelain full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background13.52:1Passes AA
Body text on card background11.68:1Passes AA
Muted/secondary text on background6.72:1Passes AA
Gold accent text on background5.25:1Passes AA
Deep-green ink text on background12.09:1Passes AA

Grove

green-washed neutrals

Ground (sage)#DDE3D2
Card (cream)#F4EEDA
Ink (text)#2E2A1E
Gold accent#7A5A22
Deep green (ink)#0E3D22
Brand green (buttons, lamp)#00C753

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: 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 1.72: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.

Grove desktop hero section
Hero (desktop)
Grove how it works section with traffic light
How Greenlight Works
Grove story / offer card
Offer story card
Grove mobile hero
Mobile hero
See the full scrolled page (click to expand) Grove full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background10.91:1Passes AA
Body text on card background12.34:1Passes AA
Muted/secondary text on background5.72:1Passes AA
Gold accent text on background4.83:1Passes AA
Deep-green ink text on background9.36:1Passes AA

Paper & Bark

high-contrast cream, black type, brown structure

Ground#F8F4E9
Card#FDFBF4
Ink (near-black)#0E0B08
Structural line (bark)#3A2A1A
Deep green (ink)#0E3D22
Brand green (buttons, lamp — used sparingly)#00C753

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: 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.06: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.

Paper & Bark desktop hero section
Hero (desktop)
Paper & Bark how it works section with traffic light
How Greenlight Works
Paper & Bark story / offer card
Offer story card
Paper & Bark mobile hero
Mobile hero
See the full scrolled page (click to expand) Paper & Bark full landing page
Pairing (this variant's own colors)Contrast ratioResult
Body text on page background17.86:1Passes AA
Body text on card background18.95:1Passes AA
Muted/secondary text on background9.10:1Passes AA
Gold accent text on background8.96:1Passes AA
Deep-green ink text on background11.18:1Passes AA