---
version: alpha
name: Monos
description: Achromatic premium luggage retail — GT Standard at controlled weights, near-black on white, strictly square buttons, oblique directional shadows, and photography supplying every chromatic moment.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f7f7"              # soft off-white section tint (rgb 247,247,247)

  # Ink / text
  ink: "#1a1a1a"                  # near-black primary text (rgb 26,26,26)
  ink-secondary: "#4d4d4d"        # medium-dark body and h4 text (rgb 77,77,77)
  ink-muted: "#808080"            # secondary labels, nav, logo-wrapper (rgb 128,128,128)
  ink-subtle: "#b3b3b3"           # disabled, placeholder, muted meta (rgb 179,179,179)
  on-ink: "#ffffff"               # text/icons on dark fills

  # Brand accent — Monos UI is intentionally achromatic; photography carries color
  primary: "#1a1a1a"              # CTA fill and active states — near-black
  on-primary: "#ffffff"           # text on primary fill
  primary-container: "#4d4d4d"    # deeper fill for hover/active (rgb 77,77,77)

  # Borders
  border: "#b3b3b3"               # standard hairline border (rgb 179,179,179)
  border-strong: "#4d4d4d"        # button outlines, active input stroke (2px solid)
  border-light: "#eeeeee"         # subtle tile stroke, image border (rgb 238,238,238)
  border-divider: "#dddddd"       # section separator (rgb 221,221,221)

  # Focus / interaction
  focus-ring: "#1a1a1a"           # dark outline focus ring
  text-hover: "#4d4d4d"           # was var(--main-color) → opaque mid-dark approx /* estimated */

  # Semantic
  error: "#cc0000"                # form error state /* estimated */
  success: "#2e7d32"              # success state /* estimated */

  # Shadow tints (opaque approximations for shadow token reference)
  shadow-soft: "#646464"          # was rgba(100,100,100,0.2) — Google format requires hex
  shadow-layer: "#23263b"         # was rgba(35,38,59,0.1/0.15) — Google format requires hex /* estimated */

typography:
  display-hero:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1.5px
  display:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.75px
  heading-section:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.4px
  nav-link:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 1.8px
  caption:
    fontFamily: "GT Standard, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 120px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 20px 60px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-strong}"
    borderWidth: 2px
    padding: 10px 30px
  button-outline-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"

  button-ghost-light:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    borderColor: "{colors.on-primary}"
    borderWidth: 2px
    padding: 20px 60px

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

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

  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-divider}"
    borderWidth: 1px
    padding: 8px 10px
  input-focus:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: 16px 30px

  tag-filter:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-strong}"
    borderWidth: 2px
    padding: 8px 20px
  tag-filter-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
---

# Monos Design System

## Overview

Monos's digital presence reads like the inside of a Muji store designed by someone who just returned from Kyoto. The canvas is pure white (`{colors.background}`) with a near-black ink (`{colors.ink}`) at `#1a1a1a` — not quite black, but close enough to feel resolute. There is no brand color in the UI; the entire chromatic responsibility falls to the luggage photography, which appears in Monos's signature palette of sage, slate, caramel, dusk, and midnight. The interface chrome is a studied exercise in restraint: a five-step gray scale running from `#1a1a1a` through `#4d4d4d`, `#808080`, `#b3b3b3`, to white, and nothing more. The CSS variable `--main-color` is the system's only indirect color reference — a dynamic accent that resolves per product context, never a fixed brand hue.

Typography is anchored by GT Standard, a geometric grotesque custom-cut for Monos by the Swiss type foundry Grilli Type. It runs at weight 300 for hero-scale display — an unusually light choice that gives headlines an almost architectural quietness, like engraved text on luggage leather rather than a shout. Button labels get weight 700 with 1.4px uppercase tracking, which creates the only moment of tension in an otherwise unhurried typographic system. Body text sits at 16px with 1.6 line-height — generous, catalogue-calm. Negative tracking at display sizes (`-1.5px` at 72px) pulls letterforms together into a single resolved mass; the page never feels spaced-out or airy at the hero level.

The shape language is binary and uncompromising: `border-radius: 0px` everywhere structural, and `9999px` only for the rarest pill exception. Buttons are sharp rectangles. Cards are frameless. The one decorative elevation in the system is a theatrical oblique drop shadow — `rgba(100,100,100,0.2) -7.5px 7.5px 15px` — that appears as a tilted cast behind modals and product pop-ups, giving the site its single moment of sculptural depth. This shadow is unmistakably Monos: a reference to the physical weight and dimensional quality of the luggage itself.

