Aperitivo Pop Grid

/aperitivoPopGrid
A vibrant, editorial design system inspired by mid-century Italian aperitivo posters and modern hospitality. It balances rigorous geometric grids with colorful, cinematic warmth for playful, contemporary interface experiences.
1 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Aperitivo Pop Grid

A design language for trendy, contemporary hospitality interfaces.

---

## Philosophy

> "Structure provides the canvas; color and scale provide the flavor."

This system creates interfaces that feel like flipping through a high-end contemporary culinary magazine while sipping an espresso in Milan. It bridges the gap between mid-century Italian aperitivo posters and modern editorial web design—balancing modular, rigorous grids with vibrant, punchy chromatic moments. 

### Core Beliefs

1. **Editorial Scaffolding** — The grid is king. Strict geometric dividers and fine dark strokes organize content, allowing playful elements to break the boundaries intentionally.
2. **Chromatic Tension** — Deep, espresso-dark text grounds the interface, allowing saturated pops of red-orange, coral, and basil to act as vibrant garnishes on warm, creamy canvases.
3. **Typographic Personality** — Display typography should be loud, expressive, and unapologetic. Body copy must recede into quiet minimalism to maintain balance.
4. **Cinematic Warmth** — Photography drives the appetite. Images must feel rich, bathed in warm light, and structurally framed like polished campaign visuals.
5. **Tactile & Playful Joy** — Interactions shouldn't be overly serious. Animated underlines, snapping carousels, and expanding color blocks introduce a sense of kinetic hospitality.

### Strict Rules

* **Fine Dark Strokes Only** — Containers and dividers use a hairline midnight espresso stroke. No soft, muddy drop shadows.
* **Warm Foundations** — Pure white (`#FFFFFF`) is forbidden. The canvas must always be grounded in whipped cream or warm beige.
* **Controlled Saturation** — Vibrant colors (red-orange, spritz coral, basil green) are used as solid, flat blocks. Never use gradients for interface elements.
* **Oversized Headings** — Hero typography must dominate the viewport. If a headline doesn't feel slightly too big, it isn't big enough.

---

## Color Palette

### The Aperitivo Canvas & Ink

The foundation relies on warm, creamy neutrals punctuated by a nearly-black espresso ink. 

```css
/* Canvas Backgrounds */
bg-whipped-cream      /* Primary application background (#FFFDF9) */
bg-warm-beige         /* Secondary panels, menu cards, footers (#F5EFE6) */
bg-pale-lemon         /* Subtle highlight blocks, active states (#FDF0B2) */

/* Structural Ink & Borders */
border-midnight-espresso /* Default structural lines, card boundaries (#2A2421) */
border-midnight-espresso/20 /* Subtle geometric grid dividers */
text-midnight-espresso   /* Primary text, expressive headlines, icons */
text-midnight-espresso/70 /* Secondary body copy, muted metadata */

```

### The Flavor Palette (Accents)

Vibrant, solid blocks of color used for tabs, buttons, section transitions, and typographic pop.

```css
/* Red-Orange (Primary Action & Hero Pop) */
bg-red-orange         /* Primary CTAs, urgent badges, active menu tabs (#FF4D2E) */
text-red-orange       /* Hover states on expressive typography, active links */

/* Spritz Coral (Secondary Pop) */
bg-spritz-coral       /* Secondary color blocks, playful transitions (#FF8E72) */
hover:bg-spritz-coral /* Hover states for primary cards */

/* Basil Green (Tertiary & Success) */
bg-basil-green        /* Special highlights, vegan/fresh tags, accent borders (#2E6B45) */
text-basil-green      /* Subtle positive indicators */

```

---

## Typography

Expressive, wide, and distinctive sans-serifs define the brand character, heavily contrasted by quiet, utilitarian geometric sans-serifs for the body. 

### Allowed Display Typefaces
*Requires one of the following for all display moments:* **Obviously, Sharp Grotesk, FK Grotesk Neue, Basis Grotesque, or Neue Machina.**

### Font Weights

```css
font-regular     /* Core body copy, quiet descriptions, metadata */
font-medium      /* Button labels, active menu tabs, navigation */
font-semibold    /* Oversized hero headlines, menu item names, display moments - MANDATORY */

```

### Font Size Scale

