---
version: alpha
name: Atoll Market
description: Aqua paper under a crimson that has no business being there, set as an asymmetric editorial storefront.
meta:
  id: "theme-atoll-market"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: A shop that reads like a magazine.
  bestFor: Fashion and lifestyle commerce, lookbooks, brand storefronts, collections, editorial retail
  avoidFor: Operational software, dashboards, technical documentation
  defaultMode: light
  surfaceStyle: elevated
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: punch
  motion:
    intensity: 3
    duration: 340ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Images scale down from 104% as they enter, so a grid settles rather than appears."
  displayFont: Prata
  displayKind: serif
  bodyFont: Instrument Sans
  monoFont: Geist Mono
colors:
  background: "#D6F0ED"
  foreground: "#171C1B"
  card: "#B5E8E1"
  card-foreground: "#171C1B"
  popover: "#B5E8E1"
  popover-foreground: "#171C1B"
  primary: "#6C003F"
  primary-foreground: "#F2FDFB"
  secondary: "#95DCD4"
  secondary-foreground: "#171C1B"
  muted: "#95DCD4"
  muted-foreground: "#515958"
  accent: "#7550BB"
  accent-foreground: "#F2FDFB"
  destructive: "#720007"
  destructive-foreground: "#F2FDFB"
  border: "#92CFC8"
  input: "#92CFC8"
  ring: "#6C003F"
  chart-1: "#8C0053"
  chart-2: "#7F4000"
  chart-3: "#384E00"
  chart-4: "#00686C"
  chart-5: "#3A0AA7"
colorsDark:
  background: "#001614"
  foreground: "#D3DCD9"
  card: "#001F1D"
  card-foreground: "#D3DCD9"
  popover: "#001F1D"
  popover-foreground: "#D3DCD9"
  primary: "#FF95C1"
  primary-foreground: "#00110F"
  secondary: "#002A27"
  secondary-foreground: "#D3DCD9"
  muted: "#002A27"
  muted-foreground: "#848F8C"
  accent: "#8F6CD9"
  accent-foreground: "#00110F"
  destructive: "#FF9D92"
  destructive-foreground: "#00110F"
  border: "#003733"
  input: "#003733"
  ring: "#FF95C1"
  chart-1: "#FF85BA"
  chart-2: "#FC8500"
  chart-3: "#9CD200"
  chart-4: "#00B7BD"
  chart-5: "#B9BCFF"
typography:
  display-lg:
    fontFamily: Prata
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Prata
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Prata
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.28
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Instrument Sans
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.46
  label-caps:
    fontFamily: Instrument Sans
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: Geist Mono
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Geist Mono
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 1px
  md: 2px
  lg: 3px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 18px
  lg: 30px
  xl: 72px
  gutter: 26px
  margin: 38px
  measure: 56ch
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  card-product:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 0px
  price-tag:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
  badge-label:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Atoll Market

## Overview

Atoll Market is a storefront that behaves like a magazine. Products are not laid
out in a uniform grid; they sit in an asymmetric editorial arrangement where one
image bleeds off the right edge of the page, a second sits small and centred in
a wide column of white space, and the product name is set at 72px in a high
contrast serif above a price in mono.

The colour is the reason it works. An aqua paper with a deep crimson on it is a
combination that appears in resort printing and almost nowhere in software, and
the crimson is saturated enough to hold its own against full-bleed photography,
which most editorial palettes are not.

It suits fashion, lifestyle and collection-led retail. It has no components for
operational work and should not be extended into any.

## Colors

Aqua, crimson, and a violet for the price of admission.

- **Ground (aqua):** a tinted resort paper. Cool, bright, and clearly a colour.
- **Primary (crimson):** the brand. Product names, section marks, the badge on a
  new arrival. Deep enough to sit over photography.
- **Accent (violet):** the transaction. Add to bag, checkout, size selection.
  This is one of the two themes in the library where the accent rather than the
  primary fills the buying button, because buying is not the brand.
- **Neutrals** are heavily tinted with the aqua; nothing here is grey.
- Charts are polychrome and rare.

## Typography

Prata for display, Instrument Sans for body, Geist Mono for prices.

- **Display:** Prata at 72px. A high-contrast didone with a single weight — it
  is the entire luxury register of this system and it does not need help.
- **Body:** Instrument Sans at 14.5px, 1.58, 56ch. Neutral and quiet; the serif
  is doing the talking.
- **Prices and sizes:** Geist Mono at 12.5px with 0.02em tracking, always
  beneath the product name, never beside it.
- **Labels:** uppercase at 0.18em for section marks and collection names.

## Layout

A 12-column grid at 1400px with 26px gutters and a wide 38px margin — but the
margin is deliberately broken. The signature structure is the **bleed row**: one
product image spans columns 7–12 and runs past the right edge of the page, while
its name and price sit in columns 1–4 with the whole of columns 5–6 left empty.

Vertical rhythm is 6px, and section spacing is 72px, which is the largest in the
library. Space is the luxury signal here.

## Elevation & Depth

Elevated, but barely. Images carry a wide, very soft shadow and nothing else
does; there are no bordered cards at all. A product card is an image, a name and
a price with no container around them.

Images scale down from 104% as they enter, so a grid settles into place rather
than appearing.

## Shapes

Effectively square — 1px on controls, 2px on cards, zero on images. Rounded
corners would fight the editorial register.

Photography is punch-treated and is the primary content of the system. At least
one image per view should bleed off an edge.

## Components

- **Bleed row:** the signature component. Image spanning to past the page edge,
  name and price in the opposite columns, empty columns between them.
- **Product card:** image, name in Prata, price in mono. No border, no
  background, no padding.
- **Size selector:** square 40px cells, 1px border, violet fill when chosen.
- **Buttons:** violet fill, zero radius, 14px padding.
- **Collection mark:** uppercase label with a 1px rule extending to the column
  edge.

## Do's and Don'ts

- Do let at least one image bleed off the page edge per view.
- Do leave whole columns empty; space is the luxury signal.
- Do set the price in mono beneath the name.
- Do use the accent for buying and the primary for the brand.
- Don't put a border or a background behind a product.
- Don't round images.
- Don't tighten the 72px section spacing.