Design a light-mode web interface screen: coastal executive coaching framed by airy cream surfaces, deep cerulean accents, and elegant editorial serifs.
LAYOUT
The page uses an application-style fixed-width left rail (240px) paired with an expansive, scrollable editorial main container. The main column leads with a top utility bar, transitions to an asymmetric hero with overlapping photographic elements, and resolves into symmetrical 3-column feature grids, metric summaries, and article cards before ending on a contained dark-teal banner.
PALETTE (use these exact hex values)
- #FBF9F5 — Canvas Warm Cream: Global background for the main content area giving warmth and organic luxury
- #FFFFFF — Surface White: Background for floating cards, sidebar base, and interactive containers
- #1976D2 — Haven Ocean Blue: Primary buttons, active indicators, and prominent callouts
- #114B4B — Deep Forest Slate: Deep grounding tone for quote blocks, callout banners, and footer promo panels
- #C27838 — Amber Ochre: Eyebrow rule lines, welcome badges, and secondary highlight icons
- #1E293B — Primary Charcoal: Display headings, section titles, and high-emphasis body text
- #64748B — Muted Slate Text: Supporting descriptions, timestamps, metadata, and inactive nav items
- #EDE8E1 — Subtle Cream Border: Divider lines, unselected card outlines, and timeline track rules
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond,Cinzel,Baskerville), weights 400/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 32px heading, 42px heading-lg, 56px display. Tracking -0.015em at display. The voice is introspective, premium, and calm. Playfair Display delivers literary gravitas suited for executive reflection, especially when contrasted with the functional neutral precision of Inter for operational details. Cormorant Garamond serves as an ideal high-luxury open-source substitute.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1200px container, airy density.
DEPTH
Elevation is deliberately restrained to foster calm confidence. Base cards float on ivory with a delicate 0 2px 8px rgba(30, 41, 59, 0.04) shadow and 1px crisp hairline borders. Floating overlays like the hero quote card use a firmer 0 8px 24px rgba(17, 75, 75, 0.15) shadow to establish clear depth over photographic layers.
IMAGERY
Photography emphasizes serene natural environments—misty coastal shores, wooden walkways through pine forests, and quiet mountain ridges. Human subjects appear contemplative, looking outward or engaged in intentional work, never posed with stiff corporate smiles.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the hero title's contrasting italicized script keyword ('idea.') juxtaposed against bold classical serifs, paired directly with a dark forest-teal quote card overlapping a serene beach photograph.
MUST
- Pair clean sans-serif UI typography with elegant serif titles having an italicized word for emotional accent.
- Use warm ivory #FBF9F5 for canvas contrast against crisp white #FFFFFF card components.
- Keep card corner radii consistent at 14px to 16px with 1px borders in pale beige #EDE8E1.
- Anchor nature and coastal landscape photography with rich deep teal #114B4B and royal blue #1976D2.
AVOID
- Never use pitch black #000000; rely on charcoal #1E293B for softer editorial contrast.
- Do not make buttons pill-shaped; keep them lightly rounded with 6px to 8px corner radii.
- Avoid harsh high-contrast drop shadows; use diffuse warm-tinted box shadows under 8px blur.
- Do not clutter cards with saturated multi-color tags; use monochrome or soft pastel badges.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2208:3728. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
