Neapolitan Studio Minimalism

/neapolitanStudioMinimalism
A precision-driven design system for modern culinary brands, inspired by editorial magazines and contemporary art galleries. It emphasizes monumental typography, pristine photography, and gallery-like negative space without traditional hospitality clichés.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Neapolitan Studio Minimalism

A design language for premium, studio-led culinary interfaces.

---

## Philosophy

> "Space elevates the ingredient; precision crafts the experience."

This system creates interfaces that feel like a high-end physical editorial magazine or a contemporary culinary gallery. Pizzas, ingredients, table settings, and oven moments are treated like carefully lit product objects. The aesthetic is incredibly deliberate, relying on extreme typographic scale, sharp photographic crops, and pristine spacing rather than decorative patterns or traditional hospitality tropes.

### Core Beliefs

1. **Hierarchy through architectural scale** — Deep contrast between oversized Geist typography and minimal interface elements creates a highly controlled, premium atmosphere.
2. **The ingredient as a studio object** — Photography is heroic, dramatically lit, and given full-bleed breathing room. Food is art; the interface is the gallery.
3. **Editorial pacing** — Layouts breathe by rhythmically alternating between expansive photographic moments and centered, quiet text blocks.
4. **Confident restraint** — High-end dining implies effortless service. Actions like ordering and reservations exist as quiet, crisp forms rather than screaming, high-friction buttons.
5. **Tactile purity** — Interactions rely on sharp snaps, solid panels, and crisp borders. No decorative patterns, no muddy shadows.

### Strict Rules

* **No Decorative Patterns** — Visual interest comes entirely from studio photography, grid structures, and typography.
* **Geist Typeface Only** — Contemporary precision dictates the use of a single, flawless geometric/neo-grotesque sans-serif.
* **Sharp Photographic Crops** — Imagery must sit in perfectly masked, sharp-edged rectangles or full-bleed containers. No soft feathered edges or playful organic blobs.
* **No Traditional Italian Clichés** — The palette avoids bright primary reds and greens, replacing them with muted terracotta, soft sage, and off-black.
* **No Gradients** — Backgrounds must remain strictly solid (flour, stone, chalk) to maintain architectural flatness.

---

## Color Palette

### The Earth & Flour Scale

The palette is deeply rooted in raw culinary materials but executed with minimalist control. The foundational colors are light and chalky, anchored by a deep off-black. Accents are extremely muted and organic.

```css
/* Backgrounds (The Canvas) */
bg-chalk-white        /* Pure, primary canvas (#ffffff) */
bg-pale-dough         /* Secondary warming panels, menu cards (#fcfbf9) */
bg-stone-50           /* Editorial text block backgrounds, quiet zones (#f5f5f4) */
bg-stone-100          /* Subtle structural dividers, inactive form fields */
bg-off-black          /* Dark mode panels, premium footer moments (#171717) */

/* Borders & Structure */
border-stone-200      /* Crisp structural dividers for menu modules */
border-dough-300      /* Form input borders, hover state definitions */
border-off-black      /* High-contrast framing, active input borders */

/* Accents (Organic but controlled) */
text-terracotta-600   /* Subdued highlight for sourcing notes, active tabs (#b95c50) */
bg-terracotta-600     /* Primary conversion buttons (Orders/Reservations) */
text-sage-600         /* Vegan/Vegetarian markers, subtle organic metadata (#738c71) */
bg-sage-100           /* Soft highlighting backdrops for dietary tags */

/* Text Hierarchy */
text-off-black        /* Primary hero headlines, section titles, body copy */
text-stone-500        /* Compact captions, secondary ingredients, map metadata */
text-stone-400        /* Disabled states, placeholder text, quiet hints */
text-chalk-white      /* Text on dark panels and primary terracotta buttons */
```

### Destructive Actions (Deletions/Cancellations)

```css
hover:bg-terracotta-50
hover:text-terracotta-700
hover:border-terracotta-200
```

---

## Typography

Exclusively utilizing **Geist** for contemporary precision. The typographic system relies on massive, architectural size disparities—pairing gigantic hero headlines with razor-sharp, compact captions.

### Font Weights

```css
font-light       /* 80-104px Hero headlines — creates an airy, structural feel */
font-normal      /* Core editorial paragraphs, menu descriptions */
font-medium      /* 36-46px Section titles, crisp form labels, buttons */
font-semibold    /* Sourcing notes, tiny metadata, social proof markers */
```

### Font Size Scale

```css
text-[11px]      /* Compact captions, dietary tags, opening details */
text-xs          /* Map/location metadata, form helper text (12px) */
text-sm          /* Crisp button/form typography, modular menu prices (14px) */
text-base        /* Standard menu ingredient lists, social proof text (16px) */
text-lg          /* Introductory editorial lead-ins (18px) */
text-[36px]      /* Refined section titles (Responsive: 36px - 46px) */
text-[46px]      /* Maximum section title size */
text-[80px]      /* Minimum Hero headline */
text-[104px]     /* Maximum Hero headline - Architectural display size */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Exclusively for 80-104px hero headlines to compress negative space */
tracking-tight   /* Section titles (36-46px) */
tracking-normal  /* Menu descriptions and editorial body text */
tracking-wide    /* Crisp button text, compact photo captions */

uppercase        /* Sourcing notes, modular menu sub-headers, dietary tags */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 80–104px | light | off-black | tighter | none |
| Section Title | 36–46px | medium | off-black | tight | none |
| Menu Item | base | medium | off-black | normal | none |
| Ingredients | sm | normal | stone-500 | normal | none |
| Sourcing Note | 11px | semibold | terracotta-600| wide | uppercase |

---

## Animation System

### Core Philosophy: The Studio Reveal

Movements should emulate the switching on of a studio light or the deliberate turning of a heavy magazine page. No bouncy springs; only smooth, controlled easing.

### Page Transitions (Fade and Rise)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.33, 1, 0.68, 1] }} /* Slow, premium ease-out */
```

