---
version: alpha
name: "Gentle Monster"
description: "Korean avant-garde eyewear design system — cinematic black canvas, Times New Roman serif at monumental scale, surrealist art-installation photography, and an absolute refusal of decorative chrome that positions the brand at the intersection of contemporary art and retail."

colors:
  # Surface / canvas
  background: "#000000"              # primary dark canvas — full-bleed black, the default page ground
  surface: "#0a0a0a"                 # secondary surfaces, product card hover zones
  surface-light: "#ffffff"           # inverse surfaces, light-mode seasonal editorials
  surface-mid: "#111111"             # navigation backdrop, footer zone

  # Text / ink
  ink: "#ffffff"                     # primary text on dark canvas — clean white
  ink-secondary: "#999999"           # secondary copy, metadata, captions on dark
  ink-muted: "#555555"               # placeholder text, disabled states, subdued labels
  ink-dark: "#000000"                # text on light surfaces (seasonal inverted editorials)

  # Brand accent — Gentle Monster is intentionally accentless; the brand mark reads in white or black
  primary: "#ffffff"                 # CTA fills and active states on dark canvas
  on-primary: "#000000"             # text on primary (white) surfaces
  primary-container: "#1a1a1a"      # subtle tinted container, hover zone on dark

  # Interactive states
  # was rgba(255,255,255,0.08) — Google format requires hex; flattened on black /* estimated */
  text-hover: "#cccccc"             # lightens slightly on hover — off-white
  focus-ring: "#ffffff"              # keyboard focus outline on dark canvas
  # was rgba(255,255,255,0.05) — Google format requires hex; flattened on black /* estimated */
  focus-tint: "#0d0d0d"

  # Borders
  border: "#333333"                  # structural borders, nav underlines, input chrome
  border-subtle: "#1f1f1f"          # softer section dividers, secondary form chrome
  # was rgba(255,255,255,0.12) — Google format requires hex; flattened on black /* estimated */
  border-ghost: "#1e1e1e"           # ghost chrome, inactive separators

  # Shadow tints — system is essentially flat
  # was rgba(0,0,0,0.80) — Google format requires hex; flattened for overlay use /* estimated */
  shadow-soft: "#141414"            # rare panel shadow on very dark canvas

  # Semantic
  error: "#e53e3e"                   # form validation only — not part of brand palette

typography:
  display-hero:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1px
  label-caps:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 32px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 32px

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 32px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 32px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "transparent"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.text-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"
    padding: 20px 40px
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"

  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 4px 0px
---

# Gentle Monster Design System

## Overview

Gentle Monster does not design a website. It curates a cinematic environment — rotating sculptures, robotic art installations, animatronic figures — that happen to also sell eyewear. The black canvas (`{colors.background}`) is not a dark-mode choice, it is a theatrical decision: the same logic that governs the brand's physical flagship stores, where each season's installation transforms the retail space into a gallery. Against this deep, light-absorbing ground, Times New Roman (`{typography.display-hero}`) lands at monumental scale — 96px headlines in serifed italics that feel borrowed from a postmodern art catalogue or a 1970s cinema poster rather than a consumer e-commerce template. The serif choice is genuinely transgressive for an eyewear brand, and it is deployed without apology.

The brand's visual system is built almost entirely on restraint and shock. Navigation elements are gossamer-thin: 13px tracked uppercase letterforms in the brand's own serif, a single hairline border as the only structural separator, no hover animations beyond a subtle tone shift. Then a campaign image loads — full-bleed, four-thousand pixels wide, a figure in architectural space — and the restraint reveals its purpose. The interface goes invisible so the art can breathe. Product photography follows the same logic: shots often feature the eyewear in staged surrealist settings, not on clean white backgrounds. The product is never just the product. It is always an object placed inside a scene designed to make you feel something uncomfortable and exciting.

