Design System: Luxury Brand

The luxury brand embodies timeless elegance with a flamboyant, refined, and deeply personal touch. The design system prioritizes sophisticated minimalism through a carefully curated palette of deep abyssal tones, warm corals, ocean teals, and soft peach. This dual-themed system (Light & Dark) allows for a seamless transition between a bright, airy heritage aesthetic and a deep, immersive evening experience. Every element exudes intentionality—clean lines, generous whitespace, and precise typography create an atmosphere of effortless sophistication. The aesthetic uses strategic bursts of warm color against a structural dark foundation, speaking to a positive, discerning, and vibrant clientele.

Key Characteristics

• Dual-theme capability (Light/Dark) for optimal user comfort and exclusivity

• Restrained foundation with vibrant, warm color interventions for interactivity

• Premium use of whitespace and breathing room throughout layouts

• Elegant serif typography paired with refined sans-serif for readability

• Distinctive tonal contrast between structural elements and interactive accents

• Emphasis on craftsmanship through precise alignment and proportional spacing

• Bold yet understated luxury aesthetic—flamboyant but highly controlled

• Modern, heritage-in-the-making design language

### Buttons

#### Primary Button (Solid)

• Background: #D96F66

• Text Color: #FFFFFF

• Font: Manrope, 14px, 500, line-height 18px

• Padding: 10px 23px

• Height: 40px

• Border Radius: 8px

• Border: none

• Hover State: Background #307B8C, text #FFFFFF

• Active State: Background #040D0C, text #FFFFFF

• Disabled State: Background #CCCCCC, text #FFFFFF, cursor not-allowed

#### Secondary Button (Text)

• Background: transparent

• Text Color: #D96F66

• Font: Manrope, 15px, 400, line-height 24px

• Padding: 0px

• Hover State: Text color #040D0C, text-decoration underline

• Active State: Text color #040D0C

#### Ghost Button (Minimal)

• Background: transparent

• Text Color: #040D0C

• Font: Manrope, 12px, 400, line-height 13.8px

• Hover State: Text color #D96F66, opacity 0.8

### Cards & Containers

#### Product Card (Image + Meta)

• Background: #FFFFFF

• Border: 1px solid #307B8C (optional; often borderless)

• Border Radius: 0px

• Text Color: #040D0C

• Typography: Manrope, 12px, 400, line-height 13.8px

• Hover State: Subtle opacity shift on image (opacity: 0.9), border color #040D0C (if bordered)

#### Content Card (Editorial)

• Background: #F2B999

• Border Radius: 0px

• Padding: 24px

• Text Color: #040D0C

• Typography: Manrope, 15px, 400, line-height 24px

• Hover State: Background #FFFFFF

#### Modal / Dialog

• Background: #FFFFFF

• Border Radius: 3px

• Padding: 48px 40px

• Box Shadow: 0px 12px 28px rgba(4, 13, 12, 0.18)

• Text Color: #040D0C

• Close Button: 12px Manrope, #307B8C, hover #040D0C

### Inputs & Forms

#### Text Input

• Background: #FFFFFF

• Text Color: #040D0C

• Font: Manrope, 12px, 400, line-height normal

• Border: 1px solid #307B8C

• Border Radius: 0px

• Padding: 12px 16px

• Placeholder Color: #888888 (opacity 0.5)

• Focus State: Border color #040D0C, box-shadow 0 0 0 2px rgba(4, 13, 12, 0.1)

#### Form Label

• Font: Manrope, 12px, 400, line-height normal

• Text Color: #040D0C

• Margin Bottom: 8px

#### Checkbox / Radio

• Border: 1px solid #307B8C

• Background (Checked): #040D0C

• Checkmark Color: #FFFFFF

• Focus State: Box-shadow 0 0 0 2px rgba(4, 13, 12, 0.2)

### Navigation

#### Primary Navigation (Header)

• Background: #FFFFFF

• Typography: Manrope, 12px, 400, line-height normal

• Text Color: #040D0C

• Padding: 16px 24px

• Link Hover: Text color #D96F66, underline 1px solid #D96F66

• Active Link: Text color #040D0C, border-bottom 2px solid #040D0C

#### Footer Navigation

• Background: #F2B999

• Text Color: #040D0C

• Link Hover: Text color #D96F66, text-decoration underline

• Section Heading: Manrope, 12px, 500, color #040D0C

### Links

#### Inline Link

• Text Color: #D96F66

• Font: Manrope, 15px, 400, line-height 24px

• Text Decoration: none (default), underline (hover)

• Hover State: Color #040D0C, underline 1px solid #040D0C

### Dark Mode Specifics

#### Buttons (Primary)

• Background: #D96F66 (Sunset Coral)

• Text Color: #FFFFFF

• Hover State: Background #307B8C, text #FFFFFF

#### Cards & Inputs

• Dark Mode Background: #040D0C

• Dark Mode Border: 1px solid rgba(242, 185, 153, 0.2) (using Soft Peach at low opacity)

• Placeholder Text: #FFFFFF (opacity 0.4)

(Keep spacing exactly as defined in the original framework: 4px base unit, 1440px max-width container, abundant whitespace.)

### Quick Color Reference

• Primary CTA: Sunset Coral (#D96F66) background, white text; Ocean Teal (#307B8C) on hover

• Background: Pure White (#FFFFFF) primary, Soft Peach (#F2B999) secondary/editorial

• Body Text: Deep Abyssal (#040D0C)

• Links: Sunset Coral (#D96F66) default, underline and shift to Deep Abyssal (#040D0C) on hover

• Borders: Deep Abyssal (#040D0C) or Ocean Teal (#307B8C)

### Iteration Guide

1. Colors remain strictly within palette: Use #040D0C, #307B8C, #D96F66, #F2B999, and #FFFFFF. Use light generic grays only for disabled states.

2. Typography strictly enforced: EBGaramond (headings) and Manrope (body/UI).

3. Shape logic: 0px border-radius by default (sharp, high-fashion feel), 8px for primary buttons only.

### Dark Mode Implementation

1. Background Foundation: Always use Deep Abyssal (#040D0C). Never use pure #000000.

2. Elevation: Communicate depth by using slightly lighter variants of Abyssal (#1A2524) for cards or modals.

3. Text Contrast: Primary text must be Soft Peach (#F2B999) or White (#FFFFFF). Avoid using black text on dark surfaces.

4. Sunset Coral usage: In dark mode, ensure Sunset Coral buttons have sufficient "glow" by keeping them solid and vibrant.

5. Transparency: Use rgba(48, 123, 140, 0.3) (Ocean Teal) for subtle dividers to maintain the "oceanic" depth.