**Key Characteristics:**
- Full achromatic UI palette — five grays from `{colors.ink}` to white; product photography provides every color moment
- GT Standard at weight 300 for display headlines — architectural lightness at scale, never aggressive
- `{rounded.none}` (0px) is the universal shape — buttons, cards, inputs, tags are all hard-cornered
- Button-ui in uppercase with 1.4px letter-spacing (`{typography.button-ui}`) — the only assertive typographic moment
- Oblique directional shadow `(-7.5px 7.5px 15px)` for modals — a sculptural, physical quality unique to Monos
- `{colors.ink-muted}` (`#808080`) carries the navigation and secondary UI — soft, restrained, efficient
- `20px 60px` button padding — wider than typical retail, creating a calm considered CTA proportion
- Focus state inverts field color: input fills to `{colors.ink-secondary}` with white text on focus — bold, functional
- Photography on white backgrounds, edge-to-edge at hero scale; no isolated product cutouts
- CSS custom property `--main-color` allows per-page product-color accents without hardcoding accent tones in the system
- Borders are hairline (`1px`) at `{colors.border}` for structural separation; `2px solid` only for button outlines and active states
- Micro-copy and eyebrows: 12px GT Standard weight 700 at 1.8px tracking — crisp, spare, never decorative

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The only canvas. No off-white, no cream — Monos shoots luggage on pure white and the site matches it.
- **Near-White** (`{colors.surface}`): A barely-there `#f7f7f7` used for input backgrounds and section dividers.

### Ink / Text Scale
- **Near-Black** (`{colors.ink}`): Primary headings, the deepest text weight in the system. `#1a1a1a` softens pure black without losing authority.
- **Dark Gray** (`{colors.ink-secondary}`): Body copy, h4 labels, outlined button text. The workhorse text color for the transactional layer.
- **Mid Gray** (`{colors.ink-muted}`): Navigation links, logo-wrapper text, secondary UI chrome. Sits at 50% brightness — neutral, functional.
- **Pale Gray** (`{colors.ink-subtle}`): Disabled fields, placeholder text, muted metadata.

### Brand Accent
- **Near-Black CTA** (`{colors.primary}`): Monos's UI accent is achromatic. Near-black fills primary CTAs and active states. Product hues arrive via `--main-color` dynamically — they are never fixed tokens in this system.
- **Deep CTA Hover** (`{colors.primary-container}`): Hover deepens to `#4d4d4d` rather than a chromatic shift.

### Borders
- **Standard Hairline** (`{colors.border}`): `1px` card edges, separator rules — `#b3b3b3` mid-gray.
- **Strong Border** (`{colors.border-strong}`): Outlined button perimeters, active input emphasis — `2px solid #4d4d4d`.
- **Tile Border** (`{colors.border-light}`): Whisper-quiet `#eeeeee` image frame and product tile edge.
- **Section Divider** (`{colors.border-divider}`): `#dddddd` horizontal rules between layout blocks.

### Shadow Tints
- `{colors.shadow-soft}`: Opaque stand-in for the directional modal shadow (original: `rgba(100,100,100,0.2)`). The oblique `-7.5px 7.5px 15px` pattern.
- `{colors.shadow-layer}`: Opaque stand-in for the composite popover shadow (original: `rgba(35,38,59,0.1/0.15)` two-layer).

## Typography

### Font Family
- **Primary Display & UI**: `GT Standard`, by Grilli Type. A geometric grotesque custom-licensed for Monos. Shipped self-hosted via Shopify as `GTStandard-MRegular.woff2` and `GTStandard-MMedium.woff2`. Fallback stack: `Helvetica Neue, Arial, sans-serif`.
- **Weight strategy**: Three weights in practice — 300 (display/hero), 400 (body/headings), 700 (buttons/eyebrows). No 500 Bold-Italic; the contrast between Light and Bold is the system's expressive range.
- **Loading**: Self-hosted `.woff2` files. No Google Fonts, no Adobe Fonts, no variable font instances.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px GT Standard Light / -1.5px tracking — hero campaigns, full-bleed feature headlines |
| `display` | 48px GT Standard Light / -0.75px — section openers, editorial callouts |
| `heading-section` | 32px GT Standard Regular — major section headings, collection introductions |
| `heading-sub` | 22px GT Standard Regular — sub-sections, feature copy |
| `body-large` | 18px GT Standard Regular / 1.5 lh — lead paragraphs, product introductions |
| `body` | 16px GT Standard Regular / 1.6 lh — standard product descriptions and UI copy |
| `button-ui` | 14px GT Standard Bold / uppercase / 1.4px — CTA labels and filter buttons |
| `nav-link` | 14px GT Standard Medium / 0.5px — navigation items |
| `eyebrow` | 12px GT Standard Bold / uppercase / 1.8px — section markers, product category labels |
| `caption` | 12px GT Standard Regular — price metadata, helper text, footnotes |

