Ferro
ENES
Book

Style guide

Colour, type, components, motion

Every token here is a design token (colour or text). Components are named consistently.

How to edit this template

Colour

  • Steel 950#0E0F10Hero band, day, booking, footer
  • Steel 900#151719Page background
  • Steel 800#1F2225Raised sections, cards, forms
  • Thermal paper#F4F1E8Tickets, team section, press quote
  • Ink#161616Text on paper
  • Heat lamp#FFB23FPrimary buttons, live, today
  • Heat deep#8A5200Amber text on paper (AA)
  • Ribbon red#C8202BAllergens and 86 only

Type scale

  • DisplayOnest 750 · 48–150 px · −4.5 %

    Market cooking

  • Heading 1 (pages)Onest 700 · 44–120 px

    Printed every morning

  • Heading 2Onest 700 · 38–84 px · −3.5 %

    Five people, five stations

  • Heading 3Onest 700 · 21–26 px

    Senyoret rice, all peeled

  • LeadOnest 400 · 18–21 px

    We cook what the Mercado Central has that morning.

  • BodyOnest 400 · 17 px · 1.55

    Every rice is cooked to order, in its own pan, for the table that ordered it.

  • StatusAzeret Mono 800 · 32–84 px

    Dinner service

  • Label / ticketAzeret Mono 700 · 12–13 px · caps

    Right now in the kitchen

Components

Button · primary / line / glass / ink

Book a tableSee the menuGlassInk

Ticket · service / booking (is-you) / 86

TABLE 7#48
4 COVERS21:14

!! NO GLUTEN

2×SARDINES

1×SENYORET

MARIBEL04:12
BOOKING21:00
SAT 3 OCT2 COVERS

—LAURA G.

—COUNTER

8615:52
SOLD OUT AT LUNCH

—SENYORET

Dish card · CMS Dishes

Menu row · hover preview · CMS Dishes

Accordion · open / closed

Do you cater for allergies and intolerances?

Yes. Every dish lists the 14 EU allergens, and the menu page crosses out what you can’t have. Tell us when you book and your allergens print in red on your table’s ticket.

Can I come without a booking?

We keep two seats at the counter for walk-ins every service. On Friday and Saturday nights, booking is the safer bet.

Live status · ComandaRail.statusLine

—

Motion system

  • Appearopacity 0→1 · y 24→0 · blur 6→0 · 0.7 s · stagger 60 ms.
  • Text by lineEach line rises from a mask, 0.9 s, 80 ms apart.
  • Image revealClip bottom→top and scale 1.08→1, 0.9 s.
  • Sticky runA sticky section whose vertical scroll moves a horizontal track.
  • ParallaxThe room photo drifts at 0.92× speed.
  • Hover previewThe dish photo follows the pointer over the menu list; hidden on touch.
  • HoverCards scale their photo 1→1.045 in 1 s; buttons 0.4 s. One curve: cubic-bezier(.2,.7,.1,1).
  • Page transitionA steel panel wipes up (0.45 s) and the next page wipes it away.
  • Reduced motionWith prefers-reduced-motion nothing moves: no appear, no print, no transition, no ticker.

Hero variants

hero (inset card, 8–14 px margin, 12–20 px radius) is the default. Add hero--bleed for a full-bleed photo. Either way the signature rail sits right under the hero, so the photo carries the message and the rail peeks into the first screen.