Restaurante CAÍN

Overview

Restaurante CAÍN is a sacred-minimalist fine dining sanctuary celebrating Castilian grilling heritage through theatrical typography and liturgical imagery. The brand transforms a humble grill restaurant into a spiritual experience, where fire-roasted lamb and steak become acts of devotion. The aesthetic movement is 'Ecclesiastical Brutalism'—combining austere black surfaces (#1f1d1d), monumental serif letterforms (GOAT typeface at 120px), and a singular fuchsia accent (#ff1493) that functions as both divine light and urgent call-to-action. The UI evokes reverence without pretension: every interaction feels ceremonial yet approachable.

The voice is poetic, irreverent, and deeply rooted in Castilian culture. Sentences are lyrical and slightly sacrilegious—'No son salmos ni oraciones, pero aquí están los motivos que te harán rezar cada día' (Not psalms or prayers, but here are the reasons you'll pray daily to visit us). The brand personality oscillates between theatrical grandeur and intimate warmth, never corporate. Vocabulary favors cultural specificity: 'brasas' (embers), 'cordero a la estaca' (stake-roasted lamb), 'capilla' (chapel), 'folklore', 'bendición' (blessing). Example sentence in brand voice: 'Reserva el cielo entero para tu evento privado—una oportunidad divina para compartir comida, risas y tal vez alguna bendición improvisada.' (Reserve the entire heaven for your private event—a divine opportunity to share food, laughter, and perhaps an improvised blessing.)

Colors

The color system is a study in sacred contrast: a near-black canvas (#1f1d1d) serves as the liturgical foundation, with pure white (#ffffff) as the primary text and logo color, and a singular fuchsia accent (#ff1493) as the divine intervention. Primary (#ff1493) is deployed exclusively on call-to-action buttons ('Hacer una reserva'), focus states, and active navigation links—it is the color of fire, passion, and spiritual awakening. Secondary (#00bbff) provides a cool counterpoint for secondary interactions and status indicators, appearing in 11 instances across the interface as a supporting accent. Tertiary (#e7e3e0) is a warm off-white used for subtle backgrounds and secondary text, creating a liturgical three-tone palette. The surface stack is deliberately minimal: surface (#1f1d1d) is

Typography

The type system is a dialogue between two distinct voices: GOAT (a custom serif display font) for monumental headlines and Lora (a traditional serif) for body and supporting text. GOAT at 120px with -0.02em letter-spacing creates the hero 'CAÍN' logotype—each letterform is a structural element, not mere text. Lora carries the narrative: at 18px body-lg with 28px line-height (1.56 ratio), it is generous and readable; at 14px label-md with 0.05em letter-spacing, it becomes ceremonial and precise. The weight hierarchy is strict: display and headlines use 700 weight (bold), body uses 400 (regular), and labels use 600 (semibold) to signal interactivity. Italic is applied strategically to the primary button ('Hacer una reserva' in italic fuchsia) and header navigation links to evoke handwritten

Layout

The page rhythm follows a 12-column grid with a 1280px container max-width, maintaining 48px horizontal gutters on desktop and 24px on mobile. White-space is weaponized: the hero section consumes 60% of viewport height with the CAÍN logotype centered and breathing, surrounded by 64px (lg spacing) of void. Section separation uses 40px (lg spacing) vertically, creating a liturgical pause between 'Restaurante', 'Carta', 'Cultura', and 'Contacto' sections. The header is fixed with 24px vertical padding and 48px horizontal padding, anchoring navigation in the upper 80px of the viewport. Cards and content blocks use 24px (md spacing) internal padding and 12px (sm spacing) between nested elements. The layout rejects symmetry in favor of asymmetric tension: the 'Hacer una reserva' button floats in

Elevation & Depth

Depth is conveyed through shadow and surface-container layering, not through color gradients or transparency. Level 1 (Base Canvas) is the body background at #1f1d1d with no shadow. Level 2 (Standard Card) uses surface-container (#2a2828) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow that suggests the card is 4px above the base. Level 3 (Elevated/Modal) uses surface-container-high (#3d3b3b) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2)—a larger, softer shadow indicating 12px elevation. Hover states transition from Level 2 to Level 3 over 300ms cubic-bezier(0.4, 0, 0.2, 1

Shapes

The shape philosophy is 'Ecclesiastical Geometry'—combining sharp architectural edges with selective softness. Buttons use rounded.full (9999px border-radius) to create pill-shaped containers that feel both modern and ceremonial, evoking the rounded arches of chapels. Cards and containers use rounded.lg (1rem / 16px) for a subtle, refined corner that avoids the sterility of sharp 90° angles. Input fields use rounded.DEFAULT (0.5rem / 8px) for a minimal, technical appearance that contrasts with the organic button shapes. The header and navigation use no border-radius (0px), maintaining architec

Components

Action Elements The primary button ('Hacer una reserva') is the visual anchor of the entire interface. It uses backgroundColor: {colors.primary} (#ff1493), textColor: {colors.on-primary} (white), typography: {typography.label-md} (14px Lora semibold), rounded: {rounded.full} (9999px), padding: 12px 32px, and height: 48px. Crucially, the text is italicized (font-style: italic) to evoke handwritten liturgical script. On hover, it transitions to backgroundColor: {colors.primary-container} (#ff69b4) over 200ms cubic-bezier(0.4, 0, 0.2, 1), creating a subtle brightening effect. The button also gains box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3) on hover, a warm glow that reinforces its sacred urgency. Secondary buttons use transparent background with a 1px solid border in {colors.outline}

Do's and Don'ts

**Do**

• Do use the fuchsia primary (#ff1493) exclusively on CTAs and active states—it is the sacred accent that commands action and must never be diluted by overuse.
• Do maintain the stark black-and-white contrast (#1f1d1d on #ffffff) for all body text and navigation—this ecclesiastical clarity is the brand's visual signature.
• Do apply italic styling to button text and header links to evoke handwritten liturgical script and reinforce the brand's poetic, reverent voice.
• Do use the full GOAT typeface at 120px+ for hero headlines—its monumental serifs are structural elements that define the brand's theatrical identity.
• Do transition all interactive elements over 200–300ms using cubic-bezier(0.4, 0, 0.2, 1) to create smooth, ceremonial interactions that feel intentional.

**Don't**

• Don't use gradients, blur effects, or glassmorphism—the brand rejects atmospheric softness in favor of architectural clarity and stark contrast.
• Don't apply the primary fuchsia (#ff1493) to body text, backgrounds, or non-interactive elements—it must remain a sacred accent reserved for CTAs and active states.
• Don't use system fonts or generic sans-serifs—GOAT and Lora are the canonical typefaces; any deviation breaks the brand's liturgical identity.
• Don't add rounded corners to the header or top-level navigation—sharp architectural edges at the top reinforce authority and structure.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadow depth contradicts the brand's minimalist, ecclesiastical aesthetic.