---
version: alpha
name: Equinox
description: Stark monochromatic luxury fitness brand — pure black canvas with full-bleed editorial photography, a custom compressed sans-serif at tight tracking, and a near-zero UI footprint that subordinates everything to the visual declaration of aspiration.

colors:
  # Surface / canvas
  background: "#000000"
  surface: "#ffffff"
  surface-dark: "#000000"

  # Text / ink
  ink: "#ffffff"
  ink-dark: "#000000"
  on-background: "#ffffff"
  on-surface: "#000000"

  # Brand accent
  primary: "#000000"
  on-primary: "#000000"           # was #ffffff — button-primary bg is {colors.ink}=#ffffff (white); white-on-white = 1:1; black text = 21:1
  primary-inverse: "#ffffff"
  on-primary-inverse: "#000000"

  # Neutrals
  gray-100: "#ededed"           # light background surface, dividers
  gray-300: "#aaaaaa"           # muted text, hover state on dark surfaces
  gray-500: "#7a7a7a"           # secondary text, disabled states
  gray-700: "#333333"           # dark neutral, footer text context
  gray-800: "#5a5a5a"           # medium neutral, secondary UI elements

  # Interaction states
  text-hover: "#aaaaaa"         # nav link hover on dark header — was rgb(170,170,170)
  focus-ring: "#ffffff"         # focus outline on dark ground
  focus-ring-dark: "#000000"    # focus outline on light ground
  border: "#000000"             # default border on light surface
  border-light: "#d8d8d8"       # subtle divider on light sections
  border-dark: "#333333"        # subtle border on dark surfaces

  # Shadow
  shadow-soft: "#000000"        # modal / overlay shadow base — was rgba(0,0,0,0.20)

  # Semantic (estimated — not visible in single-page extract)
  success: "#32ae88"            # green seen in a single input focus instance /* estimated */
  error: "#cc0000"              # /* estimated */

typography:
  display-hero:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.28px
  display:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.32px
  heading-section:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-small:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.36px
  button-ui:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.36px
  caption:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-micro:
    fontFamily: "Equinox Sans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 2px    # buttons — near-sharp, barely softened edge
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 29px 16px 10px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 29px 16px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 20px
  nav-bar-scrolled:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 20px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.label-micro}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Equinox Design System

## Overview

Equinox.com reads like an editorial manifesto compressed into a marketing site. The dominant canvas is pure black (`{colors.background}`), broken only by enormous full-bleed photography where the muscles, architecture, and golden-hour light do all the atmospheric work. When white surfaces appear, they are deliberate and brief — a floating content card against a saturated dusk photograph, a white header region before the hero swallows the page. The design communicates a single premise at extraordinary volume: fitness is a luxury, aspiration is the product, and you are here to be convinced.

The typographic engine is Equinox Sans, a proprietary compressed grotesque loaded in four weights (Regular, Medium, Semi-Bold, Bold) from the brand's own CDN. At display scale, `{typography.display-hero}` runs at 64px, weight 600, uppercase, with -1.28px tracking — a specification designed for steroidal impact at full viewport. The letterforms are condensed enough to pack large words into hero compositions without wrapping, yet disciplined enough to avoid the carnival weight of extreme condensed faces. Below the display tier, the same typeface shifts to 18px semi-bold for navigation and CTAs, creating an unusually compressed type scale where the ratio between display and UI text is steeper than most systems. Everything reads at a lower volume, making the headlines hit harder by contrast. OpenType stylistic set `ss07` is consistently active across all text usage.

UI chrome is kept to a near-absolute minimum. Buttons are sharp-edged rectangles with no border radius, black fill on light surfaces, white fill on dark surfaces, and 18px semi-bold tracking — furniture rather than decoration. There are no gradients, no shadows in the sense of elevation, and no decorative motifs beyond the photography itself. Motion is restrained: 0.2s ease-in-out for navigation transitions, 0.5s ease for media opacity, with a 0.8s hero fade-in keyframe the only theatrical flourish. The overall impression is a gym that also designs like a fashion house — every square centimetre committed to desire, nothing left for filler.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) as the default ground — the brand operates in the dark
- Full-bleed editorial photography: cinematic, high-contrast, aspirational athletic imagery
- Equinox Sans (proprietary), a compressed grotesque with `ss07` OpenType feature active at all sizes
- 64px/600-weight uppercase display headlines with -1.28px tracking that commands space without softness
- Near-zero border radius — `{rounded.none}` everywhere except a `{rounded.sm}` 2px softening on certain buttons
- Dual-mode UI: black surfaces with white text for hero/header contexts, white surfaces with black text for editorial light sections
- Sharp-rectangle buttons — no pill shapes, no rounded CTAs, geometry matching the angular photography
- Hover interaction: white text dims to `{colors.text-hover}` on dark surfaces; a quiet signal, not a bright one
- A single custom font family loading across all contexts: no serif accent, no monospace, one typeface total
- 28 breakpoints active in the codebase — highly responsive system with sub-pixel attention to viewport transitions

