Frostwhite Ink-Rose Village Review Sheet

/frostwhiteInkroseVillageReviewSheet
A refined, editorial design system for hospitality and local business interfaces, emphasizing authenticity, structured grids, classic typography, and highly controlled color cues for trust and clarity.
Sep 3, 2026
Design System Content
# Frostwhite Ink-Rose Village Review Sheet

A refined, light-themed design language for world-class local, hospitality, and brick-and-mortar interfaces.

---

## Philosophy

> "A world-class local page should look composed, readable, and maintained."

This system creates interfaces that feel authentic, grounded, and inherently trustworthy. It avoids the gloss of corporate templates and the nostalgia of vintage motifs, favoring a highly structured, editorial presentation. The design relies on formal rectangular spacing, legible typography, and composed imagery that respects the user's time and attention.

### Core Beliefs

1. **Authenticity over gloss** — The interface should frame reality. We rely on authentic interior or village-frontage imagery featuring tactile elements like linen, teapots, menu sheets, and glass reflections.
2. **Generous and calm typography** — Reading a menu or checking hours should feel like a quiet, unhurried experience. Typographic pairings are classic and highly legible.
3. **Structured reliability** — Information is presented in a carefully ruled, lightly formal layout. We avoid "over-polished luxury spacing" in favor of consistent, rectangular grids that feel practical and maintained.
4. **Targeted social proof** — Trust is paramount. Review counts and golden star ratings must be front-and-center, immediately validating the main statement.

### Strict Rules

* **No Script Fonts** — Elegance comes from classic serif and sans-serif pairings, never from cursive or handwritten typography.
* **No Beige or Decorative Frames** — Backgrounds remain a crisp frostwhite. Boundaries are defined by thin, blue-gray rules rather than ornamental borders.
* **No Avatars or AI Motifs** — Imagery must be grounded in physical reality. Social proof relies on numbers and stars, not artificial user portraits.
* **Single Photo Band** — Only one atmospheric photo band per page is permitted, and it must utilize a high-contrast overlay to ensure absolute text legibility.
* **Strict Layout Components** — The interface must include a clean light navbar, an editorial hero, immediate social proof under the main header, a carefully ruled menu table, and a simple location/hours grid.

---

## Color Palette

### Frostwhite, Blue-Gray & Charcoal-Navy

The core palette relies on a stark but soft frostwhite canvas, divided by cool blue-gray structural rules, and grounded by deep charcoal-navy typography. 

```css
/* Backgrounds (Frostwhite base) */
bg-slate-50           /* Primary canvas background (Frostwhite) */
bg-white              /* Elevated cards, menu tables, interactive zones */
bg-slate-100          /* Secondary panels, quiet atmospheric zones */
bg-slate-200/50       /* Soft table row highlights on hover */

/* Rules & Borders (Blue-Gray) */
border-slate-200      /* Default structural borders and ruled menu tables */
border-slate-300      /* Hover boundaries, focused grid lines */
border-slate-400      /* Active navigational states */

/* Typography (Charcoal-Navy) */
text-slate-900        /* Primary headers, editorial hero titles, heavy copy */
text-slate-700        /* Generous body copy, menu descriptions, location grids */
text-slate-500        /* Secondary metadata, operating hours, subtle labels */
text-slate-400        /* Disabled states, placeholder text */
```

### The Accents: Ink-Rose & Golden Yellow

Colors are strictly reserved for action (Ink-Rose) and trust validation (Golden Yellow).

```css
/* Ink-Rose (CTAs, Pull Quotes, Overlays) */
bg-rose-800           /* Primary call-to-action buttons, dark image overlays */
text-rose-800         /* Text-based CTAs, prominent pull quotes */
bg-rose-900           /* Hover states for primary actions */
border-rose-800       /* Focused input boundaries */
text-rose-900         /* Darker accent variations for high contrast */

/* Golden Yellow (Strictly for Review Stars) */
text-amber-400        /* Golden yellow review stars */
fill-amber-400        /* SVG interior for solid star ratings */
```

