---
version: alpha
name: Moscot
description: NYC heritage eyewear since 1915 — bold all-caps Gotham on a high-contrast black-and-yellow canvas, Engravers LT Std for editorial product moments, and a Lower East Side attitude that shouts vintage signage through every uppercase headline.

colors:
  # Surface / canvas
  background: "#ffffff"          # product page white, content ground
  surface: "#f5f5f5"             # subtle secondary panels, filter trays
  surface-dark: "#000000"        # nav bar, announcement strip, footer fill

  # Ink / text
  ink: "#000000"                 # primary headlines, body text, button labels on light
  ink-secondary: "#5c5c5c"       # secondary copy, subdued metadata, input placeholders
  ink-muted: "#999999"           # captions, fine print, disabled states

  # Brand accent
  primary: "#ffcd03"             # Moscot signature yellow — CTAs, modal fill, nav accents
  on-primary: "#000000"          # black text on yellow fills
  primary-hover: "#d9ae03"       # was hover state from dembrandt — darker yellow on hover
  on-dark: "#ffffff"             # white text on black surfaces (nav, footer)

  # Semantic
  error: "#cc0000"               # form validation, destructive states /* estimated */
  success: "#2e7d32"             # confirmation states /* estimated */

  # Borders
  border: "#e5e5e5"              # default hairline dividers, input outlines
  border-strong: "#5c5c5c"       # emphasized input edges, focus context
  border-dark: "#ffffff"         # hairlines on dark canvas surfaces

  # Shadow tints (opaque approximations — originals were rgba)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.15) — ambient card shadow
  shadow-card: "#000000"         # was rgba(0,0,0,0.25) — lifted panel shadow

  # Focus
  focus-ring: "#000000"          # high-contrast focus outline on interactive elements

typography:
  display-hero:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 1px
  display:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 1.7px
  heading-section:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 1px
  heading-sub:
    fontFamily: "Engravers LT Std, 'Playfair Display', Georgia, serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.26
    letterSpacing: 1px
  heading-small:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: 1px
  body:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  body-emphasis:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: 1px
  button-ui:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 1px
  label-upper:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: 1px
  mono:
    fontFamily: "Roboto Mono, 'Courier New', Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  caption:
    fontFamily: "Roboto Mono, 'Courier New', Courier, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 6px
  pill: 9999px

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

  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-dark-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    border: 1px solid {colors.ink}
  button-outline-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"

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

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  card-hover:
    backgroundColor: "{colors.background}"
    boxShadow: "0px 0px 10px 0px {colors.shadow-soft}"

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  swatch:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 4px
    border: 1px solid {colors.border}
  swatch-active:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: 1px solid {colors.focus-ring}
---

# Moscot Design System

## Overview

Moscot's digital identity is built on unambiguous contrast. The navigation bar is a solid strip of `{colors.surface-dark}` black, holding the logo in condensed white Gotham and nav items in bold uppercase that echo a century of hand-painted Lower East Side signage. Drop below the bar and the canvas flips to `{colors.background}` white, but the attitude holds: every headline is uppercase, every label is tight-tracked, every frame is boxy and deliberate. There is nothing tentative about how Moscot presents itself on screen. The site reads like a storefront window on Orchard Street, translated to pixels — direct, proud, a little performative.

The signature moment is `{colors.primary}`, a saturated amber-yellow (`#ffcd03`) that fires across the page in promotional banners, modal fills, and sale badges. On a `{colors.surface-dark}` black ground, it achieves the instant visual pop of vintage letterpress. On white product pages it functions as a clear CTA signal — a bright thumb on the scale that says "this is the action." The yellow is not decoration; it is the brand's primary conversational gesture, the digital equivalent of the brass Moscot spectacle sign hanging above the Delancey Street door.

Typography is a two-voice system. **Gotham Bold** handles everything structural — navigation, section titles, product names, UI labels, promotional headings — always in uppercase, always with 1px+ letter-spacing that keeps the condensed weight readable at any size. **Engravers LT Std** steps in for the editorial register: heritage brand badges, "Iconic New York" moments, the typographic gravity of a brand that has been making frames since 1915. **Roboto Mono** appears in a secondary utility role — price formatting, product code metadata, form field hints — adding a functional precision to the otherwise warm-assertive voice. Together the three faces describe Moscot's personality completely: loud, craft-proud, unapologetically retro.