## Colors

### Primary Surfaces
- **Black Canvas** (`{colors.background}`): The root page background and the dominant tone. Equinox lives in darkness — the site defaults to black before any content loads.
- **White Surface** (`{colors.surface}`): Used for floating content cards, light editorial sections, and UI contexts where legibility demands inversion. White on black is the entire chromatic vocabulary.
- **Light Wash** (`{colors.gray-100}`): Used for hover states on white surfaces and subtle divider lines in light-mode sections.

### Text / Ink
- **White Ink** (`{colors.ink}`): Primary text on dark backgrounds — hero copy, navigation links, display headlines in dark sections.
- **Black Ink** (`{colors.ink-dark}`): Primary text on light surfaces — body copy in white content cards, form labels, light-section headings.

### Brand Accent
- **Primary** (`{colors.primary}`): Equinox has no brand accent color. The brand operates in a strictly binary black/white system. Black (`{colors.primary}`) functions as the CTA surface on light backgrounds; white (`{colors.primary-inverse}`) functions as CTA on dark backgrounds. The brand's identity is the absence of color.

### Interaction States
- **Hover Dim** (`{colors.text-hover}`): Navigation links on the dark header dim to `#aaaaaa` on hover — a 33% grey that signals interactivity without disturbing the dark atmosphere. Was `rgb(170, 170, 170)`.
- **Focus Ring Dark** (`{colors.focus-ring}`): Solid white focus outline on dark backgrounds for keyboard navigation.
- **Focus Ring Light** (`{colors.focus-ring-dark}`): Solid black focus outline on white backgrounds.

### Borders
- **Dark Border** (`{colors.border}`): 1px solid black used on inputs and secondary button outlines in light sections.
- **Light Divider** (`{colors.border-light}`): `#d8d8d8` used for subtle horizontal separators in white content areas.
- **Dark Subtle** (`{colors.border-dark}`): `#333333` used for nested borders within dark contexts.

## Typography

### Font Family
- **Primary (all contexts)**: `Equinox Sans`, with fallback `Arial, sans-serif`. A proprietary compressed grotesque self-hosted from the Equinox CDN in four weights: Regular (400), Medium (500 approximate), Semi-Bold (600), Bold (700). No Google Fonts, no Adobe Fonts, no variable font axis.
- **OpenType Features**: `"ss07"` is declared consistently across nearly all text nodes — a stylistic alternate set affecting specific glyph forms in Equinox Sans. This is the only OpenType feature active.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero headlines — 64px, 600 weight, uppercase, -1.28px tracking. Campaign declarations like "One Membership. Limitless Potential." |
| `display` | Section-level headlines in light and dark panels — 32px, 600 weight, -0.32px tracking |
| `heading-section` | Subsection titles and card headers — 24px, 600 weight |
| `heading-sub` | Small structural labels — 16px, 700 weight |
| `body-large` | Intro paragraphs accompanying display headlines — 24px, 400 weight |
| `body` | Standard editorial copy, descriptions — 18px, 400 weight, 1.4 line-height |
| `body-small` | Supporting copy, footer links, secondary information — 14px |
| `nav-link` | Global header navigation — 18px, 600 weight, 0.36px tracking |
| `button-ui` | All button text — 18px semi-bold with 0.36px tracking. Same as nav: CTAs share nav-link metrics |
| `caption` | Micro-labels, legal, sub-footer text — 11px |
| `label-micro` | Bold small labels, tags — 14px, 700 weight |

