Jolly Gringo'z

Eleven homepages, eleven palettes

Pick a Direction

Every colour on every page comes out of the logo. The same four hues run through all eleven, only the one carrying the page changes, so whichever you pick the bottles, labels and packaging still match. Same products, same copy, same Shopify structure throughout.

Jump to the Designs How the Palettes Work

Open any of them

The Eleven

Each one is a complete working homepage with the full mega menu, the full mobile menu, a cart drawer and the Cantina Radio player. Tuned at 390 first.

01 · Yellow ground

Mercado

Yellow carries the page and white is the rest stop. Loudest of the eleven, poster-like, hardest to scroll past.

Open Mercado 02 · Ink ground

Smokehouse

Ink carries the page, yellow is the light in the dark. Most premium and most cinematic, photography looks expensive on it.

Open Smokehouse 03 · White ground

Shelf

White carries the page, ink does the talking, red does the selling. Quietest and densest of the eleven.

Open Shelf 04 · White with yellow chrome

Bodega

A corner store you trust. Shelf rows, a swinging price tag and hand stamped labels.

Open Bodega 05 · White grading to char

Heatwave

The page heats up as you scroll, green through gold to red to char, with a gradient spine tracking your progress.

Open Heatwave 06 · Cream paper

Cantina

Warm hospitality. The whole shop written out like a restaurant menu with dotted leaders and a ticket shaped bundle.

Open Cantina 07 · Full bleed slabs

Stack

Brutalist. Every section is one full bleed colour and one idea, no rounded corners anywhere, type does the work.

Open Stack 08 · White editorial

Market

A food publication that happens to sell things. Masthead, hairline rules, small caps and a most read sidebar.

Open Market 09 · Ink with blue glow

Neon

Night market. Ink ground with agave blue carrying the glow, a faint grid, outlined neon type and a flickering sign.

Open Neon 10 · Grey app ground

Kiosk

App shaped. A card stack on soft grey, big touch targets, segmented controls and a sticky buy bar that slides in.

Open Kiosk 11 · White gallery

Archive

Gallery quiet. Enormous whitespace, tiny numbered labels, huge product and almost no colour until you hover.

Open Archive

The rule every palette follows

Four Hues, Eleven Grounds

Nothing here invents a new colour family. Every value on every page is one of these four, or a tint or shade of the same hue. What changes between designs is which one carries the page and how the other three are assigned.

Brand Yellow#FBBC42
Brand Red#E83A1C
Ink#182022
Agave Blue#5773AE

Brand red is display only. Every button in every design uses #C42D12, a shade of the same red that clears 5.63:1 against white. Brand yellow always takes ink text, never white.

Design 01

Mercado

Yellow ground

Yellow carries the page and white is the rest stop. Loudest of the eleven, poster-like, hardest to scroll past.

See it live
Brand Yellow#FBBC42Page ground
Action Red#C42D12Every button
Ink#182022Type and dark rests
Agave Blue#5773AECategory accent
Yellow Pale#FEF0D5Product stages
White#FFFFFFCards
SamplePairRatioWCAG
Sample text#182022 on #FBBC429.75:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Sample text#FBBC42 on #1820229.75:1AA
Sample text#FFFFFF on #40598F6.9:1AA
Best forSocial, packaging tie-in, brand building
  • 01Hard vertical split hero, zero gradients
  • 02Bento collection mosaic
  • 03Horizontal product rail with arrow controls
  • 043px ink borders and hard offset shadows
Open Mercado
Design 02

Smokehouse

Ink ground

Ink carries the page, yellow is the light in the dark. Most premium and most cinematic, photography looks expensive on it.

See it live
Ink Deep#0E1416Page ground
Ink Slate#1E2A2ECards and menus
Brand Yellow#FBBC42Accent and add to cart
Action Red#C42D12Primary CTA
Agave Blue#5773AEHero wash
Body Grey#B9C2C4Body copy on dark
SamplePairRatioWCAG
Sample text#FFFFFF on #0E141618.58:1AA
Sample text#FBBC42 on #0E141610.95:1AA
Sample text#B9C2C4 on #0E141610.24:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Best forStory, video, the Meat Church lane
  • 01Transparent header that solidifies on scroll
  • 02Near full viewport hero, mark ghosted behind
  • 03Sticky category chip rail
  • 04Dark cards that glow yellow, one white break band
