Frosted Blueberry Cream Village Folio

/frostedBlueberryCreamVillageFolio
A quietly romantic, documentary-inspired design system for local businesses. Prioritizes clear hierarchy, authentic photography, restrained blueberry accents, and practical layouts while forbidding vintage nostalgia or decorative flair.
Aug 24, 2026
Design System Content
# Frosted Blueberry Cream Village Folio

A design language for cool, quietly romantic local-business interfaces.

---

## Philosophy

> "Charm is found in the hierarchy of truth—real light, real spaces, real type."

This system creates digital environments that feel like stepping out of a crisp evening into a welcoming, well-lit local establishment. The design relies entirely on structure, elegant typography, and authentic imagery, avoiding the trap of decorative nostalgia. It is quietly romantic, highly practical, and relies on a documentary approach to business presentation.

### Core Beliefs

1. **Hierarchy over decoration** — True charm is derived from clear structural priorities, practical sections, and strong type, never from applied ornamentation.
2. **Documentary authenticity** — Real photography of receipts, serving trays, and glass reflections ground the design. Authenticity cannot be drawn; it must be captured.
3. **Restrained focal points** — The "Blueberry" accent is used with extreme restraint, mimicking the deep, rich color of homemade jam or evening window light.
4. **Calm practicality** — Spacing should be comfortable and calm. It must not feel oppressively dense, nor should it mimic the sparse emptiness of ultra-luxury fashion brands.
5. **Structural anchors** — The interface relies on a document-style menu, clear review aggregations, and an immaculate, practical grid for hours and location.

### Strict Rules

* **Light, Sans-Serif Navigation** — Navbars must remain light, utilizing small, crisp sans-serif typography for links.
* **The Split Hero** — Primary introductions must use a split layout, anchoring the layout with photography of table linens or rainy frontages.
* **Review Proximity** — Review stars must be placed directly beneath the primary message, with a centered headline and accurate review count.
* **Single Accent Panel** — There is only one blueberry information panel permitted per page to maintain its impact.
* **No Floral or Vintage Cliché** — Absolutely no florals, stickers, avatars, or beige backgrounds. The implementation must not degrade into a "purple vintage tearoom."

---

## Color Palette

### The Frosted Surface & Accent Scale

The palette relies on frosted whites and pale blue-gray rules to build a cool, neutral stage. Typography uses a rich, ink-black. The accent is a deep, restrained blueberry, complemented strictly by golden stars for reviews.

```css
/* Backgrounds (Frosted Whites & Cool Grays) */
bg-white              /* Primary canvas (#ffffff) */
bg-slate-50           /* Secondary frosted panels, subtle story block backgrounds */
bg-slate-100/60       /* Hover states, soft container bounds */
bg-slate-200/50       /* Inactive tabs, subtle table striping */

/* Pale Blue-Gray Rules (Borders) */
border-slate-100      /* Hairline structural dividers */
border-slate-200      /* Primary layout rules, document menus */
border-slate-300      /* Input borders, defined grid boundaries */

/* The Restrained Blueberry Accent */
text-indigo-900       /* Deep jam-like text for primary action links */
bg-indigo-900         /* The single blueberry information panel, primary buttons */
border-indigo-900     /* Focused input states */
bg-indigo-950         /* Hover state for primary buttons */

/* Golden Review Stars */
text-amber-400        /* Exclusive to review stars */
fill-amber-400        /* Solid star vector fill */

/* Ink-Black Typography Scale */
text-slate-950        /* Primary ink-black headings, high-contrast numbers */
text-slate-800        /* Body text, story block paragraphs */
text-slate-600        /* Secondary metadata, document menu descriptions */
text-slate-400        /* Subtle timestamps, footer details */
```

### Destructive Actions

```css
hover:bg-rose-50
hover:text-rose-800
hover:border-rose-200
```

---

## Typography

The system juxtaposes classic, romantic serifs (Miller Text, Iowan Old Style, Baskerville) for headings with crisp, modern sans-serifs (Avenir Next, Humanist 521, Neue Haas Grotesk Text) for utility and navigation. **Oversized headings are strictly prohibited.**

### Font Families

```css
font-serif       /* Headings, centered primary messages, story blocks */
font-sans        /* Navbar links, buttons, address/hours grids, metadata */
```

### Font Weights

```css
font-normal      /* Core body copy, document menu items, story text */
font-medium      /* Small sans-serif navigation links, button text */
font-semibold    /* Hours/Contact grid labels, review counts */
/* font-bold is rarely used; hierarchy relies on serif vs. sans and subtle sizing */
```

### Font Size Scale