### Principles
- **Light at scale**: GT Standard weight 300 at hero sizes communicates premium restraint — the brand says "we have nothing to prove" by not shouting.
- **Bold only for action**: Weight 700 is reserved for buttons and eyebrows. Reading copy never exceeds Regular (400).
- **Uppercase for UI, sentence-case for reading**: Button labels and eyebrows are uppercase with tracking; all body copy and headings are sentence-case. The contrast signals context with no ambiguity.
- **Negative tracking at display sizes**: -1.5px at 72px and -0.75px at 48px keeps large type from feeling loose — a typographic density matching the luggage's physical precision.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base rhythm is 8px-derived. Component internals use `{spacing.sm}` through `{spacing.lg}` (8–24px); section breathing room runs at `{spacing.4xl}` to `{spacing.5xl}` (96–120px) — giving each product story chapter the air it deserves.

### Grid & Container
- Max content width: approximately 1400px, matching the largest detected breakpoint
- Hero: full-bleed photography, headline inset at lower-left or centered below the fold
- Product grid: 4-up on desktop, collapsing to 2-up then 1-up on mobile
- Editorial band: full-width alternating dark/light sections for campaign storytelling

### Whitespace Philosophy
- **Photography-first composition**: large sections of white canvas frame the luggage; the site never feels cluttered
- **Generous CTA padding**: `20px 60px` on primary buttons — the CTA presence is measured, not aggressive
- **Section rhythm**: major content blocks separated by `96–120px` vertical padding; chapters feel distinct

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all surfaces — cards, tiles, navigation |
| Hairline (Level 1) | `1px solid {colors.border}` | Product tile edges, list separators |
| Strong Edge (Level 2) | `2px solid {colors.border-strong}` | Outlined CTAs, active input indicator |
| Oblique Card (Level 3) | `{colors.shadow-soft} -7.5px 7.5px 15px 0px` (original: `rgba(100,100,100,0.2)`) | Modals, product detail pop-ups, feature cards |
| Composite Popover (Level 4) | `{colors.shadow-layer} 0px 0px 0px 1px + 0px 6px 16px -4px` (original: `rgba(35,38,59,0.1/0.15)`) | Dropdown menus, cart drawer |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus indicator |

**Shadow Philosophy**: Monos is functionally flat until an overlay appears, then it gets distinctively oblique. The `-7.5px 7.5px 15px` shadow vector — horizontal shift left plus vertical shift down — creates a theatrical cast-light quality unlike the symmetric `0px Ypx blur` drop shadows common in retail. It evokes a luggage sitting under a directional studio spot — a very deliberate brand choice. Nothing on the resting page casts a shadow; depth only appears at moments of overlaid interactivity.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything structural — buttons, inputs, cards, tags, sections. The universal default. |
| `sm` | 2px | Rare search-field softening (observed in search input only) |
| `pill` | 9999px | Reserved for the rarest circular controls only |

Monos is effectively a zero-radius system. The `{rounded.none}` default is not minimalism by accident — it mirrors the right-angle hardware of quality luggage, the machined corners of an aluminum carry-on. Every other retail brand rounds its buttons; Monos's refusal is a brand statement.

## Components

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

### Button Variants
- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, `{rounded.none}`, `20px 60px` padding, uppercase 1.4px-tracked `{typography.button-ui}`. Used over photography on dark-section heroes.
- **`button-outline`** — Transparent fill, `{colors.ink-secondary}` text, `2px solid {colors.border-strong}`, `{rounded.none}`, `10px 30px` padding. Standard secondary CTA on white surfaces.
- **`button-ghost-light`** — Transparent fill, white text, `2px solid {colors.on-primary}` border. Used over photography when the underlying image is dark; the outline provides presence without blocking the image.