Open Smokehouse
Design 03

Shelf

White ground

White carries the page, ink does the talking, red does the selling. Quietest and densest of the eleven.

See it live
White#FFFFFFPage ground
Stage Grey#F2F3F5Hero band and tables
Ink#182022Headlines and USP bar
Action Red#C42D12Add to cart
Brand Yellow#FBBC42Guarantee band
Body Grey#4A5658Body copy
SamplePairRatioWCAG
Sample text#182022 on #FFFFFF16.55:1AA
Sample text#4A5658 on #FFFFFF7.6:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Sample text#40598F on #FFFFFF6.9:1AA
Best forPaid traffic and conversion rate
  • 01USP bar and a search led header
  • 02Short hero so the grid lands above the fold
  • 03Filter tabs plus sort, full width Add to Cart
  • 04Bundle builder and a heat comparison table
Open Shelf
Design 04

Bodega

White with yellow chrome

A corner store you trust. Shelf rows, a swinging price tag and hand stamped labels.

See it live
White#FFFFFFShelves
Brand Yellow#FBBC42Header and merch band
Ink#1820224px borders everywhere
Action Red#C42D12Prices and buttons
Yellow Pale#FEF0D5Product stages
Stage Grey#F2F3F5Heat band
SamplePairRatioWCAG
Sample text#182022 on #FBBC429.75:1AA
Sample text#C42D12 on #FFFFFF5.63:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Sample text#182022 on #FFFFFF16.55:1AA
Best forRetail feel, grocery and farmers market crossover
  • 01Yellow header with a 4px ink rule
  • 02Hero mark standing on a shelf with a swinging tag
  • 03Products in bordered shelf rows, not floating cards
  • 04Heat scale as five price tags
Open Bodega
Design 05

Heatwave

White grading to char

The page heats up as you scroll, green through gold to red to char, with a gradient spine tracking your progress.

See it live
Cool Green#EDF2E4First band
Warm Gold#FEF0D5Second band
Hot Amber#FCE0C4Third band
Fire#F6BFAEFourth band
Char#2A0B04Final band
Action Red#C42D12Buttons throughout
SamplePairRatioWCAG
Sample text#182022 on #EDF2E414.52:1AA
Sample text#182022 on #FEF0D514.69:1AA
Sample text#FFFFFF on #2A0B0418.29:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Best forMaking the heat scale the whole story
  • 01Fixed gradient spine with a scroll marker
  • 02Five bands, each one hotter than the last
  • 03The heat ladder as five full width rungs
  • 04Ends on a charred black newsletter
Open Heatwave
Design 06

Cantina

Cream paper

Warm hospitality. The whole shop written out like a restaurant menu with dotted leaders and a ticket shaped bundle.

See it live
Menu Cream#FEF0D5Page ground
White#FFFFFFCards
Action Red#C42D12Rules and buttons
Ink#182022Menu type
Brand Yellow#FBBC42Tickets and tags
Body Grey#4A5658Descriptions
SamplePairRatioWCAG
Sample text#182022 on #FEF0D514.69:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Sample text#C42D12 on #FEF0D55.0:1AA
Sample text#182022 on #FBBC429.75:1AA
Best forFood service, wholesale and restaurant partners
  • 01Centred menu cover hero with rules
  • 02Products as menu rows, not cards
  • 03Ticket shaped bundle with punch holes
  • 04Specials board on ink for the heat scale
Open Cantina
Design 07

Stack

Full bleed slabs

Brutalist. Every section is one full bleed colour and one idea, no rounded corners anywhere, type does the work.

