# Koox · Design system migration spec

> Source: https://koox.co.uk  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how to combine bold typography and clean photography to create a premium, artisanal brand identity.

## 1. Identity DNA

The Koox design system operates like a modern artisanal juice lab, where clarity of process translates into clarity of presentation. Every component is filtered to remove ornament, leaving a system built on clean geometry and a restrained, natural palette. This is e-commerce stripped to its essential, nourishing ingredients.

**One-liner:** Clean, product-first organic juice e-commerce with bold typography and a restrained, natural palette.
**Keywords:** organic · fresh · clean · juice · premium
**Analogy:** Modern artisanal juice lab meets clean e-commerce

## 2. Color

The palette is a study in high-contrast minimalism. A dominant field of white is punctuated by deep ink and a single, warm terracotta accent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--bg-quiet` | `#EFEFEF` | quiet area |
| `--ink` | `#232323` | body text |
| `--ink-soft` | `#727272` | secondary text |
| `--muted` | `#CCCCCC` | placeholder |
| `--muted-soft` | `#EDEDED` | weak hint |
| `--accent` | `#D25A24` | single accent |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** High-contrast minimalism with a warm, earthy accent color.

The principle is restraint: a limited, earthy palette ensures the product photography remains the primary narrative element.

## 3. Typography

Typographic voice is assertive and geometric. Bold, uppercase settings in a clean sans-serif establish a hierarchy of impact for headers and calls to action, while maintaining high legibility.

- **Display:** geometric-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 900 | -1px | Hero headlines |
| headline | 30px | 1.2 | 700 | 0.4px | Section headers |
| body | 16px | 1.625 | 400 | 0.32px | General text |

**Type rules:**
- Use bold, uppercase for primary calls to action and section headers.
- Keep line-height tight for display text to maintain visual impact.

## 4. Spacing

Vertical rhythm is governed by a consistent 4px base unit, creating a disciplined yet flexible spatial framework.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with clear hierarchy established through varied vertical spacing.

## 5. Surfaces

Depth is communicated not through soft shadows, but through sharp, architectural definition. Borders are 1px solid lines, and shadows are offset blocks of color, reinforcing the system's clean, constructed feel.

- **Radius:** sm 1px · md 4px · lg 0px · pill 0px
- **Shadows:**
  - rgb(107, 18, 41) 5px 5px 0px 0px
  - rgba(0, 0, 0, 0.2) 0px 6px 27px 0px
- **Borders:** Sharp, 1px solid borders for structural definition.

## 6. Layout

The layout skeleton is a centered column for focused reading, bookended by full-bleed sections. A full-viewport hero anchors the composition, followed by a structured grid of product cards.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with a full-width hero and a grid of three product cards below.

## 7. Motion & Interaction

Motion philosophy is one of subtle confirmation rather than decoration. Transitions are smooth and brief, used exclusively to acknowledge user interaction with interactive elements.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0, 0, 0.3, 1)`
- **Patterns:**
  - Smooth fade and transform transitions on interactive elements.

- **Hover:** Subtle opacity or transform changes on buttons and links.
- **Click:** Immediate response with slight shadow adjustment.
- **Transition:** Smooth transitions for state changes.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, clean, and direct. Headlines are bold, uppercase, and benefit-driven, while calls to action are immediate and set in all-caps.

- **Tone:** Confident, clean, and straightforward.
- **Headline style:** Bold, uppercase, and benefit-driven.
- **CTA style:** Direct, action-oriented, and set in all-caps.
- **Avoid:** Avoid overly decorative or script fonts. / Avoid complex gradients or shadows. / Avoid cluttered layouts with too many competing elements.

### Don'ts
- ❌ Don't use decorative or script typography — screenshot shows bold, clean geometric sans-serif fonts.
- ❌ Don't use rounded corners or soft shapes — screenshot shows sharp, 1px borders and no border-radius.
- ❌ Don't use a complex multi-color palette — screenshot shows a restrained palette of white, black, grey, and one warm accent.
- ❌ Don't use centered-aligned body text — screenshot shows centered display text but structured product layouts.
- ❌ Don't use dark mode or moody backgrounds — screenshot shows bright, white-based backgrounds with high-contrast ink.
- ❌ Don't use busy patterns or textures — screenshot shows clean photography and solid color blocks.

The system deliberately does not accommodate decorative flair, complex gradients, or the ambient moody backgrounds common in other lifestyle e-commerce.

## System Prompt (paste into AI tool)

```
Koox is a modern, product-first e-commerce site for organic juices and cleanses. It features a clean, minimalist aesthetic with a high-contrast palette of white, black, and a warm terracotta accent (#D25A24). The typography is bold and geometric, using uppercase for impact. Key hex colors are #FFFFFF (bg), #232323 (ink), #D25A24 (accent), and #113722 (dark green brand color). Critical donts: Don't use decorative fonts, don't use rounded corners, don't use dark mode, don't use busy patterns, don't use a complex color palette, and don't use low-contrast text. The layout is centered and spacious, emphasizing product photography.
```