```css
text-xs          /* Fine print, dietary tags, footer links (12px) */
text-sm          /* Secondary descriptions, menu ingredient lists (14px) */
text-base        /* Standard body copy, concise paragraphs (16px) */
text-xl          /* Subtitles, large buttons, form labels (20px) */
text-3xl         /* Standard section headers, geometric grid titles */
text-5xl         /* Primary menu categories, campaign panel text */
text-[6rem]      /* Oversized Hero Headlines (responsive clamp) */
text-[8rem]      /* Immersive background typography / numericals */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headlines (crushed together for impact) */
tracking-normal  /* Default paragraph text */
tracking-wide    /* Small buttons, dietary tags, navigation links */

uppercase        /* CTAs, category tabs, dietary tags */
lowercase        /* Stylized secondary callouts */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6rem | semibold | midnight-espresso | tighter | none |
| Grid Title | 3xl | semibold | red-orange | normal | none |
| Menu Dish Name | xl | semibold | midnight-espresso | normal | none |
| Ingredients | sm | regular | midnight-espresso/70 | normal | none |
| Color Tab | base | medium | whipped-cream | wide | uppercase |

---

## Animation System

### Core Philosophy: Snappy & Kinetic

Motions should feel like flicking through heavy cardstock or dropping a colorful coaster onto a marble table—snappy, physical, and delightfully sudden.

### Playful Section Transitions

Sections reveal themselves by sliding up with a slight overshoot, introducing structural colored blocks before the content settles.

```tsx
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 200, damping: 20, mass: 0.8 }}
```

### The Thick Animated Underline

Hovering over textual links or menu categories reveals a thick, blocky underline that slides in from the left.

```css
"relative after:absolute after:bottom-0 after:left-0 after:h-[3px] after:w-0 after:bg-red-orange after:transition-all after:duration-300 hover:after:w-full"
```

### Carousel Snapping

Horizontal scrolling sections (like menu cards) strictly enforce CSS scroll-snapping to maintain grid alignment.

```css
"flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-6"
/* Child items require: */
"snap-center shrink-0"
```

---

## UI Components

### The Cinematic Hero Overlay

A full-bleed or massively framed photographic background with a controlled, warm gradient overlay to ensure the oversized semibold headline pops.

```tsx
<div className="relative w-full h-[80vh] bg-warm-beige">
  <img src="hero-aperitivo.jpg" className="absolute inset-0 object-cover w-full h-full" />
  <div className="absolute inset-0 bg-gradient-to-b from-midnight-espresso/20 to-warm-beige/80 mix-blend-multiply" />
  <h1 className="relative z-10 text-[6rem] font-semibold tracking-tighter text-whipped-cream">
    Sip & Savor.
  </h1>
</div>
```

### The Campaign Panel

Positioned beneath the hero. A horizontal image panel acting as a polished visual break, characterized by rounded corners and a stark, fine dark stroke.

```tsx
<div className="w-full max-w-6xl mx-auto h-48 rounded-[2rem] overflow-hidden border-[0.5px] border-midnight-espresso relative">
  <img src="campaign-horizontal.jpg" className="w-full h-full object-cover" />
</div>
```

### Menu Color Tabs

Blocky, geometric tabs used to switch between menus (e.g., Drinks, Bites, Mains).

```tsx
const isActive = currentTab === tab.id;

className={cn(
  "px-6 py-3 font-medium uppercase tracking-wide border-r-[0.5px] border-midnight-espresso transition-colors duration-200",
  isActive ? "bg-red-orange text-whipped-cream" : "bg-transparent text-midnight-espresso hover:bg-pale-lemon"
)}
```

---

## Component Catalog

### Cards

Menu cards feature large, bleed-to-edge dish photography at the top, geometric dividers, and stark minimal layouts.

```tsx
// Menu Dish Card
"group bg-whipped-cream border-[0.5px] border-midnight-espresso rounded-xl overflow-hidden flex flex-col hover:-translate-y-1 hover:shadow-[4px_4px_0px_#FF4D2E] transition-all duration-200"

// Card Image Container
"w-full aspect-[4/3] border-b-[0.5px] border-midnight-espresso bg-warm-beige"

```

### Buttons

Bold, blocky, and minimal. High contrast.

```tsx
// Primary CTA
"bg-midnight-espresso text-whipped-cream font-medium uppercase tracking-wide px-8 py-4 rounded-full hover:bg-red-orange transition-colors"

// Secondary Outline CTA
"bg-transparent text-midnight-espresso border-[0.5px] border-midnight-espresso font-medium uppercase tracking-wide px-8 py-4 rounded-full hover:bg-pale-lemon transition-colors"

```

### Inputs

Cafe-style forms that look like printed order slips.

```tsx
// Grid-aligned Input
"w-full bg-transparent border-b-[0.5px] border-midnight-espresso py-3 text-xl font-medium text-midnight-espresso placeholder-midnight-espresso/30 focus:outline-none focus:border-red-orange focus:border-b-2 transition-all rounded-none"

```

### Badges & Tags

```tsx
// Chromatic Pop Badge
"inline-block px-3 py-1 bg-spritz-coral text-midnight-espresso text-xs font-bold uppercase tracking-widest rounded-full"

// Dietary/Organic Tag
"inline-block px-3 py-1 border-[0.5px] border-basil-green text-basil-green text-xs font-bold uppercase tracking-widest rounded-full bg-whipped-cream"

```

---

## Quality Checklist

* [ ] Is the primary typography an expressive, distinct sans-serif (e.g., Sharp Grotesk, Obviously)?
* [ ] Are all containers, cards, and panels delineated by a fine `border-[0.5px] border-midnight-espresso`?
* [ ] Does the Hero section utilize a warm, controlled overlay to ensure headline contrast?
* [ ] Have you completely avoided true white (`#FFFFFF`) in favor of Whipped Cream or Warm Beige?
* [ ] Do horizontal lists (like menus or galleries) use CSS carousel snapping?
* [ ] Are the CTA buttons bold, slightly oversized, and visually minimal?
* [ ] Do interactive text elements use the thick, sliding animated underline?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, solid color blocking using the defined flavor palette (Red-Orange, Coral, Basil).
* Oversized typographic scale that intentionally commands the grid.
* Fine dark geometric lines dividing sections, mimicking editorial magazine layouts.
* Large, bleed-to-edge photography with warm, cinematic color grading.
* Hard, blocky offset shadows (`4px 4px 0px color`) for playful interactive states.

### ✗ Not Allowed

* Muddy, soft, or feathered drop shadows of any kind.
* Gradients applied to UI components, buttons, or text.
* Generic system fonts (e.g., Arial, Roboto) for primary headings.
* True pure white backgrounds or completely black (`#000000`) text.
* Floating cards without definitive border strokes.