Porcelain Malachite Dining Proof Folio

/porcelainMalachiteDiningProofFolio
A rigorously minimal design system for premium dining experiences—pure white backgrounds, deep malachite anchors, authentic imagery, and review proof create quietly confident, trustworthy restaurant interfaces without decorative elements or visual clutter.
Aug 28, 2026
Design System Content
# Porcelain Malachite Dining Proof Folio

A design language for highly credible, premium dining interfaces.

---

## Philosophy

> "Trust is built through visual silence, authentic evidence, and flawless execution."

This system creates digital dining experiences that emulate the quiet confidence of a Michelin-starred maître d'. The design relies on stark architectural contrast, leveraging porcelain-white canvases, deep malachite structural anchors, and ink-navy typography. The interface must act as an invisible frame for authentic photography and irrefutable review proof, never competing for attention.

### Core Beliefs

1. **Credibility comes from real photography** — The foundation of trust is unembellished, atmospheric imagery of the physical space and actual service.
2. **Readable menus are paramount** — Menus must function as pristine, document-style tables, entirely devoid of visual clutter.
3. **Review proof is mandatory** — Golden stars and concise guest sentiment anchor all primary claims.
4. **Disciplined hierarchy** — Every element exists within calm, rectangular constraints. High-end dining demands rigid, owner-editable spatial boundaries.

### Strict Rules

* **Refusal of Decorative Elements** — No icons, no badges, no avatars, and absolutely no flourishes. 
* **Refusal of Beige** — Backgrounds remain strictly porcelain-white. Warm, muddy tones diminish the crispness of the presentation.
* **Full-Image Hero** — Landing views must feature edge-to-edge photography with a dark, strictly legible overlay.
* **Document-Style Menus** — Menus are purely structural and tabular. No cramped rows or messy alignments.
* **Compact CTAs** — Reservation calls-to-action are compact, confident, and unobtrusive.
* **Centered Review-Count** — Social proof sections must be rigorously centered to create a gravitational anchor on the page.

---

## Color Palette

### Base, Text & Structural Scale

The palette rejects beige entirely, relying on pure whites, pale graphite for structural hairlines, and ink-navy for supreme typographic legibility.

```css
/* Backgrounds */
bg-white              /* Porcelain-white content fields (#ffffff) - MANDATORY for content */
bg-slate-50           /* Ultra-faint offset for strictly rectangular grouping (use sparingly) */

/* Structural Borders (Pale Graphite) */
border-slate-200      /* Pale graphite hairlines, menu dividers, grid lines */
border-slate-300      /* Hover boundaries for interactive rectangular fields */

/* Typography (Ink-Navy) */
text-slate-950        /* Primary ink-navy headings, hero typography */
text-slate-800        /* Standard body copy, menu item descriptions */
text-slate-500        /* Pale graphite secondary text, location/hours metadata */

/* Brand & Accents */
bg-emerald-900        /* Deep malachite-green - Strictly for Navbar and ONE feature band */
text-emerald-900      /* Deep malachite text for specific highlight focal points */

/* Trust Indicators */
text-amber-400        /* Golden review stars - The only permissible bright color */

/* Overlays */
bg-slate-950/60       /* Mandatory dark overlay for full-image hero legibility */
bg-slate-950/80       /* Deeper overlay for highly text-heavy image sections */
```

---

## Typography

Typography pairs classical, structured serifs (Cinzel, Marcellus SC, or Cormorant SC) with exceptionally clean sans-serifs (Optima, Source Sans 3, Gill Sans Nova, or Scala Sans). 

### Font Families

```css
font-serif       /* Headings: Cinzel, Marcellus SC, or Cormorant SC */
font-sans        /* Body & Data: Optima, Source Sans 3, Gill Sans Nova, or Scala Sans */
```

### Font Size Scale & Rules

* **Oversized caps are strictly prohibited.**
* Hierarchy relies on classical size variations and precise weight, rather than shouting.

```css
text-sm          /* Utility links, compact reservation CTA labels, review counts */
text-base        /* Standard menu item descriptions, location grids (16px) */
text-lg          /* Menu item names, short review lines beneath claims (18px) */
text-xl          /* Section sub-headers, feature band intro text */
text-3xl         /* Primary section headers (Menus, Location) */
text-5xl         /* Hero claims, overlaid on photography */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Claim | Serif | 5xl | Normal | white | None |
| Navbar Links | Sans | sm | Medium | white | None |
| Menu Item Name | Serif | lg | Normal | slate-950 | None |
| Menu Price | Sans | lg | Normal | slate-950 | None |
| Review Quote | Serif | lg | Normal | slate-800 | None |
| Review Count | Sans | sm | Normal | slate-500 | None |

---

## Motion & Spacing

### Spacing Philosophy: Calm & Rectangular

All layouts must adhere to strict, owner-editable grid structures. Elements must breathe. Cramped menu rows are a fundamental violation of this system.

```css
gap-8            /* Minimum spacing between menu items in a vertical list */
gap-16           /* Standard spacing between distinct layout columns */
py-24            /* Mandatory vertical padding for distinct content sections */
```

### Motion Philosophy: Utilitarian Restraint

Motion is restricted entirely to opacity fades and underline hovers. No bounces, springs, or sliding elements.

```tsx
/* Page/Element Load */
transition-opacity duration-700 ease-in-out opacity-0 hover:opacity-100

