Porcelain Elderberry Village Proof Sheet

/porcelainElderberryVillageProofSheet
A design system for warm, credible countryside interfaces—crisp porcelain fields, elderberry accents, tactile photography, and review-led clarity. Prioritizes tidy modularity, no luxury sparseness, and honest, owner-maintained visual language.
Aug 24, 2026
Design System Content
# Porcelain Elderberry Village Proof Sheet

A design language for honest, tightly-woven, and hospitable countryside interfaces.

---

## Philosophy

> "Charm comes from clarity; hospitality lives in the meticulous details."

This system creates interfaces that feel like stepping into a well-maintained, generations-old countryside establishment. It relies on a close-family layout—tidy, modular, and lightly ruled. It firmly rejects luxury-sparse emptiness in favor of practical, owner-maintained warmth, anchored by credible reviews and honest photography.

### Core Beliefs

1. **Charm comes from clarity** — Information is delivered without unnecessary adornment. Tidy spacing and fine lines create a sense of calm and order.
2. **Credible reviews anchor trust** — The voice of the customer is elevated. Stars and reviews are structurally integrated into headlines and primary claims.
3. **Honest photography grounds the experience** — Imagery is tactile and real. We feature table-service, village-window views, china, printed menus, receipts, and rain-lit glass.
4. **Owner-maintained integrity** — Sections feel purposefully structured and practical, like a ledger or a meticulously kept physical menu.

### Strict Rules

* **Slim Navbar** — Navigation must be highly compact and unobtrusive.
* **Centered Review-Led Headlines** — Primary typographical statements are led by customer validation.
* **Fine-Ruled Menu Tables** — Data and offerings are separated by delicate, pale pewter lines rather than contained in bulky cards.
* **Compact CTA Row** — Actions are grouped tightly and pragmatically.
* **Zero Icons or Avatars** — Rely purely on typography, layout, and raw photography for visual communication. No decorative iconography.
* **No Badges or Chalkboards** — Avoid cliché café aesthetics; status and metadata are integrated as standard text.
* **No Beige** — Backgrounds remain strictly porcelain-white to maintain crisp contrast against blue-black typography.

---

## Color Palette

### Monochromatic & Accent Scale

The palette eschews warm beige for crisp porcelain fields, structured by pale pewter lines. Typography uses a deep blue-black reminiscent of fresh ink. The core accent is a singular, deep Elderberry, strictly reserved for CTAs and the editorial proof band, accompanied by golden stars for reviews.

```css
/* Fields (Porcelain White - No Beige Permitted) */
bg-white              /* Primary canvas background (#ffffff) */
bg-slate-50           /* Subtle secondary fields, split hero backdrops */

/* Rules (Pale Pewter) */
border-slate-200      /* Primary fine-ruled table lines */
border-slate-300      /* Hover boundaries, active row borders */

/* Typography (Blue-Black) */
text-slate-900        /* Primary headlines, core menu items, primary claims */
text-slate-800        /* Body copy, practical location columns */
text-slate-500        /* Metadata, timestamps, secondary menu descriptions */

/* Trust Indicators (Golden) */
text-amber-400        /* Review stars */

/* The Accent: Deep Elderberry */
bg-fuchsia-950        /* Primary call-to-action buttons, Editorial Proof Band (#4a044e) */
text-fuchsia-950      /* Text-based CTA links, focused navigational elements */
border-fuchsia-950    /* Focus rings on inputs */
bg-fuchsia-900        /* CTA hover state */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-slate-100
hover:text-slate-900
hover:border-slate-400
/* Destructive actions remain grounded and muted; no alarming reds */
```

---

## Typography

Typography pairs elegant, geometric or classic sans-serif headings with highly legible, warm body copy. It is designed to be readable and tidy, avoiding the overly-spaced feel of luxury brands. 

* **Headings:** Raleway or Josefin Sans
* **Body:** Karla, Source Sans 3, or Merriweather Sans

### Font Weights

```css
font-normal      /* Default for all body copy, menu items, and location columns */
font-medium      /* Buttons, sub-headings, interactive links */
font-semibold    /* Headings, review-led claims, core pricing */
font-bold        /* Strictly limited to the Editorial Proof Band headers */
```

### Font Size Scale

```css
text-xs          /* Fine print, footer metadata, secondary menu notes (12px) */
text-sm          /* Practical location columns, standard body copy (14px) */
text-base        /* Menu item names, primary body paragraphs (16px) */
text-lg          /* Subtitles, review quotes (18px) */
text-xl          /* Section headers, compact CTA text (20px) */
text-2xl         /* Centered review-led headlines, secondary page headers */
text-4xl         /* Primary hero headlines (Responsive metric units) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines to maintain a compact, close-family feel */
tracking-normal  /* All body copy and menu tables */
tracking-wide    /* Extremely limited: only for navbar links to aid legibility */

capitalize       /* Menu item titles */
/* Uppercase is generally avoided to maintain a welcoming, owner-maintained feel */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Font Family |
| --- | --- | --- | --- | --- |
| Centered Headline | 4xl | semibold | slate-900 | Raleway / Josefin Sans |
| Review Quotes | lg | normal | slate-800 | Karla / Source Sans 3 |
| Menu Item Title | base | semibold | slate-900 | Raleway / Josefin Sans |
| Menu Description | sm | normal | slate-500 | Karla / Source Sans 3 |
| CTA Button | base | medium | white | Karla / Source Sans 3 |

---

## Animation System

### Core Philosophy: Honest Motion

Interactions are immediate, tactile, and grounded. There are no spring physics, sweeping lines, or dramatic scales.

### Page Transitions (Fade-Ins Only)

Elements appear cleanly and simply without spatial translation.

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4, ease: "easeOut" }}
```

