Khufu's

Overview

Khufu's is an award-winning fine dining establishment positioned at the intersection of ancient Egyptian heritage and contemporary culinary excellence. The brand aesthetic embraces 'Architectural Minimalism with Warmth'—a design philosophy that honors the monumental geometry of the Pyramids through restrained, dignified layouts while infusing warmth through earthy tones (#3f2c1f, #6a4c36) and refined serif typography. The visual experience evokes reverence, timelessness, and refined sophistication; users encounter a calm, unhurried interface that mirrors the contemplative nature of dining at history's edge. The brand personality is eloquent yet approachable: precise, knowledgeable, never pretentious. Tone favors understated elegance and poetic language. Example sentence in brand voice: 'Every course is a quiet statement, rooted in heritage and executed with intention.'

Colors

The color system balances a clean, light-dominant palette with strategic accent colors that command attention. Primary (#060097, deep indigo) serves as the brand's signature accent—used on CTAs ('Reserve Your Table'), interactive focus states, and key navigation elements. It conveys trust, luxury, and intellectual refinement. Secondary (#c10fff, vivid magenta) acts as an energetic hover state and secondary accent, creating visual pop against the neutral canvas. Tertiary (#ffcd57, warm gold) is reserved for highlights, badges, and subtle emphasis—evoking the precious materials and warm light of the Giza plateau. The surface stack is predominantly white (#ffffff) and near-white (#fbfbfb, #f9f9f9) to maintain clarity and elegance. Text color on surfaces is #1e293b (near-black) for primary con

Typography

The type system employs a two-family hierarchy: IvyOraDisplay (serif, 300 weight) for hero and display contexts, conveying timeless sophistication and historical gravitas; Plus Jakarta Sans (sans-serif, 600 weight) for headings and structural hierarchy, providing modern clarity; and Inter (sans-serif, 400 weight) for body and UI text, ensuring legibility at all sizes. Display text (64px, 300 weight, -0.02em tracking) anchors hero sections with elegant restraint. Headline-lg (48px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy with generous line-height (56px, 36px respectively) to prevent cramping. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythm. Labels (14px and 12px, 600 and 500 w

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1200px, centered on the viewport. Container padding scales with breakpoint: 2.5em (40px) on desktop, 2.5em on tablet, 1.8em on mobile. Section separation uses lg spacing (40px) between major content blocks, creating a breathing rhythm that mirrors the expansive vistas of the Giza plateau. The gutter between columns is 24px (md spacing). Hero sections occupy full viewport height with centered content, leveraging the display typography for impact. Card-based layouts use md spacing (24px) for internal padding and sm spacing (12px) for gaps between items. Whitespace is treated as a design element—never cramped; minimum 40px vertical separation between sections. The container max-width of 1200px ensures content remains read

Elevation & Depth

Depth is conveyed through subtle shadow layering and strategic use of background color shifts rather than dramatic drop shadows. Level 1 (Base): white background (#ffffff) with no shadow, establishing the foundation. Level 2 (Cards, inputs): box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05), paired with surface-container-lowest (#fbfbfb) background, creating a barely-perceptible lift. Level 3 (Elevated cards, modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with surface-container (#f2f5f7) background, establishing clear separation. Level 4 (Floating elements, tooltips): box-shadow: 0 8px

Shapes

The shape philosophy is 'Architectural Precision'—favoring sharp, geometric forms that echo the monumental geometry of the Pyramids while maintaining modern refinement. Buttons use full-rounded corners (50px border-radius) to soften the otherwise austere aesthetic and invite interaction. Cards and containers use subtle rounding (6px, 13.6px) to avoid harshness while preserving geometric clarity. Input fields use minimal rounding (4px) to maintain form-like precision. The logo and hero imagery are unrounded (0px) to anchor the design in architectural monumentality. This graduated approach—sharp

Components

Action Elements Buttons are the primary interactive component. Button-primary uses background: {colors.primary} (#060097), text: {colors.on-primary} (white), padding: 20px 40px, height: 48px, border-radius: 50px, and box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05). On hover, background transitions to {colors.inverse-primary} (#c10fff) with a 0.2s ease transition. Button-secondary is transparent with a 1px solid border in {colors.primary}, text in {colors.primary}, and the same padding and height. On hover, background becomes {colors.surface-container-high} (#eeeeee). All buttons use {typography.label-md} (14px, 600 weight, 0.01em tracking) for consistency.

Containers & Surfaces Cards are the primary container component. Card uses background: {colors.surface-container-lowest} (#fbfbfb

Do's and Don'ts

**Do**

• Do use the primary color (#060097) exclusively for CTAs and interactive focus states—never for decorative elements or backgrounds.
• Do maintain generous whitespace (minimum 40px vertical separation) between sections to evoke the expansive landscape of the Giza plateau.
• Do pair serif display typography (IvyOraDisplay, 300 weight) with sans-serif body text (Inter, 400 weight) to balance elegance with legibility.
• Do apply subtle shadows (0px 1px 2px rgba(0,0,0,0.05)) to cards and inputs to create depth without visual heaviness.
• Do use the secondary color (#c10fff) exclusively for hover states and secondary accents—never as a primary background or text color.

**Don't**

• Don't use rounded corners greater than 50px on any element except buttons; maintain architectural precision.
• Don't apply text-shadow or text-outline to body text; reserve these effects for display text over imagery only.
• Don't mix serif and sans-serif fonts within the same heading hierarchy; use IvyOraDisplay for display/hero, Plus Jakarta Sans for h1–h6.
• Don't use the tertiary color (#ffcd57) for interactive elements; reserve it for badges, highlights, and non-interactive emphasis.
• Don't apply box-shadow greater than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadow depth contradicts the architectural minimalism aesthetic.