Black Marble Aperitivo House Design System

/blackMarbleAperitivoHouseDesignSystem
A cinematic, tactile design system that brings the sensual luxury of dimly lit, high-end restaurants into digital hospitality experiences through darkness, premium typography, and immersive, slow-paced UI elements.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Black Marble Aperitivo House Design System

A design language for dramatic, premium hospitality interfaces and immersive dining experiences.

---

## Philosophy

> "Atmosphere is an ingredient; shadow is the canvas."

This system translates the physical allure of a high-end, dimly lit restaurant into a digital interface. It is cinematic, moody, and highly tactile. The design relies on rich darkness, precise typography, and strategic warmth to evoke a sense of immediate luxury. Elements do not merely appear—they emerge from the shadows, bathed in subtle light.

### Core Beliefs

1. **Drama through darkness** — The interface is built on deep, rich shadows (espresso, bronze, marble) rather than flat blacks.
2. **Typography as menu design** — High-end European sans-serifs dictate structure. Text is treated with the reverence of a printed Michelin-star menu.
3. **Tactile depth** — Surfaces mimic physical materials through translucent glass layers, fine borders, and marble-like gradients.
4. **Cinematic motion** — Interactions mimic the slow, deliberate pace of fine dining. Nothing bounces; imagery crossfades, and reveals are gradual.
5. **The CTA as jewelry** — Calls-to-action act as ambient lighting or polished hardware in a dark room, utilizing warm metallics to draw the eye without overwhelming the composition.

### Strict Rules

* **No Flat True Black** — Backgrounds must carry tonal depth (roasted espresso or smoked bronze) to avoid feeling hollow or cheap.
* **No Stark White Typography** — All primary text must use warm cream tones to reduce optical strain against dark canvases and evoke intimacy.
* **No Rapid Spring Animations** — Pacing is luxurious. Bouncy, high-tension physics feel juvenile here; use slow, easing crossfades.
* **Photography Over Illustration** — The system relies entirely on moody, spotlighted photography. Vector illustrations are strictly forbidden.
* **Oversized & Micro** — Visual hierarchy relies on extreme contrast between massive, edge-to-edge headlines and heavily tracked, tiny ingredient/metadata notes.

---

## Color Palette

### The Atmospheric Scale (Backgrounds & Text)

The foundation is built on deep geological and roasted tones, moving up to soft cream typography to create a warm, inviting contrast.

```css
/* Ambient Backgrounds (Darkest to Lightest) */
bg-marble-950         /* Base canvas, deep atmospheric black (#0a0a0a) */
bg-espresso-900       /* Secondary sections, subtle warmth (#1a1514) */
bg-bronze-900         /* Active containers, hover backdrops (#24201e) */
bg-bronze-800/40      /* Translucent dark navbar, glassy menu overlays */
bg-burgundy-950/30    /* Subtle mood lighting gradients, footer zones */

/* Structural Borders & Glass */
border-cream-50/10    /* Ultra-fine dividers, plate separation lines */
border-cream-50/20    /* Active borders, elevated card bounds */
border-copper-500/30  /* Highlight borders for premium selections */

/* Text Hierarchy (Warmth & Clarity) */
text-cream-50         /* Oversized headlines, primary interface text (#fdfbf7) */
text-cream-200        /* Secondary body text, dining promises */
text-sage-400         /* Muted ingredient notes, tertiary descriptions (#8a9a86) */
text-burgundy-800     /* Deep accent typography, subtle section markers */

/* The Jewelry (CTA Accents) */
bg-copper-600         /* Primary elevated booking/order buttons (#b85d38) */
text-copper-500       /* Interactive text links, hover highlights */
bg-champagne-400      /* Secondary premium tags, VIP highlights (#e8d5aa) */
text-vermilion-500    /* Tomato vermilion for urgent/immediate actions, alerts (#e34234) */
```

### Destructive / Unavailable Actions (Sold Out)

```css
text-cream-50/30      /* Strikethrough menu items, sold out states */
bg-marble-950/50
border-cream-50/5     /* Dimmed out boundaries */
```

---

## Typography

Typography relies on precision engineered Grotesk typefaces (*FK Grotesk, Aeonik, Neue Haas Grotesk Text, Söhne, or Diatype*). Scale dictates hierarchy—massive hero text paired with highly controlled, tiny metadata.

### Font Weights

```css
font-light       /* Oversized sans-serif headlines — mandates scale */
font-normal      /* Dining promises, item descriptions, body copy */
font-medium      /* Booking buttons, primary interactive labels */
font-semibold    /* Prices, fine-print structural headers, ingredient tags */
/* font-bold is rarely used; weight is kept lean for modern elegance */
```

### Font Size Scale