---

## Typography

The system pairs classic, authoritative serifs (Zodiak, Times New Roman, Libre Baskerville, Georgia) with highly legible sans-serifs (Humanist 521, Frutiger, Source Sans 3). 

### Font Families

```css
font-serif       /* Headlines, pull quotes, menu item titles */
font-sans        /* Body copy, metadata, location/hours grids, UI elements */
```

### Font Weights

```css
font-normal      /* Core body copy - calm and generous */
font-medium      /* Subheadings, interactive labels, location names */
font-semibold    /* Navigational headers, CTA buttons, review metrics */
font-bold        /* Reserved strictly for crucial price points or bolded emphasis */
```

### Font Size Scale

```css
text-xs          /* Fine print, map directions (12px) */
text-sm          /* Standard location grids, UI metadata (14px) */
text-base        /* Generous body copy, standard menu items (16px) */
text-lg          /* Review count summaries, pull quote base (18px) */
text-xl          /* Secondary headers, menu section titles (20px) */
text-3xl         /* Standard page headers, atmospheric band overlays */
text-5xl         /* Editorial hero titles */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default paragraph flow text */
tracking-wide    /* Navigational links, simple grid headers */
uppercase        /* Subtle table headers, location grid labels */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Statement | Serif | 5xl | normal | slate-900 |
| Pull Quote | Serif | text-lg | normal | rose-800 |
| Menu Item Title| Serif | text-base| medium | slate-900 |
| Body/Menu Desc | Sans | text-base| normal | slate-700 |
| Location Grid | Sans | text-sm | normal | slate-700 |
| Review Count | Sans | text-sm | semibold | slate-900 |

---

## Animation System

### Core Philosophy: Light Formalism

Motion is restricted to absolute fundamentals. There are no spring animations, scaling, or dramatic reveals. Interaction is confirmed through soft color fades and classic typographic underlining.

### Hover States (Underlines & Fades)

```tsx
/* Typographic links */
className="transition-colors duration-200 hover:text-rose-800 hover:underline underline-offset-4"

/* Button fades */
className="transition-colors duration-300 ease-in-out"
```

### Image Band Reveal (Soft Fade)

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

---

## UI Components

### The Editorial Hero

Clean light navbar sitting above an authentic interior or village-frontage image. Social proof sits strictly underneath the main header.

```tsx
<div className="bg-slate-50 pt-12 pb-16 px-8 text-center border-b border-slate-200">
  <h1 className="font-serif text-5xl text-slate-900 mb-6">The Village Frontage</h1>
  <div className="flex justify-center items-center gap-2 mb-8">
    <div className="flex text-amber-400">
      <StarIcon className="w-5 h-5 fill-current" />
      {/* 5 Stars */}
    </div>
    <span className="font-sans text-sm font-semibold text-slate-900">4.9</span>
    <span className="font-sans text-sm text-slate-500">(128 Reviews)</span>
  </div>
</div>
```

### Ruled Menu Table

Carefully ruled, tabular layouts for offerings. No heavy shadows, just precise horizontal borders.

```tsx
<div className="w-full border-t border-slate-200">
  <div className="flex justify-between py-4 border-b border-slate-200 hover:bg-slate-100 transition-colors duration-200 px-4">
    <div className="flex flex-col">
      <span className="font-serif text-base font-medium text-slate-900">Earl Grey Bergamot</span>
      <span className="font-sans text-sm text-slate-700 mt-1">Steeped for three minutes.</span>
    </div>
    <span className="font-sans text-base font-medium text-slate-900">$4.50</span>
  </div>
</div>
```

### Atmospheric Photo Band

One per page. Must contain a high-contrast overlay panel for perfect legibility.

```tsx
<div className="relative w-full h-96 bg-[url('/linen-teapot.jpg')] bg-cover bg-center">
  {/* High-contrast ink-rose overlay panel */}
  <div className="absolute inset-0 bg-rose-900/70 flex items-center justify-center">
    <p className="font-serif text-3xl text-white text-center max-w-2xl px-6 leading-relaxed">
      "A composed environment built on consistency and warmth."
    </p>
  </div>
