No preview available
Snowglass Bramble-Blue Village Notice Sheet

/snowglassBrambleblueVillageNoticeSheet
A design system for local business UIs, blending world-class proportion, strict color restraint, tactile photography, and structural dependability for an honest, high-craft digital presence.
Sep 10, 2026
Design System Content
# Snowglass Bramble-Blue Village Notice Sheet

A design language for honest, high-craft local business interfaces.

---

## Philosophy

> "Maintained by a careful owner; world-class proportion without the agency gloss."

This system creates a crisp, light, local-business aesthetic that feels deeply rooted and impeccably cared for. It rejects the overly slick, hyper-modern aesthetic of tech agencies in favor of a sturdy, 2018-era rhythm. The interface should evoke the feeling of looking through a spotless, rain-speckled shop window at a meticulously organized counter.

### Core Beliefs

1. **Care Over Polish** — The layout relies on world-class proportion, exact spacing, and pristine alignment rather than decorative gloss.
2. **Honest Hierarchy** — Headings are moderately sized. Information is delivered practically, without screaming for attention.
3. **The Bramble-Blue Constraint** — Color is tightly rationed. The deep, organic bramble-blue is held back exclusively for primary CTAs, proof quotes, and exactly one confident feature panel per page.
4. **Structural Dependability** — Pages follow a predictable, grounded flow: split heroes, centered credibility, practical story bands, and precise utility modules.
5. **Photographic Authenticity** — Imagery focuses on the tactile reality of the business (edges, textures, environments) rather than staged human reactions. 

### Strict Layout Rules

* **Narrow Navbar** — Navigation must be tightly constrained, avoiding full-bleed, edge-to-edge spreading.
* **Split Hero** — The opening section must be split. One half holds the message; the other holds specific, atmospheric photography (counter-service, countryside frontage, or window-table details).
* **Immediate Proof** — Review stars must sit immediately beneath the primary hero message.
* **Centered Credibility** — A single, perfectly centered headline must anchor the credibility section beneath the hero.
* **Two Practical Story Bands** — Narrative is constrained to two unembellished, full-width bands.
* **Precision Utility** — Every page must contain a fine-ruled menu/service table and a precise, no-nonsense location module.

---

## Color Palette

### Snowglass, Zinc & Graphite

The palette is incredibly restrained. Backgrounds are icy and clear (Snowglass), dividers are cool and metallic (Zinc), and text is deeply legible (Graphite).

```css
/* Snowglass Backgrounds */
bg-white              /* Primary canvas */
bg-slate-50/80        /* Snowglass secondary areas, subtle offsets */
bg-slate-100/50       /* Table row striping, delicate hover states */

/* Cool Zinc Dividers */
border-zinc-100       /* Fine-ruled menu tables, soft dividers */
border-zinc-200       /* Primary container boundaries, story band borders */
border-zinc-300       /* Focused input borders, structural rules */

/* Graphite Typography */
text-zinc-900         /* Primary headings, high-contrast data */
text-zinc-700         /* Standard paragraph body text */
text-zinc-500         /* Compact labels, secondary metadata */
text-zinc-400         /* Muted timestamps, fine-print */

/* The Accent: Bramble-Blue */
/* Reserved STRICTLY for CTAs, proof quotes, and one feature panel */
bg-indigo-950         /* The confident feature panel background, primary buttons */
text-indigo-950       /* Quotation marks, primary text links */
border-indigo-950     /* Active state borders */
bg-indigo-900         /* Button hover states */

/* The Endorsement: Golden Yellow */
/* Reserved EXCLUSIVELY for review stars */
text-yellow-400       /* Active review stars (#facc15) */
text-yellow-500       /* High-contrast star borders if needed */
```

---

## Typography

Pairing robust, elegant display sans-serifs with highly legible, workhorse body fonts to achieve a sturdy 2018-era rhythm. 

* **Primary/Display:** Museo Sans, Montserrat Light, or Raleway
* **Secondary/Body:** Open Sans, Merriweather Sans, or Roboto Slab

### Spacing & Rhythm Philosophy

```css
/* Leading (Line Height) */
leading-loose    /* Generous paragraph leading for comfortable, honest reading */
leading-relaxed  /* Secondary descriptive text */
leading-none     /* Compact labels, data tables, utility text */

/* Tracking (Letter Spacing) */
tracking-normal  /* All body copy */
tracking-wide    /* Navigational labels and uppercase location metadata */
tracking-tight   /* Restrained to headlines to keep them compact and neat */
```

### Font Size Scale (Restrained)

Headings are purposefully restrained. Oversized typography is strictly prohibited.