```css
text-xs          /* Navbar links, footer metadata, fine print (12px) */
text-sm          /* Body copy for tight grids, address details (14px) */
text-base        /* Standard story block text, document menu items (16px) */
text-lg          /* Subsection headers, review counts (18px) */
text-xl          /* Standard card headings (20px) */
text-2xl         /* Primary headers, balanced and restrained (24px) */
text-3xl         /* The maximum allowable size for hero headlines (30px) */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Centered Headline | Serif | 3xl | normal | slate-950 |
| Review Count | Sans | lg | semibold | slate-800 |
| Navbar Links | Sans | xs | medium | slate-600 |
| Story Block Body | Serif | base | normal | slate-800 |
| Grid Labels (Hours) | Sans | sm | semibold | slate-950 |

---

## Animation System

### Core Philosophy: Opacity Only

Motion is strictly limited to opacity changes. No translation (y/x axis movement), no scaling, no blurs, and no heavy spring animations. Elements simply breathe into existence.

### Page and Element Transitions

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

### Interactive Fades (Hover States)

Transitions on buttons and links rely purely on standard CSS opacity/color crossfades without layout shifts.

```tsx
className="transition-opacity duration-300 ease-in-out hover:opacity-80"
```

---

## UI Components

### The Split Hero Lockup

A balanced, side-by-side structure anchored by real photography (rainy windows, table linen) and a centered serif headline.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 min-h-[60vh] border-b border-slate-200">
  <div className="flex flex-col items-center justify-center p-12 bg-white text-center">
    <h1 className="font-serif text-3xl text-slate-950 mb-4">Evening Service</h1>
    <ReviewLockup count={128} />
  </div>
  <div className="relative w-full h-full bg-slate-100">
    {/* Insert real photography here (e.g., table linen, glass reflections) */}
    <img src="/rainy-frontage.jpg" alt="Storefront" className="absolute inset-0 object-cover w-full h-full" />
  </div>
</div>
```

### Review Lockup

Review stars must sit directly below the primary message or headline.

```tsx
<div className="flex flex-col items-center space-y-2 mt-4">
  <div className="flex space-x-1 text-amber-400">
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
  </div>
  <span className="font-sans text-sm font-semibold text-slate-800">
    Based on 128 local reviews
  </span>
</div>
```

### The Blueberry Information Panel

The single allowed instance of heavy accent usage per page. Used for critical information (e.g., reservations, special announcements).

```tsx
<div className="bg-indigo-900 text-white p-8 sm:p-12 text-center my-12">
  <h3 className="font-serif text-2xl mb-4">Reserve a Table</h3>
  <p className="font-sans text-sm text-indigo-100 mb-6">
    We hold evening service Tuesday through Sunday.
  </p>
  <button className="bg-white text-indigo-900 font-sans font-medium text-sm px-6 py-2 hover:opacity-90 transition-opacity">
    Check Availability
  </button>
</div>
```

---

## Component Catalog

### Document-Style Menu

A practical, clean list structure for offerings, separated by pale blue-gray rules.

```tsx
<ul className="w-full max-w-2xl mx-auto divide-y divide-slate-200">
  <li className="py-4 flex justify-between items-baseline">
    <span className="font-serif text-lg text-slate-950">Earl Grey & Lavender</span>
    <span className="font-sans text-sm text-slate-600">4.50</span>
  </li>
  <li className="py-4 flex justify-between items-baseline">
    <span className="font-serif text-lg text-slate-950">Sourdough Toast</span>
    <span className="font-sans text-sm text-slate-600">6.00</span>
  </li>
</ul>
```

### Address & Hours Grid

A clean, highly structural grid for practical information.

```tsx
<div className="grid grid-cols-2 gap-8 border-t border-b border-slate-200 py-8">
  <div>
    <h4 className="font-sans text-sm font-semibold text-slate-950 mb-2 uppercase tracking-wide">Location</h4>
    <p className="font-sans text-sm text-slate-600 leading-relaxed">
      128 High Street<br />
      Village Square<br />
      Northumberland
    </p>
  </div>
  <div>
    <h4 className="font-sans text-sm font-semibold text-slate-950 mb-2 uppercase tracking-wide">Hours</h4>
    <p className="font-sans text-sm text-slate-600 leading-relaxed">
      Tue–Sun: 9am – 4pm<br />
      Evenings: 6pm – 10pm<br />
      Closed Mondays
    </p>
  </div>
</div>
```

### Navigation Bar

```tsx
<nav className="w-full bg-white border-b border-slate-100 px-6 py-4 flex justify-between items-center">
  <span className="font-serif text-xl text-slate-950">Folio</span>
  <div className="flex space-x-6">
    <a href="#" className="font-sans text-xs font-medium text-slate-600 hover:text-indigo-900 transition-colors">Menu</a>
    <a href="#" className="font-sans text-xs font-medium text-slate-600 hover:text-indigo-900 transition-colors">Story</a>
    <a href="#" className="font-sans text-xs font-medium text-slate-600 hover:text-indigo-900 transition-colors">Visit</a>
  </div>
</nav>
```

---

## Quality Checklist

* [ ] Is the primary hero layout strictly split between real photography and centered typography?
* [ ] Are the review stars rendered in `text-amber-400` directly beneath the main headline?
* [ ] Have you limited the "Blueberry" accent (`bg-indigo-900`) to exactly one information panel or primary action grouping?
* [ ] Is all animation restricted exclusively to opacity changes?
* [ ] Are the heading sizes constrained to `text-3xl` or smaller to avoid oversized typography?
* [ ] Does the imagery feature real, physical elements (receipts, glass reflections, table linen) rather than vectors or avatars?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Frosted whites (`bg-slate-50`) and pale blue-gray rules (`border-slate-200`).
* Classic serif typefaces (Baskerville, Iowan Old Style) for storytelling and headers.
* Calm, practical spacing that reads comfortably like a physical document.
* Real, unedited photography highlighting natural evening light, trays, or storefronts.
* Golden stars specifically for review components.

### ✗ Not Allowed

* Florals, vintage stickers, or illustrative avatars of any kind.
* Beige, cream, or sepia-toned backgrounds (this prevents the "vintage tearoom" degradation).
* Oversized hero text (anything larger than 30px/`text-3xl`).
* Muddy purples or desaturated mauves (the accent must remain a distinct, restrained Blueberry).
* Heavy overlays, drop shadows, or scaling animations.
* Any motion beyond simple opacity fades.
Preview