Screenshot of Tastavents

Tastavents

tastavents.com

The reference for a chaptered fine-dining narrative in warm brown on cream (#3E270F on #FFEDDD), full-bleed food photography under wide-tracked Optima caps and locomotive-scroll reveals that read like a printed menu.

Hospitality flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Optima
body
Optima
mono

Do / Don't

Reference it for

  • Warm restaurant palette: deep espresso brown #3E270F / #34290E text and dark sections over a cream field #FFEDDD / #FFF1DD, with a toasted gold #E6D49B for accents
  • Wide-letterspaced display caps: Optima 700 wordmark and section titles carrying 2.7px letter-spacing (the recurring value across 128 nodes) for a menu-plate feel
  • Roman-numeral chaptering: sections numbered I..VI (Presentacion, Nuestra Cocina, Espacio Singular, Chef Destacado, Menu) that turn a one-pager into a gastronomic journey
  • ivypresto-display serif as a sparse editorial accent (weight 100) against the Optima humanist sans, used at large sizes only
  • Full-bleed hero of a single dish detail, softly blurred and colour-graded into the brown field so the wordmark floats over it
  • Pill CTA pair: a filled cream Reservas pill next to a hairline-outlined Regala pill, both fully rounded (border-radius 28-32px), plus a circular hamburger token
  • Locomotive-scroll + AOS reveal choreography: fadeInUp / slideInUp keyframes on long cubic-bezier(0.645,0.045,0.355,1) 0.6s easing as blocks enter
  • Tiny functional type: 9px and 11px labels at 2.7px tracking for nav (ES/RESENAS/INSTAGRAM) and metadata, contrasted with oversized display

Do not copy

  • The TASTAVENTS wordmark and its exact tracked lettering
  • The Hotel Marina Badalona address, phone, and reservation copy
  • The exact brown-on-cream palette as a set (#3E270F / #FFEDDD / #E6D49B reads as this restaurant)
  • The specific dish and interior photography
  • The Roman-numeral Spanish section titles (I Presentacion, II Nuestra Cocina, ...)
  • The named chef and any staff imagery
  • The Optima wordmark treatment used as a logo