---
version: alpha
name: Privé Luxe
description: A soft-spoken luxury retail system with editorial serif headlines, airy spacing, and refined gold accents.
colors:
  primary: "#9A7A3A"
  primary-soft: "#C9A96E"
  secondary: "#0D0B09"
  tertiary: "#EDE5D8"
  neutral: "#F9F4ED"
  surface: "#FFFDFC"
  on-surface: "#0D0B09"
  border: "#C9A96E"
  muted: "#EDE5D8"
  error: "#B54A3A"
typography:
  headline-display:
    fontFamily: "Cormorant Garamond"
    fontSize: "64px"
    fontWeight: 400
    lineHeight: "64px"
    letterSpacing: "0px"
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "45px"
    fontWeight: 400
    lineHeight: "64px"
    letterSpacing: "0px"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "32px"
    fontWeight: 400
    lineHeight: "38px"
    letterSpacing: "0px"
  headline-sm:
    fontFamily: "Cormorant Garamond"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "30px"
    letterSpacing: "0px"
  body-lg:
    fontFamily: "DM Sans"
    fontSize: "23px"
    fontWeight: 400
    lineHeight: "28px"
    letterSpacing: "0px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "24px"
    letterSpacing: "0px"
  body-sm:
    fontFamily: "DM Sans"
    fontSize: "13px"
    fontWeight: 300
    lineHeight: "20px"
    letterSpacing: "0.02em"
  label-lg:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "24px"
    letterSpacing: "0.08em"
  label-md:
    fontFamily: "DM Sans"
    fontSize: "13px"
    fontWeight: 300
    lineHeight: "20px"
    letterSpacing: "0.08em"
  label-sm:
    fontFamily: "DM Sans"
    fontSize: "12px"
    fontWeight: 300
    lineHeight: "16px"
    letterSpacing: "0.1em"
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 8px
  sm: 24px
  md: 32px
  lg: 64px
  xl: 144px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    height: "48px"
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "16px"
    height: "48px"
  button-tertiary:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "0px"
    height: "auto"
  card:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: "32px"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px"
## Overview
Privé feels like an intimate luxury membership brand: editorial, restrained, and premium without being loud. The mood is calm and spacious, with lots of breathing room that lets the typography and gold accent do the work. It targets shoppers who value exclusivity, refinement, and a boutique travel-retail experience.

## Colors
- **Primary (#9A7A3A):** A warm antique gold used for the brand mark, accent text, and action emphasis. It carries the luxury signal across the page without introducing strong chroma.
- **Primary-soft (#C9A96E):** A lighter gold used for subtle borders and secondary accents, especially where the interface needs separation without harsh contrast.
- **Secondary (#0D0B09):** A near-black ink for body copy, navigation, and the most important reading content. It gives the serif headlines a crisp, editorial presence.
- **Tertiary (#EDE5D8):** A soft beige tone used for cards and supporting surfaces. It keeps the system warm and tactile rather than sterile.
- **Neutral (#F9F4ED):** The dominant page background, an ivory cream that creates the brand’s airy, high-end atmosphere.
- **Surface (#FFFDFC):** A near-white surface tone for the cleanest interface layers when a brighter panel is needed.
- **On-surface (#0D0B09):** The primary text color on light surfaces, chosen for readability and strong contrast.
- **Border (#C9A96E):** A muted gilded line color for outlines and framed buttons, reinforcing the premium finish.
- **Muted (#EDE5D8):** A soft neutral used where low-emphasis blocks or subtle separation are needed.
- **Error (#B54A3A):** A restrained warm red for validation and destructive states, designed to stay in character with the palette.

## Typography
The system combines two distinct voices: Cormorant Garamond for fashion-editorial headlines and DM Sans for all supporting text and controls. Headlines are light-weight, elegant, and centered around large serif forms, while body copy stays understated at 300–400 weight for a quiet luxury feel.

`headline-display`, `headline-lg`, and `headline-md` are the signature display styles, used for hero statements and section introductions. `headline-sm` can be used for smaller editorial headings when the page needs hierarchy without losing the brand’s refined tone.

`body-lg` and `body-md` support product and brand messaging with comfortable line lengths and generous leading. `body-sm`, `label-md`, and `label-sm` are intentionally letter-spaced to create the small-cap, luxury-retail cadence seen in navigation, button text, and meta labels.

Uppercase behavior is subtle and selective rather than aggressive. The visible interface relies on tracking rather than heavy weight to make labels feel premium and deliberate.

## Layout & Spacing
The layout is centered, spacious, and built around a fixed-feeling hero composition rather than a dense grid. Navigation spans the top with wide horizontal separation, while the main content sits in a narrow central column that aligns text and imagery vertically.

Spacing follows a generous rhythm: `8px` for small gaps, `24px` and `32px` for content relationships, `64px` for major section separation, and `144px` for large hero breathing room. This creates a slow, luxurious pacing that matches the brand’s membership-only positioning.

Use ample vertical padding around sections and keep cards or framed content comfortably inset. Buttons and small interface elements should feel evenly spaced, with consistent height and no cramped clusters.

## Elevation & Depth
The interface is intentionally flat. Instead of relying on shadow stacks, it uses color contrast, gold outlines, and spacious composition to create hierarchy.

Cards and framed buttons use thin borders in the gilded range rather than pronounced depth. This keeps the experience elegant and print-like, which suits the luxury editorial tone.

## Shapes
The shape language is architectural and restrained. Most interactive elements are square-cornered with `rounded.none`, giving the UI a precise, tailored feel.

When rounding appears, it is minimal and reserved for softer supporting surfaces like cards (`rounded.md`). Circular shapes should be limited to icon badges or brand marks, where a fuller silhouette supports recognition.

## Components
**Buttons:** Primary buttons use `button-primary` with a gold background, cream text, `48px` height, `16px` padding, and no corner radius. Secondary buttons use `button-secondary` with a cream background and gold border treatment, matching the framed CTA visible in the design. Tertiary buttons use `button-tertiary` and should read as text-first actions with no enclosing box. Button text should use `label-md` or a similar small, tracked sans style.

**Cards:** Use `card` for soft content containers. Keep them warm, lightly bordered, and padded at `32px`; avoid shadows and avoid making cards feel like app chrome.

**Inputs:** Inputs should be quiet and minimal, using the light surface tone, simple borders, and square corners. Prioritize legibility and spacious internal padding over decorative styling.

**Navigation and links:** Top-nav items and utility links should use `label-md` or `body-sm` sizing with subtle tracking. Links should feel refined, not noisy; avoid underlines unless a link is specifically meant to read as textual navigation.

**Brand marks and badges:** Circular or wax-seal-like motifs should use the primary gold and may sit alone without shadows. They should function as a premium signature element rather than a decorative overload.

## Do's and Don'ts
- Do keep the page spacious and centered, with a strong editorial hero and large surrounding whitespace.
- Do use the gold accent sparingly for emphasis, borders, and brand signatures.
- Do rely on Cormorant Garamond for the emotional headline voice and DM Sans for clarity in navigation and utility text.
- Do preserve the flat, print-like look; hierarchy should come from contrast and spacing, not heavy shadow.
- Don't introduce bright saturated colors that compete with the muted luxury palette.
- Don't round buttons heavily or turn the interface into a playful consumer app.
- Don't crowd sections, stack too many elements per row, or compress the generous vertical rhythm.
- Don't use bold weights as the primary method of emphasis; use size, tracking, and color first.