Pop Neapolitan Studio Design System

/popNeapolitanStudioDesignSystem
A bold, pop-forward design system for hospitality, blending minimalist structure with vibrant color, tactile warmth, and kinetic interactions to create highly curated, editorial-grade food and restaurant interfaces.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Pop Neapolitan Studio Design System

A design language for modern, pop-forward hospitality interfaces.

---

## Philosophy

> "Minimalist structure sets the table; bold color serves the flavor."

This system creates interfaces that feel like a highly curated, trendy dining experience—mixing architectural restraint with appetizing, punchy vibrancy. The design should feel tactile, energetic, and flawlessly polished, utilizing editorial framing to elevate food and hospitality into art.

### Core Beliefs

1. **Appetizing visual hierarchy** — Large, semibold sans-serif typography paired with confident image crops drives immediate visual hunger.
2. **Color as flavor** — Generous whitespace (flour white and warm cream) acts as a palate cleanser, allowing vibrant accents (tomato, basil, coral) to pop like fresh ingredients.
3. **Editorial framing** — Images and carousels live within smooth, heavily rounded containers with soft shadows, creating a gallery-like presentation of menus and spaces.
4. **Tactile warmth** — Subtle noise/grain textures and warm espresso typography prevent the minimalism from feeling clinical or cold.
5. **Kinetic hospitality** — Interaction design focuses on the "wow" effect—framer-level scroll reveals, lively hover states, and buttery smooth carousel physics.

### Strict Rules

* **No Pure Black** — Pure black kills the appetite. All dark typography and deep UI elements must use the rich "Espresso" shade.
* **Embrace the Curve** — Sharp, harsh 90-degree corners are forbidden on primary containers. Everything features smooth, generous border radii.
* **Soft Depth, Never Harsh** — Use soft, diffused shadows to lift elements off the canvas. No tight, heavy, or muddy drop shadows.
* **Strategic Color Blocking** — Bold accent colors should be applied as deliberate color blocks or punchy price/status labels, never as overwhelming background gradients.

---

## Color Palette

### The Base & The Flavors

The palette contrasts a soft, warm canvas against vibrant, edible accent colors, anchored by deep coffee tones for legibility.

```css
/* Backgrounds (The Canvas) */
bg-flour-white        /* Pure, bright canvas backdrop (#faf9f8) */
bg-warm-cream         /* Secondary sections, soft card backgrounds (#f3efe6) */
bg-warm-cream/50      /* Subtle hover states for list items */
bg-espresso/5         /* Ultra-light structural backgrounds */

/* The Flavors (Accents & Highlights) */
bg-tomato-red         /* High-urgency actions, bold promotional blocks (#e63946) */
bg-basil-green        /* Dietary tags, success states, fresh highlights (#2a9d8f) */
bg-electric-coral     /* Primary Call-To-Action buttons, active UI states (#ff7b54) */
bg-butter-yellow      /* Small highlight hits, subtle warning/info tags (#ffcb77) */

/* Structural Borders & Grain */
border-warm-cream     /* Subtle divider lines */
border-espresso/10    /* Default structural card outlines */
border-espresso/20    /* Hovered structural boundaries */
bg-[url('/noise.png')] /* Subtle global grain overlay (opacity: 3%) */

/* Text Hierarchy (The Espresso Scale) */
text-espresso         /* Primary text, hero headlines, price labels (#2b1f1c) */
text-espresso/80      /* Secondary body copy, descriptions */
text-espresso/60      /* Metadata, footer links, dietary descriptions */
text-espresso/40      /* Placeholders, disabled states, micro-labels */

/* Text Accent Overrides */
text-tomato-red       /* High-contrast promotional text */
text-basil-green      /* Fresh indicators, vegan/vegetarian labels */
text-electric-coral   /* Interactive text hovers, active navigational states */
```

---

## Typography

Typography feels trendy, deliberate, and structurally sound. Favorit, Moderat, Aeonik, General Sans, Studio Feixen Sans, or Articulat CF are the standard bearers here.

### Font Weights

```css
font-normal      /* Long-form body copy, subtle menu descriptions */
font-medium      /* UI text, button labels, navigational links */
font-semibold    /* Hero headlines, large editorial titles, punchy price tags — CORE IDENTITY */
font-bold        /* Reserved strictly for small, ultra-punchy promotional badges */

```

### Font Size Scale

```css
text-xs          /* Compact dietary notes, timestamp metadata (12px) */
text-sm          /* Standard description paragraphs, input text (14px) */
text-base        /* Core menu item titles, primary body copy (16px) */
text-lg          /* Sub-section headers, feature highlights (18px) */
text-xl          /* Large menu category headers (20px) */
text-3xl         /* Carousel section titles, promotional headers (30px) */
text-5xl-7xl     /* Full-bleed hero headlines (Responsive display units) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Mandatory for large semibold hero headlines to feel cohesive */
tracking-normal  /* All body copy and standard UI elements */
tracking-wide    /* Small buttons, dietary tags, category overlines */

uppercase        /* Subtle category overlines, small button actions, punchy badges */
lowercase        /* Occasionally used for trendy, stylized subheaders */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | espresso | tight | none |
| Menu Item Title | base | semibold | espresso | normal | none |
| Compact Desc. | sm | normal | espresso/80 | normal | none |
| Price Label | lg | semibold | tomato-red | tight | none |
| Dietary Tag | xs | medium | basil-green | wide | uppercase |

---

## Animation System

### Core Philosophy: The Polished "Wow"

Movements should feel lively, energetic, and highly intentional, mimicking the kinetic energy of a bustling, high-end cafe.

### Framer-Level Scroll Reveals

Elements glide upward and fade in with an elegant, spring-based physics model as they enter the viewport.

```tsx
initial={{ opacity: 0, y: 40, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ type: "spring", stiffness: 260, damping: 20, mass: 1 }}