What distinguishes this system from similarly minimal luxury brands is the combination of a serif typeface on a near-black canvas — a pairing that is simultaneously classical (art museum, legal document, premium editorial) and futuristic (the black canvas reads as screen-native, cinematic, digital-first). The two registers in tension produce the brand's characteristic feeling: Korean avant-garde with the authority of Western cultural institutions, accessible enough to be aspirational, conceptually dense enough to feel like more than commerce.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) as the permanent page ground — not dark mode, the brand's native territory
- Times New Roman at 96px (`{typography.display-hero}`) with tight −1px tracking — art-catalogue authority at retail scale
- Zero border radius (`{rounded.none}`) on every structural element — buttons, cards, containers, image frames
- Full-bleed editorial photography featuring seasonal art installations — imagery as the primary brand identity vehicle
- `{colors.ink}` (pure white) as the sole text and CTA colour — no chromatic accent anywhere in the system
- Single hairline `1px solid {colors.border}` as the only structural separator — navigation bottom edge and form outlines
- Uppercase letter-spaced labels (`{typography.label-caps}`) at 11px with 1.5px tracking — the system's micro-annotation register
- Product cards without border, shadow, or radius — photography-first rectangles on black ground
- Flat elevation throughout — no drop shadows, no lifted panels; depth lives entirely in the imagery
- Motion used sparingly: long, cinematic transitions (0.6s–1.2s ease) for imagery; near-instant micro-interactions
- Seasonal site redesigns reconfigure the installation theme entirely — the system provides structural rails, not aesthetic continuity

## Colors

### Primary Canvas
- **Black** (`{colors.background}`): The total page canvas. Not a design choice — a theatrical premise. Every page begins here, every season.
- **Near-Black** (`{colors.surface}`): Secondary surfaces, product card hover backgrounds. The lightest shift without introducing grey.
- **Deep Black** (`{colors.surface-mid}`): Navigation backdrop and footer zone — slightly elevated from canvas without being visible.
- **White** (`{colors.surface-light}`): Inverted editorial surfaces. Appears seasonally for light-mode campaign pages; not the default register.

### Ink / Text Scale
- **White** (`{colors.ink}`): All headings, primary body copy, navigation links, CTA fills, and icon strokes. The only colour doing typographic work on dark canvas.
- **Mid Grey** (`{colors.ink-secondary}`): Secondary copy, product metadata, price information, filter labels.
- **Deep Grey** (`{colors.ink-muted}`): Placeholder text, disabled states, legal fine print, subdued captions.
- **Black on Light** (`{colors.ink-dark}`): Used only on inverted seasonal surfaces where `{colors.surface-light}` is the canvas.

### Brand Accent
- **White** (`{colors.primary}`): Gentle Monster carries no chromatic accent colour. Primary CTAs, active states, and interactive affordances use white — which on the black canvas reads as the brand's only contrast agent. The accent is structural.
- **Black on White** (`{colors.on-primary}`): Text on any `{colors.primary}` surface.

### Interaction States
- **Text Hover** (`{colors.text-hover}`): Off-white that dims slightly on hover — interaction feedback without breaking the monochrome contract.
- **Focus Ring** (`{colors.focus-ring}`): Pure white keyboard outline — accessibility in the system's own vocabulary.

### Borders & Structure
- **Primary Border** (`{colors.border}`): Dark grey hairline borders on navigation, form outlines, and rare structural dividers. Barely visible on black canvas — a technical requirement, not an aesthetic feature.
- **Subtle Border** (`{colors.border-subtle}`): Softest dividers, essentially invisible section markers.
- **Ghost Border** (`{colors.border-ghost}`): Was `rgba(255,255,255,0.12)` flattened to opaque hex — the lightest possible structural edge.

