Gallery Menu Food-Delivery Landing — Culinary Duotone

# VERMILLION TABLE — ARCHITECTURAL PREMIUM FOOD-DELIVERY LANDING PAGE

BUILD A FULL, MULTI-SECTION, FULLY RESPONSIVE MARKETING LANDING PAGE FOR A FICTIONAL HIGH-END FOOD-DELIVERY SERVICE NAMED **VERMILLION TABLE** — "TASTE BEYOND BOUNDARIES." THE NAMED AESTHETIC IDENTITY IS **"CULINARY ARCHITECTURE"**: A WARM, EDITORIAL, GALLERY-LIKE LOOK THAT TREATS FOOD DELIVERY LIKE A DESIGN OBJECT — VANILLA-PAPER BACKGROUNDS, ROUNDED MODULAR "ISLAND" CARDS, OVERSIZED ULTRA-TIGHT DISPLAY TYPE, AND A CONFIDENT RED-ORANGE / DEEP-TEAL DUOTONE. THE FEEL IS A NEIGHBORHOOD ATELIER MENU CROSSED WITH A SWISS DESIGN MAGAZINE: APPETIZING AND TRUSTWORTHY, NEVER GLOSSY-CORPORATE OR GENERIC-SAAS.

## DESIGN LANGUAGE & MOOD

- WARM, INTENTIONAL, ARCHITECTURAL. EVERYTHING IS A ROUNDED "ISLAND" PANEL SITTING ON A PALE VANILLA CANVAS WITH GENEROUS GUTTERS AND VERTICAL RHYTHM (CONSISTENT 8-UNIT SPACE BETWEEN ISLANDS).
- MAX CONTENT WIDTH ~1446PX, CENTERED, WITH COMFORTABLE SIDE PADDING ON MOBILE.
- HEAVY USE OF NEGATIVE SPACE, OVERSIZED HEADLINES WITH EXTREME NEGATIVE LETTER-SPACING (TIGHTER-EXTRA), AND SMALL UPPERCASE WIDE-TRACKED LABELS AS COUNTERPOINT.
- NO HARSH BORDERS EXCEPT SOFT HAIRLINES; SHADOWS ARE SOFT AND DIFFUSE. ROUNDED CORNERS EVERYWHERE (20PX ISLANDS, 30PX FEATURE IMAGES, PILL/2XL BUTTONS).

## EXACT COLOR PALETTE

- BRAND PRIMARY (SINOPIA, VIBRANT RED-ORANGE): `#CB410B`
- BRAND SECONDARY (CARIBBEAN, DEEP TEAL): `#008190`
- BRAND ACCENT (VANILLA): `#F3E5AB`
- NEUTRAL BACKGROUND (PALE VANILLA): `#FDF8E1`
- NEUTRAL SURFACE (VANILLA SURFACE): `#F3E5AB`
- TEXT PRIMARY (DARK EARTHY BROWN): `#2D1E17`
- TEXT SECONDARY: `RGBA(45, 30, 23, 0.7)`
- TEXT ON PRIMARY: `#FDF8E1`
- CTA SHADOW: `0 10PX 30PX RGBA(203, 65, 11, 0.2)`; CARD SHADOW: `0 20PX 40PX RGBA(0,0,0,0.05)`.

## TYPOGRAPHY

- SINGLE GEOMETRIC HUMANIST SANS FOR EVERYTHING — **QUESTRIAL** (REGULAR 400), VENDORED LOCALLY AS A WOFF2 (DO NOT HOTLINK GOOGLE FONTS). FALL BACK TO SYSTEM SANS-SERIF.
- DISPLAY HEADLINES: 60–110PX, LINE-HEIGHT ~0.85, LETTER-SPACING ABOUT -0.05EM (CLAMP DOWN ON MOBILE TO ~-2PX).
- BODY: 18–26PX, RELAXED LINE-HEIGHT, 70–80% OPACITY BROWN.
- LABELS: 11–13PX, UPPERCASE, LETTER-SPACING ~0.2EM, LOW OPACITY.

## LAYOUT & SECTION BREAKDOWN (TOP TO BOTTOM)