```

### Lively Hover States (The Lift & Pop)

Cards and interactive elements don't just change color; they physically lift toward the user while softening their drop shadows.

```tsx
whileHover={{ y: -6, scale: 1.02 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
// Accompanied by CSS: hover:shadow-xl hover:shadow-electric-coral/10

```

---

## UI Components

### The Ivory Gradient Veil (Hero)

Applied over full-bleed food or dining photography. Ensures perfect semibold headline legibility without muddying the appetizing image.

```tsx
<div 
  className="absolute inset-0 bg-gradient-to-b from-warm-cream/20 via-warm-cream/60 to-warm-cream"
  style={{ backdropFilter: 'blur(2px)' }} 
/>

```

### Global Grain Texture

A microscopic noise layer applied to the root layout to give the flour-white and warm-cream backgrounds a physical, magazine-paper warmth.

```tsx
<div className="pointer-events-none fixed inset-0 opacity-[0.03] mix-blend-multiply bg-[url('/noise.png')]" />

```

### Rounded Editorial Frame (Carousels)

Menu previews and featured imagery sit in confident, heavily rounded containers.

```tsx
className="relative overflow-hidden rounded-[2rem] bg-flour-white shadow-lg shadow-espresso/5 border border-espresso/10"

```

---

## Component Catalog

### Featured Menu Cards

Confident image crops at the top, compact descriptions below, with punchy price labels.

```tsx
// Card Container
"flex flex-col bg-flour-white rounded-3xl shadow-md shadow-espresso/5 border border-espresso/5 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-tomato-red/5"

// Confident Image Crop
"w-full h-48 object-cover object-center bg-warm-cream"

// Punchy Price Label
"absolute top-4 right-4 bg-flour-white text-tomato-red font-semibold text-lg px-3 py-1 rounded-full shadow-sm"

```

### Polished CTA Pair

```tsx
// Primary CTA (Electric Coral)
"bg-electric-coral text-flour-white font-medium text-base rounded-full px-8 py-3.5 hover:bg-opacity-90 hover:scale-105 transition-all shadow-md shadow-electric-coral/20"

// Secondary CTA (Outline/Ghost)
"bg-transparent text-espresso font-medium text-base rounded-full px-8 py-3.5 border-2 border-espresso/10 hover:border-espresso hover:bg-espresso/5 transition-all"

```

### Dietary & Status Badges

Tasteful color blocks applied to small metadata.

```tsx
// Basil Green Tag (e.g., Vegan/Fresh)
"bg-basil-green text-flour-white text-xs font-medium uppercase tracking-wide px-2.5 py-1 rounded-full"

// Butter Yellow Tag (e.g., Popular/Warning)
"bg-butter-yellow text-espresso text-xs font-medium uppercase tracking-wide px-2.5 py-1 rounded-full"

```

### Horizontal Carousel (Framer-Motion Enhanced)

Generous spacing between items, allowing the soft shadows to breathe.

```tsx
<div className="flex overflow-x-auto snap-x snap-mandatory gap-6 px-8 pb-12 pt-4 scrollbar-hide">
  {/* Card items snap into center */}
  <div className="snap-center shrink-0 w-[320px]">
    <MenuCard />
  </div>
</div>

```

---

## Quality Checklist

* [ ] Is the hero image full-bleed with an `Ivory Gradient Veil` applied for legibility?
* [ ] Does the hero use a large, `semibold` headline with tight letter spacing?
* [ ] Is the global grain texture active and subtle (opacity < 5%)?
* [ ] Are all pure black (`#000000`) values replaced with rich `espresso`?
* [ ] Do featured menu cards use smooth, large border radii (e.g., `rounded-3xl`)?
* [ ] Do hover interactions feel "lively" (lifting off the page using spring physics)?
* [ ] Are the pop colors (tomato, basil, coral) used tastefully as blocks, labels, or buttons rather than full-page backgrounds?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm cream and flour white as dominant spatial elements.
* Semibold sans-serif typography for primary headings.
* Soft, diffused drop shadows to create editorial depth.
* Generous padding and wide gaps in carousels.
* Confident, highly appetizing photo crops.
* Small, punchy hits of butter yellow for highlights.

### ✗ Not Allowed

* Pure black text or backgrounds (feels too harsh/industrial).
* Sharp 90-degree corners on cards, buttons, or image frames.
* Flat, lifeless hover states (needs kinetic lift).
* Light-weight or ultra-thin typography for headings.
* Opaque gradient backgrounds that distract from the food photography.