---
version: alpha
name: Pearl Atelier
description: A genuinely pink page. The rose is the paper and a single viridian thread does all the work.
meta:
  id: "theme-pearl-atelier"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The page is pink, and one green thread runs through it
  bestFor: Fashion and beauty, couture and made-to-order, salons, boutique commerce, invitations
  avoidFor: Enterprise software, developer tools, dense reporting
  defaultMode: light
  surfaceStyle: elevated
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 4
    duration: 300ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "Long fades and a thread that draws itself along an edge."
  displayFont: Cormorant Garamond
  displayKind: serif
  bodyFont: Jost
  monoFont: DM Mono
colors:
  background: "#FFD9DD"
  foreground: "#251618"
  card: "#F0D1D5"
  card-foreground: "#251618"
  popover: "#F0D1D5"
  popover-foreground: "#251618"
  primary: "#006A3A"
  primary-foreground: "#FFF8F9"
  secondary: "#ECC4C8"
  secondary-foreground: "#251618"
  muted: "#ECC4C8"
  muted-foreground: "#695054"
  accent: "#A92E52"
  accent-foreground: "#FFF8F9"
  destructive: "#A21A1B"
  destructive-foreground: "#FFF8F9"
  border: "#D8B5B9"
  input: "#D8B5B9"
  ring: "#006A3A"
  chart-1: "#237246"
  chart-2: "#765797"
  chart-3: "#00666A"
  chart-4: "#A15B3A"
  chart-5: "#1C5589"
colorsDark:
  background: "#221013"
  foreground: "#F0DDDF"
  card: "#2B1A1D"
  card-foreground: "#F0DDDF"
  popover: "#2B1A1D"
  popover-foreground: "#F0DDDF"
  primary: "#73CE95"
  primary-foreground: "#18080B"
  secondary: "#3B2327"
  secondary-foreground: "#F0DDDF"
  muted: "#3B2327"
  muted-foreground: "#A38C8F"
  accent: "#F87F99"
  accent-foreground: "#18080B"
  destructive: "#FF968A"
  destructive-foreground: "#18080B"
  border: "#483135"
  input: "#483135"
  ring: "#73CE95"
  chart-1: "#75C593"
  chart-2: "#B795DE"
  chart-3: "#54CED5"
  chart-4: "#D68864"
  chart-5: "#8EC5FF"
typography:
  display-lg:
    fontFamily: Cormorant Garamond
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Cormorant Garamond
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Cormorant Garamond
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Jost
    fontSize: 18.5px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Jost
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Jost
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Jost
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: DM Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: DM Mono
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 999px
  md: 999px
  lg: 999px
  xl: 999px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 30px
  xl: 62px
  gutter: 24px
  margin: 36px
  measure: 62ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 26px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Pearl Atelier

## Overview

Most themes with pink in them use it as an accent on a white page. Pearl Atelier
does the opposite: the page itself is a warm rose at 92% lightness, and the
colour that acts — buttons, links, the mark beside a chosen size — is a single
viridian green. A green thread on rose paper is an atelier, not a cosmetics ad.

The geometry is fully rounded: every radius in the scale is a pill, including
inputs and image frames, which is unusual enough that the theme is recognisable
from a thumbnail.

Personality: refined, feminine without being soft-headed, deliberately slow.

## Colors

Rose paper, green thread.

- **Ground (#FFD9DD):** A real pink, not a blush white. Cards move *up* from it
  toward a paler rose, never to white.
- **Primary (#006A3A):** Viridian. Buttons, links, the chosen option. It is the
  only saturated cool colour and it always means "this one".
- **Accent (#A92E52):** Deep rose. Prices, the sold-out mark, the second chart
  series. Being from the ground's own family, it recedes; that is intended.
- **Ink:** a warm near-black with rose in it.
- Charts are accented: viridian and rose loud, three quiet neutrals behind.

## Typography

Cormorant Garamond for display, Jost for body, DM Mono for sizes and prices.

- **Display:** Cormorant at 54px, weight 500, minimal tracking. It is very light
  at large sizes, which is the intent — never set it below 22px and never bold
  it.
- **Body:** Jost at 16.5px, 1.62, 62ch. The geometric sans keeps the serif from
  becoming a wedding invitation.
- **Labels:** uppercase Jost at 10.5px with 0.18em tracking, in
  muted-foreground. Labels are the only uppercase.
- **Sizes, prices, measurements:** DM Mono, 12px, so a size chart aligns.

## Layout

A 12-column grid at 1180px with 24px gutters and a 36px margin. The signature
layout is asymmetric: a tall image at 7 columns starting from the left edge with
no margin at all, and the detail column at 4 columns floating in the remaining
space with a whole empty column between them.

Vertical rhythm is 8px, and blocks are separated by 62px.

## Elevation & Depth

Cards lift on a wide, very soft rose-tinted shadow. The elevation is subtle —
this is not Bloom Lab's bounce — and hover increases only the shadow's spread,
never the position. Modals use a rose scrim, never black.

## Shapes

Everything is a pill. Cards have a 999px radius, which on a wide card reads as
fully rounded ends; images are clipped into arches and lozenges; buttons, inputs
and badges are all pills. The consistency is what makes it a system rather than
a quirk.

Photography is warm-graded, cropped tall, and often masked into an arch.

## Components

- **Buttons:** pill, viridian fill, pale text, 13px padding. Hover deepens the
  fill over 300ms.
- **Product cards:** pill-clipped image on top, name in Cormorant, price in DM
  Mono, an uppercase label for the material. No border.
- **Option pickers:** a row of pill outlines; the chosen one fills viridian.
- **Inputs:** pill, hairline border, paler rose fill, viridian focus ring.
- **Badges:** pill, rose fill at 20%, full-strength rose text.

## Do's and Don'ts

- Do let the page be pink and keep cards within the rose family.
- Do use viridian only where a choice is being made.
- Do mask images into arches and pills.
- Don't introduce white as a surface.
- Don't bold the Cormorant or set it below 22px.
- Don't use a black scrim.
- Don't mix a square corner into this system anywhere.