**Key Characteristics:**
- Two-tone canvas: `{colors.surface-dark}` black nav anchors the top; `{colors.background}` white opens the product territory below
- `{colors.primary}` amber-yellow as the single brand accent — applied to CTAs, modals, promotional strips, and sale badges
- All-caps Gotham Bold (`{typography.display-hero}`) for every structural headline — 1–1.7px letter-spacing, no exceptions
- Engravers LT Std for heritage editorial moments — serif gravitas reserved for brand story and product heritage copy
- Square `{rounded.none}` geometry throughout: buttons, cards, inputs, image frames — no rounded softening
- Roboto Mono for prices, product codes, and secondary metadata — the technical layer beneath the brand warmth
- 5px and 8px micro-spacing units handle tight product label grids; 48–96px macro units open section breathing
- Pill shape (`{rounded.pill}`) reserved for color swatch selectors and filter chips only — binary radius vocabulary
- Motion at 0.25–0.6s: standard transitions at 0.25s ease, link hover effects at 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) — unhurried, confident
- Product photography set on warm, textural backgrounds — stone, leather, aged paper — that reinforce the analog heritage tone
- CSS framework: Tailwind with arbitrary values, Headless UI components, Shopify Liquid templating on the product layer
- Announcement bar in `{colors.primary}` yellow with `{colors.on-primary}` black text — the first pixel of every page is brand yellow

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The default product page ground. Clean and neutral, letting photography and the yellow accent carry the visual weight.
- **Light Panel** (`{colors.surface}`): Filter drawers, secondary card backgrounds, and swatch chip fills. A barely visible step above white.
- **Black** (`{colors.surface-dark}`): The navigation bar fill, footer, announcement strip, and any inverted hero context. Pure `#000000` — not near-black, not charcoal. Moscot earns the directness.

### Ink & Text
- **Near-Black / Primary Ink** (`{colors.ink}`): All headlines, body copy, and button labels on light surfaces. Pure black for maximum contrast.
- **Mid-Gray** (`{colors.ink-secondary}`): Secondary copy, subdued metadata, muted link states. Dembrandt recorded `#5c5c5c` with high confidence.
- **Light Gray** (`{colors.ink-muted}`): Captions, fine print, form placeholders. The quietest text voice.
- **On Dark** (`{colors.on-dark}`): White text reserved for `{colors.surface-dark}` contexts — nav labels, footer links, inverted CTA labels.

### Brand Accent
- **Moscot Yellow** (`{colors.primary}`): The brand's defining color. Fires in the announcement bar, modal fills, sale badges, and primary CTAs. On black: electric. On white: decisive. CSS `#ffcd03`.
- **Yellow Hover** (`{colors.primary-hover}`): The darkened hover state for yellow fills. `#d9ae03` — slightly richer, confirming interactivity without color-shifting.
- **On Primary** (`{colors.on-primary}`): Black text on yellow fills. The contrast ratio is compliant and visually logical.

### Borders & Focus
- **Default Border** (`{colors.border}`): Standard hairline for input outlines and section dividers. Light gray `#e5e5e5`.
- **Strong Border** (`{colors.border-strong}`): Used for emphasized input edges and focus contexts. Medium gray `#5c5c5c`.
- **Dark Border** (`{colors.border-dark}`): White hairlines for structural separation on the `{colors.surface-dark}` canvas.
- **Focus Ring** (`{colors.focus-ring}`): Pure black outline on interactive elements — high-contrast accessibility without any color softening.

### Shadows
- **Soft Ambient** (`{colors.shadow-soft}`): Used as `rgba(0,0,0,0.15)` in the raw data. Opaque token stores the tint; opacity is applied at component level. For card ambient shadow on hover.
- **Card Shadow** (`{colors.shadow-card}`): Used as `rgba(0,0,0,0.25)` in the raw data. The stronger lifted panel treatment.

## Typography