```css
text-[10px]      /* Origin regions, dietary tags (V, GF) */
text-[11px]      /* Granular ingredient notes, subtle timestamps */
text-xs          /* Form input labels, footer links (12px) */
text-sm          /* Standard menu item descriptions (14px) */
text-base        /* Concise dining promises, primary navigation (16px) */
text-lg          /* Sub-section headers, signature plate names (18px) */
text-2xl         /* Highlighted item names in carousels */
text-4xl         /* Secondary page intros */
text-6xl-8xl     /* Moody oversized hero headlines (responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headlines for dense, modern impact */
tracking-normal  /* Smooth paragraph reading */
tracking-wide    /* Navigational links, secondary button text */
tracking-[0.2em] /* Dietary tags, ingredient lists, cinematic subheaders */

uppercase        /* Small dietary notes, button labels, section intros */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 7xl | light | cream-50 | tighter | none |
| Dining Promise | base | normal | cream-200 | normal | none |
| Signature Plate | 2xl | medium | cream-50 | normal | none |
| Plate Price | lg | normal | champagne-400 | normal | none |
| Ingredient Note | [11px] | semibold | sage-400 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Cinematic Pacing

Everything moves at the speed of a slowly poured cocktail or a dimming dining room light. Transitions use long durations and ease-in-out curves.

### Page & Section Transitions (Slow Fade)

```tsx
initial={{ opacity: 0, scale: 1.02 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}
```

### Image Crossfades (Carousel)

When swiping through the cinematic carousel of signature plates, the image does not slide aggressively; it dissolves into the next.

```tsx
initial={{ opacity: 0, filter: 'brightness(0.5)' }}
animate={{ opacity: 1, filter: 'brightness(1)' }}
exit={{ opacity: 0, filter: 'brightness(0.5)' }}
transition={{ duration: 0.8, ease: "easeInOut" }}
```

### Warm Spotlighting (Hover Reveal)

Hovering over a menu item brings up a subtle radial gradient behind it, mimicking an overhead table spot turning on.

```tsx
whileHover={{ backgroundColor: "rgba(184, 93, 56, 0.05)" }} // Copper tint
transition={{ duration: 0.4 }}
```

---

## UI Components

### Translucent Dark Navbar

A highly blurred, moody glass header that allows full-screen food imagery to bleed through without sacrificing navigational legibility.

```tsx
<nav className="fixed top-0 w-full bg-marble-950/60 backdrop-blur-2xl border-b border-cream-50/10 z-50">
  {/* Nav Content */}
</nav>
```

### The Cinematic Carousel

Large, dramatic display of signature plates. Images take up vast screen real estate, anchored by glassy overlays containing the item metadata.

```tsx
<div className="relative w-full h-[80vh] overflow-hidden">
  {/* Crossfading Moody Food Image */}
  <img src={plate.image} className="absolute inset-0 object-cover w-full h-full" />
  
  {/* Glassy Metadata Overlay */}
  <div className="absolute bottom-12 left-12 p-6 bg-marble-950/40 backdrop-blur-xl border border-cream-50/10 rounded-sm">
    <h3 className="text-2xl text-cream-50 font-light">{plate.name}</h3>
    <span className="text-champagne-400 font-normal">{plate.price}</span>
    <p className="text-[11px] text-sage-400 uppercase tracking-widest mt-3">
      {plate.ingredients.join(' • ')}
    </p>
  </div>
</div>
```

### Marble-Like Gradients

Used for empty states or transition blocks to prevent flat black spaces, evoking the texture of polished stone.

```tsx
<div className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-espresso-900 via-marble-950 to-marble-950" />
```

---

## Component Catalog

### Cards (Menu Items & Reservations)

No bulky blocks. Cards rely on fine borders, dark glassy backgrounds, and ample inner padding to feel premium.

```tsx
// Menu Item Row
"flex items-end justify-between py-6 border-b border-cream-50/10 hover:bg-white/[0.02] transition-colors duration-500"

// Reservation Date Card
"bg-bronze-900/30 backdrop-blur-md border border-cream-50/10 rounded-sm p-6 hover:border-copper-500/40 transition-all duration-300"
```

### Buttons

```tsx
// Elevated Booking CTA
"bg-copper-600 text-cream-50 font-medium text-sm tracking-wide uppercase px-8 py-4 rounded-sm shadow-[0_0_20px_rgba(184,93,56,0.2)] hover:bg-copper-500 hover:shadow-[0_0_30px_rgba(184,93,56,0.4)] transition-all duration-300"

// Secondary Action (Outline)
"border border-champagne-400/30 text-champagne-400 font-medium text-sm tracking-wide uppercase px-8 py-4 rounded-sm hover:bg-champagne-400/10 transition-all duration-300"
```

### Inputs (Booking & Inquiries)

```tsx
// Dark Form Input
"w-full bg-transparent border-b border-cream-50/20 py-3 text-cream-50 text-lg placeholder-cream-50/30 focus:outline-none focus:border-copper-500 transition-colors duration-300"
```

### Badges & Dietary Tags

```tsx
// Dietary / Origin Tag
"px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] rounded-sm bg-sage-400/10 text-sage-400 border border-sage-400/20"

// Urgent Status / "Last Table"
"px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] rounded-sm bg-vermilion-500/10 text-vermilion-500 border border-vermilion-500/20"
```

---

## Quality Checklist

* [ ] Is the primary text a warm cream rather than a stark, eye-straining white?
* [ ] Do background colors utilize espresso, bronze, or marble gradients rather than flat `#000000`?
* [ ] Is the hero headline an oversized sans-serif using `font-light` and `tracking-tighter`?
* [ ] Are the ingredient notes and dietary metadata tiny, uppercase, and widely tracked?
* [ ] Do all interactions (hovers, carousels) utilize slow, cinematic easing (0.4s to 1.2s)?
* [ ] Are all structural divisions made using ultra-fine borders (`border-cream-50/10`) instead of heavy shadows?
* [ ] Do the booking CTAs feel like polished jewelry (copper, champagne, or vermilion)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast scaling (giant hero text paired with microscopic ingredient notes).
* Heavy use of glassmorphism (`backdrop-blur`) over moody food photography.
* Warm spotlight effects mimicking physical restaurant lighting.
* Crisp Grotesk typography that looks like a printed editorial menu.
* Extremely slow image dissolves and crossfades.

### ✗ Not Allowed

* Stark, pure `#FFFFFF` text or backgrounds anywhere in the interface.
* Fast, snappy, or bouncy spring animations.
* Flat vector food illustrations or icons (use photography or text instead).
* Colored borders that aren't metallic/warm accents (no bright blue or neon green).
* Heavy, opaque drop shadows on cards (use translucent backgrounds and fine borders for depth instead).