--- version: alpha name: "Khaite" description: "A dark-anchored quiet-luxury system pairing ITC Galliard serif with the geometric sans Fakt Pro, on a near-black canvas that lets editorial photography breathe in shadow — structured architecture in ink." colors: # Surface / canvas background: "#000000" # near-black canvas; manifest theme_color confirms surface: "#111111" # slightly lifted dark surface for overlays and drawers # Ink / text ink: "#ffffff" # primary text and logo wordmark on dark canvas ink-secondary: "#999999" # secondary labels, metadata, captions — midgray ink-ghost: "#555555" # placeholder text, disabled states, fine print # Brand — Khaite has no chromatic accent; white on black carries authority primary: "#ffffff" # CTA fill — white on black on-primary: "#000000" # text on white CTA surface primary-container: "#1a1a1a" # secondary button surface, dark tint variant # Interactive states (rgba flattened to opaque hex) primary-hover: "#e9e9e9" # button hover softens from pure white to off-white text-hover: "#cccccc" # was rgba(255,255,255,0.8) — Google format requires hex # Semantic error: "#cc3333" # form validation error /* estimated */ # Borders border: "#ffffff" # 1px solid button outlines and structural rules on dark canvas border-subtle: "#222222" # accordion top rules, section dividers (rgb 233,233,233 on dark canvas flattened) border-mid: "#7f7f7f" # input combobox underline (rgb 127,127,127) # Shadow tints shadow-soft: "#000000" # was rgba(0,0,0,0.2) — drop shadows on drawers and modals typography: display-hero: fontFamily: "ITC Galliard, Times New Roman, Georgia, serif" fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.01em display: fontFamily: "ITC Galliard, Times New Roman, Georgia, serif" fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px heading-section: fontFamily: "ITC Galliard, Times New Roman, Georgia, serif" fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px body-large: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.16px body: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.3px nav-link: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.126px button-ui: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.3px caption: fontFamily: "Fakt Pro, Arial, Helvetica Neue, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 48px 3xl: 80px 4xl: 108px rounded: none: 0px sm: 3px # subtle rounding on minor UI elements pill: 9999px # cookie search input, toggle switches components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px border: "1px solid {colors.border}" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" border: "1px solid {colors.primary-hover}" button-secondary: backgroundColor: "{colors.primary-container}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px border: "1px solid {colors.border-subtle}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" border: "1px solid {colors.border}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 10px 0px borderBottom: "1px solid {colors.border-mid}" input-focus: borderBottom: "1px solid {colors.border}" outline: "1px solid {colors.border}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 16px 0px badge: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 2px 6px accordion: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" borderTop: "1px solid {colors.border-subtle}" padding: 16px 0px --- # Khaite Design System ## Overview Khaite arrives on screen in darkness. The canvas is absolute black (`{colors.background}`), not as fashion-industry mood-boarding but as a material decision: the label's garments — structured wool coats, leather accessories, tailored dresses — are best understood in shadow. A model turns near a wall in low key studio light, the coat's architecture resolving slowly against near-black space. The wordmark KHAITE sits at the center of a minimal navigation bar in quiet italic serifed lettering, barely ornate, immediately authoritative. The typographic system is built on a precise contradiction. ITC Galliard — a humanist oldstyle serif with warm bracketed serifs and slight calligraphic motion — handles all editorial display text. It reads as considered, literary, slightly old-world in the best sense. Fakt Pro, a clean geometric-neutral sans-serif, handles everything structural: navigation, body copy, labels, buttons. The two faces never compete; they articulate a split between editorial and functional that mirrors how the brand positions itself — between tradition and contemporary tailoring. At `{typography.display-hero}` the Galliard feels like a title card on a quiet film; at `{typography.nav-link}` the Fakt Pro disappears into the interface. Color is essentially binary. `{colors.background}` (black) and `{colors.ink}` (white) are the only active surfaces. There is no chromatic brand accent — no seasonal dusty rose, no cobalt moment. The single exception is a midgray `{colors.ink-secondary}` for secondary labels and an emergency red `{colors.error}` for form validation. Interaction states function by lightening the white — hover on links softens to `{colors.text-hover}` off-white — so that even motion reads as restraint. The system communicates that the garment, seen in dark atmospheric photography, is the brand's actual visual material; the interface is a darkroom frame around it. **Key Characteristics:** - Absolute black canvas (`{colors.background}`) — the site is a photographic dark room, not a retail shelf - Dual-typeface architecture: `ITC Galliard` for editorial display, `Fakt Pro` for structural interface text - Zero chromatic accent — the system operates entirely in white, near-black, and midgray - Near-zero border-radius (`{rounded.none}` on all primary UI elements) — architectural, hard-cornered - Bottom-border-only inputs: `1px solid {colors.border-mid}` underline, no box or fill - 0.3s ease motion timing throughout; button transitions handle `opacity`, `border-color`, `background-color`, `color` - Photography is always editorial, always low-key lit — texture and form over product catalogue clarity - Accordion navigation for product detail panels: `1px solid {colors.border-subtle}` top rules - `{typography.button-ui}` at 12px with `0.3px` letter-spacing — authority through restraint, not size - Generous section gaps; `{spacing.4xl}` (108px) at large desktop echoes editorial magazine rhythm - White-on-black link underlines in `{typography.nav-link}` style; hover transitions color to `{colors.text-hover}` - Shadow system used only for floating layers: `box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px` on drawers ## Colors ### Surface & Canvas - **Black** (`{colors.background}`): The primary and near-exclusive canvas. Nothing is lightened unless it needs to float. This is the foundation of the brand's photographic authority. - **Near-Black Surface** (`{colors.surface}`): A slightly lifted dark tone for overlays, cart drawers, and modal surfaces — enough to read as a distinct layer without introducing any chromatic departure. ### Ink / Text - **White** (`{colors.ink}`): The wordmark, primary navigation, headings, body copy on dark canvas. The only "color" Khaite deploys at full saturation in the UI. - **Midgray** (`{colors.ink-secondary}`): Product metadata, secondary labels, captions, and supporting context. A quiet step below full white — enough contrast to read, not enough to compete with imagery. - **Dim Gray** (`{colors.ink-ghost}`): Placeholder text, disabled states, legal fine print. Barely legible; intended only for form context. ### Brand Accent - **White CTA** (`{colors.primary}`): Primary button fill and all primary interactive surfaces. Khaite inverts the conventional dark-button-on-light-page; here, a white button on black is the commanding foreground action. - **Black on White** (`{colors.on-primary}`): Action label text on the white primary CTA surface. - **Dark Container** (`{colors.primary-container}`): Secondary button surface — a dark tint that sits above the canvas but below full black, reserving contrast hierarchy for `{colors.primary}`. ### Text States - **Hover Off-White** (`{colors.primary-hover}`): CTA hover softens from pure white to a near-white — a tactile signal without introducing new chroma. - **Link Hover** (`{colors.text-hover}`): Navigation and inline link hover desaturates slightly from white — was `rgba(255,255,255,0.8)`, flattened to opaque hex. ### Semantic - **Error Red** (`{colors.error}`): Form validation. The system's single chromatic moment; estimated from quiet-luxury retail conventions, not observed via CSS variable. /* estimated */ ### Borders - **White Rule** (`{colors.border}`): 1px structural rules on primary buttons and focused input underlines — maximum contrast against the black canvas. - **Accordion Divider** (`{colors.border-subtle}`): Very dark hairline dividers for accordion panels and section rules — nearly invisible structural articulation on the black surface. - **Input Underline** (`{colors.border-mid}`): Midpoint gray for resting input underlines — visible but not commanding. ## Typography ### Font Family - **Editorial**: `ITC Galliard`, with fallbacks: `Times New Roman, Georgia, serif`. Self-hosted; a humanist oldstyle roman with warm bracketed serifs and subtle calligraphic contrast in stroke weights. Used for display headings and editorial campaign moments. - **Structural**: `Fakt Pro`, with fallbacks: `Arial, Helvetica Neue, sans-serif`. A clean geometric-inflected sans-serif. Used for all navigational, body, label, and button text. Where Galliard is atmospheric, Fakt Pro is architectural. - **System fallback observed**: `Arial, Helvetica Neue, Helvetica` for browser-native fallback stack in body contexts. - **OpenType Features**: Default tracking behavior; `Fakt Pro` applies explicit `letter-spacing` values at button (0.3px) and link (0.126px) scales rather than relying on OpenType feature sets. ### Hierarchy | Token | Use | |---|---| | `display-hero` | 48px ITC Galliard — campaign editorial headers, seasonal collection openers | | `display` | 28px ITC Galliard — secondary feature moments, story section headings | | `heading-section` | 24px ITC Galliard — category headings, editorial subheadings | | `heading-sub` | 14px Fakt Pro Bold — product card names, accordion labels, list group headers | | `body-large` | 16px Fakt Pro Regular — extended editorial copy, designer notes | | `body` | 14px Fakt Pro Regular, 0.3px tracking — product descriptions, form text | | `nav-link` | 13px Fakt Pro Regular — desktop top navigation, footer links | | `button-ui` | 12px Fakt Pro Regular, 0.3px tracking — CTA and action labels | | `caption` | 12px Fakt Pro Regular, line-height 1.6 — size selectors, swatch labels, fine print | ### Principles - **A serif for feeling, a sans for function**: ITC Galliard owns every display moment; Fakt Pro owns every operational role. The system never conflates them — no Galliard at small sizes, no Fakt Pro as a campaign headline. - **Weight restraint**: Only Fakt Pro Bold (700) is used for emphasis on heading-sub and heading-3 contexts. Galliard appears only in Regular (400). No extra-bold, no condensed, no italic emphasis in UI. - **Tracking as role signal**: `button-ui` and `body` carry explicit positive tracking (0.3px / 0.16px); nav links carry minimal tracking (0.126px). Display Galliard runs at slight negative tracking (-0.01em) — each role has a distinct rhythm. - **Dark canvas legibility**: White on black yields maximum contrast without augmentation; the typographic work is in proportion and spacing, not in contrast management. - **Uppercase restraint**: No observed `text-transform: uppercase` on primary UI elements — unlike many quiet-luxury peers, Khaite keeps case as authored in the content. ## Layout ### Spacing System The complete scale is in the `spacing:` token block. The dominant base unit is 8px (540 occurrences — overwhelmingly the structural unit), with a practical secondary unit of 4px for micro-spacing. Section rhythm extends to 108px (`{spacing.4xl}`) at large desktop — editorial magazine pacing. The site breathes in vertical layers. Campaign sections and collection openers maintain wide vertical margins that give the dark photography room to exist as atmosphere rather than product catalogue. Horizontal padding is consistent and generous; the brand never crowds its garments against viewport edges. ### Grid & Container - Max content width: approximately 1200px at large breakpoints, inset within a full-bleed black canvas - Desktop product grid: 3–4 columns, equal gutters, no card chrome - Hero sections: full-bleed editorial photography that bleeds to all four edges; navigation floats over the image - Navigation: flat horizontal bar; KHAITE wordmark centered; left nav (Ready-to-Wear, Collections, Handbags, etc.) and right utilities (Search, Account, Bag) - Announcement bar above nav: a subtle promotional strip in `{typography.caption}` scale ### Whitespace Philosophy - Darkness itself is the whitespace — generous spacing on a black canvas creates the same breathing room that white space creates on light pages - Photography-first: campaign imagery fills the viewport; UI elements orbit at extreme edges - 108px vertical section gaps at large desktop (`{spacing.4xl}`) reinforce editorial authority over retail urgency ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Every page surface — the system is categorically flat | | Hairline (Level 1) | `border-bottom: 1px solid {colors.border-mid}` | Resting input underlines | | Accordion Rule (Level 1) | `border-top: 1px solid {colors.border-subtle}` | Section dividers, accordion panels | | Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` + `outline: 1px solid {colors.border}` | Input active state | | Button Outline (Level 1) | `border: 1px solid {colors.border}` | Primary button perimeter on black canvas | | Drawer / Modal (Level 3) | `box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px` | Cart drawer, panel overlays | | Menu Overlay (Level 3) | `box-shadow: rgba(0,0,0,0.2) 0px 0px 18px 0px` | Mega-menu and floating navigation | **Shadow Philosophy**: Khaite's shadow system is almost invisible on a black canvas — the dark backgrounds absorb shadow rather than reveal it. Floating layers (cart, modals, mega-menu) use soft diffuse shadows for spatial separation, but the effect is subtle. The design does not use decorative depth; space and darkness are the depth. ## Shapes The complete radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | All primary UI — buttons, product cards, input fields, image frames | | `sm` | 3px | Minor functional elements (low-confidence, utility contexts only) | | `pill` | 9999px | Cookie consent search input and functional toggle switches | Khaite's corner language is hard and square. The `{rounded.none}` on every primary surface reads as architectural precision — the tailored silhouette of a structured coat translated into interface. The 3px radius appears only in low-confidence utility contexts and is not a design language statement. The pill radius exists only in cookie-consent UI, not in product design. ## Components The complete component spec lives in the `components:` token block. ### Button variants - **`button-primary`** — `{colors.primary}` white fill, `{colors.on-primary}` black text, `{rounded.none}`, 12px Fakt Pro with 0.3px tracking, `1px solid {colors.border}`. Hover softens fill to `{colors.primary-hover}` via `0.3s ease`. The inverted CTA (white on black) is Khaite's primary action signal — "Add to Cart," "Shop the Collection." - **`button-secondary`** — `{colors.primary-container}` dark fill, `{colors.ink}` white text, same geometry, `1px solid {colors.border-subtle}`. Hover lifts border to `{colors.border}`. Used for secondary and ghost-adjacent actions. ### Cards - **`card`** — Black (`{colors.background}`) surface, no border, no shadow, `{rounded.none}`. Editorial photography edge-to-edge at top; product name in `{typography.heading-sub}` Fakt Pro Bold and price in `{typography.body}` below. No card chrome — darkness is the container. ### Inputs - **`input`** — Black fill, `border-bottom: 1px solid {colors.border-mid}` only, `{rounded.none}`. 14px Fakt Pro. Focus switches underline to `{colors.border}` white + `outline: 1px solid {colors.border}`. No background change, no glow. ### Badges / Tags - **`badge`** — No fill, 12px Fakt Pro in `{colors.ink-secondary}` midgray. Absolute-positioned label on product tiles ("NEW," "PRE-ORDER") — typographic only, no chip background. ### Navigation - **`nav-bar`** — Black background, `{colors.ink}` white text, `{typography.nav-link}` 13px. KHAITE wordmark centered. Link hover transitions `color` to `{colors.text-hover}` in `0.3s ease`. No underline animation on hover in the primary nav. ### Accordion - **`accordion`** — Black surface, `{colors.ink}` text, `{typography.body}`. `border-top: 1px solid {colors.border-subtle}` separates each panel. Used on product detail pages for size, fit, and material information. ## Do's and Don'ts ### Do - Use `{colors.background}` absolute black as the only canvas — never lift to a tinted dark or introduce a light-mode variant - Set all display headings in ITC Galliard (`{typography.display-hero}`, `{typography.display}`, `{typography.heading-section}`) — the serif face belongs exclusively to editorial moments - Apply `{rounded.none}` to every primary UI element — buttons, cards, input fields, image frames must be hard-cornered - Let editorial photography dominate — the image IS the page; UI elements navigate around it, not over it - Use `{colors.primary}` white only for primary CTAs and focus-state outlines — preserve its visual salience against the black canvas - Animate only via `color`, `opacity`, `border-color`, `background-color` at `0.3s ease` — no transforms, no scale lifts - Keep `{typography.button-ui}` at 12px — do not enlarge action labels for emphasis, that is not Khaite's mechanism - Use accordion panels (`{components.accordion}`) for all product detail text — flat expansion on a dark surface ### Don't - Don't introduce a chromatic accent color — this system has none; `{colors.ink}` white and `{colors.primary}` white ARE the brand - Don't add hover shadows, card borders, or lift effects — the system is flat; depth comes from darkness, not elevation - Don't use ITC Galliard below 20px — at small sizes it loses legibility and reads as ornament, not architecture - Don't increase tracking on Galliard — the serif reads in its default spacing; wide tracking belongs to Fakt Pro button contexts only - Don't round corners beyond `{rounded.sm}` on any designed element — the 3px is incidental utility, not stylistic language - Don't introduce section fills, color bands, or background variations — `{colors.background}` must hold everywhere - Don't use `{colors.ink-ghost}` for interactive text — this tone is for placeholders and disabled states only - Don't deploy `{colors.error}` for anything other than form validation — no red as UI emphasis or hover signal --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | < 425px | Single column; hamburger nav; hero type ~28px; bottom-anchored nav utilities | | Mobile | 425–767px | Single-column product grid; nav collapsed; spacing scale compressed | | Tablet | 768–991px | Two-column product grid; nav still collapsed; wider hero padding | | Desktop | 992–1199px | Full horizontal nav visible; 3-column product grid; section gaps expand | | Large Desktop | ≥ 1200px | Full 4-column grid; 108px vertical section gaps; max container ~1200px | ### Touch Targets - Primary buttons use 12px vertical padding — effective tap height around 40–44px - Navigation links on mobile rendered at generous surrounding tap zones - Product tiles are fully tappable card regions, not just the label text - Accordion panels expand to full-width with adequate touch target height for panel headers ### Collapsing Strategy - **Navigation**: full horizontal bar → hamburger icon on mobile; slide-in drawer with flat link list in `{typography.nav-link}` style - **Type scale**: `{typography.display-hero}` scales from 48px toward 28–32px on mobile; `{typography.body}` holds at 14px - **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; equal gutters maintained - **Spacing**: 108px vertical gaps compress toward 40–48px on mobile; atmosphere is preserved even at smaller scale ### Image Behavior - Campaign photography is always full-bleed — no max-width constraint on hero imagery - Product tile images maintain a consistent portrait aspect ratio across breakpoints - All image frames use `{rounded.none}` — photography never clips to a rounded container - Dark-atmospheric studio imagery bleeds invisibly into `{colors.background}`, creating no edge between image and page --- ## Agent Prompt Guide ### Quick Color Reference - Background: Black (`{colors.background}`) - Primary text: White (`{colors.ink}`) - CTA fill: White (`{colors.primary}`) - CTA text: Black (`{colors.on-primary}`) - Secondary text: Midgray (`{colors.ink-secondary}`) - Section divider: `{colors.border-subtle}` - Input underline (resting): `{colors.border-mid}` - Input underline (focus): `{colors.border}` ### Example Component Prompts - "Build a full-bleed campaign hero on `{colors.background}` black. Fill the viewport with low-key editorial photography — a model in dark studio light, coat architecture resolving in shadow. Float the KHAITE wordmark centered in `{typography.display-hero}` ITC Galliard at top (white `{colors.ink}`, no fill behind it). Navigation: flat `{typography.nav-link}` 13px Fakt Pro, spaced evenly left and right of the centered logotype. No overlay tint on the image — the dark photography is its own canvas." - "Create a primary CTA button: `{colors.primary}` white fill, `{colors.on-primary}` black text, `{typography.button-ui}` (12px Fakt Pro, letter-spacing: 0.3px), `border-radius: 0`, `padding: 12px 24px`, `border: 1px solid {colors.border}`. Hover desaturates fill to `{colors.primary-hover}` via `transition: background-color 0.3s ease, border-color 0.3s ease`. No transform, no shadow, no scale." - "Design a product card on a black (`{colors.background}`) surface: full-width portrait editorial image edge-to-edge at top, `border-radius: 0`, no border, no shadow. Below the image: `{typography.heading-sub}` product name (14px Fakt Pro Bold) in `{colors.ink}`, then `{typography.body}` price in `{colors.ink-secondary}`. No card chrome — darkness itself is the frame." - "Build a desktop navigation bar: `{colors.background}` black. KHAITE wordmark in `{typography.display}` ITC Galliard, centered, `{colors.ink}` white. Left nav items (Ready-to-Wear, Collections, Handbags, Shoes, Accessories, About) and right utilities (Search, Account, Bag) — all in `{typography.nav-link}` 13px Fakt Pro. Hover: `color` transitions to `{colors.text-hover}` in `0.3s ease`. No underline, no background highlight, no border-bottom." - "Create a product detail form input: `{colors.background}` black fill, no visible border on three sides, `border-bottom: 1px solid {colors.border-mid}`, `border-radius: 0`, `{typography.body}` 14px Fakt Pro, `{colors.ink}` text, `{colors.ink-ghost}` placeholder. Focus: underline updates to `{colors.border}` white + `outline: 1px solid {colors.border}`. No glow, no background change. Pair with a `{components.button-primary}` to the right." - "Render an accordion panel list on `{colors.background}`: each panel has `border-top: 1px solid {colors.border-subtle}`, `padding: 16px 0px`. Header in `{typography.heading-sub}` Fakt Pro Bold `{colors.ink}`, expand icon right-aligned. Expanded body copy in `{typography.body}` `{colors.ink-secondary}`. Transition panel open/close via `max-height` and `opacity` at `0.3s ease`. Use for product size guides, material details, shipping info." ### Iteration Guide 1. Start on absolute black (`{colors.background}`) — remove any element that lifts the canvas to a tinted dark or introduces any background color other than `{colors.background}`. 2. Display headings must use ITC Galliard (`{typography.display-hero}` / `{typography.display}` / `{typography.heading-section}`). If a sans-serif appears in a headline role, replace it with Galliard. 3. Apply `border-radius: 0` to every primary UI element. If a button, card, or input shows visible rounding, flatten it. 4. Confirm all animation uses `0.3s ease` on `color`, `opacity`, `border-color`, `background-color` only. Remove any `transform`, `scale`, or `translate` transitions. 5. CTA buttons should be white (`{colors.primary}`) on black — if a dark button appears on this canvas, verify it is a secondary action using `{colors.primary-container}`, not an error in the color assignment. 6. Verify `{colors.ink-secondary}` appears only on supporting metadata; it should never be used for primary labels or interactive elements. 7. Section rhythm: desktop vertical gaps between major sections should approach `{spacing.4xl}` (108px). If sections feel compressed, add vertical breathing room — darkness requires space to read as atmosphere. 8. Photography should always be low-key and editorial — dark studio light, architectural garment detail. Bright, high-key product shots undermine the system's character; they belong in thumbnail grids only. --- ## 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 Khaite. Brand names and trademarks belong to their respective owners.