### Principles
- One typeface, all contexts. Equinox Sans handles everything from 8.5px captions to 64px hero declarations — there is no serif accent, no utility mono, no decorative face.
- Uppercase is reserved for display: `{typography.display-hero}` uses `text-transform: uppercase`. Navigation and body copy are sentence case.
- Weight signals hierarchy. Display and CTAs use 600 (semi-bold); structural labels use 700 (bold); reading copy uses 400 (regular). No weight 500 mid-tone.
- Negative tracking at display sizes. The -1.28px spacing at 64px tightens letterforms into a compressed editorial block; standard and UI sizes track at 0 or positive, ensuring legibility.
- `ss07` OpenType feature active consistently. Equinox Sans has stylistic alternate forms that the brand uses uniformly across all text nodes.

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 4px, with an effective 8px rhythm at most UI scales.

Equinox's spacing philosophy is editorial tension: extreme whitespace in hero compositions (where photographs breathe at full viewport) meets compressed UI chrome (where nav and buttons operate at minimum viable clearance). Section breaks are generous; interactive elements are tight.

### Grid & Container
- Max content width: 1920px viewport handling
- Standard hero: full-bleed edge-to-edge with overlay text aligned left-bottom or center
- Content sections: typically constrained to 1200–1440px with horizontal margins
- Editorial card grids: 2-column on desktop, stacking to single column on mobile
- Horizontal nav padding: `{spacing.lg}` (20px) — deliberately compact to preserve the black bar's visual weight

### Whitespace Philosophy
- **Heroic emptiness**: Photography sections are unconstrained — the only law is the edge of the viewport. Text overlays float within the image as editorial placement, not container logic.
- **Compressed UI**: Navigation, buttons, and input fields operate at tight padding norms (10px vertical, 16–20px horizontal) consistent with a brand that treats UI chrome as a necessary overhead, not an opportunity for expression.
- **White editorial moments**: When the page switches to white (`{colors.surface}`), spacing expands and the copy breathes — these sections create perceptible rhythm between dark visual pressure and light reading calm.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all surfaces, navigation, hero overlays |
| Subtle (Level 1) | `rgb(199,197,199) -3px -3px 5px -2px` | Rare soft shadow on UI panels |
| Card (Level 2) | `rgba(0,0,0,0.20) 0px 0px 18px 0px` | Modal and overlay containers — was rgba, shadow-soft base |
| Focus Ring (dark bg) | `outline: 2px solid {colors.focus-ring}` | Keyboard navigation on dark ground |
| Focus Ring (light bg) | `outline: 2px solid {colors.focus-ring-dark}` | Keyboard navigation on white ground |

**Shadow Philosophy**: Equinox does not use box shadows for material elevation within the UI. Depth is communicated by context shift — the juxtaposition of a white content card floating against a dark photograph, not by drop shadow beneath a component. The rare shadow values extracted by dembrandt appear on third-party cookie consent UI, not on Equinox's own components. The system is functionally shadowless.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All primary UI surfaces, cards, inputs, navigation — the system default |
| `sm` | 2px | Optional near-imperceptible corner softening on certain secondary UI elements |
| `pill` | 9999px | Not used in primary UI — reserved for cookie consent third-party widgets only |

Equinox's shape language is an absolute sharp edge. No content container, card, input, or button in the brand's own interface carries a visible border radius. The 2px `{rounded.sm}` entry appears in detected button elements but is barely perceptible — the system reads and behaves as fully square-cornered. This geometric hardness is intentional: it echoes the linear architecture of high-end fitness clubs, the clean steel of weight equipment, and the angular musculature of the photography. Soft corners would undermine the brand's physical metaphor.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.input}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Black rectangle (`{colors.ink}` background, `{colors.on-primary}` text) with no border radius. 18px semi-bold, 0.36px tracking, 10px vertical padding. Used on light surfaces — "Join Today", "Join Now", and transactional CTAs.
- **`button-secondary`** — White fill with 1px black border. Same geometry. Used on dark surfaces where a solid black button would be invisible.
- **`button-ghost`** — Transparent fill, 1px white border, white text. Used for secondary actions overlaid on photography.
- **`button-ghost-hover`** — Ghost button fills solid on hover — background becomes `{colors.ink}`, text becomes white.
- **`button-primary-hover`** — Dark background lightens slightly to `{colors.gray-700}` on hover, confirming interactivity.

### Cards

Cards use `{rounded.none}` sharp edges, white background (`{colors.surface}`) on dark page grounds, or inverted dark fill in dark sections. No drop shadow — the edge of the card against the page background (or photography) creates definition. Standard internal padding is `{spacing.xl}` (24px).

### Inputs

