# Design systems

> Every Camel store is dressed in one of eight design styles. A style is a complete visual language — type, colour rhythm, shape, spacing, motion, the look of every button and card — not a colour swap.

## The eight styles

| Style | In one line |
|---|---|
| **Minimal** | Quiet, generous whitespace, hairline rules, restrained type. The product does the talking. |
| **Editorial** | Magazine sensibility: an italic accent face, printed rules, considered pacing, plates rather than cards. |
| **Modern** | Clean geometry, confident sans type, soft depth and precise alignment. The default "premium tech" look. |
| **Organic** | Warm, natural, rounded; textured surfaces and earthy palettes for products that come from somewhere. |
| **Playful** | Rounded, bright, friendly; tinted grounds, chunky buttons and a sense of humour. |
| **Vibrant** | Saturated colour, high energy, strong contrast; built for products that want to be loud. |
| **Bold** | Heavy display type, big blocks, hard edges; maximum presence per pixel. |
| **Neo-brutalist** | Raw grids, thick borders, offset shadows and stamped buttons; deliberately un-slick. |

## How a style reaches the store

A style is data, not a separate set of components. Each section in the library is a *skeleton* — its structure, layout and content — and each style supplies a *sub-variant*: the look of that skeleton under that style. So the same Review Wall or FAQ section exists once, and renders eight different ways. Switching a store's style in the editor re-dresses every section at once, and the published theme carries the same tokens as theme settings.

The pieces a style controls include:

- **Type** — five slots (display, heading, body, label, accent), each filled from a curated shortlist of families per style.
- **Colour** — the palette, how much colour the backgrounds carry (asked in the questionnaire, not guessed), and where accents are allowed.
- **Shape** — global radius, border weights, shadow language.
- **Commerce chrome** — the store-wide button voice, the buy box and its animation, quantity and option controls, stock and delivery badges, the sticky add-to-cart bar.
- **Motion** — the scroll-reveal tempo and what each section is allowed to do on scroll.

## Choosing a style

The questionnaire suggests a style from the product and the persona; you can override it there or switch later in the editor. Because the style is one setting, trying all eight on a finished store takes a few seconds.