Design a light-mode web interface screen: warm linen surfaces, soft daylight shadows, and curated editorial portraiture for boutique lifestyle creatives.
LAYOUT
The rhythm is built on an asymmetric multi-column grid with alternating text-and-image pairings. A left-aligned hero copy block balances an overlapping 3-card photo spread on the right, punctuated by a four-logo press bar. The bio section mirrors this with an offset full-height portrait framed by a floating booking card and decorative dot-grid accents.
PALETTE (use these exact hex values)
- #FAF9F6 — Linen White: Primary background canvas creating an organic, gallery-like ambience
- #FFFFFF — Pure White: Background for floating badge overlays, info cards, and service tiles
- #1A365D — Deep Navy: Primary CTA button fill, active states, and dominant visual weight
- #C59B63 — Warm Ochre: Eyebrow headers, outline borders, checkmark icons, and active slider dots
- #1F2421 — Charcoal Ink: Primary editorial headings, brand wordmark, and strong body text
- #59606D — Muted Slate: Body paragraphs, secondary descriptions, and video preview text
- #EBE5DF — Soft Sand Border: Dividers, light container borders, and dot-matrix decorative patterns
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Italianno, EB Garamond), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 20px subheading, 34px heading, 56px display. Tracking -0.01em at display, 0 at heading. The typography speaks with quiet editorial confidence reminiscent of boutique art monographs and independent lifestyle magazines. Cormorant Garamond lends literary warmth and timeless craft, balanced by clean geometric sans-serif structural elements for modern clarity. Google Fonts provides immediate drop-in equivalents via Cormorant Garamond and Inter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1200px container, airy density.
DEPTH
Depth is created organically through physical overlap rather than intense shadows. Floating cards and hero image collages use very soft, extended blurs (0 16px 36px rgba(0,0,0,0.06)) simulating natural diffused window light. Elements rest directly on or just above the linen surface.
IMAGERY
Photography focuses on natural light, warm editorial lifestyle framing, tactile textures (linen, ceramics, knitwear), and unscripted moments. Composition is calm and sun-drenched with amber, ecru, and soft earth tones. Cold studio backdrops or harsh flash photography violate the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the tiered, overlapping image triptych with floating micro-cards that break boundary boxes. It creates a physical, curated desk-spread feel that instantly distinguishes the site from rigid boxed grids. Misusing it involves flattening all cards to identical heights or using mismatched aspect ratios.
MUST
- Always pair all-caps tracked-out sans eyebrows (#C59B63) with Cormorant Garamond headings.
- Use generous whitespace (96px+ between major sections) to maintain an unhurried, luxurious cadence.
- Round imagery corners to precisely 12px-16px for a polished, tailored presentation.
- Anchor high-priority conversions with the singular dark navy button (#1A365D) to focus intent.
AVOID
- Do not introduce pure black (#000000); use deep navy or rich charcoal ink (#1F2421).
- Do not use sharp 0px corners on content containers or cards.
- Avoid high-saturation neon or cold digital gradient accents.
- Do not center-align body paragraphs; reserve center alignment strictly for section headers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub