Tile Grout
#d25a24Signature brand border and link accent — orange tile-line strokes that frame cards, links, and section edges with the warmth of fired clay against the clinical white canvas
Koox
koox.co.ukWebsite preview
The design language
Koox is a brutalist cold-press lab where white subway tile meets product photography and shouty stencil typography. The brand trades in confident all-caps headlines tracked wide across the page, orange grout-line borders that frame every surface like a tiled wall, and a dark-green apothecary palette anchored by a single hard-offset burgundy shadow that makes every button feel like a screen-printed sticker. Pages stay clinical and bright — white canvas, near-black text, thin hairlines — with color reserved for functional punctuation: the orange frame, the dark-green CTA, the burgundy shadow. The result is loud but disciplined, like a juice bar designed by a printmaker.
Color palette
brand
Cold-Press Green
#113722Primary action fill — the dark botanical green of filled CTA buttons, footer band, and category button backgrounds, signaling the product inside without resorting to food-photo greens
accent
Sticker Crimson
#6b1229Hard-offset shadow accent — deep burgundy that throws a zero-blur 5px shadow under stickers and emphasized buttons, turning flat elements into screen-print layers peeled onto the page
neutral
Noir
#000000Navigation, body text, and default border color — the unyielding black that carries every paragraph, icon stroke, and card hairline
Glacial White
#ffffffPage canvas, card surface, and reverse text on dark nav and green CTAs — the clinical white tile of the entire system
Ash
#efefefSoft card border and subtle fill — the gray grout between white surfaces, used for hairline dividers and recessed card frames
Char
#232323Heading color and deep-surface accent — nearly-black tone for the heaviest display text and occasional dark bands
Concrete
#ccccccMid-gray utility border and muted body text — quieter dividers where full black would be too loud
Fog
#d7d7d7Input field border — neutral resting-state outline for form fields
Slate
#646464Input text and icon fill — secondary legibility gray for form labels and small icon detail
Pewter
#808080Decorative low-emphasis border and text — rarely used, appears on tertiary UI marks
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 900 · 1 · 0.96px trackingThe quick brown fox jumps
text-46
46px · 900 · 0.7The quick brown fox jumps
heading-lg
40px · 900 · 1.1 · 0.8px trackingThe quick brown fox jumps
heading
32px · 900 · 1.2 · 0.64px trackingThe quick brown fox jumps
heading-sm
30px · 700 · 1.3 · 0.6px trackingThe quick brown fox jumps
text-26
26px · 400 · 1The quick brown fox jumps
subheading
24px · 900 · 1.44 · 0.48px trackingThe quick brown fox jumps
text-20
20px · 600 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica
- Weights
- 400, 500, 600, 700, 900
- Sizes
- 14, 16, 18, 20, 24, 26, 30, 32, 40, 46, 48
- Line height
- 0.70-2.50 (tight for display, generous for body)
- Letter spacing
- 0.0080em, 0.0120em, 0.0160em, 0.0180em, 0.0200em, 0.0500em
- Fallback
- Helvetica, Arial, Inter (as functional stand-in if Helvetica unavailable)
All UI and editorial text. The choice of system Helvetica is deliberate — it reads as lab-label stencil rather than fashion-serif sophistication. Weight 900 headlines shout at 40-48px in all-caps with positive tracking, weight 400-500 carries body copy at 14-18px. No custom display face: the system itself is the brand.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 40-60px
- Card padding
- 20px
- Element gap
- 20px
Border radius
tags
5pxcards
5pxbuttons
5pxSpacing scale
1px2px5px7px10px11px12px13px15px17px18px20px23px25px26px27px28px30px32px40px45px50px60px100px113px150px228pxGuidelines
Do
- Use Helvetica at weight 900 for all display headlines at 40-48px, all uppercase, with positive letter-spacing between 0.8px and 0.96px
- Frame cards, links, and category tiles with 1-2px #d25a24 (Tile Grout) borders and 5px radius to reinforce the subway-tile language
- Apply the #6b1229 hard-offset shadow (5px 5px 0px 0px, zero blur) only to sticker-style buttons and emphasized links — never use it as a generic elevation
- Keep page canvas at #ffffff and reserve #113722 for filled CTAs and the footer band
- Set card padding to 20px and element gap to 20px for consistent tile rhythm
- Use the marquee bar pattern (uppercase, weight 700, pipe-separated) for repeating brand-attribute claims
- Reference the green #113722 only as a fill on the primary action and footer; do not use it for text or icons
Don’t
- Do not use negative letter-spacing — the brand's voice depends on positive tracking that gives text room to shout
- Do not apply soft drop shadows, blurs, or multi-layer elevation stacks; elevation is one color and one offset
- Do not introduce additional brand hues beyond Tile Grout orange, Cold-Press green, and Sticker crimson
- Do not use 6px+ border radius or pill-shaped buttons — 5px is the maximum softness in this system
- Do not set body text in anything but weight 400-500 Helvetica; weight 700+ is reserved for display, navigation, and marquee
- Do not place light text on white or dark text on the dark-green band without testing AAA contrast
- Do not use the #6b1229 crimson as a fill — it is a shadow layer, not a brand color
Components
Top Navigation Bar
Persistent site navigationSolid #000000 background, full bleed. Left-aligned white wordmark 'KOOX' in 26px weight 700 uppercase. Center cluster of nav items (HOME, JUICE SHOP, CLEANSE, ABOUT US, CONTACT, BECOME A STOCKIST) in 14px weight 600 uppercase, #ffffff, letter-spacing 0.7px. Right-aligned cart icon with white circle count badge. Vertical padding 20px.
Hero Image Section
First-screen brand and product statementFull-bleed product photography (juice bottles arranged on white subway tile) with a dark overlay. Centered uppercase headline overlay at 48px weight 900 #ffffff, letter-spacing 0.96px, line-height 1.0, stacked three lines. Star rating '4.8★' in 32px weight 700 below headline. Reviews caption in 16px weight 400. CTA button anchored below.
Primary CTA Button (Filled Green)
Main conversion actionFilled #113722 background, 5px radius, 11px vertical and 15px horizontal padding. Text in #ffffff, 14px weight 600 uppercase, letter-spacing 0.7px. Sits flat on white surface with no shadow by default.
Sticker Button (Burgundy Shadow)
Emphasized action with screen-print offsetFilled #113722 background, 5px radius, 11px/15px padding, white uppercase text at 14px weight 600. Distinctive hard-offset shadow: rgb(107, 18, 41) 5px 5px 0px 0px — no blur, creating a printed-sticker look. Used for hero CTAs and high-priority links.
Ghost / Outline Button
Secondary actionTransparent or #ffffff fill with 1px #000000 or #d25a24 border, 5px radius. White or black uppercase text at 14px weight 600. No shadow.
Marquee Quality Bar
Repetitive brand-attribute tickerFull-bleed #ffffff band, 20px vertical padding. Single line of uppercase text in 18px weight 700 #000000, items separated by a pipe '|'. Repeats horizontally. Examples: '100% ORGANIC | 100% COLD-PRESSED | 100% RAW | 0% ADDITIVES | 0% PASTEURISATION | 0% HPP'.
Category Tile Card
Product category entry pointSquare product-photo card filling its grid cell. No padding — image bleeds to edges. Large white uppercase category label overlaid on the lower-center of the image at 32px weight 700, letter-spacing 0.64px. 5px radius. Cards are flanked by 1px #000000 hairline dividers to recreate the tile-grout effect.
Star Rating Display
Social proof inline componentLarge numeric value (e.g. '4.8') in 32px weight 700 #ffffff, paired with a solid star glyph. Supporting caption below in 14px weight 400 #ffffff. Sits over the hero overlay.
Bordered Link
Inline text or nav link with frameText or block wrapped in 1-2px #d25a24 border, 5px radius, 10px-15px padding. Link text in #d25a24 weight 600 uppercase. Optional offset shadow with #6b1229 to elevate to sticker status.
Hairline Divider
Section and grid separator1px solid #000000 or #efefef line spanning full width or a column. The grid is built from these lines — they form the visual tiling that holds the whole system together.
Footer Band
Site footer with promotional messageFull-bleed #113722 dark-green band, ~60px vertical padding. Centered uppercase message in 18-24px weight 700 #ffffff, letter-spacing 0.48-0.6px. Functions as a repeat-CTA close to the page.
Form Input
Text input for forms1px #d7d7d7 border, 5px radius, 11px vertical and 15px horizontal padding. Text in #646464 at 14-16px weight 400. No fill by default.
Organic Certification Mark
Trust badgeCircular outlined badge in #000000, 14px uppercase text wrapping the ring perimeter, central icon. Positioned bottom-right of footer or floating over product imagery.
Surfaces & elevation
Level 0
Canvas
#ffffffPrimary page background and most card surfaces — the white subway tile
Level 1
Recessed
#efefefSubtle alt-surface for bordered cards and section dividers
Level 2
Ink
#000000Top navigation bar and occasional dark bands
Level 3
Apothecary Green
#113722Primary CTA buttons and footer band
Level 4
Crimson Plate
#6b1229Hard-offset shadow layer beneath emphasized elements
Elevation is not about lift or depth — it is about print registration. A single hard-offset zero-blur shadow in #6b1229 throws selected elements 5px down and 5px right, making them feel like screen-printed stickers slapped onto the tile canvas. No soft drop shadows, no ambient occlusion, no stacked layers. The shadow is one color, one offset, no blur.
Sticker Button / Emphasis Link
rgb(107, 18, 41) 5px 5px 0px 0px
Layout & imagery
Layout
Full-bleed page with no centered max-width constraint on the hero, marquee, or footer — those sections stretch to the viewport. Content blocks below the hero sit inside a 1200px max-width container. The hero is a full-bleed photo with centered text overlay. Below it, a single horizontal marquee bar spans the page. Then a 3-column equal-width grid of category tile cards with hairline dividers between cells, each tile filling its column. The footer is a full-bleed dark-green band. Navigation is a fixed top bar in black with a 3-zone layout (logo left, links center, cart right). Density is comfortable — generous breathing room between marquee, grid, and footer, with 40-60px section gaps.
Imagery
Product photography is the sole imagery type. Bottles are shot from directly above, arranged in a strict grid on white subway-tile with visible dark grout lines — the tile surface and grout are part of the composition. Treatment is flat, high-key, no lifestyle context, no people, no props beyond the bottles themselves. Photography is overlaid with a dark scrim in the hero so the white uppercase headline can sit on top at full opacity. Category tiles reuse the same top-down grid aesthetic at full bleed, with a single white uppercase label floating over the image. No illustration, no 3D, no icons beyond simple outlined badges.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 - background: #ffffff - border (default): #000000 - border (brand frame): #d25a24 (Tile Grout) - accent: #6b1229 (Sticker Crimson — shadow only) - primary action: #6b1229 (filled action) ## Example Component Prompts 1. **Top Navigation**: Full-bleed #000000 bar, 20px vertical padding. Left: wordmark 'KOOX' at 26px Helvetica weight 700 #ffffff uppercase, letter-spacing 0.52px. Center: nav items in 14px weight 600 #ffffff uppercase, letter-spacing 0.7px, 15px gap. Right: cart icon with #ffffff count badge. 2. **Hero Headline Block**: Over full-bleed dark-overlay product photo. Headline in 48px Helvetica weight 900 #ffffff uppercase, letter-spacing 0.96px, line-height 1.0, three centered lines. Star rating '4.8★' at 32px weight 700 #ffffff below, with 14px weight 400 caption. 3. Create a Primary Action Button: #6b1229 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. **Category Tile Card**: Full-bleed product photo, 5px radius, no padding, white uppercase category label overlaid at 32px weight 700 letter-spacing 0.64px. 1px #000000 hairline between grid cells. 5. **Marquee Quality Bar**: Full-bleed #ffffff band, 20px vertical padding. One line of 18px weight 700 #ffffff uppercase text, items separated by '|', e.g. '100% ORGANIC | 100% COLD-PRESSED | 100% RAW'. 6. **Footer Band**: Full-bleed #113722, 60px vertical padding. Centered message in 24px weight 700 #ffffff uppercase, letter-spacing 0.48px.
Similar brands
Joe & The Juice
Same bold uppercase Helvetica signage voice over flat product photography, with a dark single-accent CTA approach for an organic juice bar brand
Pressed Juicery
Clinical white-tile product staging with full-bleed bottle photography and a deep botanical green as the action color
Glossier
Brutalist grid structure where hairlines and frame borders organize the page like a tiled wall, with serif-free type shouting at full weight
Sweetgreen
All-caps tracked navigation and marquee patterns over clean product photography, with a single dark green carrying the brand through CTAs and footer
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