### Shadow Tints
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0,0,0,0.80)` — used as an overlay tint over photography in modal contexts. The system has no traditional drop shadows.

### Semantic
- **Error** (`{colors.error}`): Standard destructive red for form validation only — not a brand token.

## Typography

### Font Family
- **Primary**: `Times New Roman` with fallbacks: `Times`, `Georgia`, `serif`
- **Provenance**: The Times family is deliberately archaic and authoritative — a choice that reads as art-world (museum catalogues, gallery brochures) and counter-intuitive for a Korean eyewear DTC brand, which is precisely why it works. It signals cultural confidence, not technological refinement.
- **OpenType Features**: None declared. Times New Roman is used at face value — no stylistic sets, no swash alternates. The typeface earns its presence through scale and weight of context, not typographic decoration.
- **Closest Google Font substitute**: `Playfair Display` for display scale (400 weight, tight tracking); `IM Fell English` for body; `Libre Baskerville` as a utilitarian fallback. All are serif and share classical proportions, though none captures Times' specific institutional register.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 96px / 400 — seasonal campaign headlines, art installation titles, homepage hero text |
| `display` | 64px / 400 — section openers, collection names, editorial callouts |
| `heading-section` | 40px / 400 — category headers, editorial sub-sections, feature intros |
| `heading-sub` | 28px / 400 — product family titles, sidebar content headers |
| `body-large` | 18px / 400 — editorial lead copy, installation descriptions, brand narrative |
| `body` | 14px / 400 — standard product copy, filter options, technical specifications |
| `nav-link` | 13px / 400 / +0.5px — primary navigation, footer links |
| `button-ui` | 13px / 400 / +1px — CTA labels, add-to-cart, form submits |
| `label-caps` | 11px / 400 / +1.5px — product category overlines, status labels, micro-annotation |
| `caption` | 11px / 400 — timestamps, secondary product data, size guides |

### Principles
- One typeface carries the entire system. No grotesque, no mono, no auxiliary sans. Times New Roman from 96px headlines to 11px labels.
- Serif at 400 weight throughout — never bold, never italic. The face's inherent formality carries the authority without any weight escalation.
- Negative tracking at display scale (−1px at 96px, −0.5px at 64px) creates measured compression without condensing into aggression.
- Uppercase with generous positive tracking for micro-type (`{typography.label-caps}` at +1.5px) — an editorial annotation register borrowed from art publications.
- Body text at 14px with 1.5x line-height gives the prose room to breathe against the dark canvas.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The spacing personality is cinematic and deliberate — generous at every level. Component internals run at 16–24px; section transitions expand to 64–128px. These are not retail-compact spacings; they are gallery-breathing spacings. The white-on-black text needs air to assert itself, and the full-bleed installations need scale. The system refuses to crowd.

### Grid & Container
- Max content width: approximately 1440px; photography and installation imagery frequently break the container to full viewport width
- Product grid: typically 3–4 columns on desktop (aspect-ratio portrait frames), collapsing to 2 and 1 on smaller screens
- Navigation: full-width strip, padded 40px on each side, single hairline bottom border
- Product detail: cinematic split — full-height photography occupying the dominant half, product information in a narrower right column

### Whitespace Philosophy
- Installation photography bleeds to the full viewport edge — no container padding, no offset boxes
- Large whitespace zones are not empty; they function as negative space that frames the imagery
- The brand avoids the information-dense product-grid aesthetic; each item is given screen presence
- Section spacing runs at `{spacing.3xl}` (96px) and `{spacing.4xl}` (128px) between major content blocks

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, buttons, body elements — the absolute default |
| Hairline (Level 1) | `1px solid {colors.border}` | Navigation bottom edge, input outlines, rare section dividers |
| Overlay (Level 2) | Dark tint using `{colors.shadow-soft}` | Photography overlays in fullscreen modal or video player contexts |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard accessibility — white outline on dark canvas |

**Shadow Philosophy**: Gentle Monster runs completely flat. No atmospheric shadows, no elevated panels, no card lift effects anywhere in the system. The brand's depth is entirely cinematic — it lives in the three-dimensional staging of the installation photography, in the sculptural forms of the eyewear itself, not in the UI's simulation of physical light. A drop shadow on a product card would be an insult to the installation photograph behind it.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every structural element — buttons, cards, inputs, image containers, modals, navigation |
| `pill` | 9999px | Reserved only — not used in standard interface components |

The shape system is singular: zero radius everywhere. Gentle Monster's visual language has no room for the friendly softening of corners. Sharp edges on black canvas read as sculptural, architectural. The only pill shape is a fallback token — it is not deployed in any current interface component.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Pure white (`{colors.primary}`) fill on black, black text (`{colors.on-primary}`), zero radius, 12px/32px padding. 13px Times New Roman weight 400, 1px tracking, uppercase. Used for "Add to Bag," checkout actions, newsletter sign-up.
- **`button-secondary`** — Transparent fill with a dark `{colors.border}` 1px outline. Used for secondary actions: size guides, filter apply, compare. On hover, the border steps up to white.
- **`button-ghost`** — Transparent, no border. An underline-only or colour-shift affordance for tertiary text links — "View Collection →" style navigation. Hover shifts text to `{colors.text-hover}`.

### Cards

Product cards are photographically pure: zero radius, zero shadow, zero border, zero background. The image occupies the full card footprint. Below: product name in `{typography.body}` (14px Times), colour note and price in `{typography.caption}` (11px), and category overline in `{typography.label-caps}` above the image — 11px uppercase with 1.5px tracking. On hover, the card background steps from `{colors.background}` to `{colors.surface}` — a nearly invisible shift that signals interactivity on a black canvas without theatrical lifts.

### Inputs

Form inputs use a transparent background against the black canvas, `1px solid {colors.border}` as the default outline, snapping to `1px solid {colors.focus-ring}` on focus. Zero radius. Padding: 12px 16px. Font: `{typography.body}` (14px Times New Roman). The visual signature is a dark grey line — nearly invisible against the black canvas — that clarifies only on focus.

### Badges / Tags

The product category badge uses `{typography.label-caps}`: 11px Times New Roman weight 400, uppercase, 1.5px letter-spacing, minimal padding, `{colors.primary-container}` background. Used for season labels ("SS26"), category identifiers ("OPTICAL"), and status tags ("NEW"). The uppercase serif at extreme tracking feels less like a marketing label and more like a museum object identifier.

### Navigation

The full-width navigation strip is minimal: a single hairline `1px solid {colors.border}` bottom border, the GENTLE MONSTER wordmark on the left, category links at center in `{typography.nav-link}` (13px, 0.5px tracked uppercase serif), cart and account icons at right. Hover on links shifts text from `{colors.ink}` to `{colors.text-hover}` — no underline appearance, no background shift. No mega-menu. On mobile, category links collapse behind a toggle icon.

## Do's and Don'ts

### Do
- Use `{colors.background}` (pure black) as the primary canvas at all times — this is the brand's native register, not a dark-mode variant
- Apply `{rounded.none}` (0px) to every structural element without exception — cards, buttons, inputs, image containers
- Set all text in Times New Roman weight 400; resist the impulse to bold, italicise, or substitute a grotesque
- Use `{colors.ink}` (white) as the single CTA fill — there is no chromatic accent in this system
- Apply `{typography.label-caps}` (11px uppercase, +1.5px tracking) for all product category and status labels
- Use negative tracking on display text: −1px at `{typography.display-hero}` scale, −0.5px at `{typography.display}`
- Give imagery full viewport width — break the container for installation photography
- Maintain generous section spacing (`{spacing.3xl}` and `{spacing.4xl}`) — the gallery needs air
- Apply the focus ring as `2px solid {colors.focus-ring}` — white outline on black canvas is the accessibility statement
- Let installation photography carry all sensory richness — the UI chrome is invisible scaffolding

### Don't
- Don't add border radius to any structural element — not 2px for "modernity," not 4px for "friendliness." Zero only.
- Don't introduce a chromatic accent colour — no warm gold, no Korean-palette teal, no brand red. White on black is the complete palette.
- Don't swap Times New Roman for a grotesque or sans-serif — the serif is the system's most provocative choice and the one that must not be compromised
- Don't apply drop shadows or elevation — the photography creates all depth; simulated elevation would break the flatness
- Don't reduce section spacing to save space — compressed spacing reads as e-commerce, not gallery
- Don't crop installation imagery to fit a grid module — give it room to fill the viewport
- Don't introduce motion faster than 0.3s for hover states; keep cinematic transitions at 0.6s–1.2s
- Don't use weight 700 or italic variant anywhere in brand-authored interfaces
- Don't add decorative separators between sections — whitespace and photography handle transitions
- Don't use the `{typography.label-caps}` register at body sizes — 11px uppercase is the micro-annotation voice, not a headline

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, display hero reduces to ~40px, navigation fully collapses |
| Mobile | 375–600px | Single-column, hero at ~56px, full-bleed photography maintained |
| Tablet | 600–900px | Two-column product grid begins, split product detail starts |
| Desktop | 900–1440px | Three to four column product grid, full navigation visible |
| Large Desktop | >1440px | Four columns, installation photography at full cinematic scale |

### Touch Targets
- Buttons use 12px/32px padding on 13px type — yielding approximately 40–44px tap targets
- Product card taps resolve to the full photography area — naturally oversized
- Navigation links are expanded to 44px height on mobile via additional padding
- Icon affordances (cart, search, account) maintain 44px minimum tap area

### Collapsing Strategy
- Product grid: 4 columns → 3 → 2 → 1 at each breakpoint
- Navigation: full horizontal categories collapse behind icon toggle below 768px; wordmark stays left at all widths
- Product detail: side-by-side (photography | info) stacks vertically below 768px; photography goes full-bleed first
- Section padding contracts from `{spacing.4xl}` (128px) to `{spacing.2xl}` (64px) at tablet, to `{spacing.xl}` (40px) at mobile
- Hero headline scales from 96px down to approximately 40px on mobile small, maintaining weight and tracking

### Image Behavior
- Installation photography is always full-bleed — no card padding, no border, no radius, no aspect-ratio crop on desktop
- Product photography uses `object-fit: cover` with editorial subject centering
- Hero and campaign imagery maintain landscape or near-square aspect ratios per seasonal creative direction
- The wordmark scales proportionally at all breakpoints; no icon-only fallback

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand accent: `{colors.primary}` (white — same as ink, on black canvas)
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`
- Over photography: `{colors.ink}`

