Premium
Mission
Exude exclusivity through restraint — every pixel is intentional, every gap measured, and the result feels like something few can afford but many admire.
Brand
Colors
#0A0A0A — Background (deep black)#C9A96E — Primary (champagne gold)#1C1C1C — Secondary (charcoal)#F5F0E8 — Surface (ivory cream)#2A2A2A — Card (dark slate)#E8DCC4 — Text (warm white)
Typography
- Headings: Cormorant Garamond (serif, timeless luxe)
- Body: Work Sans (sans-serif, clean precision)
- Scale: xs 0.625rem / sm 0.75rem / base 0.938rem / lg 1.125rem / xl 1.5rem / 2xl 2rem / 3xl 3rem
Spacing
- 4px grid, precisely enforced
- Section padding: 8rem vertical, 4rem horizontal (generous but not wasteful)
- Card gaps: 2.5rem
- Max content width: 72rem
Components
- Buttons: Hairline 1px gold border, transparent fill, 0px radius, hover fills with gold gradient (subtle), text tracking: 0.15em
- Cards: Dark slate bg, 1px subtle border, precise padding (2.5rem), hover reveals hidden gold accent line
- Nav: Centered, serif logo, thin top and bottom borders (1px gold), links in wide letter-spacing sans-serif
- Hero: Full-viewport dark background, thin centered headline in Cormorant, gold horizontal rule, no CTA — just presence
- Footer: Dark bg, thin gold top rule, centered collage of 3-5 links in uppercase tracked-out sans-serif
Accessibility
- Contrast ratio >= 4.5:1 — gold on dark is risky; verify every combination
- Focus ring: 1px solid #C9A96E with 3px offset, sharp
- Reduced motion: disable all hover reveals and transition animations
- Minimum font size: 0.75rem — tracking and small sizes still legible
- Gold accent never used for functional indicators (focus, error, success) — reserve for brand
Writing Tone
Refined, reserved, aspirational. Never a period at the end of a heading. No contractions. Vocabulary is elevated but never pretentious. "Curated" over "selected." "Exceptional" over "great." Silent confidence.
Do / Don't
Do
- Use letter-spacing (0.1em–0.2em) on headings and labels for airy elegance
- Apply subtle CSS transitions (400ms+ ease) for hover states
- Show large, aspirational photography at full width with dark overlays
- Limit color to 6 hex values — let black and gold do the work
- Keep borders at exactly 1px — luxury is in the details
Don't
- Use any border-radius — luxury is sharp
- Use more than two typefaces (one serif, one sans-serif)
- Mix gold hex values — one gold, perfectly consistent
- Add box-shadows — flat, precise, sharp
- Use animations under 400ms — premium moves slowly
Quality Gates
1---2name: premium3description: Luxury brand aesthetic with refined gold/black palette, precise spacing, and exclusive feel.4---5# Premium6## Mission7Exude exclusivity through restraint — every pixel is intentional, every gap measured, and the result feels like something few can afford but many admire.8## Brand9### Colors10- `#0A0A0A` — Background (deep black)11- `#C9A96E` — Primary (champagne gold)12- `#1C1C1C` — Secondary (charcoal)13- `#F5F0E8` — Surface (ivory cream)14- `#2A2A2A` — Card (dark slate)15- `#E8DCC4` — Text (warm white)16### Typography17- Headings: **Cormorant Garamond** (serif, timeless luxe)18- Body: **Work Sans** (sans-serif, clean precision)19- Scale: xs 0.625rem / sm 0.75rem / base 0.938rem / lg 1.125rem / xl 1.5rem / 2xl 2rem / 3xl 3rem20### Spacing21- 4px grid, precisely enforced22- Section padding: 8rem vertical, 4rem horizontal (generous but not wasteful)23- Card gaps: 2.5rem24- Max content width: 72rem25### Components26- **Buttons**: Hairline 1px gold border, transparent fill, 0px radius, hover fills with gold gradient (subtle), text tracking: 0.15em27- **Cards**: Dark slate bg, 1px subtle border, precise padding (2.5rem), hover reveals hidden gold accent line28- **Nav**: Centered, serif logo, thin top and bottom borders (1px gold), links in wide letter-spacing sans-serif29- **Hero**: Full-viewport dark background, thin centered headline in Cormorant, gold horizontal rule, no CTA — just presence30- **Footer**: Dark bg, thin gold top rule, centered collage of 3-5 links in uppercase tracked-out sans-serif31### Accessibility32- Contrast ratio >= 4.5:1 — gold on dark is risky; verify every combination33- Focus ring: 1px solid #C9A96E with 3px offset, sharp34- Reduced motion: disable all hover reveals and transition animations35- Minimum font size: 0.75rem — tracking and small sizes still legible36- Gold accent never used for functional indicators (focus, error, success) — reserve for brand37### Writing Tone38Refined, reserved, aspirational. Never a period at the end of a heading. No contractions. Vocabulary is elevated but never pretentious. "Curated" over "selected." "Exceptional" over "great." Silent confidence.39## Do / Don't40### Do41- Use letter-spacing (0.1em–0.2em) on headings and labels for airy elegance42- Apply subtle CSS transitions (400ms+ ease) for hover states43- Show large, aspirational photography at full width with dark overlays44- Limit color to 6 hex values — let black and gold do the work45- Keep borders at exactly 1px — luxury is in the details46### Don't47- Use any border-radius — luxury is sharp48- Use more than two typefaces (one serif, one sans-serif)49- Mix gold hex values — one gold, perfectly consistent50- Add box-shadows — flat, precise, sharp51- Use animations under 400ms — premium moves slowly52## Quality Gates53- [ ] Only one gold hex value (#C9A96E) in entire stylesheet54- [ ] No border-radius on any element55- [ ] All hover transitions >= 400ms duration56- [ ] No box-shadows in CSS57- [ ] Letter-spacing applied to all heading and label elements58- [ ] Page layouts cleanly at 320px with proportional spacing
jdsadminllc