---
version: alpha
name: Powder Room
description: A mint ground with one rose at two strengths, where every product is a swatch disc before it is a photograph and the disc is data.
meta:
  id: "theme-powder-room"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:17+09:00"
  updatedAt: "2026-09-02T00:58:17+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Shade first. The photo can wait.
  bestFor: Beauty and cosmetics retail, paint and pigment, textile and yarn colour, anything sold by shade
  avoidFor: Products with no colour dimension, B2B tools, monochrome catalogues
  defaultMode: light
  surfaceStyle: flat
  accentUse: fill
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: bright
  motion:
    intensity: 2
    duration: 240ms
    ease: "cubic-bezier(0.34, 1.56, 0.64, 1)"
    signature: "Swatch discs scale from their own centre when selected. Nothing translates; a shade does not move, it comes forward."
  displayFont: DM Serif Display
  displayKind: serif
  bodyFont: Plus Jakarta Sans
  monoFont: Syne Mono
colors:
  background: "#D0F1ED"
  foreground: "#1B2021"
  card: "#D5E1E0"
  card-foreground: "#1B2021"
  popover: "#D5E1E0"
  popover-foreground: "#1B2021"
  primary: "#B063A6"
  primary-foreground: "#03100F"
  secondary: "#C6D7D5"
  secondary-foreground: "#1B2021"
  muted: "#C6D7D5"
  muted-foreground: "#535C5D"
  accent: "#9F7899"
  accent-foreground: "#03100F"
  destructive: "#B6322D"
  destructive-foreground: "#F2FDFB"
  border: "#B6C6C4"
  input: "#B6C6C4"
  ring: "#B063A6"
  chart-1: "#A5619C"
  chart-2: "#788F36"
  chart-3: "#AF555B"
  chart-4: "#049CC0"
  chart-5: "#9A5E02"
colorsDark:
  background: "#00221F"
  foreground: "#DDF5F8"
  card: "#002D2A"
  card-foreground: "#DDF5F8"
  popover: "#002D2A"
  popover-foreground: "#DDF5F8"
  primary: "#BC6EB1"
  primary-foreground: "#00110F"
  secondary: "#003B37"
  secondary-foreground: "#DDF5F8"
  muted: "#003B37"
  muted-foreground: "#84A3A6"
  accent: "#D2A9CB"
  accent-foreground: "#00110F"
  destructive: "#E35C53"
  destructive-foreground: "#00110F"
  border: "#104A46"
  input: "#104A46"
  ring: "#BC6EB1"
  chart-1: "#C07AB6"
  chart-2: "#81973F"
  chart-3: "#DE7F84"
  chart-4: "#0092B5"
  chart-5: "#D6964D"
typography:
  display-lg:
    fontFamily: DM Serif Display
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: DM Serif Display
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -0.012em
  headline-md:
    fontFamily: DM Serif Display
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
  label-caps:
    fontFamily: Plus Jakarta Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: Syne Mono
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Syne Mono
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.015em
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 18px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 52px
  gutter: 20px
  margin: 30px
  measure: 60ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
---

# Powder Room

## Overview

Powder Room sells shade. Its structural rule is that **a product is a swatch
disc before it is a photograph**: a 64px circle of the actual product colour,
rendered from a stored value, appears before any image in every list, grid,
search result and cart line.

The disc is data, not decoration. It is generated from the shade's recorded
value, so a new shade appears correctly without anyone shooting it, and two
shades can be compared without trusting two different lighting setups. A
photograph of a lipstick tells you about the packaging; the disc tells you about
the colour.

The second rule: **text never sits on a photograph.** Not on a hero, not on a
card, not on a banner. Photographs are for texture and are always accompanied by
type beside them, never over them.

Mint ground, one rose at two strengths. It suits cosmetics, pigment and yarn. It
is wrong for anything with no colour dimension.

## Colors

A cool ground so warm shades read true, and one rose doing two jobs.

- **Ground:** pale mint. Cool and low chroma — a neutral surround for swatches,
  chosen the way a paint chart's card stock is chosen.
- **Primary (rose):** buy, add, subscribe.
- **Accent:** the same rose, lighter, used as a **fill** on shade-family chips
  and the "matched to you" badge. Primary and accent being one hue at two
  strengths means the interface never competes with the swatch discs, which
  carry every other colour in the catalogue.
- **Neutrals** are mint-tinted.
- Charts are accented, and they are mostly shade-distribution histograms, which
  are drawn in the swatch colours themselves rather than in the theme palette.

## Typography

DM Serif Display for names, Plus Jakarta Sans for text, Syne Mono for codes.

- **Display:** DM Serif Display at 400, 66px. High contrast, tight, elegant.
  Used for shade names, which are the poetry of this category and deserve it.
- **Body:** Plus Jakarta Sans at 14.5px, 1.6, 60ch. Clean and slightly geometric.
- **Syne Mono** carries shade codes, batch numbers and ingredient percentages.
  It is a quirky mono with wide letterforms and it makes a shade code look like
  a reference rather than a serial number.
- Uppercase at 0.18em for finish and family labels: MATTE, SATIN, WARM, COOL.

## Layout

**Disc, name, code — then everything else.** Every product row and cell begins
with the 64px disc (40px in dense lists), then the shade name in DM Serif, then
the code in Syne Mono. The photograph, if there is one, comes after.

The shade wall is the signature screen: a dense grid of discs only, no names, no
prices, 20px gutters, sorted by hue angle rather than by product. Names appear
on hover in a fixed strip at the top of the wall — not as tooltips, which would
cover neighbouring shades and defeat comparison.

A 12-column grid at 1240px. Measure is 60ch — this system does not have long
text.

## Elevation & Depth

Flat, with one deliberate exception: swatch discs carry a 1px inset ring in
foreground at 12% alpha, which stops a pale shade from disappearing into the
mint ground. That ring is the only inset effect in the library and it exists
because a swatch that vanishes is a broken swatch.

Selected discs scale from their centre to 112% and hold. Nothing translates.

## Shapes

Round — 8px on cards, 12px on panels, pills on buttons, and perfect circles on
every swatch. A swatch is never a square; a square swatch reads as a colour
picker and this is a product.

Photography is bright and high-key. It is used for texture and application shots
and it never carries text.

## Components

- **Swatch disc:** 64px circle filled with the recorded shade value, 1px inset
  ring, optional 2px accent outer ring when in the customer's kit.
- **Shade row:** disc, name in DM Serif 21px, code in Syne Mono, finish label in
  uppercase, price. In that order, always.
- **Shade wall:** discs only in a dense grid sorted by hue, with a fixed name
  strip at the top rather than tooltips.
- **Finish chip:** accent fill, pill, uppercase.
- **Comparison tray:** up to four discs at 96px side by side on a neutral card,
  with codes beneath in mono. No photographs in this view.

## Do's and Don'ts

- Do render the disc from stored data, before any photograph.
- Do give pale swatches an inset ring so they cannot vanish.
- Do sort the shade wall by hue angle.
- Don't set text over a photograph anywhere in this system.
- Don't use a square swatch.
- Don't show shade names as tooltips on the wall.
- Don't let the interface introduce a third hue; the discs need the room.