Duchess

Overview

Duchess is an upscale dining destination that celebrates refined elegance through a carefully curated visual language. The brand serves discerning guests seeking exceptional culinary experiences in a sophisticated, welcoming environment. The design aesthetic draws from Architectural Minimalism—clean lines, generous whitespace, and a restrained color palette punctuated by jewel-toned accents (magenta #e878e8 and deep blue #1e73be) that evoke luxury and warmth. The UI conveys calm confidence: every element is intentional, every interaction feels considered. Voice: warm yet authoritative, conversational but never casual. Example: "Discover our seasonal menu, crafted to celebrate the finest ingredients and time-honored techniques."

Colors

The Duchess color system balances a luminous, neutral foundation with strategic accent colors that drive attention and emotion. Surface colors (#ffffff, #f7f7f7, #ebebeb) create a clean, premium backdrop that emphasizes content and imagery. Primary (#e878e8, a vibrant magenta) is reserved for call-to-action buttons, interactive states, and key brand moments—it appears on the hero 'VIEW MENU' button and signals interactivity throughout. Secondary (#1e73be, a refined cobalt) supports navigation and secondary actions, providing visual hierarchy without competing for attention. Tertiary (#b5963b, a warm gold) accents menu highlights, badges, and decorative elements, evoking the brand's sophisticated palette. The on-surface text color (#2a2a2a) ensures legibility at 14px body size with 400 font

Typography

The type system pairs Abril Fatface—a high-contrast serif display font—with Cairo, a warm geometric sans-serif for body and UI text. Abril Fatface (700 weight, -0.04em letterSpacing) anchors headlines and the hero tagline 'Wonderful Things Happen' at 40–60px, commanding attention without aggression. Cairo (400–600 weight) handles navigation, body copy, and labels at 12–18px, maintaining readability and approachability. The 28px headline-md (Cairo, 600 weight) bridges display and body scales. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (label-sm, 12px) when overlaid on photographic backgrounds to ensure contrast. Maintain 1.5 line-height multiplier (24px for 16px body) for comfortable reading in dense content blocks.

Layout

The page employs a fluid 12-column grid with a max-width of 1280px, centering content on larger screens and collapsing to full-width on mobile. The hero section spans full viewport height with a background image and overlay, anchoring the brand narrative. Navigation occupies a fixed 80px header with 24px horizontal gutter spacing. Content sections use 40px (lg spacing) for vertical separation between major blocks, 24px (md spacing) for subsection breaks, and 12px (sm spacing) for internal component spacing. The container max-width of 1280px ensures comfortable reading line-lengths (50–75 characters) for body text at 16px. Whitespace is generous: padding within cards is 24px, margins between sections are 40–64px. This rhythm creates visual breathing room and emphasizes the premium, unhurrie

Elevation & Depth

Depth is achieved through subtle, restrained shadows that suggest layering without visual heaviness. Level 1 (Base): flat surfaces at surface-container (#f7f7f7) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), applied to cards and input fields, creating a barely perceptible lift. Level 3 (Hover & Interactive): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on card-hover and elevated modals, signaling interactivity. Level 4 (Modals & Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) for full-screen overlays and prominent modals. Shadows use pure black (

Shapes

The shape philosophy is 'Refined Geometry'—sharp, intentional corners that convey sophistication and control. Buttons use rounded.sm (4px / 0.25rem) for a subtle, professional appearance; cards use rounded.lg (16px / 1rem) for a softer, more inviting feel. Input fields default to rounded.DEFAULT (8px / 0.5rem), balancing approachability with formality. Badges and pills use rounded.full (9999px) to denote status and non-critical information. The hero 'VIEW MENU' button employs a custom border-radius: 5px 0px 0px (asymmetrical rounding on top-left only), creating a distinctive, brand-specific ac

Components

Action Elements Buttons are the primary interaction mechanism. button-primary (#e878e8, 48px height, 12px 24px padding, rounded.sm) uses Cairo label-md (14px, 600 weight) in white text. On hover, shift to #d65dd6 (darker magenta) with a 200ms ease-in-out transition. button-secondary (#1e73be) mirrors the primary structure but uses cobalt; on hover, darken to #1a5fa0. button-ghost uses a transparent background with a 1px solid primary border; on hover, fill with primary-container (#f5c8f5) and shift text to on-primary-container (#8b2d8b). All buttons include cursor: pointer and transition: background-color 200ms ease-in-out.

Containers & Surfaces Cards (card component) use surface-container (#f7f7f7) background, rounded.lg (16px), 24px padding, and elevation.sm shadow. On hover, sh

Do's and Don'ts

**Do**

• Do use primary (#e878e8) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain 24px gutter spacing on all sides of content containers; this breathing room is essential to the premium aesthetic.
• Do apply rounded.sm (4px) to buttons and rounded.lg (16px) to cards; this distinction reinforces hierarchy and interaction patterns.
• Do use Cairo for all body text and UI labels; Abril Fatface is reserved for display and headline scales only.
• Do include a 200ms ease-in-out transition on all interactive elements (buttons, cards, inputs) to signal responsiveness without jarring motion.
• Do layer shadows conservatively: elevation.sm for cards, elevation.md for hover states, elevation.lg for modals only.

**Don't**

• Don't use secondary (#1e73be) or tertiary (#b5963b) as primary CTA colors; they are supporting accents and will dilute brand recognition.
• Don't apply rounded corners greater than 16px to cards or containers; excessive rounding undermines the refined, architectural aesthetic.
• Don't mix Abril Fatface and Cairo at the same scale; use Abril for headlines (28px+) and Cairo for body (18px and below).
• Don't add drop-shadows to text elements; use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only when text overlays busy backgrounds.
• Don't exceed 12px opacity on shadows; heavy shadows (20%+ opacity) contradict the light, premium feel.
• Don't use full-width layouts on desktop; always constrain to container-max (1280px) and center with generous side margins.