### Cards
- **`card`** — Frameless, white surface, zero radius, zero padding. Product photography sits flush; text blocks stack below. No resting shadow.
- **`card-surface`** — Off-white `{colors.surface}` fill, no border. Background panel for promotional modules or editorial sidebars.

### Inputs
- **`input`** — Transparent background, `{colors.ink-muted}` placeholder, `1px solid {colors.border-divider}`, `{rounded.none}`. On focus: entire field inverts to `{colors.ink-secondary}` fill with white text — a strong, unambiguous active state.

### Badges & Tags
- **`badge`** — Sharp-cornered `{colors.surface}` chip, `{typography.eyebrow}` uppercase 12px Bold. Used for product category labels and collection markers.
- **`tag-filter`** — Outlined `2px solid {colors.border-strong}`, transparent fill, uppercase eyebrow text. Active state: fills to `{colors.primary}` with `{colors.on-primary}` text.

### Navigation
- **`nav-bar`** — White background, GT Standard Medium 14px in `{colors.ink-muted}`. Stays spare — logo on the left, minimal nav links centered or right-aligned, cart/account icons on the right. On scroll: hairline bottom border appears.

## Do's and Don'ts

### Do
- Use GT Standard weight 300 for all display headlines at 32px and above — the lightness is the brand's tone of voice
- Keep all buttons and inputs at `{rounded.none}` — the zero-radius is the system's most distinctive design decision
- Apply 1.4px uppercase tracking on button labels (`{typography.button-ui}`) — it creates the only moment of UI tension in an otherwise calm system
- Reserve chromatic color for product photography only — the UI chrome must stay within the five-step gray scale
- Use the oblique shadow (`-7.5px 7.5px 15px`) for overlaid components; never for cards at rest
- Maintain `20px 60px` padding on primary CTAs — the wide padding creates a calm, considered proportion
- Apply input focus as a full dark fill inversion (`{colors.ink-secondary}` background, white text) — it is legible and brand-consistent
- Use `{colors.ink-muted}` (`#808080`) for navigation and secondary UI labels — it recedes correctly behind primary content
- Let `--main-color` handle product-specific accent tones dynamically; don't hardcode product palette hues as system tokens
- Section headings in GT Standard Regular (400), never Bold — weight 700 belongs only to button labels and eyebrows

### Don't
- Don't round buttons, inputs, or cards — even `2px` reads as a design inconsistency in this zero-radius system
- Don't introduce chromatic UI accents (blues, greens, accent oranges) — the achromatic palette is fundamental to the brand
- Don't use GT Standard weight 300 for body copy or button labels — Light belongs to display headlines only
- Don't use symmetric drop shadows (`0px 8px 16px`) — the directional oblique shadow is the brand's signature; symmetric shadows look generic
- Don't uppercase body copy or navigation labels — uppercase tracking is exclusively for `{typography.button-ui}` and `{typography.eyebrow}`
- Don't add background fills or gradient washes behind product photography — the system is white canvas only
- Don't apply resting shadows to product cards — the flat surface is a brand signal; shadow implies a quality the card hasn't earned yet
- Don't introduce custom illustration or icon decoration — the system uses photography for all visual storytelling
- Don't use `{colors.ink-subtle}` (`#b3b3b3`) for active or primary text — it is a disabled/muted-state color only
- Don't deviate from the 8px spacing grid for component internals — precise spacing is part of the precision-luggage aesthetic

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <580px | Single-column; nav collapses to hamburger; hero headline scales to 36px; full-bleed photography |
| Mobile Large | 580–768px | Two-column product grids begin; buttons remain full-width |
| Tablet | 768–1024px | Three-column product grid; full horizontal nav appears; section padding compresses |
| Desktop | 1024–1400px | Four-column product grid; full editorial layout unlocks; hero at full 72px |
| Wide Desktop | ≥1400px | Maximum container width; photography can bleed full edge-to-edge |

Dembrandt detected 45 breakpoints — Monos uses Tailwind-style fine-grained responsive tuning at many intermediate steps.

### Touch Targets
- Primary buttons: `20px 60px` padding creates comfortable tap height across widths
- Nav links: carried via container padding to 44px+ tap zone in mobile drawer
- Product cards: entire card area is tappable, not just the product name
- Filter tags: `8px 20px` padding at 14px type — adequate for precision tapping

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger icon, full-screen overlay on mobile
- **Hero section**: display headline steps from `72px` → `~40px` at mobile; negative tracking preserved
- **Product grids**: 4-up → 3-up → 2-up → 1-up as viewport narrows
- **Section padding**: major bands compress from 120px → 64px on mobile while preserving the calm rhythm
- **CTA width**: primary buttons go full-width on mobile for clear purchase intent