### Font Family
- **Primary / Display**: `Gotham` — a condensed geometric sans with the street-sign authority of NYC commercial signage. Self-hosted. Closest Google Font substitute: Montserrat (geometric, similar proportions). Fallback stack: `'Helvetica Neue'`, `Arial`, `sans-serif`.
- **Editorial / Heritage**: `Engravers LT Std` — a classic engraved serif that reads as a hand-pressed mark. Reserved for brand heritage and product story moments. Closest Google Font substitute: Playfair Display. Fallback stack: `Georgia`, `serif`.
- **Technical / Mono**: `Roboto Mono` — utility monospace for prices, product codes, and metadata. Available via Google Fonts. Fallback stack: `'Courier New'`, `Courier`, `monospace`.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference.

| Token | Use |
|---|---|
| `display-hero` | 36px / Gotham 700 / uppercase / 1px tracking — primary campaign headline, hero section title |
| `display` | 34px / Gotham 700 / uppercase / 1.7px tracking — major section headings, promotional module titles |
| `heading-section` | 24px / Gotham 700 / uppercase / 1px tracking — category headings, feature section titles |
| `heading-sub` | 24px / Engravers LT Std 700 / uppercase / 1px tracking — heritage editorial sub-headings |
| `heading-small` | 18px / Gotham 700 / uppercase / 1px tracking — card headings, product group labels |
| `body` | 13px / Gotham 400 / 0px tracking — standard product descriptions, reading copy |
| `body-emphasis` | 13px / Gotham 500 / 0.5px tracking — emphasized body text, price context, product callouts |
| `nav-link` | 16px / Gotham 700 / uppercase / 1px tracking — global navigation items |
| `button-ui` | 16px / Gotham 700 / uppercase / 1px tracking — all CTA labels, form submit buttons |
| `label-upper` | 11px / Gotham 700 / uppercase / 1px tracking — filter chips, size selectors, metadata tags |
| `mono` | 13px / Roboto Mono 400 — product code references, price string formatting |
| `caption` | 12px / Roboto Mono 400 / 1.67 line-height — image credits, fine print, legal copy |

### Principles
- **All-caps by default**: Gotham at every display and UI size runs uppercase. The lowercase is not the register Moscot uses — the brand voice is declarative.
- **Positive tracking throughout**: Every headline and label carries at least 1px letter-spacing. The tracking is not loose enough to feel spaced-out; it is the exact tightness of pressed type on a physical sign.
- **Gotham handles everything structural**: Navigation, headings, buttons, labels, product names. Engravers LT Std appears exclusively for heritage and editorial moments — its authority depends on scarcity.
- **Roboto Mono as the technical voice**: Prices and product references rendered in mono connect the digital product to a catalog or receipt register — an oblique nod to the shop's analog history.
- **Weight binary**: Gotham at 700 for all display and UI; Gotham at 400–500 for body reading text. The system does not use mid-weight for display — it is either bold or regular.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, with a micro sub-unit of 4–5px for tight product label grids.

The spacing personality is compressed and dense at the component level — product names, prices, and color labels sit close together in the tightly-packed Moscot catalog convention. Section-level breathing opens dramatically: 48–96px between major content blocks creates a New York pace where windows of calm punctuate dense product streets.

### Grid & Container
- Max content width: approximately 1556px at the widest reading, centered with internal gutters
- Product grid: typically 3–4 columns at desktop, 2 at tablet, 1 at mobile; images fill cells without inset
- Hero: full-bleed photographic or video canvas with overlaid black nav and campaign headline
- Promotional banners: full-width `{colors.primary}` yellow strips that interrupt the vertical scroll rhythm
- Carousel pattern: multi-item sliding product carousels with `{rounded.pill}` previous/next controls

### Whitespace Philosophy
- **Dense product chrome**: Product names, prices, and selectors pack tightly at 4–8px internal spacing — the visual language of a dense retail catalog
- **Yellow announcements interrupt generously**: Promo banners are full-width, commanding vertical space, never squeezed
- **Photography breathes at section boundaries**: Campaign imagery gets 48–96px clear margin from surrounding chrome

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product cards at rest, nav bar, standard layout zones |
| Subtle (Level 1) | `0px 0px 5px 1px rgba(0,0,0,0.15)` | Hovered product cards, floating dropdown menus |
| Card (Level 2) | `0px 0px 10px 0px rgba(0,0,0,0.15)` | Elevated panels, sticky nav drop shadow on scroll |
| Dialog (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1)` | Modal overlays, cart drawers |
| Focus Ring | `0px 0px 0px 3px #000000` | Keyboard-navigable interactive elements |

