---
title: "Koox design system"
variant: extended
source: https://koox.co.uk/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/koox-co-uk)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Koox · Design System

> Organic juice, framed with confident simplicity

**Theme:** light · **Industry:** food-beverage · **Source:** https://koox.co.uk/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Koox’s homepage pairs bold, high-contrast typography with juice photography and generous white space. Deep green promotional bands and a pale-gray product catalog give the organic beverage range a clean, grounded storefront.

## North star

Let bright product photography and bold Helvetica do the work, using white space, deep green bands, and restrained orange accents to keep the storefront clear.

## Overview

The visual system is led by Gallery White (#ffffff), which carries the hero, editorial content, and open space between sections. Product photography supplies most of the visual texture; its bottle colors and tiled backdrops are imagery, not additional brand colors. Helvetica is used throughout, with very heavy, tightly composed display headings, uppercase navigation, and compact product labels. The hero overlays centered white messaging and a deep green CTA on a darkened full-width juice photograph. Below it, three photographic category tiles lead into a clean cleanse-card section. A pale gray (#efefef) product catalog creates a distinct shopping band, while deep green (#113722) returns for promotions and review proof. Orange (#d25a24) is reserved for links and small product details; burgundy (#6b1229) appears as a CTA accent and offset link shadow. Layouts stay mostly flat, using fine borders rather than elevated cards. The black footer closes the page with compact navigation and a newsletter form.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, hero text, and the open editorial sections surrounding product and feature content. |
| Citrus Rust | `#d25a24` | `--color-citrus-rust` | accent | Juice-colored links, cleanse names, and small product-category and price details. |
| Mist Gray | `#efefef` | `--color-mist-gray` | surface | Full-width juice catalog background, separating the product grid from white editorial sections. |
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Main text and the black footer, including its compact link and form area. |
| Berry Burgundy | `#6b1229` | `--color-berry-burgundy` | accent | Submit-button fill and the offset shadow behind the deep-green hero CTA. |
| Soft Border | `#f5f5f5` | `--color-soft-border` | semantic | Very light product-card borders and pale separator or loading details. |
| Forest Green | `#113722` | `--color-forest-green` | brand | Hero CTA and full-width offer and customer-rating bands. |
| Footer Gray | `#cccccc` | `--color-footer-gray` | neutral | Muted text against the black footer; not a prominent page-wide text color. |
| Charcoal Detail | `#232323` | `--color-charcoal-detail` | semantic | Minor dark text and detail sampled in small parts of the page. |
| Footer Charcoal | `#282828` | `--color-footer-charcoal` | semantic | Subtle footer border or divider detail, secondary to the black footer background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefef` (Mist Gray) · `--color-surface-2` → `#113722` (Forest Green) · `--color-surface-3` → `#000000` (Deep Ink) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#cccccc` (Footer Gray) · `--color-border` → `#f5f5f5` (Soft Border) · `--color-accent` → `#d25a24` (Citrus Rust) · `--color-accent-2` → `#6b1229` (Berry Burgundy) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#000000` | `#113722` | 1.59:1 | fail |
| `#ffffff` | `#efefef` | 1.15:1 | fail |
| `#ffffff` | `#113722` | 13.18:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#cccccc` | `#ffffff` | 1.61:1 | fail |
| `#cccccc` | `#efefef` | 1.4:1 | fail |
| `#cccccc` | `#113722` | 8.21:1 | AAA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |

### Gradients

- `linear-gradient(110deg, rgb(237, 237, 237) 8%, rgb(245, 245, 245) 18%, rgb(237, 237, 237) 33%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-body` | system | 700, 400, 600, 900 | Used across headings, body copy, navigation, links, buttons, and product labels. | Arial |

- **Helvetica:** Display headings are very bold, sometimes uppercase; navigation and buttons are uppercase with tracked lettering. Body copy is regular-weight and comfortably spaced.

### Type scale — Perfect Fourth (ratio ≈ 1.302, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 900 | 0.7 | 0.02em | — | Helvetica | Centered hero headline over the full-width juice photograph. |
| h2 | 40px | 900 | 0.6 | 0.02em | uppercase | Helvetica | Uppercase section titles, including the cleanse heading. |
| h3 | 32px | 900 | 0.88 | 0.02em | — | Helvetica | Feature and supporting headlines within editorial sections. |
| h4 | 30px | 700 | 1.03 | 0.02em | — | Helvetica | Secondary feature titles and supporting content headings. |
| body | 16px | 400 | 1.63 | 0.02em | — | Helvetica | Descriptions, review text, explanatory copy, and footer content. |
| caption | 14px | 400 | 2.5 | 0 | capitalize | Helvetica | Compact product details, supporting labels, and small metadata. |
| button | 16px | 700 | 1.5 | 0.05em | uppercase | Helvetica | Uppercase calls to action and newsletter submit control. |
| nav | 14px | 700 | 1.71 | 0.05em | uppercase | Helvetica | Uppercase primary navigation and footer navigation labels. |
| link | 20px | 600 | 1.2 | 0.02em | uppercase | Helvetica | Prominent uppercase cleanse names and other product links. |
| eyebrow | 16px | 700 | 1.5 | 0.05em | uppercase | Helvetica | Short uppercase introductory labels and promotional copy. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 5, 7, 10, 11, 13, 15, 17, 20, 27, 30, 40 px.
- Section rhythm 100px · element gap 5px · card padding — · max content width 1170px.

The desktop layout uses a wide centered content area, measured at a 1170px maximum, within a full-width page canvas. The header is a dark horizontal bar; the hero and several promotional sections span broadly across the viewport. Category cards use three columns, the cleanse showcase is centered, and the juice catalog is a denser multicolumn product grid. Most editorial content is centered, while the footer switches to four left-aligned columns. Sections have a spacious rhythm, with large gaps separating product and editorial bands.

## Shape & elevation

- Radius: card `5px` · link `4px` · xs `4px` · sm `5px`
- Shadow `hairline` (link): `rgb(107, 18, 41) 5px 5px 0px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is predominantly flat: white and gray section bands do most of the grouping rather than raised cards. Product cards use faint #f5f5f5 borders, and the main CTA is given a small offset #6b1229 shadow. Avoid broad soft shadows or layered, floating panels.

## Imagery

Photographic juice bottles anchor the hero, category tiles, and product catalog. The hero image is full-bleed and darkened to keep centered white text readable; category images retain their tiled setting and receive centered white labels. Individual catalog items are presented as straightforward product photos, while small line-art marks and icons support the organic and raw feature claims. Treat screenshot colors in the photographs as image content, not as additions to the interface palette.

## Components

### Dark navigation bar

A black, full-width header with a white Koox wordmark, centered uppercase Helvetica links, and a compact cart icon at the right.

### Photographic hero

Full-bleed bottle photography with a dark overlay, centered bold white headline and review proof, plus a #113722 CTA with a #6b1229 offset accent.

### Category image tiles

Three side-by-side photographic tiles for cleanses, juice boxes, and stockists, with centered, uppercase white labels.

### Cleanse links

A centered collection heading followed by four concise uppercase cleanse links; category names use #d25a24 and product titles use black.

### Juice product grid

A #efefef shopping band containing small bottle photographs, compact uppercase product labels, and orange category and price details.

### Review proof band

A full-width #113722 section centered around the London rating headline, 4.8/5 score, star, and supporting review count.

### Newsletter footer

A black four-column footer with contact details, compact navigation, muted text, and a white email input beside a burgundy submit button.

### Measured component styles

- **Primary button** (“SUBMIT”): background #6b1229 · text #ffffff · border 1px solid #6b1229 · radius 0px · padding 11px 15px · 700 16px Helvetica · uppercase
- **Secondary button** (“Sign In”): transparent background · text #d25a24 · border 1px solid #e6e6e6 · radius 0px · padding 15px 20px · 700 16px Helvetica
- **Link** (“24H/48H/72H”): transparent background · text #d25a24 · radius 0px · padding 0px · 600 20px Helvetica · uppercase
- **Input**: background #ffffff · text #646464 · border 1px solid #d7d7d7 · radius 0px · padding 11px 15px · 400 14px Helvetica
- **Card** (“24H/48H/72H THE SIGNATURE RESET CLEANSE ”): transparent background · text #000000 · border 1px solid #f5f5f5 · radius 5px · padding 0px · 700 16px Helvetica
- **Navigation item** (“HOME”): transparent background · text #000000 · radius 0px · padding 0px · 700 0px Helvetica

## Do

- Use Helvetica or a close sans-serif throughout.
- Keep the hero message centered over full-width product photography.
- Use white as the primary canvas and preserve generous gaps between sections.
- Reserve #113722 for strong promotional and proof bands.
- Use #d25a24 for links and compact product details.
- Keep catalog labels small, uppercase, and closely tied to product images.

## Don't

- Do not turn the interface into a colorful gradient-led design.
- Do not apply product-photo colors as extra UI brand colors.
- Avoid rounded, floating cards and large soft shadows.
- Do not crowd the editorial sections or remove the white space.
- Avoid using orange for large surfaces or primary hero backgrounds.
- Do not use decorative typefaces in place of the Helvetica system.

## Agent prompt

Build a new Koox-style food and beverage page as a clean, spacious storefront. Use Gallery White (#ffffff) for the canvas, black for the navigation and footer, and Forest Green (#113722) for a few full-width promotional or proof bands. Set type in Helvetica or Arial: bold, uppercase headings and navigation, with smaller readable body and product text. Use a centered, wide content area, then vary the rhythm between broad photographic sections, a three-column category row, and a denser product grid on Mist Gray (#efefef). Keep product photography natural and prominent; do not treat colors inside the photographs as UI tokens. Use Citrus Rust (#d25a24) sparingly for links and product details, and Berry Burgundy (#6b1229) only as a restrained button accent. Favor flat surfaces, fine borders, and generous open spacing over elevated cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic hero with centered headline, rating proof, and green CTA. | Trust rating, Delivery promise, Primary CTA | Darkened bottle photo, White uppercase heading, Green button |
| 2 | category-nav | Three equal photographic category tiles in a horizontal row. | Category shortcuts, Stockist pathway | Image tiles, Centered white labels, Three-column layout |
| 3 | product-showcase | Centered section title above a compact row of cleanse product links. | Compare cleanse durations, Price visibility | White background, Orange category links, Black product titles |
| 4 | announcement | Full-width centered strip with offer and discount code. | First-purchase incentive, Promo-code recall | Forest-green band, Centered white copy |
| 5 | product-grid | Pale-gray full-width band with a dense, multicolumn bottle catalog. | Browse products, View prices | Product photography, Compact orange labels, Light gray canvas |
| 6 | stats | Full-width dark-green block with rating details centered vertically. | Social proof, Review link | White type, Large rating, Star accent |
| 7 | testimonials | Three-column review row on a white background. | Customer testimonials, Review navigation | White canvas, Compact quote copy, Small controls |
| 8 | feature-grid | Centered heading and introduction above three feature columns. | Explain product qualities, Feature scanning | Small line-art icons, Black labels, Open white space |
| 9 | feature-grid | Two-column feature row with one image-led item per column. | Packaging education, Production detail | Bottle and package illustrations, Short uppercase labels |
| 10 | footer | Four-column information and newsletter area, followed by a slim copyright strip. | Contact access, Footer navigation, Email signup | Black footer, Muted small copy, White input and burgundy submit |

## Source CSS custom properties (selected)

```css
--font-family-1: Helvetica,Arial, sans-serif;
--font-family-2: Helvetica,Arial, sans-serif;
--font-body-family: Helvetica,Arial, sans-serif;
--font-body-size: 16px;
--font-body-weight: 700;
--body-letter-spacing: .02em;
--font-heading-family: Helvetica,Arial, sans-serif;
--font-heading-size: 24px;
--font-heading-weight: 900;
--font-heading-style: normal;
--heading-letter-spacing: .02em;
--heading-text-transform: uppercase;
--heading-border-height: 2px;
--font-menu-lv1-family: Helvetica,Arial, sans-serif;
--font-menu-lv1-size: 14px;
--font-menu-lv1-weight: 700;
--menu-lv1-letter-spacing: .05em;
--menu-lv1-text-transform: uppercase;
--font-menu-lv2-family: Helvetica,Arial, sans-serif;
--font-menu-lv2-size: 14px;
--font-menu-lv2-weight: 400;
--menu-lv2-letter-spacing: 0;
--menu-lv2-text-transform: capitalize;
--font-menu-lv3-family: Helvetica,Arial, sans-serif;
--font-menu-lv3-size: 14px;
--font-menu-lv3-weight: 400;
--menu-lv3-letter-spacing: 0;
--menu-lv3-text-transform: capitalize;
--font-mega-menu-lv2-family: Helvetica,Arial, sans-serif;
--font-mega-menu-lv2-size: 14px;
--font-mega-menu-lv2-weight: 700;
--font-mega-menu-lv2-style: normal;
--mega-menu-lv2-letter-spacing: 0;
--mega-menu-lv2-text-transform: uppercase;
--font-mega-menu-lv3-family: Helvetica,Arial, sans-serif;
--font-mega-menu-lv3-size: 14px;
--font-mega-menu-lv3-weight: 400;
--mega-menu-lv3-letter-spacing: 0;
--mega-menu-lv3-text-transform: capitalize;
--product-title-font: Helvetica,Arial, sans-serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/koox-co-uk