### Image Behavior
- Product photography is always white-background, full-width at mobile, gridded on desktop
- Hero images use `object-fit: cover` with locked aspect ratios
- Product tiles maintain a consistent 3:4 portrait aspect ratio at all viewports
- Photography never receives decorative borders, overlays, or filters — shown raw

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Near-Black (`{colors.ink}`)
- Body / UI text: Dark Gray (`{colors.ink-secondary}`)
- Secondary UI: Mid Gray (`{colors.ink-muted}`)
- CTA fill: Near-Black (`{colors.primary}`), text: White (`{colors.on-primary}`)
- Border standard: `{colors.border}` (mid-gray hairline)
- Border button: `{colors.border-strong}` (2px dark gray)

### Example Component Prompts

- "Create a hero section: full-bleed Monos luggage photography; GT Standard weight 300 headline at 72px, line-height 1.0, letter-spacing -1.5px, in `{colors.ink}` set over a lower white band; one near-black CTA below — `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.none}` radius, `20px 60px` padding, 14px GT Standard Bold uppercase 1.4px tracking (`{typography.button-ui}`)"
- "Build a product card: frameless white surface (`{colors.background}`), zero radius, no shadow. Square product image on white fills the top — no border. Below: 14px GT Standard Regular product name in `{colors.ink-secondary}`, 14px Regular price in `{colors.ink-muted}`. If on sale, add a sharp `{colors.ink}` fill tag (`{rounded.none}`, `{typography.eyebrow}`, `4px 10px` padding) top-left of the image."
- "Design an outlined secondary button: transparent fill, `{colors.ink-secondary}` text, `2px solid {colors.border-strong}` border, `{rounded.none}` radius, `10px 30px` padding, 12px GT Standard Bold uppercase (`{typography.button-ui}` at smaller scale). Hover: fill to `{colors.ink-secondary}`, text switches to `{colors.on-primary}`."
- "Create a navigation bar: `{colors.background}` fill, Monos wordmark SVG on the left, horizontal center row of 14px GT Standard Medium nav links (`{typography.nav-link}`) in `{colors.ink-muted}`, cart and account icons right-aligned. On scroll: add `1px solid {colors.border}` bottom edge."
- "Design a filter tag row: `{rounded.none}` tags, transparent fill, `2px solid {colors.border-strong}` outline, 12px GT Standard Bold uppercase 1.8px tracking (`{typography.eyebrow}`), `8px 20px` padding, `{colors.ink-secondary}` text. Active state: `{colors.primary}` fill, `{colors.on-primary}` text, `{colors.primary}` border."
- "Build a product detail modal overlay: white card, `{rounded.none}`, oblique directional shadow `rgba(100,100,100,0.2) -7.5px 7.5px 15px 0px` (`{colors.shadow-soft}` reference), `32px` internal padding. The tilt of the shadow should read as a studio spot casting light from upper-right."

### Iteration Guide

1. Start on pure white (`{colors.background}`). Every surface is white or `{colors.surface}` (`#f7f7f7`) — never cream, never gray. This matches Monos's product photography backdrop.
2. Keep the palette to five steps of gray: `{colors.ink}`, `{colors.ink-secondary}`, `{colors.ink-muted}`, `{colors.ink-subtle}`, white. Any chromatic moment in the UI means reaching for product photography, not a color token.
3. Set display headlines in GT Standard weight 300. Use negative tracking (-1.5px at 72px, -0.75px at 48px). Body and sub-headings are Regular (400).
4. Zero radius everywhere. `{rounded.none}` is the default for all interactive and structural elements. If you find yourself reaching for `4px` or `8px`, push back — it breaks the system.
5. Primary buttons at `20px 60px` with uppercase GT Standard Bold 1.4px tracking. Wide padding creates a calm, deliberate CTA proportion — resist shrinking it.
6. Shadows only on overlays, never on resting cards or sections. The oblique `-7.5px 7.5px 15px` vector is the Monos signature; symmetric shadows are wrong.
7. Product photography does the visual work. A UI built from this system should look understated next to the product image — the brand is the object, not the chrome.

---

## 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 Monos. Brand names and trademarks belong to their respective owners.