Form fields are stripped to essentials: transparent background, 1px black border, no radius. Floating label pattern observed in dembrandt output — the label is positioned at `padding-top: 29.5px` initially, collapsing on focus. Focus state promotes the border to a full-perimeter 1px ring. The floating label approach is a form design choice that reduces visual weight while preserving labeling. An unusual sky-blue focus background (`rgb(30, 174, 219)`) was captured in the dembrandt output for one input field — this appears to be a third-party / MUI component state, not brand-first design.

### Navigation

The global header sits on `{colors.background}` (pure black), the EQUINOX wordmark rendered in small-caps or a custom display weight at the left edge, with navigation links at `{typography.nav-link}` (18px/600/+0.36px) across the center. "Visit a Club" and "Join Today" CTAs appear as white-bordered and black-fill rectangles respectively at the far right. On hover, nav link text dims from white to `{colors.text-hover}`. The header fades in via a 0.8s `fadein` keyframe. Mobile nav collapses to a hamburger.

### Badges / Tags

Label elements use sharp-edged containers (`{rounded.none}`), typically a black or white fill depending on surface, with `{typography.label-micro}` (14px, 700 weight). There are no pill-shaped tags in the system.

## Do's and Don'ts

### Do
- Use pure black (`{colors.background}`) as the default canvas — this is the brand's ground state
- Set display text in Equinox Sans weight 600 uppercase with negative tracking (`{typography.display-hero}`)
- Keep all UI shapes strictly square-cornered (`{rounded.none}`) — no softened edges on brand components
- Let photography do the atmospheric work — UI should be invisible scaffolding, not decoration
- Invert button treatment per surface: black button on white sections (`{components.button-primary}`), white/ghost button on dark sections (`{components.button-ghost}`)
- Maintain the nav hover dim at `{colors.text-hover}` — a muted dimming signal, not a bright color change
- Apply `ss07` OpenType stylistic set to all text rendered in Equinox Sans
- Use `{typography.button-ui}` (18px semi-bold, 0.36px tracking) for all CTA and nav label text — the same spec serves both
- Honor the compressed tracking at display sizes — the -1.28px setting at 64px is integral to the headline impact

### Don't
- Don't introduce any brand accent color — Equinox's palette is strictly binary black and white
- Don't add border radius to any Equinox-owned UI component — sharp geometry is the system rule
- Don't use pill-shaped buttons or tags — only third-party widgets carry rounded corners
- Don't introduce shadows for component elevation — depth is created by surface contrast and photography, not shadow
- Don't soften display typography with sentence case at headline sizes — uppercase is mandatory for `{typography.display-hero}`
- Don't add any secondary typeface — Equinox Sans is the only typeface in the system
- Don't use mid-grey as a text color for any primary content — text is white on dark, black on light; `{colors.gray-300}` is for hover states only
- Don't add decorative UI gradients — photography provides all tonal complexity; UI surfaces are flat solids
- Don't use weight 500 — the system uses 400, 600, and 700 only; no medium weight in the type hierarchy
- Don't introduce color beyond the black/white/grey scale for marketing content — any color lives exclusively inside photography

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Micro | <320px | Minimum viable stack, tight single-column |
| Mobile Small | 320–425px | Core mobile layout, full-width hero, collapsed nav |
| Mobile | 425–640px | Standard single-column, hamburger menu, hero text scales down |
| Mobile Large | 640–768px | Two-column content cards begin; nav still collapsed |
| Tablet | 768–960px | Multi-column grids, horizontal nav emerging |
| Tablet Large | 960–1024px | Full horizontal navigation, hero aspect ratio shifts |
| Desktop | 1024–1200px | Standard desktop layout, 3-column grids |
| Wide | 1200–1440px | Expanded content width, larger hero type |
| Large Desktop | 1440–1920px | Full-width photography, maximum display scale |

### Touch Targets
- Buttons: 10px vertical padding on 18px font — approximately 44px effective height meets minimum touch target
- Navigation links: 18px font with generous horizontal spacing for tap precision on dark header
- Full-card tap areas: content tiles register click on the entire surface, not just text

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger icon below ~960px; drawer overlay on dark background
- **Hero**: Full-bleed photography maintains edge-to-edge coverage at all breakpoints; display text scales from 64px to approximately 32–40px on mobile
- **Content grids**: Two-column editorial layouts collapse to single-column at mobile; maintains full-bleed imagery
- **Spacing**: Section vertical gaps reduce from `{spacing.5xl}` (96px) on large desktop to `{spacing.3xl}` (40px) on mobile — the dark atmosphere requires less breathing room than a white editorial system