1. **STICKY HEADER ISLAND** — A DEEP-TEAL ROUNDED NAV BAR FLOATING AT TOP: WORDMARK "VERMILLION TABLE" LEFT, CENTER/INLINE UPPERCASE WIDE-TRACKED NAV LINKS (MENU, PROCESS, PARTNERS), AND AN OUTLINED "GET THE APP" PILL CTA RIGHT. HIDES NAV LINKS ON MOBILE.
2. **HERO TEXT ISLAND** — VANILLA-SURFACE PANEL, MIN-HEIGHT ~412PX, HEADLINE BOTTOM-ALIGNED: GIANT "TASTE BEYOND. BOUNDARIES." WITH A SUPPORTING PARAGRAPH ABOUT THE "ARCHITECTURAL APPROACH TO FOOD DELIVERY," AND A SOLID RED-ORANGE "ORDER NOW" PILL ON THE RIGHT.
3. **VISUAL HERO IMAGE ISLAND** — FULL-BLEED GOURMET PLATING PHOTO, ~700PX TALL, THICK VANILLA BORDER, TEAL-TO-TRANSPARENT GRADIENT OVERLAY, AND A FROSTED VANILLA "DISH OF THE WEEK" CARD FLOATING BOTTOM-LEFT (LABEL + DISH NAME + SHORT BLURB).
4. **CATEGORY / MENU GRID** — THREE TALL (~500PX) IMAGE CARDS (NEAPOLITAN, OMAKASE, VITALITY) WITH IMAGE ZOOM ON HOVER, A TEAL→RED-ORANGE OVERLAY TINT TRANSITION, AND A TITLE + "N LOCAL PARTNERS" LABEL ANCHORED BOTTOM-LEFT.
5. **"THE LOGISTICS OF LUXURY" PROCESS SECTION** — CENTERED HEADLINE + INTRO ON VANILLA SURFACE, THEN A FOUR-COLUMN PHASE LIST (PHASE 01–04: CURATION, PRECISION, TRANSIT, ARRIVAL) WITH RED-ORANGE PHASE LABELS, TITLE, AND BODY COPY.
6. **APP-DOWNLOAD SPLIT** — TWO COLUMNS: LEFT IS A DEEP-TEAL PANEL ("THE MENU IN YOUR POCKET.") WITH APP STORE / PLAY STORE PILLS; RIGHT IS A VANILLA PANEL FRAMING A FLOATING (GENTLY BOBBING) PHONE-SHAPED APP MOCKUP WITH A GIANT FAINT "VERMILLION" WORDMARK WATERMARK BEHIND IT.
7. **PARTNER ISLAND** — SPLIT: COPY + OUTLINED "REGISTER YOUR KITCHEN" CTA ON ONE SIDE, A 16:9 PROFESSIONAL-KITCHEN PHOTO CARD ON THE OTHER.
8. **FOOTER ISLAND** — A RED-ORANGE ROUNDED PANEL WITH WORDMARK + MISSION BLURB, COMPANY + LEGAL LINK COLUMNS, AND A BOTTOM BAR WITH COPYRIGHT AND SOCIAL LINKS.

## HERO COMPOSITION

THE HERO IS TWO STACKED ISLANDS: A TEXT ISLAND WHERE THE OVERSIZED HEADLINE IS BASELINE-ANCHORED TO THE BOTTOM AND THE CTA SITS RIGHT, FOLLOWED IMMEDIATELY BY THE FULL-BLEED IMAGE ISLAND WITH ITS FLOATING FROSTED INFO CARD. THE TWO READ AS A SINGLE EDITORIAL SPREAD.

## MOTION / ANIMATION / INTERACTION SPEC

- SCROLL-REVEAL: ELEMENTS START AT OPACITY 0 / TRANSLATEY(20PX) AND EASE TO VISIBLE WHEN THEY ENTER THE VIEWPORT (INTERSECTION OBSERVER, ~0.8S EASE-OUT, ONE-SHOT).
- PHONE MOCKUP: INFINITE GENTLE VERTICAL FLOAT (~6S EASE-IN-OUT, ±10PX).
- CATEGORY CARDS: IMAGE SCALE TO ~1.1 OVER ~0.7S AND OVERLAY TINT SHIFTS TEAL→RED-ORANGE ON HOVER.
- BUTTONS: HOVER TO BLACK BACKGROUND / WHITE TEXT, ACTIVE SCALE 0.95, FAST 150MS TRANSITIONS.
- SMOOTH-SCROLL FOR IN-PAGE ANCHOR LINKS WITH A FIXED-HEADER OFFSET.
- RESPECT `PREFERS-REDUCED-MOTION`.

## RESPONSIVE BEHAVIOR

- MOBILE: SINGLE COLUMN, NAV LINKS HIDDEN, HERO HEADLINE SCALES TO ~60PX, CATEGORY GRID AND PROCESS GRID COLLAPSE TO ONE COLUMN, SPLIT SECTIONS STACK, FLOATING INFO CARD CENTERS.
- TABLET: TWO/THREE-COLUMN GRIDS REFLOW SENSIBLY; HEADLINE ~80PX.
- DESKTOP: FULL MULTI-COLUMN LAYOUT AT ~1446PX MAX WIDTH.

## TECHNICAL NOTES

- VENDOR ALL ASSETS LOCALLY (FONT WOFF2 + ALL IMAGERY) INTO AN `ASSETS/` FOLDER; REFERENCE WITH RELATIVE PATHS SO THE PROJECT RUNS FULLY OFFLINE.
- SELF-CONTAINED STATIC SITE; SEMANTIC HTML, ACCESSIBLE ALT TEXT, KEYBOARD-FOCUSABLE CONTROLS.
- THE NAMED IDENTITY "VERMILLION TABLE / CULINARY ARCHITECTURE" MUST BE LEGIBLE THROUGHOUT THE COPY AND VISUAL SYSTEM.