/* Link/CTA Interaction */
hover:underline decoration-emerald-900 underline-offset-4 transition-all duration-300
```

---

## Imagery & Photography

Photography is the primary vehicle for credibility. 
* **Mandatory Subjects:** Evening frontage, authentic table service, chef’s pass.
* **Atmospherics:** Heavy focus on linen textures, pristine glassware, and rain-lit windows.
* **Contrast:** High contrast is required. Weak image contrast is a critical implementation failure.

---

## UI Components

### Deep Malachite Navbar

Solid, commanding, and anchoring the top of the viewport.

```tsx
<nav className="w-full bg-emerald-900 text-white px-8 py-4 flex justify-between items-center">
  <div className="font-serif text-xl tracking-wide">RESTAURANT</div>
  <div className="flex gap-8 font-sans text-sm items-center">
    <a href="#" className="hover:underline underline-offset-4 transition-all">Menus</a>
    <a href="#" className="hover:underline underline-offset-4 transition-all">Location</a>
    <button className="bg-white text-emerald-900 px-5 py-2 font-medium">Reservations</button>
  </div>
</nav>
```

### Full-Image Hero

Edge-to-edge photography with a disciplined, legible dark overlay and social proof embedded directly beneath the main claim.

```tsx
<header className="relative w-full h-screen flex flex-col justify-center items-center text-center">
  <img src="/evening-frontage.jpg" className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-slate-950/60"></div> {/* Strict Legibility Overlay */}
  
  <div className="relative z-10 flex flex-col items-center gap-6">
    <h1 className="font-serif text-5xl text-white max-w-3xl leading-tight">
      A defining culinary experience in the heart of the city.
    </h1>
    <div className="flex flex-col items-center gap-2">
      <div className="flex gap-1 text-amber-400 text-lg">
        ★★★★★
      </div>
      <p className="font-sans text-white text-lg">"Flawless execution from chef's pass to table."</p>
    </div>
  </div>
</header>
```

### Document-Style Menu Table

Rigid, tabular, and highly readable. Separated by pale graphite hairlines.

```tsx
<section className="bg-white py-24 px-8 max-w-4xl mx-auto">
  <h2 className="font-serif text-3xl text-slate-950 text-center mb-16">Dinner Service</h2>
  
  <div className="flex flex-col gap-8">
    {/* Single Menu Item Row */}
    <div className="flex justify-between items-baseline border-b border-slate-200 pb-4">
      <div className="flex flex-col max-w-2xl">
        <h3 className="font-serif text-lg text-slate-950">Pan-Seared Scallops</h3>
        <p className="font-sans text-base text-slate-800 mt-1">Cauliflower purée, brown butter caper sauce, micro-herbs</p>
      </div>
      <div className="font-sans text-lg text-slate-950 pl-8">
        $28
      </div>
    </div>
  </div>
</section>
```

### Centered Review-Count

```tsx
<div className="w-full flex flex-col items-center justify-center py-16 bg-white border-y border-slate-200">
  <div className="flex gap-1 text-amber-400 text-xl mb-3">★★★★★</div>
  <p className="font-sans text-sm text-slate-500 uppercase tracking-widest">
    Based on 1,240 authentic guest reviews
  </p>
</div>
```

### Practical Location & Hours Grid

```tsx
<div className="grid grid-cols-2 gap-16 max-w-5xl mx-auto py-24 bg-white">
  <div className="flex flex-col gap-4">
    <h3 className="font-serif text-2xl text-slate-950">Location</h3>
    <p className="font-sans text-slate-800 text-base leading-relaxed">
      123 Rain-lit Avenue<br />
      Metropolis, NY 10012
    </p>
  </div>
  <div className="flex flex-col gap-4">
    <h3 className="font-serif text-2xl text-slate-950">Hours</h3>
    <table className="w-full font-sans text-slate-800 text-base">
      <tbody>
        <tr className="border-b border-slate-200">
          <td className="py-2">Tuesday - Thursday</td>
          <td className="py-2 text-right">5:30 PM - 10:00 PM</td>
        </tr>
        <tr className="border-b border-slate-200">
          <td className="py-2">Friday - Saturday</td>
          <td className="py-2 text-right">5:00 PM - 11:00 PM</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the background strictly porcelain-white (`bg-white`), with absolutely no beige undertones?
* [ ] Does the hero section utilize a dark overlay (`bg-slate-950/60` minimum) to ensure perfect text contrast against photography?
* [ ] Are the review stars rendered in golden yellow (`text-amber-400`), placed directly beneath the primary claim?
* [ ] Is the deep malachite-green (`bg-emerald-900`) restricted strictly to the navbar and exactly *one* feature band?
* [ ] Are the menus formatted as document-style tables with generous vertical spacing and pale graphite dividers?
* [ ] Has all motion been restricted to simple fades and underline hovers?
* [ ] Is the photography authentic (table service, chef’s pass, evening frontage) showcasing linen, glassware, or rain-lit windows?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast, authentic photography (linen, glassware, evening atmosphere).
* Pure porcelain-white backgrounds for all content fields.
* Pale graphite hairlines to structure grids and menu tables.
* Golden stars specifically for review proof.
* Strict grid alignment and calm, rectangular, owner-editable spacing.
* Opacity fades and simple underline hovers for interactivity.

### ✗ Not Allowed (Common Mistakes)

* **Generic green luxury templates:** Overusing the malachite green outside of the navbar and single feature band.
* **Weak image contrast:** Failing to use a sufficient dark overlay on hero photography.
* **Cramped menu rows:** Compressing menu items without generous vertical padding and clean layout.
* **Oversized caps:** Relying on giant capitalized text instead of structural font pairings (Serif/Sans).
* **Beige backgrounds:** Attempting to create "warmth" via muddy background colors.
* **Decorative elements:** Badges, avatars, UI icons (e.g., location pins, clock icons), or ornamental flourishes.
* **Complex motion:** Slides, springs, bounces, or heavy transforms.
Preview