### Hover Interactions (Image & Button)

Instead of physical movement, interactive elements rely on stark color/contrast shifts or extremely subtle scale adjustments of the image within a strict, unmoving clipping mask.

```tsx
// Photographic Image Hover (Image scales, container remains perfectly static)
className="overflow-hidden bg-stone-100"
imageClass="transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] hover:scale-105"

// Crisp Button Hover
className="transition-colors duration-200 hover:bg-off-black hover:text-chalk-white"
```

---

## UI Components

### Architectural Hero Section

The hero dominates the viewport. It features an oversized Geist headline (80-104px), large but extremely clean top navigation, and one dramatic, sharply-cropped product or dining image. CTAs are minimal and quiet.

```tsx
<header className="min-h-screen bg-chalk-white flex flex-col justify-between p-8 md:p-12">
  <Navigation className="text-lg tracking-tight" />
  <div className="flex-1 flex items-center justify-center">
    <h1 className="text-[80px] lg:text-[104px] font-light tracking-tighter text-off-black leading-none text-center">
      Artisan Fire.
    </h1>
  </div>
  <StudioImageCrop ratio="16:9" />
</header>
```

### Editorial Pacing Blocks

Supporting sections strictly alternate between two layout types to maintain the premium rhythm.

```tsx
// 1. Full-bleed Photographic Moment
<section className="w-full h-screen bg-off-black">
  <img src="oven-moment.jpg" className="w-full h-full object-cover" />
</section>

// 2. Centered Editorial Text Block
<section className="w-full py-32 bg-stone-50 flex justify-center">
  <div className="max-w-2xl text-center space-y-6">
    <h2 className="text-[36px] md:text-[46px] font-medium tracking-tight">Our Sourcing</h2>
    <p className="text-base text-stone-500 font-normal">...</p>
  </div>
</section>
```

---

## Component Catalog

### Modular Menu Cards

Menu items do not use borders or boxes. They are arranged in a strict typographic grid on solid `bg-pale-dough` or `bg-chalk-white` panels.

```tsx
<div className="group flex justify-between items-baseline py-4 border-b border-stone-200">
  <div className="space-y-1">
    <h3 className="text-base font-medium text-off-black">Margherita</h3>
    <p className="text-sm text-stone-500">San Marzano, Fior di Latte, Basil, EVOO</p>
  </div>
  <span className="text-sm font-medium text-off-black">22</span>
</div>
```

### Reservation & Order Forms

Crisp, minimalist inputs that look like architectural drafting fields.

```tsx
// Premium Studio Input
"w-full px-0 py-3 bg-transparent border-b border-stone-300 text-off-black text-sm placeholder-stone-400 focus:outline-none focus:border-off-black transition-colors rounded-none"

// Form Label
"text-[11px] uppercase tracking-wide font-semibold text-stone-500 mb-2 block"
```

### Quiet Conversion Panel

The final section of the page. No dramatic hero images—just solid `bg-pale-dough`, precise location/opening details, and a singular, stark CTA.

```tsx
<section className="py-24 bg-pale-dough border-t border-stone-200">
  <div className="grid grid-cols-1 md:grid-cols-3 gap-12 px-8 md:px-12">
    <LocationMapBlock />
    <OpeningDetailsBlock />
    <ReservationCTA />
  </div>
</section>
```

### Badges (Sourcing & Dietary)

Strictly functional. Used to highlight organic status, vegan options, or farm origins.

```tsx
// Soft Sage Dietary Marker
"inline-flex items-center px-2 py-1 bg-sage-100 text-sage-600 text-[11px] font-semibold uppercase tracking-wide"

// Terracotta Sourcing Note
"inline-flex items-center text-terracotta-600 text-[11px] font-semibold uppercase tracking-wide border border-terracotta-200 px-2 py-1"
```

### Buttons

```tsx
// Primary Minimalist CTA (Reservations / Order)
"bg-off-black text-chalk-white font-medium text-sm px-8 py-4 hover:bg-terracotta-600 transition-colors duration-300 rounded-none"

// Secondary Outline CTA
"bg-transparent border border-stone-300 text-off-black font-medium text-sm px-8 py-4 hover:border-off-black transition-colors duration-300 rounded-none"
```

---

## Quality Checklist

* [ ] Is the primary hero font exactly Geist, weighted `font-light`, sized between `80-104px`?
* [ ] Are section titles strictly constrained between `36-46px` using `font-medium`?
* [ ] Are all photographs sharp-cropped rectangles without any rounded corners or feathered edges?
* [ ] Do layouts alternate cleanly between full-bleed imagery and solid, centered editorial text blocks?
* [ ] Have you completely avoided drop shadows in favor of vast negative space and crisp borders?
* [ ] Are menus structured as pure typographic grids (modular menu cards) without enclosing containers?
* [ ] Is the final conversion block visually "quiet" (solid color, purely functional typography)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Exclusive use of the Geist typeface.
* Massive, exaggerated typographic scale contrasts (104px next to 11px).
* Raw, flat backgrounds (chalk white, pale dough, stone, off-black).
* Sharp, 90-degree corners on all containers, buttons, and images.
* Generous, almost excessive padding and margins (treating the screen like an art gallery wall).

### ✗ Not Allowed

* Cheesy pizza shop motifs (red/white checkered patterns, cartoon chef icons).
* Border radii / rounded corners on images or primary buttons.
* Gradients of any kind (backgrounds must remain flat and structural).
* Drop shadows, glows, or neumorphic depth.
* Crowded UI clusters; every element must have room to breathe.