**Shadow Philosophy**: Moscot keeps the layout largely flat — the visual tension comes from color contrast and typography weight, not elevation. Shadows appear at hover and for modal overlays, using low-opacity black tints that read as practical depth signals rather than design ornament. The focus ring is the loudest elevation moment: a solid 3px black outline that prioritizes accessibility legibility over visual subtlety.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, inputs, product cards, image frames, modal containers — the defining brand shape |
| `sm` | 4px | Notification toasts, inline tag chips, small internal UI elements |
| `md` | 6px | Hover state swatches, secondary small button variants |
| `pill` | 9999px | Carousel navigation arrows, color swatch selectors, filter chips |

The system is built around a binary vocabulary: **sharp (`{rounded.none}`) for all primary brand UI, pill for color/filter selectors only**. Buttons are always square — a statement of directness that matches the brand's no-nonsense retail personality. The only soft shapes are the swatch and navigation pills, where roundness signals "selector, not action." Sharp corners exist everywhere that Moscot communicates an opinion.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — `{colors.primary}` yellow fill, `{colors.on-primary}` black text, `{rounded.none}` corners. The main CTA: "Join the Family," "Add to Cart" in promo contexts. Hover shifts to `{colors.primary-hover}` darker yellow.
- **`button-dark`** — `{colors.surface-dark}` black fill, `{colors.on-dark}` white text, `{rounded.none}` corners. The primary product CTA — "Add to Cart," "Shop Now." Authority through absolute contrast.
- **`button-outline`** — White fill with `{colors.ink}` 1px border, black text. Secondary action on white surfaces. Hover inverts to black fill, white text.
- **`button-ghost`** — No background, no border, `{colors.ink}` text. Editorial inline links that function as navigation — "View Collection," "Read More." Hover shifts to `{colors.ink-secondary}`.

### Cards

Product cards sit on `{colors.background}` white with `{rounded.none}` corners and no resting shadow. Product image fills the top of the card edge-to-edge; below: brand name in `{typography.heading-small}` uppercase, product name in `{typography.body}`, price in `{typography.body-emphasis}`. Hover adds a Level 1 ambient shadow (`0px 0px 5px 1px rgba(0,0,0,0.15)`) — a quiet signal before click. Color swatches sit beneath the card in a compact row of `{rounded.sm}` chips.

### Inputs

Inputs use `{colors.background}` white fill, `1px solid {colors.border}` default edge, `{rounded.none}` corners, and 12px vertical padding. Placeholder text in `{typography.body}` at `{colors.ink-secondary}`. Focus transitions border to `1px solid {colors.focus-ring}` black — unambiguous, high-contrast. The email capture modal input on `{colors.primary}` yellow canvas inverts to a white-bordered field with black text.

### Badges / Tags

- **Promotional badge**: `{colors.primary}` yellow fill, `{colors.on-primary}` black text, `{typography.label-upper}` uppercase, `{rounded.pill}` shape. Used for "Sale", "New", "Limited" tags.
- **Size selector**: `{rounded.none}` square chips, `{typography.label-upper}` uppercase, `{colors.border}` default border, `{colors.ink}` text. Active state: `{colors.focus-ring}` black border.
- **Color swatch**: `{rounded.sm}` small square with color fill, `{rounded.pill}` pill variant for filter chips.

### Navigation

A single `{colors.surface-dark}` black bar: MOSCOT logotype left, navigation items in `{typography.nav-link}` uppercase white, icons (account/search/cart) right. Announcement bar above the nav in `{colors.primary}` yellow. Sticky on scroll with a Level 2 drop shadow. Below 1024px collapses to hamburger with a full-height overlay panel; navigation items remain in the same `{typography.nav-link}` uppercase register.

## Do's and Don'ts