### Example Component Prompts

- "Build a Gentle Monster product card on black (`{colors.background}`). No border, no shadow, zero radius. Full-bleed product photograph — zero-radius container — occupying the top three-quarters. Above the photo: an 11px uppercase Times New Roman label (`{typography.label-caps}`) with 1.5px letter-spacing — transparent background, `{colors.ink-secondary}` text, no border, 4px 0px padding. Below: product name in Times New Roman 14px weight 400 (`{typography.body}`) in `{colors.ink}`, colour note in 11px (`{typography.caption}`) in `{colors.ink-secondary}`, price in 14px `{colors.ink}`. Hover: card background shifts to `{colors.surface}` over 0.4s ease. No border appearance, no lift, no shadow."
- "Create a primary Gentle Monster button. Background: `{colors.primary}` (white). Text: `{colors.on-primary}` (black). Font: Times New Roman 13px weight 400 (`{typography.button-ui}`), 1px letter-spacing, uppercase. Padding: 12px 32px. Radius: `{rounded.none}` (0px). No shadow. Hover: background shifts to `{colors.text-hover}` over 0.25s ease."
- "Design a Gentle Monster header navigation on `{colors.background}` (black). Left: GENTLE MONSTER wordmark in `{colors.ink}`, all caps, `{typography.nav-link}`. Center: category links in Times New Roman 13px weight 400 (`{typography.nav-link}`), `{colors.ink}`, 0.5px letter-spacing, no underline. Right: cart and search icon glyphs in `{colors.ink}`. Bottom: single `1px solid {colors.border}` — the only structural edge. Padding: 20px 40px. Hover on links: text shifts to `{colors.text-hover}` over 0.2s ease, no border appearance, no background shift."
- "Build a Gentle Monster campaign hero: full-viewport cinematic installation photograph — surrealist environment, robotic sculpture, or architectural space — full-bleed, zero-radius container. Over the image in the lower-left quadrant: headline in Times New Roman 96px weight 400 (`{typography.display-hero}`), `{colors.ink}`, −1px letter-spacing, line-height 0.95. Below the headline: a ghost CTA — transparent fill, no border, 13px Times New Roman uppercase 1px tracking (`{typography.button-ui}`), `{colors.ink}`. No overlay scrim, no gradient darkening the image, no shadow anywhere. The photography carries everything."
- "Create a Gentle Monster search / email input for a newsletter zone on black (`{colors.background}`). Input: transparent fill, `1px solid {colors.border}` outline, zero radius, padding 12px 16px, Times New Roman 14px weight 400 (`{typography.body}`), `{colors.ink}` text. Placeholder: `{colors.ink-muted}`. Focus state: border steps to `1px solid {colors.focus-ring}`, `outline: 2px solid {colors.focus-ring}`, no fill change. Submit button right: `{colors.primary}` fill, `{colors.on-primary}` text, zero radius, 12px 32px padding, `{typography.button-ui}`. No shadow on either element."
- "Design a Gentle Monster collection category strip. Each category label: transparent background, no border, zero radius, 4px 0px padding. Text: 11px uppercase Times New Roman weight 400, 1.5px letter-spacing (`{typography.label-caps}`), `{colors.ink-secondary}`. Active state: text shifts to `{colors.ink}` with a single 1px `{colors.border}` bottom underline — no background change, no radius. Strip is a flat horizontal row, no visible container, no separator lines."

### Iteration Guide

1. Start with `{colors.background}` (pure black) as the total canvas. Every page, every season, without exception. The black is not a dark-mode convenience — it is the brand's premise.
2. Use Times New Roman at 400 weight for all typography from 96px headlines to 11px micro-labels. If you are reaching for a sans-serif or adding bold, stop and ask why.
3. Set display text at `{typography.display-hero}` scale (96px) with −1px tracking. Let the serif glyphs carry authority through scale, not weight escalation.
4. Use `{colors.ink}` (white) as the only CTA, border-on-focus, and active-state colour. There is no accent. White on black is the entire chromatic contract.
5. Apply `{rounded.none}` (0px) to every structural element. Not 2px for polish, not 4px for modernity. Zero.
6. Give imagery full viewport width when it warrants it. Break the layout container. Installation photographs should not be contained in a grid module.
7. Motion: 0.6s–1.2s for cinematic image transitions; 0.2s–0.3s for state changes on interactive elements. Nothing faster than 0.2s (except intent-flash micro-interactions) — the brand paces like cinema, not software.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gentle Monster. Brand names and trademarks belong to their respective owners.