</div>
```

### Location / Hours Grid

A simple, rectangular structure. Lightly formal, highly readable.

```tsx
<div className="grid grid-cols-2 gap-8 p-8 border border-slate-200 bg-white">
  <div>
    <h3 className="font-sans text-xs uppercase tracking-wide text-slate-500 mb-3">Location</h3>
    <p className="font-sans text-base text-slate-700 leading-relaxed">
      124 Heritage Lane<br />
      Village District, 90210
    </p>
  </div>
  <div>
    <h3 className="font-sans text-xs uppercase tracking-wide text-slate-500 mb-3">Hours</h3>
    <ul className="font-sans text-base text-slate-700 space-y-1">
      <li className="flex justify-between"><span>Mon - Fri</span><span>8am - 4pm</span></li>
      <li className="flex justify-between"><span>Saturday</span><span>9am - 2pm</span></li>
    </ul>
  </div>
</div>
```

---

## Component Catalog

### Buttons

```tsx
// Primary CTA (Ink-Rose)
"bg-rose-800 text-white font-sans font-semibold text-sm px-6 py-3 hover:bg-rose-900 transition-colors duration-300 rounded-none"

// Secondary Action (Ruled)
"bg-transparent border border-slate-300 text-slate-900 font-sans font-medium text-sm px-6 py-3 hover:border-slate-400 hover:bg-slate-50 transition-all duration-200 rounded-none"
```

### Inputs

```tsx
// Clean, rectangular form fields
"w-full px-4 py-3 bg-white border border-slate-300 text-slate-900 font-sans text-base placeholder-slate-400 focus:outline-none focus:border-rose-800 focus:ring-1 focus:ring-rose-800 transition-colors"
```

### Pull Quotes

```tsx
// Refined, typography-led accent block
<blockquote className="border-l-2 border-rose-800 pl-6 py-2 my-8">
  <p className="font-serif text-lg text-rose-800 leading-relaxed">
    {quoteText}
  </p>
</blockquote>
```

---

## Quality Checklist

* [ ] Is the page background consistently frostwhite (`bg-slate-50` or `bg-white`)?
* [ ] Are review counts and golden yellow stars positioned immediately beneath the main statement?
* [ ] Does the menu/pricing section utilize thin, blue-gray ruled lines (`border-slate-200`)?
* [ ] Are hover states restricted strictly to underlines (`underline-offset-4`) and soft color fades?
* [ ] Did you avoid over-polished luxury spacing in favor of formal, rectangular, practical padding?
* [ ] Is there exactly *one* atmospheric photo band, and does its overlay provide absolute text contrast?
* [ ] Are all UI elements strictly free of decorative frames, avatars, and script fonts?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Frostwhite (`bg-slate-50`) canvases and blue-gray (`border-slate-200`) grid lines.
* Muted ink-rose for CTAs and single pull-quotes.
* Golden yellow strictly for review stars.
* Imagery featuring linen, teapots, menu sheets, glass reflections, and authentic interior/exterior photography.
* Rectangular, consistent grid spacing (`p-6`, `p-8`).
* Classic Serif paired with highly readable Sans-serif typography.

### ✗ Not Allowed

* **Pink Tearoom Flyer aesthetic:** Overuse of pink/rose as a background color or decorative element.
* **Low-contrast overlays:** Placing text over photos without a heavy ink-rose or dark background panel.
* **Over-polished luxury spacing:** Massive, floating elements with excessive white space that feels disconnected.
* **Weak social proof:** Hiding reviews in footers or omitting review counts.
* **Beige backgrounds:** Or any faux-parchment/vintage textures.
* **Avatars or AI Motifs:** Avoid artificial faces or generated elements.
* **Script Fonts:** No cursive, handwriting, or decorative typography.
Preview