fullstack.rocks skills · demos

I inspected examples/maison-lumen/BRIEF.md, researched public brand/design case studies from leading luxury digital agencies (Pentagram, AREA 17, Build in Amsterdam, KMS Team, Wednesday, BIRCH, Construct), and extracted live production CSS tokens (@font-face, custom properties, hex palettes, type scales, letter-spacing, and grid layouts) from 10 luxury houses across automotive, horology, hospitality, and fashion. No files were created or modified (read-only task).

Digital Flagship Design Guidelines of the Great Luxury Houses

1. Houses & Agencies Studied (10 Houses Across 4 Verticals)

Vertical House Primary URL & Agency / Typography Reference Core Digital Posture
Automotive Rolls-Royce Motor Cars rolls-roycemotorcars.com · Pentagram (Case Study 1, Case Study 2) Nocturnal “House of Luxury” showroom; bespoke sans-serif + beveled Art Deco display
Automotive Bentley Motors bentleymotors.com · KMS Team (Bentley Case Study) Technical British grand touring; dark-mode configurator precision
Horology Audemars Piguet audemarspiguet.com Architectural museum/gallery; ultra-thin grotesque + sharp italic serif
Horology Patek Philippe patek.com · Fonts in Use Archival Geneva salon; warm parchment, bronze/gold accents, print-editorial serif
Horology A. Lange & Söhne alange-soehne.com (Live CSS) Saxon engineering austerity; obsidian #1b1b1b canvas and German-silver tokens
Hospitality Aman aman.com · Blaze Type · BP&O / Construct Architectural sanctuary; warm linen #f3eee7, soft charcoal #1d1d1b, zero visual noise
Hospitality Belmond belmond.com (Live CSS) Cinematic slow travel; 24-column editorial subgrid and warm stone #efefec
Hospitality Rosewood Hotels rosewoodhotels.com · The Brand Identity / BIRCH “Sense of Place” manor editorial; high-contrast italic serif + estate greens/parchment
Fashion Hermès hermes.com · Bonhomme Paris Glossary Tactile craft & whimsy; ecru/parchment canvas with controlled orange punctuation
Fashion Chanel (with Loro Piana & Balenciaga) chanel.com (Bonhomme) · loropiana.com · AREA 17 Balenciaga Monochromatic couture authority (Chanel), cashmere warmth (Loro Piana), gallery restraint (AREA 17)

2. Typography: Pairings, Scales, Weights, and Tracking

Luxury houses reject bold weights (700+) and tight UI cramming. Hierarchy is achieved through scale contrast, light weights (100–400), italic editorial serifs, and wide-tracked uppercase micro-labels.

3. Colour Palettes: The Ratio of Black, Ivory, and Metallic

