Buttercup Counter Restaurant Grid

/buttercupCounterRestaurantGrid
A vivid, minimalist design system combining a strict split grid, friendly geometric typography, and a precise color palette to create modern, high-end restaurant interfaces focused on clarity over ornamentation.
Jul 27, 2026
Design System Content
# Buttercup Counter Restaurant Grid

A vivid but minimalist design language for modern, template-driven culinary experiences.

---

## Philosophy

> "Appetite is awakened by vivid color; trust is built by structural precision."

This system creates digital spaces that feel like a sunlit, high-end breakfast counter—warm, inviting, and flawlessly organized. The aesthetic balances the vibrancy of food with the clarity of a strict grid, relying on bold color-blocking and immaculate typographic hierarchy rather than ornamental UI. 

### Core Beliefs

1. **Grid as the Canvas** — A highly structured, templatable split-layout anchors the experience. The left provides navigational utility; the right drives image-led storytelling.
2. **Vivid Minimalism** — Use strong, controlled color blocks from a precise tetradic palette. Color defines zones; it never decorates unnecessarily.
3. **Friendly Precision** — Typography bridges the gap between mechanical exactness and human warmth, utilizing generous sizes and geometric legibility.
4. **Rhythm through Contrast** — Alternating full-bleed photography with calm, wide-padded narrative sections creates a breathable pacing.

### Strict Rules

* **Instrument Sans Only** — No secondary typefaces. Scale, weight, and layout provide all necessary hierarchy.
* **No Ornamental UI** — Zero decorative squiggles, novelty food icons, or textured overlays. The layout relies purely on structure and photography.
* **Controlled Tetradic Palette** — Stick strictly to Buttercup Yellow, Powder Blue, Fresh Green, and Charcoal. No deviations into muddied secondary shades.
* **No Floating Elements** — Elements must respect the grid. No disjointed floating action buttons or overlapping offset cards.

---

## Color Palette

### The Tetradic Block & Neutral Canvas

The palette relies on stark contrasts between crisp white spaces, soothing off-white narrative backgrounds, deep charcoal typography, and highly controlled pops of vivid color.

```css
/* Backgrounds (Structural Foundation) */
bg-white              /* Pure white for centered menu previews and main content (#ffffff) */
bg-off-white          /* Calm off-white for centered narrative sections (#f9f8f4) */
bg-charcoal-900       /* Deep charcoal for inverted footer zones or dark split panels (#1c1c1c) */

/* The Tetradic Palette (Color Blocks & Highlights) */
bg-buttercup-400      /* Primary color block, sunny hero accents (#fcd34d) */
bg-powder-300         /* Secondary color block, calm counter-balance (#93c5fd) */
text-fresh-500        /* Fresh green for subtle metric accents, vegan/fresh tags (#22c55e) */

/* Text Hierarchy */
text-charcoal-900     /* Primary typography, hero headings, menu categories */
text-charcoal-700     /* Body copy, narrative text, standard links */
text-charcoal-400     /* Muted metadata, prices, subtle descriptors */
text-white            /* Inverse text on bold color blocks */

/* Borders */
border-charcoal-100   /* Subtle grid dividers for menu items */
border-charcoal-900   /* Bold structural borders for split layouts */
```

---

## Typography

The system exclusively utilizes **Instrument Sans** for friendly precision. Type is set unusually large to establish a bold, editorial layout without the need for visual noise.

### Font Weights

```css
font-normal      /* Standard body copy, narrative text */
font-medium      /* Menu item names, standard buttons, oversized navigation */
font-semibold    /* Section headings, menu categories */
font-bold        /* Left-aligned hero headlines */
```

### Font Size Scale (Strict Adherence)

```css
text-[18px]      /* Body copy, descriptive narrative text */
text-[22px]      /* Oversized navigation links */
text-[30px]      /* Standard menu categories (Mobile) */
text-[36px]      /* Primary menu categories (Desktop) */
text-[46px]      /* Standard section headings (Mobile) */
text-[54px]      /* Standard section headings (Desktop) */
text-[74px]      /* Hero headings (Mobile) */
text-[84px]      /* Hero headings (Desktop) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Mandatory for all Hero (74-84px) and Section (46-54px) headings */
tracking-normal  /* Menu categories, body copy, and navigation */
leading-none     /* Hero headings to ensure tight, blocky visual weight */
leading-relaxed  /* Standard body copy for calm reading */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking/Leading |
| --- | --- | --- | --- | --- |
| Hero Headline | 84px | bold | charcoal-900 | tight / none |
| Section Heading | 54px | semibold | charcoal-900 | tight / tight |
| Menu Category | 36px | semibold | charcoal-900 | normal / normal |
| Oversized Nav | 22px | medium | charcoal-900 | normal / normal |
| Body Copy | 18px | normal | charcoal-700 | normal / relaxed |

---

## Animation System

### Core Philosophy: The Crisp Snap

Because the design is structural and templatable, animations must feel mechanical and intentional. No bouncy elasticity; only smooth, deliberate reveals that respect the grid.

### Split Layout Entrance

Left navigation slides in solidly from the left, while the right image container wipes in smoothly.

```tsx
// Nav Container
initial={{ x: '-10%', opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 0.4, ease: 'easeOut' }}

