Switch between the rendered Visual preview and the Raw DESIGN.md.
Aedo Paanche embodies refined Italian culinary elegance with a sophisticated, minimalist aesthetic. The design merges timeless gastronomy with contemporary digital grace—featuring expansive whitespace, restrained typography, and a carefully curated color palette that evokes both the richness of seafood cuisine and the understated luxury of high-end dining. The atmosphere is contemplative and aspirational, allowing premium food photography to dominate visual communication while supporting typography and UI elements remain delicate and purposeful. This is a design language for discerning palates: elegant, unhurried, and deeply intentional.
Key Characteristics
#334155): Primary text, body copy, structural elements; foundational neutral#0D0305): High-contrast text, primary headings, dominant UI containers; near-true black with subtle warmth#046BD2): Primary interactive states, hyperlinks, primary action accent; represents maritime heritage#748B75): Tertiary accent for natural, organic context; culinary herb reference#721F2E): Deep wine tone; secondary accent for premium content cards and elevated sections#045CB4): Secondary CTA variant, hover states; deeper ocean tone#B0B7D0): Subtle interactive backgrounds, disabled states, low-emphasis surfaces#F0EBE7): Primary background, card surfaces, warm neutral base; warm off-white with slight beige undertone#FFFFFF): Overlay backgrounds, modal containers, highest contrast backgrounds#475569): Secondary text, subtle captions, muted labels#F0F5FA): Light backgrounds, minimal borders, subtle containers#D1D5DB): Dividing lines, subtle borders between sections#C2CBD2): Tertiary text, disabled copy, de-emphasized elements#ECEFF3): Barely-there backgrounds, micro-contrast separations#F0EBE7): Default surface color; all primary cards and containers#FFFFFF): Modal overlays, floating containers, highest visual priority surfaces#39B54A): Affirmative actions, confirmation messages, positive status indicators#CF2E2E): Destructive actions, validation errors, alert states#FCB900): Cautionary messages, pending states, important notices| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Amelaryas | 70px | 800 | 119px | 0px | Hero titles, brand statements; full bleed impact |
| Heading Large | Times New Roman | 17px | 500 | 18.7px | 0px | Section headers, prominent labels; structural hierarchy |
| Heading Medium | Syne | 20px | 700 | 24px | 0px | Card titles, subsections; supporting hierarchy |
| Body Large | Syne | 15px | 500 | 24.75px | 0px | Primary body copy, descriptive text; narrative content |
| Body Emphasis | Syne | 15px | 600 | 15px | 0px | Highlighted text, callouts; same size as body but stronger weight |
| Body Small | Syne | 14px | 400 | 20px | 0px | Labels, secondary copy; reduced scale with regular weight |
| Button | Syne | 12px | 500 | 12px | 0px | All button text; consistent compact sizing across variants |
| Link | -apple-system | 16px | 400 | 26.4px | 0px | Inline links, navigation; system font for maximum legibility |
| Caption | -apple-system | 13px | 400 | 16px | 0px | Captions, footnotes, secondary metadata |
| Code | Courier New | 12px | 400 | 18px | 0.5px | Code blocks, technical references |
#334155#FFFFFF12px 24px3px15px#1F2937, cursor pointer#111111#C2CBD2, color #FFFFFF, cursor not-allowed#F0EBE7#0D030515px 20px10px44px14pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#E8DFD6, color #0D0305#DDD0C6#FFFFFF12px 24px3px1px solid #FFFFFF34px10pxrgba(255, 255, 255, 0.1), text #FFFFFFrgba(255, 255, 255, 0.2)#1D1D1D#FFFFFF12px 14px10px40px12pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#000000#0D0305#000000#FFFFFF6px4px32px32px1px solid transparent0px#1D1D1D#F0EBE70px0px#334155#FFFFFF8px24pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#334155#721F2E8px24px#FFFFFFrgba(0, 0, 0, 0.1) 0px 4px 12px 0px#F0EBE712px 16px4px1px solid rgba(153, 153, 153, 0.39)40px24pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0pxrgba(240, 235, 231, 0.6)1px solid #046BD2, box-shadow 0 0 0 3px rgba(4, 107, 210, 0.1)#F0EBE7, border 1px solid #D1D5DB, cursor not-allowed#F0EBE712px 16px4px1px solid rgba(153, 153, 153, 0.39)100px24px1px solid #046BD2#33415520px8px#FFFFFF#0D03058px 16px64px44px#F0EBE7#046BD226.4px#045CB4, text-decoration underline#045CB4, font-weight 600#39B54A#FFFFFF4px 8px3px#CF2E2E#FFFFFF4px 8px3px#FCB900#0000004px 8px3pxBase unit: 4px
Extended scale for consistent spacing rhythm:
Usage Context:
Whitespace is not emptiness but intentional breathing room. The design celebrates silence: large swaths of cream (#F0EBE7) and white (#FFFFFF) backgrounds allow typography and imagery to command attention. Margins between sections are generous (52px–80px), creating natural pauses in the visual narrative. This approach elevates premium food photography and refined typography, encouraging contemplation and unhurried browsing—appropriate for a luxury dining brand.
| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, background transparent or #F0EBE7 | Base cards, body text, structural elements |
| Raised (1) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Input fields, buttons, subtle interactive elements |
| Elevated (2) | rgba(0, 0, 0, 0.1) 0px 4px 12px 0px | Floating cards, modals, premium content cards |
| Modal (3) | rgba(0, 0, 0, 0.2) 0px 12px 24px 0px | Full-screen modals, overlays, highest prominence |
Shadow Philosophy: Shadows are minimal and restrained, using low opacity (0.05–0.2) black to suggest depth without visual heaviness. This maintains the minimalist, refined aesthetic where imagery and typography dominate. Shadows appear only on interactive elements (buttons, inputs) or premium content (elevated cards) to signal importance without cluttering the visual hierarchy.
Layered example:
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px appears slightly liftedbox-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px appears more prominentbox-shadow: rgba(0, 0, 0, 0.2) 0px 12px 24px 0px dominates foreground#F0EBE7) as the default background to maintain warmth and elegance across surfaces#046BD2 blue to all primary CTAs for consistent, immediate recognition of interactive elements8px for elevated content and 0px for structural sections to differentiate hierarchyrgba(0, 0, 0, 0.05) shadow only to interactive elements; keep flat cards shadowless#721F2E burgundy for premium/featured sections to add warmth and luxury without overwhelming the palette#FFFFFF pure white for modal overlays and highest-contrast backgrounds; use #F0EBE7 cream for primary surfaces12px 14px; maintain tactile, easy-to-tap targets#475569 for secondary text, #C2CBD2 for tertiary)#0D0305 black text with light gray borders; ensure sufficient contrast (use #D1D5DB or darker)0 0 0 3px rgba(4, 107, 210, 0.1))#F0EBE7) or white (#FFFFFF) per section#046BD2 blue to non-interactive text; reserve it exclusively for links and CTAs| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single-column layout, full-width containers, 12px padding, 40px minimum touch targets, collapsed navigation, reduced font sizes by 1–2px |
| Tablet | 640px–1023px | Two-column flexible grid, 16px padding, hero sections reduce to 56px padding, font sizes at 85% of desktop |
| Desktop | 1024px+ | Full layout, 32px padding, maximum spacing hierarchy, all typography at full scale, multi-column grids enabled |
| Large | 1440px+ | Max-width containers, centered layout, optional sidebar, full feature set enabled |
Mobile (320px–639px):
Tablet (640px–1023px):
Desktop (1024px+):
#046BD2) — all primary action buttons, hyperlinks, interactive highlights#045CB4) — hover states, secondary CTAs, deeper interaction feedback#F0EBE7) — default surface for cards, sections, primary neutral backdrop#FFFFFF) — modal backgrounds, floating overlays, highest-contrast surfaces#0D0305) — all primary headings, bold statements, max contrast#334155) — body copy, standard text, primary content#475569) — secondary copy, muted labels, reduced emphasis#C2CBD2) — captions, disabled states, minimal emphasis#721F2E) — featured sections, luxury content, warm accent#748B75) — organic contexts, natural references, tertiary accent#39B54A) — confirmation messages, positive states#CF2E2E) — destructive actions, error states#FCB900) — cautionary messages, pending states#D1D5DB) — dividing lines, subtle separatorsrgba(0, 0, 0, 0.05) — subtle depth on interactive elements onlyEstablish Base Colors First: Deploy #334155 (charcoal) for text, #F0EBE7 (cream) for surfaces, #0D0305 (black) for headings, and #FFFFFF (white) for modals. These four colors form the structural backbone.
Typography Hierarchy Before Layout: Implement Amelaryas 70px weight 800 for display hero text, Times New Roman 17px for supporting headers, Syne 15px for body copy, and system font for links. Typography establishes the brand voice before any layout grid.
Interactive Elements Get Blue: Apply #046BD2 blue to all primary buttons, links, and interactive highlights. This creates immediate visual consistency for user actions across all pages.
Spacing Breathes the Design: Use 32px–80px margins between major sections on desktop; compress to 16px–56px on tablet; collapse to 12px–40px on mobile. Whitespace is not wasted space; it's the design.
Buttons Define Interaction Affordance: Primary buttons are charcoal (#334155) text-white with minimal shadow; secondary buttons are cream (#F0EBE7) text-black with subtle rounded corners (10px). Icon buttons are pure black (#000000) with 32px minimum dimensions.
Cards Use Contextual Depth: Flat cards (0 shadow, #F0EBE7) for primary content; elevated cards (1px shadow, #FFFFFF) for secondary content; burgundy cards (#721F2E, text-white) for premium/featured sections. Shadow hierarchy signals importance.
Forms Default to Transparent: Input backgrounds are transparent with 1px border rgba(153, 153, 153, 0.39). Focus state adds blue border #046BD2 and ring 0 0 0 3px rgba(4, 107, 210, 0.1). No overstyled form fields.
Navigation Uses White Pills: Menu buttons are #FFFFFF background with #0D0305 text, 64px border-radius (full pill), 44px height. Hover state shifts background to #F0EBE7. Maintains elegant, approachable affordance.
Shadows Are Restrained: Only apply rgba(0, 0, 0, 0.05) 0px 1px 2px 0px to buttons, inputs, and raised cards. No shadows on flat backgrounds. This preserves the minimalist aesthetic where content dominates.
Responsive Collapses Gracefully: 1440px max-width on desktop with 32px padding. Tablet (640px–1023px) collapses to 16px padding, reduces font sizes 15%, stacks two-column to single. Mobile (320px–639px) uses 12px padding, hamburger menu, full-width cards, reduces display heading to 36px. Touch targets stay 44px minimum at all breakpoints.