Luxury websites avoid raw browser defaults (#000000 text on #FFFFFF backgrounds) except in high-fashion couture (Chanel, Bottega Veneta). Instead, hospitality and heritage houses use warm mineral/paper neutrals (~80–85% of viewport), softened obsidian/anthracite (~10–15%), and restrained metallic or heritage accents (<5%, limited to 1px hairlines, active states, and monograms).

House Canvas / Ivory / Surface Hexes Dark / Text / Obsidian Hexes Metallic & Heritage Accent Hexes
Aman (aman.com) #F3EEE7 / #F3EEE3 (warm linen), #EBE8E5 (stone), #D4CDC3 (sand border) #1D1D1B / #313131 (anthracite), #404040, #7C7C7C (warm grey) #B08D57 (muted bronze), #325E1C (botanical accent)
Audemars Piguet (audemarspiguet.com) #F6F5F3 (beige96), #E7E4DF (beige89), #FBFAF9 #1B1B1B (grey11), #000000, #757575 (boulder) #02291F (Vallée de Joux deep green), #456148 (brand green), #2B4F4F
A. Lange & Söhne (alange-soehne.com) #FAFAFA, #E8E7E6, #D9D9D9 (argentine silver) #1B1B1B (primary dark showcase), #393939 #B9AF8C (--minute-repeater-zeitwerk-color-gold, German silver/champagne), #B8B8B8
Patek Philippe (patek.com) #FCFBF9 (parchment), #FFFFFF #1A1A1A (charcoal), #8C7A66 (warm taupe) #C6BA82 (Calatrava pale gold)
Belmond (belmond.com) #FBFBFA, #F7F7F5, #F1F1EF, #EFEFEC (stone-400) #0F1D2F (heritage midnight), #4D4D4D (midnight-350) #E84221 (terracotta accent, used <2% for CTAs)
Rosewood (rosewoodhotels.com) #E8E5CF (parchment), #F7F4F0 (cream) #191919 (near-black), #031633 (manor navy), #4C4C4C #435643 / #01503B (estate green), #664D03 / #FFE69C (antique brass)
Rolls-Royce & Bentley (pentagram.com, kms-team.com) #F5F5F3 (technical light mode) #121212 / #0A0A0A (dark showroom primary) #2A1B2E (Purple Spirit), #004225 (British Racing Green), #C0C0C0 (chrome)
Hermès & Chanel (hermes.com, chanel.com) #EAE0D5 / #FAF7F2 (Hermès ecru), #FFFFFF (Chanel) #0A0908 / #444444 (Hermès), #000000 / #3E3E3E (Chanel) #F37021 (Hermès Orange, interactive punctuation only)

Key Rule on Metallics: None of the 10 houses use CSS linear-gradient “faux gold” on buttons. Metallic tones (#C6BA82, #B9AF8C, #B08D57) are flat, desaturated champagne/brass hexes that pass or pair with high-contrast text, leaving real specular reflection to macro photography.

4. Whitespace, Grid Architecture, and Concrete Spacing Scales

Luxury interfaces treat whitespace as architectural gallery floor (AREA 17 Balenciaga; Build in Amsterdam). At least 40%–55% of any viewport outside full-bleed hero media remains open background canvas.

5. Imagery, Art Direction, and Photography vs. Illustration

6. Motion, Interaction, and Accessibility

Luxury motion simulates physical inertia and unhurried weight (Build in Amsterdam, AREA 17).

7. How Product and Price Are (and Are Not) Shown

Luxury digital flagships invert standard e-commerce UX (Baymard Institute, NN/g): story and provenance precede specification, and specification precedes price.

8. What Maison Lumen Should Do (8 Concrete, Testable Recommendations)

These rules apply directly to Maison Lumen’s own flagship and our three showcase clients (the electric grand tourer automaker, the independent haute horology house, and the invitation-only private estate hospitality house) while meeting every constraint in BRIEF.md:

  1. Ban #000000 on #FFFFFF; enforce warm mineral light themes and obsidian dark themes with >= 4.5:1 WCAG 2.2 AA contrast.
    • Testable rule: For Maison Lumen and the hospitality/horology light sections, set canvas backgrounds to warm linen/parchment (#F5F2EB to #F3EEE7) and primary text to soft anthracite (#1D1D1B or #1B1B1B, contrast ratio ~15.4:1). For the electric grand tourer and horology movement showcases, use obsidian (#121212 to #1B1B1B) with warm alabaster text (#F6F5F3) and flat champagne/silver accents (#C6BA82 or #B9AF8C), keeping secondary muted text at #585858 (on light) or #B0B0B0 (on dark) so every text node passes WCAG 2.2 AA (>= 4.5:1).
  2. Pair one light/regular high-contrast Google Font serif (300–400) with one geometric/humanist Google Font sans-serif (300–500), and never use font-weight: 700+.
    • Testable rule: Load at most 2 font families from Google Fonts (e.g., Cormorant Garamond, Newsreader, Instrument Serif, or Playfair Display at weights 300/400 + 400 italic for display/editorial; Plus Jakarta Sans, Inter, or DM Sans at 300/400/500 for UI/specs). Inspect computed styles: zero elements on any page may compute to font-weight >= 600.
  3. Lock a 6-step rem typographic scale with tight display leading (1.0–1.15), relaxed body leading (1.6), and wide uppercase tracking (0.15em–0.20em).
    • Testable rule: Define CSS custom properties: --text-xs: 0.75rem (12px, uppercase eyebrows/labels with letter-spacing: 0.16em), --text-sm: 0.875rem (14px, captions/specs), --text-base: 1rem (16px, body copy with line-height: 1.6 and max-width: 62ch), --text-lg: 1.25rem (20px, lead paragraphs), --text-xl: clamp(1.75rem, 3vw, 2.5rem) (H2/H3), and --text-display: clamp(2.5rem, 5.5vw, 5.25rem) (H1 with line-height: 1.05 and letter-spacing: -0.02em).
  4. Enforce an 8px-base architectural spacing scale with 96px–176px desktop vertical section padding and a 12-column asymmetrical CSS Grid.
    • Testable rule: Use a strict spacing token scale (8px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 176px). Every top-level <section> must have at least clamp(5rem, 10vw, 11rem) (80px–176px) of vertical padding, and multi-card rows must never exceed 3 columns on desktop (1 column on mobile).
  5. Enforce border-radius: 0px and box-shadow: none across all imagery, cards, and buttons.
    • Testable rule: Audit styles.css across all four sites: zero border-radius values above 0px (except circular 50% play/control buttons if used) and zero drop shadows on cards. Separate sections and specification rows using 1px solid hairlines at 12%–18% opacity of the foreground color.
  6. Use photography for atmosphere and material grain, and restrict SVG graphics to 1px technical blueprints, monograms, and estate maps.
    • Testable rule: Frame photography in tall editorial (4:5) and cinematic (16:9 / 21:9) ratios with descriptive alt attributes detailing material and light. Include at least one 1px-stroke technical SVG per client (an exploded calibre diagram for the horology house, an aerodynamic/chassis line blueprint for the electric grand tourer, and a topographic island/estate plan for the hospitality house).
  7. Replace all transactional e-commerce chrome with progressive disclosure, technical provenance tables, and concierge inquiry flows.
    • Testable rule: Never display a currency symbol (€, $, £), price tag, star rating, or “Buy/Add to Cart” button on the homepage or hero sections. Use a specification ledger (dl/dt/dd or table) to prove craft with numbers (e.g., 312 hand-finished components, 72-hour power reserve, 12 bespoke commissions per year, 8 guest residences), followed by a single primary CTA (“Request a Private Salon Appointment”, “Commission a Specification”, or “Inquire with the Private Office”).
  8. Use slow, inertial CSS transitions (500ms–800ms cubic-bezier(0.22, 1, 0.36, 1)) and hard-disable them under @media (prefers-reduced-motion: reduce).
    • Testable rule: Limit motion to link-underline reveals (400ms), subtle image hover zooms (scale(1.02) over 800ms), and scroll-triggered opacity/translate reveals (600ms). Include an explicit @media (prefers-reduced-motion: reduce) block in every styles.css that sets animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;, and style :focus-visible with a high-contrast 2px solid outline (outline-offset: 4px).
This site is open source. Improve this page.