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.
Reading this with a machine? This page is also at /docs/design-systems.md, and every page is indexed at /llms.txt.