### Do
- Set every headline and UI label in Gotham uppercase with at least 1px letter-spacing — the tracking is definitional to the visual identity, not optional
- Use `{colors.primary}` yellow exclusively for the highest-priority action on the page (announcement bars, modals, primary CTA in promotional contexts); it loses its impact if applied freely
- Apply `{rounded.none}` to every button, input, and card — sharp corners are the brand's geometry; softening them with even a 2px radius reads as a different brand
- Maintain the two-tone canvas: `{colors.surface-dark}` black for the nav top; `{colors.background}` white for the product territory below
- Use `{typography.heading-sub}` Engravers LT Std for heritage copy only — its serif authority is earned through scarcity; overuse flattens the system
- Keep `{typography.body}` Gotham at weight 400–500 for all reading text — the brand does not bold its body copy
- Apply `{colors.primary}` yellow with `{colors.on-primary}` black text — never white text on yellow, which falls below contrast thresholds
- Use Roboto Mono (`{typography.mono}`) for price strings and product codes — the mono register signals exactness and connects to catalog/receipt conventions

### Don't
- Don't use lowercase Gotham for headlines or CTAs — the all-caps format is the typographic voice; lowercase reads as a different brand entirely
- Don't apply `{colors.primary}` yellow to background surfaces outside of promotional contexts — sustained yellow backgrounds outside modal/banner use dilute the accent's urgency
- Don't round button corners with `{rounded.sm}` or `{rounded.md}` — even 4px softens the brand edge in a way that conflicts with the square-corner commitment
- Don't introduce a third sans-serif typeface — Gotham handles all sans roles; adding another grotesque creates conflicting voice
- Don't set body copy smaller than 13px — Gotham 400 at the body scale needs that minimum to remain readable at its current tracking
- Don't use `{colors.ink-secondary}` mid-gray for structural CTAs — it lacks the contrast authority of `{colors.ink}` black or `{colors.primary}` yellow
- Don't apply drop shadows to the nav bar at rest — the Level 2 shadow activates on scroll only; resting shadows flatten the designed contrast with white content below
- Don't invert the yellow-on-black hierarchy by placing black text on mid-gray backgrounds — the system lives on maximum contrast (black/white/yellow), not mid-range values

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <360px | Single column, compact product labels, nav collapses to hamburger |
| Mobile | 360–767px | Single-column product grid, full-bleed photography, stacked sections |
| Mobile Large | 768–1023px | 2-column product grid, partial nav expansion, hero text scales down |
| Tablet | 1024–1199px | 2–3 column product grid, full nav visible, campaign hero full-bleed |
| Desktop | 1200–1442px | 3–4 column product grid, full editorial layout, 36px display headlines |
| Wide Desktop | >1442px | Max container ~1556px centered; generous section margins, oversized hero |

### Touch Targets
- Primary buttons have 14px vertical padding — approximately 44px effective height meeting minimum touch standards
- Product cards are fully tappable; entire card including image and metadata is the link target
- Swatch selectors at 28–32px chip size with adequate tap margins via surrounding whitespace
- Navigation hamburger icon and icon targets at minimum 44px effective touch area

### Collapsing Strategy
- **Navigation**: Full horizontal `{colors.surface-dark}` bar with all nav items visible → hamburger below 1024px; overlay panel retains uppercase Gotham register
- **Hero**: Full-bleed campaign photography at all breakpoints; headline font-size scales from 36px at desktop toward 24px on mobile; uppercase tracking maintained
- **Product grid**: 4-column → 3-column → 2-column → 1-column; image cells fill the grid without inset padding
- **Spacing**: 96px section gaps compress toward 48px at mobile; tight product chrome spacing (4–8px) holds across all breakpoints
- **Announcement bar**: Always full-width in `{colors.primary}` yellow; text may truncate or scroll on small mobile