### Micro-Interactions (Underline Hovers)

Interactive elements rely solely on typography underlines to indicate interactivity. Backgrounds do not shift; buttons do not scale.

```tsx
// Nav links and secondary actions
"hover:underline underline-offset-4 decoration-slate-300 transition-colors duration-200"

// Primary CTA Button hover (Subtle color shift only)
"hover:bg-fuchsia-900 transition-colors duration-200"
```

---

## UI Components

### Editorial Proof Band

A strictly governed, single instance band on the page utilizing the deep elderberry accent and light text. Used for critical proof points or seasonal announcements.

```tsx
<div className="w-full bg-fuchsia-950 text-white py-3 px-6 flex justify-center items-center">
  <p className="text-sm font-medium tracking-normal">
    Featured in the National Restaurant Guide — 2024
  </p>
</div>
```

### Review-Led Claim (Hero Element)

Stars sit directly beneath the primary claim, centering the validation immediately in the user's eye-line.

```tsx
<div className="flex flex-col items-center text-center space-y-3">
  <h1 className="text-4xl font-semibold text-slate-900 tracking-tight font-raleway">
    Generations of countryside hospitality.
  </h1>
  <div className="flex space-x-1 text-amber-400">
    <StarFilled />
    <StarFilled />
    <StarFilled />
    <StarFilled />
    <StarFilled />
  </div>
  <p className="text-sm text-slate-800 font-medium font-karla">
    "The definitive village dining experience." — The Chronicle
  </p>
</div>
```

### Fine-Ruled Menu Table

Avoid cramped rows. Use modular, tidy spacing governed by pale pewter lines. No backgrounds or cards.

```tsx
<div className="flex flex-col border-t border-slate-200">
  <div className="flex justify-between items-baseline py-4 border-b border-slate-200 hover:bg-slate-50 transition-colors">
    <div className="flex flex-col">
      <span className="text-base font-semibold text-slate-900 font-raleway">Wild Mushroom Tart</span>
      <span className="text-sm text-slate-500 font-karla">Foraged mushrooms, thyme, double cream</span>
    </div>
    <span className="text-base font-semibold text-slate-900 font-karla ml-6">$14</span>
  </div>
</div>
```

---

## Component Catalog

### Structural Layouts

```tsx
// Split Hero (Text left, honest photography right)
"grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white"

// Practical Location Columns
"grid grid-cols-1 sm:grid-cols-3 gap-6 text-sm text-slate-800 border-t border-slate-200 pt-6"
```

### Buttons & Navigation

```tsx
// Primary CTA (Deep Elderberry)
"bg-fuchsia-950 text-white font-medium text-base px-6 py-2 hover:bg-fuchsia-900 transition-colors"

// Compact CTA Row Container
"flex flex-row items-center space-x-4 mt-6"

// Slim Navbar
"w-full h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6"
```

### Inputs

```tsx
// Practical, No-Nonsense Input
"w-full px-0 py-2 bg-transparent border-b border-slate-300 text-slate-900 placeholder-slate-500 focus:outline-none focus:border-fuchsia-950 transition-colors rounded-none"
```

### Imagery Guidelines

```tsx
// Image Container (Strictly flush or gently radiused, never circled/avatars)
"w-full h-auto aspect-[4/3] object-cover bg-slate-50"
// Note: Content MUST be honest photography: china, printed menus, receipts, rain-lit glass.
```

---

## Quality Checklist

* [ ] Is the spacing tidy and modular, intentionally avoiding empty "luxury" sparseness?
* [ ] Is the accent color (`fuchsia-950`) strictly limited to CTAs and the single Editorial Proof Band?
* [ ] Are the review stars visually prominent and grouped directly beneath the primary headline/claim?
* [ ] Does the menu table rely solely on fine pale pewter lines (`border-slate-200`) instead of cards or cramped rows?
* [ ] Have all icons, avatars, and badges been removed in favor of pure typography and authentic photography?
* [ ] Is the interface entirely free of beige, utilizing only porcelain-white fields (`bg-white`, `bg-slate-50`)?
* [ ] Is all motion restricted to simple fade-ins and typographic underline hovers?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Tidy, modular layouts with highly legible body copy.
* Centered text alignments for primary review-led headlines.
* Authentic, tactile photography featuring table settings, village-window views, and receipts.
* Porcelain-white backgrounds and pale pewter border divisions.
* Grouped, compact CTA rows.

### ✗ Not Allowed

* Avatars, vector icons, or graphical badges.
* Chalkboard typography, distressed textures, or cliché café motifs.
* Beige, cream, or off-yellow background colors.
* Overly sparse, disconnected elements (the "luxury gap" mistake).
* Complex animations, scaling hover states, or heavy drop shadows.
* Overusing the elderberry accent (must not become a "generic purple brochure").
Preview