// Image Container
initial={{ opacity: 0, clipPath: 'inset(0 0 100% 0)' }}
animate={{ opacity: 1, clipPath: 'inset(0 0 0% 0)' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Hover States (Solid Blocks)

No gradients or shadows on hover. Hover states are defined by instantaneous solid color swaps or sharp border interactions.

```tsx
className="transition-colors duration-150 ease-in-out hover:bg-buttercup-400 hover:text-charcoal-900"
```

---

## UI Components

### Split Layout Base

The structural foundation of the template. Oversized nav on the left, prominent storytelling on the right.

```tsx
<div className="flex min-h-screen w-full bg-white">
  <aside className="w-1/3 flex-shrink-0 border-r border-charcoal-100 p-12">
    {/* Left-aligned logo & oversized nav */}
  </aside>
  <main className="w-2/3 flex-grow">
    {/* Image-led storytelling */}
  </main>
</div>
```

### Centered Menu Preview

Transitioning from the full-bleed hero into a highly legible, centered menu container on pure white.

```tsx
<section className="w-full bg-white py-24 flex flex-col items-center">
  <div className="max-w-4xl w-full text-center">
    <h2 className="text-[54px] tracking-tight font-semibold text-charcoal-900 mb-16">
      Morning Classics
    </h2>
    {/* Menu Grid */}
  </div>
</section>
```

### Full-Bleed alternating Narrative

Broad vertical padding with calm off-white backgrounds alternating with high-res food imagery.

```tsx
<section className="w-full bg-off-white py-32 px-12 flex items-center justify-center">
  <p className="max-w-2xl text-[18px] text-charcoal-700 leading-relaxed text-center">
    Narrative text goes here...
  </p>
</section>
```

---

## Component Catalog

### Menu Items

Minimalist structure. No dot leaders or heavy boxes.

```tsx
<div className="flex justify-between items-baseline border-b border-charcoal-100 py-4">
  <h3 className="text-[22px] font-medium text-charcoal-900">Avocado Toast</h3>
  <span className="text-[18px] text-charcoal-400">$14</span>
</div>
```

### Navigation Links

Oversized, blocky, and strictly left-aligned. 

```tsx
<a className="block text-[22px] font-medium text-charcoal-900 py-3 hover:text-powder-300 transition-colors">
  Reservations
</a>
```

### Color-Block Buttons

Strictly flat, adhering to the tetradic palette.

```tsx
// Buttercup Primary Button
"bg-buttercup-400 text-charcoal-900 font-medium text-[18px] px-8 py-4 rounded-none hover:bg-charcoal-900 hover:text-white transition-colors"

// Powder Blue Secondary Button
"bg-powder-300 text-charcoal-900 font-medium text-[18px] px-8 py-4 rounded-none hover:bg-charcoal-900 hover:text-white transition-colors"
```

### Fresh Green Tags

Used exclusively for dietary accents or strict highlights.

```tsx
"inline-block bg-transparent text-fresh-500 border border-fresh-500 px-3 py-1 text-[14px] uppercase tracking-wide font-semibold"
```

---

## Quality Checklist

* [ ] Are all typographic elements using **Instrument Sans** exclusively?
* [ ] Do hero headings sit strictly between 74px and 84px with tight leading?
* [ ] Is body copy set exactly at 18px?
* [ ] Have all drop shadows, gradients, and ornamental ui elements been removed?
* [ ] Does the split layout feature left-aligned navigation and right-aligned image storytelling?
* [ ] Are the color blocks restricted only to Buttercup Yellow, Powder Blue, and Charcoal?
* [ ] Do narrative sections utilize calm off-white backgrounds with generous vertical padding?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, solid color blocking using the approved tetradic palette.
* Oversized typography for spatial hierarchy.
* Full-bleed, edge-to-edge photography.
* Pure white and calm off-white backgrounds for text-heavy areas.
* Left-aligned structural layouts combined with perfectly centered text blocks.

### ✗ Not Allowed

* Drop shadows, glows, or any illusion of Z-axis depth.
* Novelty fonts or script typography for "restaurant" flair.
* Emojis, ornamental borders, or decorative flourish illustrations.
* Font sizes outside the strict structural scale (e.g., no 12px or 14px body text).
* Centered logos in the split-layout hero (logo must remain left-aligned).
Preview