### Image Behavior
- Product photography: fills grid cell completely, `{rounded.none}` edges, no border, no shadow at rest
- Lifestyle/campaign photography: full-bleed at section top, object-fit cover, textural backgrounds (stone, leather, aged paper) preserved at all crops
- Swatch images: small square thumbnails with `{rounded.sm}` radius, 4px margin, `{colors.border}` ring

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white)
- Nav / Footer: `{colors.surface-dark}` (#000000 black)
- Primary text: `{colors.ink}` (#000000)
- Secondary text: `{colors.ink-secondary}` (#5c5c5c)
- Brand accent: `{colors.primary}` (#ffcd03 Moscot yellow)
- On yellow: `{colors.on-primary}` (#000000 black)
- On dark: `{colors.on-dark}` (#ffffff white)
- Border: `{colors.border}` (#e5e5e5)
- Focus ring: `{colors.focus-ring}` (#000000)

### Example Component Prompts

- "Build a Moscot hero section: full-bleed product photography on a textured stone background. Overlay a `{colors.surface-dark}` black sticky nav bar with the MOSCOT wordmark in `{typography.nav-link}` uppercase white (Gotham 700, 16px, 1px tracking) and four nav items spaced evenly. Above the nav, an announcement bar in `{colors.primary}` yellow with `{colors.on-primary}` black uppercase Gotham 14px text. Hero headline in `{typography.display-hero}` (Gotham 700, 36px uppercase, 1px tracking, `{colors.ink}`) set over the photography."
- "Design a Moscot product card: `{colors.background}` white surface, `{rounded.none}` corners, product image full-width at top. Below: product name in `{typography.heading-small}` (Gotham 700, 18px uppercase, 1px tracking, `{colors.ink}`); price in `{typography.body-emphasis}` (Gotham 500, 13px, `{colors.ink}`). No resting shadow. Hover: `box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15)`. A row of `{components.swatch}` color chips below the price block."
- "Create a Moscot primary CTA button: `{colors.primary}` yellow fill (`#ffcd03`), `{colors.on-primary}` black label, `{typography.button-ui}` (Gotham 700, 16px uppercase, 1px tracking), `{rounded.none}` corners, 14px 24px padding. Hover: background transitions to `{colors.primary-hover}` (`#d9ae03`) over 0.2s. Use for 'Join the Family', 'Shop Now' in promotional contexts."
- "Build a Moscot email capture modal: `{colors.primary}` yellow fill modal container, `{rounded.none}` corners, centered. Header in `{typography.heading-section}` (Gotham 700, 24px uppercase, 1px tracking, `{colors.ink}`). Subheadline in `{typography.body}` (Gotham 400, 13px, `{colors.ink}`). Email input: white background, `{rounded.none}`, `1px solid {colors.border}`, Gotham 13px placeholder. Submit button: `{components.button-dark}` — black fill, white uppercase label. Modal close `×` in `{colors.ink-secondary}`."
- "Style a Moscot product filter bar: a horizontal row of `{components.badge}` pill chips in `{colors.primary}` yellow with black Gotham 11px uppercase labels. Active chip: solid yellow with black text. Inactive chip: `{colors.surface}` light gray fill, `{colors.ink}` black text, `1px solid {colors.border}`. Pill shape (`{rounded.pill}`) for all filter chips. Spacing between chips: `{spacing.xs}` (4px)."
- "Build a Moscot navigation bar: full-width `{colors.surface-dark}` black background, MOSCOT logotype in white on the left, four nav items in `{typography.nav-link}` (Gotham 700, 16px uppercase, 1px tracking, `{colors.on-dark}`) centered, cart/account icons right-aligned as white SVGs. Below the main nav, an announcement strip in `{colors.primary}` yellow with black uppercase Gotham 13px text. Sticky on scroll with `box-shadow: 0px 4px 6px rgba(0,0,0,0.1)` appearing after 10px scroll."

### Iteration Guide

1. Start with `{colors.surface-dark}` black as the canvas for the navigation, then open to `{colors.background}` white for all product content. The two-tone split is the first design decision.
2. Set every headline in Gotham uppercase with 1px+ letter-spacing. If it looks too tight, increase tracking before anything else — never switch to sentence case.
3. Use `{colors.primary}` yellow for one high-priority action per viewport: the announcement bar, a modal CTA, or a promotional section header. Limit to one simultaneous yellow moment.
4. Apply `{rounded.none}` to every interactive element without exception. The square geometry is not a default — it is the system's explicit position.
5. Reserve Engravers LT Std for heritage and editorial copy only. One appearance per page section maximum. Its serif authority evaporates with overuse.
6. Let product photography dominate product pages — the chrome (labels, prices, swatches) should recede so photography carries the visual energy, while Gotham headlines anchor the structure.
7. Use Roboto Mono for all price strings and product codes to distinguish the factual/technical layer from the brand voice layer set in Gotham.

---

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