### Image Behavior
- Hero photography is always full-bleed; `object-fit: cover` fills the viewport without letter-boxing
- Images load progressively from the Equinox CDN (`assets.cdn-equinox.com`)
- No border-radius on any image element — sharp edges at all viewports
- Dark photography contrast is maintained across retina and standard displays

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure black `#000000`
- Primary text: `{colors.ink}` — white `#ffffff` on dark surfaces
- Text on light: `{colors.ink-dark}` — black `#000000`
- CTA (light surface): `{colors.primary}` bg, `{colors.on-primary}` label
- CTA (dark surface): `{colors.primary-inverse}` bg, `{colors.on-primary-inverse}` label
- Hover dim: `{colors.text-hover}` — `#aaaaaa`
- Border: `{colors.border}` — `#000000`

### Example Component Prompts

- "Create an Equinox hero section: full-bleed edge-to-edge photography background, no border-radius on the image container, overlay text left-aligned with a `{typography.display-hero}` headline ('One Membership. Limitless Potential.') in Equinox Sans 64px weight 600 uppercase -1.28px tracking `{colors.ink}` white, supporting body in `{typography.body-large}` 24px/400, and a 'Join Now' CTA using `{components.button-primary}` — black fill, white text, no border-radius, 10px 20px padding."
- "Design an Equinox global navigation bar: `{colors.background}` pure black ground, EQUINOX wordmark left, six nav links in `{typography.nav-link}` (18px semi-bold, 0.36px tracking) `{colors.ink}` white with hover dim to `{colors.text-hover}` `#aaaaaa` at 0.2s ease-in-out. Right-side 'Visit a Club' ghost button (`{components.button-ghost}`) and 'Join Today' primary button (`{components.button-primary}`). Zero border-radius on all buttons."
- "Build a light editorial content section: `{colors.surface}` white background, `{typography.display}` heading (32px weight 600 -0.32px tracking) in `{colors.ink-dark}`, `{typography.body}` paragraph (18px/400) in `{colors.ink-dark}`, and a secondary CTA using `{components.button-secondary}` — white fill, 1px solid black border, sharp corners, same 18px semi-bold text."
- "Create an Equinox membership card: `{colors.surface}` white card, `{rounded.none}` corners, no shadow. Heading in `{typography.heading-section}` (24px/600) `{colors.ink-dark}`. Body in `{typography.body}` 18px/400. 'Explore Member Benefits' underline link in `{typography.nav-link}` weight 600. Internal padding `{spacing.xl}` (24px). Card floats over a dark photography background for Equinox's signature light-on-dark editorial tension."
- "Design a contact/sign-up form in Equinox style: `{colors.surface}` white background, all inputs using `{components.input}` — transparent fill, 1px solid `{colors.border}` black border, `{rounded.none}` corners, floating label pattern (label starts at vertical center, collapses to top-left on focus). Focus state upgrades to 1px full-perimeter ring using `{components.input-focus}`. Submit CTA: `{components.button-primary}` full-width, black fill, white text, sharp corners."
- "Generate an Equinox dark promotional panel: `{colors.background}` pure black surface, `{typography.display-hero}` 64px uppercase headline in `{colors.ink}` white, a subhead in `{typography.body-large}` 24px/400 white, and a ghost CTA button (`{components.button-ghost}`) — transparent fill, 1px white border, white text, `{rounded.none}` corners, hover state inverts to solid black fill with white text."

### Iteration Guide

1. Start with `{colors.background}` black — every Equinox screen begins in darkness and introduces light as a deliberate editorial choice, not a default.
2. Introduce photography as the primary color and texture source; the entire chromatic range of the design should live within the imagery, never in UI chrome.
3. Set display text with `{typography.display-hero}` — uppercase, weight 600, -1.28px tracking. This headline spec is non-negotiable; it is the brand's visual voice.
4. Apply `{rounded.none}` to every UI component. If a radius appears, remove it. The brand's sharpness is geometric and intentional.
5. Invert the color system to context: dark ground → white text and ghost buttons; light card → black text and black-fill buttons. The same binary palette reads both ways.
6. Use `{colors.text-hover}` (#aaaaaa) for hover state on dark navigation — dimming, not brightening. Equinox hover states recede rather than advance.
7. Keep motion at 0.2s ease-in-out for transitions; 0.5s ease for media fades. Nothing theatrical except the 0.8s hero entrance.

---

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