```css
text-xs          /* Compact utility labels, precise location details */
text-sm          /* Menu table rows, narrow navbar links */
text-base        /* Core paragraph text, generous and readable */
text-lg          /* Story band introductory text */
text-xl          /* Standard component headers */
text-2xl         /* Centered credibility headlines */
text-4xl         /* Maximum hero size. Never exceed this. */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Leading | Family Type |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | light | zinc-900 | tight | Montserrat / Raleway |
| Credibility Header | 2xl | medium | zinc-900 | tight | Montserrat / Raleway |
| Body Paragraph | base | normal | zinc-700 | loose | Open Sans / Merriweather |
| Compact Labels | xs | semibold | zinc-500 | none | Open Sans / Merriweather |
| Proof Quotes | lg | normal | indigo-950 | relaxed | Roboto Slab / Merriweather |

---

## Animation System

### Core Philosophy: Restraint and Respect

No bouncy springs, no spatial transformations, no parallax. The interface breathes gently through simple opacity adjustments. 

### Page Transitions & Reveals

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

### Hover States

Hover states are strictly limited to subtle opacity fades on imagery or slight background shifts on structural components. 

```tsx
// Link/Button Hover
className="transition-colors duration-200 ease-in"

// Image/Card Hover
className="transition-opacity duration-300 hover:opacity-90"
```

---

## Imagery Rules

Photography is the soul of this system, requiring a specific, tactile art direction. 

* **Required Subjects:** Menu sheets, tray edges, till counters, wet windows, countryside frontage, window-tables.
* **Prohibited Subjects:** Generic stock smiles, avatars, staged agency "culture" shots.
* **Treatment:** Natural lighting. No heavy overlays, no faux-rustic sepia/grain filters.

---

## UI Components

### Narrow Navbar

Constrained width, clean structure, avoiding edge-to-edge sprawl.

```tsx
<nav className="max-w-4xl mx-auto px-4 py-6 flex justify-between items-center border-b border-zinc-100">
  <div className="font-light text-xl text-zinc-900 tracking-tight">Proprietor</div>
  <ul className="flex space-x-6 text-sm text-zinc-500 font-semibold tracking-wide">
    <li className="hover:text-zinc-900 transition-colors duration-200">Menu</li>
    <li className="hover:text-zinc-900 transition-colors duration-200">Location</li>
  </ul>
</nav>
```

### Hero Review Stars

Must sit immediately below the hero message.

```tsx
<div className="flex items-center space-x-1 mt-4">
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <span className="text-xs text-zinc-500 ml-2 font-semibold tracking-wide uppercase">Local Guide</span>
</div>
```

### The Confident Feature Panel

The only permitted large-scale use of Bramble-Blue.

```tsx
<section className="bg-indigo-950 text-white w-full py-16 px-8 my-12">
  <div className="max-w-3xl mx-auto text-center">
    <h3 className="text-2xl font-light tracking-tight mb-6">Our Standard of Care</h3>
    <p className="text-base text-indigo-100 leading-loose">
      Every detail is managed by hand before the doors open.
    </p>
  </div>
</section>
```

### Fine-Ruled Menu Table

Utilitarian, elegant, strictly using zinc dividers.

```tsx
<div className="max-w-2xl mx-auto border-t border-zinc-300">
  <div className="flex justify-between py-3 border-b border-zinc-100 text-sm">
    <span className="text-zinc-900 font-medium">Morning Press</span>
    <span className="text-zinc-500">3.50</span>
  </div>
  <div className="flex justify-between py-3 border-b border-zinc-100 text-sm">
    <span className="text-zinc-900 font-medium">Sourdough & Butter</span>
    <span className="text-zinc-500">4.00</span>
  </div>
</div>
```

### Proof Quotes

```tsx
<blockquote className="text-lg text-indigo-950 leading-relaxed font-serif border-l-2 border-indigo-950 pl-6 my-8">
  "A quiet, perfect fixture on the corner."
</blockquote>
```

### Primary Call to Action

```tsx
<button className="bg-indigo-950 text-white px-6 py-3 text-sm font-semibold tracking-wide hover:bg-indigo-900 transition-colors duration-200">
  View Full Menu
</button>
```

---

## Quality Checklist

* [ ] Is the maximum heading size strictly capped at `text-4xl`?
* [ ] Are paragraphs utilizing generous spacing (`leading-loose`)?
* [ ] Is the Navbar horizontally constrained, avoiding full-width spreading?
* [ ] Are the review stars exactly `text-yellow-400` and placed directly under the hero message?
* [ ] Is Bramble-Blue (`indigo-950`) restricted to CTAs, quotes, and a single feature panel?
* [ ] Do all tables and dividers use crisp, unshadowed `border-zinc-100` or `200` lines?
* [ ] Are hover effects limited purely to simple opacity or color fades (no transforms)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Icy Snowglass whites and clean Zinc grays.
* Generous paragraph leading and compact utility labels.
* Bramble-Blue exclusively for designated elements (Buttons, Quotes, One Feature Panel).
* Structural layouts (split hero, strict two-band stories).
* Photography of tactile elements: tray edges, wet windows, till counters.
* Pure opacity fade-in animations.

### ✗ Not Allowed

* Corporate blue (e.g., standard Tailwind `blue-500` or `blue-600`).
* Beige, cream, or faux-rustic textures (wood grains, chalkboard textures).
* Stickers, decorative vectors, or user avatars.
* Oversized headings (above `4xl`).
* Heavy photography overlays (e.g., black gradients over images).
* Generic stock photography of smiling customers.
* Drop shadows, spring animations, or scaling hover states.
Preview