---
version: alpha
name: Shop
description: A violet wordmark floating over cut-out product photos on white
colors:
  on-surface-variant: "#C9CBCC"
  on-surface: "#000000"
  surface: "#FBFBFB"
  outline: "#EBEBEB"
  primary: "#5433EB"
  white: "#FFFFFF"
  paper: "#FCFCFC"
  mist: "#F2F4F5"
  slate: "#7B7B7B"
  navy-hairline: "#05294D"
  divider: "#EFEFEF"
typography:
  micro:
    fontFamily: GT Standard
    fontSize: 11.4px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  caption:
    fontFamily: GT Standard
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  body:
    fontFamily: GT Standard
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  control:
    fontFamily: GT Standard
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: GT Standard
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
rounded:
  search-bar-pills-buttons-icon-chips: 9999px
  category-tile-hero-card: 16px
  small-inset-image: 11px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 48px
---
# Shop — Style Reference
> A violet wordmark floating over cut-out product photos on white

**Theme:** light

Shop (Shopify's consumer marketplace) is a near-white retail canvas where a single electric violet does all the identity work. The page is almost colorless by design — `#FBFBFB` paper, black ink, a few greys for chrome — so that the `#5433EB` wordmark, the search-submit disc, and the app logo read as the one saturated event on the screen. Everything else is delegated to the merchandise: hero shots and category tiles are full-bleed cut-out product photography, and the browns, tans, and blues you see are sampled from those images, not from a brand ramp. Type is GT Standard throughout — a warm, slightly humanist grotesque — and the geometry is committedly round: the search bar, category pills, and buttons are all fully-rounded capsules. The result feels like a clean department-store directory that trusts its products to supply the color.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Shop Violet | `#5433EB` | `--color-violet` | The signature and the ONLY brand color — wordmark, logo fill, search-submit disc. Never dilute it across the UI; it is the single saturated accent on an otherwise neutral page. |
| Ink | `#000000` | `--color-ink` | Primary text, icon rail glyphs, and the black "Download Shop app" top banner. |
| White | `#FFFFFF` | `--color-white` | Card surfaces, the search field, the raised nav rail. |
| Canvas | `#FBFBFB` | `--color-canvas` | Page background — an off-white so faint it reads as white until a true-white card sits on it. |
| Paper | `#FCFCFC` | `--color-paper` | A second near-white used as an ambient shadow tint under floated cards. |
| Mist | `#F2F4F5` | `--color-mist` | Cool grey wash for subtle fills and the soft glow ringing hero product cards. |
| Cloud | `#C9CBCC` | `--color-cloud` | Placeholder text and disabled/muted grey. |
| Slate | `#7B7B7B` | `--color-slate` | Secondary text and quiet labels. |
| Navy Hairline | `#05294D` | `--color-hairline` | 0.5px outline color on ghost buttons — a near-black navy, not a true black, so borders read soft. |
| Border | `#EBEBEB` | `--color-border` | Default 1px separators and card edges. |
| Divider | `#EFEFEF` | `--color-divider` | The lightest rule, for low-emphasis section splits. |

*(The tans and browns in the scan — `#C7AB95`, `#8C7866`, `#A5896B`, `#494432` and kin — are pixels sampled from product photography, not design tokens. See Imagery.)*

## Tokens — Typography
### GT Standard — the entire system: nav, search, headings, category labels · `--font-standard`
- **Substitute:** Inter, Helvetica Neue, ui-sans-serif
- **Weights:** Regular, Medium, Semibold, Bold, Heavy (the scan reports every weight collapsed to CSS `400` — the family ships weight as named variants: GTStandard-MRegular / MMedium / MSemibold / MBold / LHeavy)
- **Sizes:** 11.4px · 12px · 14px · 16px · 20px
- **Line height:** tight, ~1.1–1.3 for the compact directory labels
- **Letter spacing:** near-zero; GT Standard's humanist width carries the rhythm without tracking
- **Role:** One family does everything. Section headings ("Women", "Men", "Beauty") use the Semibold cut at 20px; body, pills, and placeholders sit at 14–16px Regular/Medium.

*(Also loaded on the page: Good Sans (Bold/Medium/Text-Regular) and Editorial New Regular — secondary faces reserved for editorial/marketing surfaces, not seen in the shopping directory.)*

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro | 11.4px | 1.2 | 0 | `--text-micro` |
| Caption | 12px | 1.3 | 0 | `--text-caption` |
| Body | 14px | 1.4 | 0 | `--text-body` |
| Control | 16px | 1.4 | 0 | `--text-control` |
| Heading | 20px | 1.2 | -0.01em | `--text-heading` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 48px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Search bar / pills / buttons / icon chips | fully rounded (`9999px`, scan reports the extreme `1e+07px`) |
| Category tile / hero card | 16px – 28px |
| Small inset image | ~11px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Rest | `0 2px 8px rgba(0,0,0,0.06)` | `--shadow-rest` |
| Raised | `0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)` | `--shadow-raised` |
| Float | `0 4px 24px rgba(0,0,0,0.12)` | `--shadow-float` |
| Ambient card | `0 2px 8px rgba(0,0,0,0.06), 0 -1px 30px #F2F4F5, 0 0 0 40px #FCFCFC` | `--shadow-ambient` |

### Layout
- **Page max-width:** wide, near-full-viewport directory
- **Section gap:** ~48px between category rows
- **Card padding:** tiles are edge-to-edge image with an inset label
- **Element gap:** 8–12px between pills and controls

## Components
### Search Bar
**Role:** The page's center of gravity — "What are you shopping for today?"
Fully-rounded white capsule, padding `4px 48px 4px 20px`, 16px placeholder in Cloud `#C9CBCC`, soft rest shadow. A `#5433EB` circular submit disc with a white arrow sits flush at the right edge. This is the one place violet touches an interactive control.

### Category Pill
**Role:** Top-level shop entries (Women, Men, Beauty, Home…).
White fully-rounded capsule with a small circular product-photo icon chip on the left and a 16px Ink label. Each chip carries its own category color from imagery — the pills themselves stay neutral.

### Ghost Button
**Role:** Quiet, outlined action.
White fill, `0.5px` Navy Hairline `#05294D` border, fully rounded, ~10px padding, Ink text. The hairline is deliberately sub-pixel and navy (not black) so the outline whispers.

### Category Tile
**Role:** Merchandise entry in the directory grid.
Rounded (16–28px) full-bleed product photograph with a bottom-left white label ("Dresses", "Sneakers", "Hoodies"). No frame, no caption chrome — the photo IS the card.

### Hero Product Cluster
**Role:** The homepage centerpiece.
Cut-out product photos (bag, sneakers, sunglasses, a dog) floating shadowless on Canvas, with the violet "shop" wordmark set beneath them. A single raised product card ("Cookware Set", star rating, review count) floats to the side on `--shadow-float`.

### Nav Rail
**Role:** Persistent left icon column.
Narrow white rail on Canvas, black glyph icons (home, grid, cart, tag, heart) stacked with generous vertical gaps, "Sign in" pinned at the bottom. Selected icon renders solid/filled.

### Top Banner
**Role:** App-download promo strip.
Full-width black `#000000` bar with white text, a small violet Shop glyph, and a right-arrow affordance. The only dark surface on the page.

### Wordmark / Logo
**Role:** The brand mark.
Lowercase "shop" and the rounded arrow glyph, both filled solid `#5433EB`. Used at full saturation, never tinted or outlined.

### Star Rating
**Role:** Social proof on product cards.
Gold filled stars with a grey review count ("(40K)") in Slate — set small (~11–14px) beneath a product title.

### Icon Chip
**Role:** The circular badge inside category pills.
Small fully-rounded avatar showing a cropped product photo per category; supplies the pill's only color.

## Do's and Don'ts
### Do
- Keep `#5433EB` as the single saturated color — wordmark, logo, and the search-submit disc, nothing more.
- Let product photography supply every other color on the page.
- Make interactive surfaces fully rounded — search, pills, buttons, chips.
- Float cards on soft, low-opacity shadows (`rgba(0,0,0,0.06)`–`0.12`) rather than borders.
- Set the whole UI in GT Standard; lean on its weight variants, not a second family.

### Don't
- Don't spread violet across buttons, links, and headings — it stops being the signature.
- Don't put hard black `#000000` borders on cards; the system uses light greys (`#EBEBEB`/`#EFEFEF`) and a sub-pixel navy hairline.
- Don't square the corners — rounded capsules are the shape language.
- Don't add a decorative brand color; the tans and browns belong to merchandise, not the palette.
- Don't darken the canvas beyond the black promo banner — the page is a near-white gallery.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FBFBFB` | Page background |
| 1 | Paper | `#FCFCFC` | Ambient near-white under floated cards |
| 2 | Card | `#FFFFFF` | Search field, nav rail, product cards |
| — | Banner | `#000000` | Inverted top promo strip |

## Elevation
Depth is entirely luminance-plus-shadow, never borders on the primary surfaces. Cards are true white lifted off the off-white canvas by soft, wide, low-opacity shadows (2px/8px at 6% for rest, up to 24px at 12% for floats). The hero uses a distinctive ambient shadow that layers a mist inner-glow and a 40px paper halo, making the product card feel embedded in light rather than dropped on top.

## Imagery
The color strategy is photography-driven. Hero elements are cut-out product shots (handbag, sneakers, sunglasses, a dog) floating shadowless on white; category tiles are full-bleed lifestyle/product photos with an inset white label. The scan's brown-and-tan cluster (`#C7AB95`, `#8C7866`, `#A5896B`, `#494432`, `#BBAFA9`, `#9A857B`, `#E0DBD9`, `#BEBAC0`, `#7A6E68`) is pixels sampled from these photos — treat them as content, not brand tokens. Photography carries all the warmth so the chrome can stay neutral.

## Layout
A wide, near-full-viewport directory with a persistent narrow left icon rail. The page reads top-down: black promo banner → floating hero cluster with wordmark → oversized centered search capsule → a horizontal row of category pills → a multi-column grid of category tiles grouped by department ("Women", "Men", "Beauty", "Home", "Fitness & nutrition", "Baby & toddler"). Sections are titled with a 20px Semibold heading and a small chevron; rows scroll horizontally past the fold.

## Typography Voice
One family, five weights, zero fuss. GT Standard's humanist grotesque handles everything from 11px review counts to 20px department headings; hierarchy comes from weight and size, not a display/body contrast. There is no italic, no serif in the shopping surface (Editorial New is loaded but reserved for marketing), and near-zero tracking throughout. The voice is retail-plain and legible — a directory, not a magazine — letting the merchandise and the one violet mark do the talking.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FBFBFB` / text: `#000000` / surface: `#FFFFFF` / border: `#EBEBEB` / accent: `#5433EB` / primary action: `#5433EB` (the search-submit disc — the only violet control)

## Example Component Prompts
1. **Search bar**: Fully-rounded white capsule, ~640px wide, placeholder "What are you shopping for today?" in `#C9CBCC` at 16px GT Standard, `0 2px 8px rgba(0,0,0,0.06)` shadow, with a 40px `#5433EB` circular submit button (white arrow) flush at the right edge.
2. **Category pill**: White fully-rounded capsule, 8px vertical padding, a small circular product-photo chip on the left, and a 16px `#000000` label; pill neutral, chip supplies color.
3. **Category tile**: 16–28px rounded card that is a full-bleed product photo with a bottom-left white label in 14px Medium; no border, no visible frame.
4. **Ghost button**: White fill, `0.5px solid #05294D` border, fully rounded, 10px padding, `#000000` label — a whisper-quiet outlined action.
5. **Top banner**: Full-width `#000000` bar, white 14px text "Download Shop app. Available on iOS & Android", a small violet Shop glyph on the left and a right chevron.

## Similar Brands
- **Shopify** — the parent; the same soft-shadow, rounded, product-forward retail cleanliness.
- **Klarna** — consumer-shopping app that leans on a single saturated brand color over neutral chrome and rounded capsules.
- **Airbnb** — full-bleed photography as the color source with a restrained, near-monochrome UI frame.
- **Linear** — a single electric accent (theirs indigo) held against a near-neutral surface with soft elevation.
- **Gumroad / GT Standard adopters** — the warm humanist-grotesque type stance shared by brands built on Grilli Type faces.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-violet: #5433EB;
  --color-ink: #000000;
  --color-white: #FFFFFF;
  --color-canvas: #FBFBFB;
  --color-paper: #FCFCFC;
  --color-mist: #F2F4F5;
  --color-cloud: #C9CBCC;
  --color-slate: #7B7B7B;
  --color-hairline: #05294D;
  --color-border: #EBEBEB;
  --color-divider: #EFEFEF;

  /* Typography — Families */
  --font-standard: 'GT Standard', Inter, 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-micro: 11.4px;
  --text-caption: 12px;
  --text-body: 14px;
  --text-control: 16px;
  --text-heading: 20px;
  --leading-tight: 1.2;
  --leading-body: 1.4;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 48px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-card-lg: 28px;
  --radius-inset: 11px;

  /* Shadows */
  --shadow-rest: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-raised: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.12);
  --shadow-ambient: 0 2px 8px rgba(0,0,0,0.06), 0 -1px 30px #F2F4F5, 0 0 0 40px #FCFCFC;
}
```
### Tailwind v4
```css
@theme {
  --color-violet: #5433EB;
  --color-ink: #000000;
  --color-white: #FFFFFF;
  --color-canvas: #FBFBFB;
  --color-paper: #FCFCFC;
  --color-mist: #F2F4F5;
  --color-cloud: #C9CBCC;
  --color-slate: #7B7B7B;
  --color-hairline: #05294D;
  --color-border: #EBEBEB;
  --color-divider: #EFEFEF;

  --font-standard: 'GT Standard', Inter, 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;

  --text-micro: 11.4px;
  --text-caption: 12px;
  --text-body: 14px;
  --text-control: 16px;
  --text-heading: 20px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 48px;

  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-card-lg: 28px;
  --radius-inset: 11px;

  --shadow-rest: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-raised: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.12);
}
```