See it live
Yellow Slab#FBBC42Hero and bundle
Ink Slab#182022Products and reviews
Red Slab#C42D12Heat scale
Blue Slab#40598FRecipes
White Slab#FFFFFFMerch
Stage Grey#F2F3F5Cart and drawer
SamplePairRatioWCAG
Sample text#182022 on #FBBC429.75:1AA
Sample text#FFFFFF on #18202216.55:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Sample text#FFFFFF on #40598F6.9:1AA
Best forBold brand statement, billboard energy
  • 01Six colour slabs stacked edge to edge
  • 02Giant Anton headlines
  • 03Products in a bordered grid with no cards
  • 04Square corners on every element including buttons
Open Stack
Design 08

Market

White editorial

A food publication that happens to sell things. Masthead, hairline rules, small caps and a most read sidebar.

See it live
White#FFFFFFPage ground
Stage Grey#F7F8F9Hover rows
Ink#182022Rules and headlines
Action Red#C42D12Kickers and links
Brand Yellow#FBBC42Standfirst rule and ranks
Body Grey#4A5658Body copy
SamplePairRatioWCAG
Sample text#182022 on #FFFFFF16.55:1AA
Sample text#C42D12 on #FFFFFF5.63:1AA
Sample text#4A5658 on #FFFFFF7.6:1AA
Sample text#FFFFFF on #18202216.55:1AA
Best forContent led SEO and recipe traffic
  • 01Double rule masthead above a slim sticky nav
  • 02Lead story hero with a standfirst and byline
  • 03Products in bordered editorial columns
  • 04Heat scale as a real data table
Open Market
Design 09

Neon

Ink with blue glow

Night market. Ink ground with agave blue carrying the glow, a faint grid, outlined neon type and a flickering sign.

See it live
Ink Deep#0B1013Page ground
Ink Slate#161F26Cards
Neon Blue#8FA6D6Glow, links and add to cart
Agave Deep#40598FFeature cards
Brand Yellow#FBBC42Confirmations
Body#AEBACBCopy on dark
SamplePairRatioWCAG
Sample text#FFFFFF on #0B101319.13:1AA
Sample text#8FA6D6 on #0B10137.83:1AA
Sample text#AEBACB on #0B10139.73:1AA
Sample text#FFFFFF on #40598F6.9:1AA
Best forYounger audience, nightlife and event marketing
  • 01Fixed grid backdrop behind everything
  • 02Outlined stroke headline with a neon glow
  • 03Product stalls that light up blue on hover
  • 04Heat scale as five glowing neon tubes
Open Neon
Design 10

Kiosk

Grey app ground

App shaped. A card stack on soft grey, big touch targets, segmented controls and a sticky buy bar that slides in.

See it live
App Grey#F2F3F5Page ground
Card White#FFFFFFEvery surface
Ink#182022Add to cart and headlines
Action Red#C42D12Hover and buy bar
Brand Yellow#FBBC42Hero card and confirmations
Body Grey#4A5658Copy
SamplePairRatioWCAG
Sample text#182022 on #F2F3F514.91:1AA
Sample text#182022 on #FFFFFF16.55:1AA
Sample text#FFFFFF on #18202216.55:1AA
Sample text#FFFFFF on #C42D125.63:1AA
Best forMobile first traffic and repeat buyers
  • 01Rounded hero card on a grey ground
  • 02Quick tiles like an app home screen
  • 03Segmented pill control instead of tabs
  • 04Sticky buy bar appears once you reach the grid
Open Kiosk
Design 11

Archive

White gallery

Gallery quiet. Enormous whitespace, tiny numbered labels, huge product and almost no colour until you hover.

See it live
White#FFFFFFPage ground
Stage#FAFAFAPlates and thumbs
Ink#182022Headlines and rules
Action Red#C42D12Hover state only
Brand Yellow#FBBC42Stars and level bars
Body Grey#5A6668Copy
SamplePairRatioWCAG
Sample text#182022 on #FFFFFF16.55:1AA
Sample text#5A6668 on #FFFFFF5.94:1AA
Sample text#C42D12 on #FFFFFF5.63:1AA
Sample text#FFFFFF on #18202216.55:1AA
Best forPremium positioning and gift buyers
  • 01One line hero with a huge air budget
  • 02Products as a numbered index list, not a grid
  • 03Two big plates for the bundle
  • 04Reviews set as Anton pull quotes
Open Archive
Cantina RadioTap to turn the music on