# Lamannabakery · Design system migration spec

> Source: https://lamannabakery.com  ·  Curated by OpenDesign  ·  en

> This site is a fantastic example of a loud, expressive, and playful consumer brand identity that perfectly matches the product's energy.

## 1. Identity DNA

The design system is built like a vibrant, oversized neon sign for a local Italian bakery and pizzeria—unmissable, joyful, and deliberately loud. Every decision, from color to type, serves a single purpose: to announce the brand with the unapologetic energy of a neighborhood favorite. It is maximalism with a clear, functional brief.

**One-liner:** A loud, joyful, maximalist website for a pizza and bakery destination that screams 'home of the big slice.'
**Keywords:** italian bakery · pizza · playful · bold · local favorite
**Analogy:** A vibrant, oversized neon sign for a local Italian bakery and pizzeria

## 2. Color

The color system is a high-energy, dual-tone palette of fiery orange-red and sunshine yellow, grounded by stark black and softened by pale pink accents. It operates at high chroma and high contrast, designed for immediate visual impact rather than subtlety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FF4100` | main background |
| `--bg-soft` | `#FFC700` | card background |
| `--bg-quiet` | `#FDBEBA` | quiet area |
| `--ink` | `#292A2C` | body text |
| `--muted` | `#FFC700` | placeholder |
| `--accent` | `#FF4100` | single accent |
| `--line` | `rgba(41, 42, 44, 1)` | divider |

**Color principle:** A high-energy, dual-tone palette of fiery orange-red and sunshine yellow, grounded by stark black and softened by pale pink accents.

The guiding principle is maximum vibrancy; muted or desaturated tones are actively rejected in favor of a palette that feels as warm and fresh as the product itself.

## 3. Typography

The typographic voice is split into two clear registers: massive, tightly tracked uppercase display text in a geometric sans-serif for headlines, and a simple, highly legible humanist sans-serif for body copy. This contrast creates a hierarchy of pure expression versus clear communication.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 130px | 0.85 | 900 | -1px | Massive hero text that dominates the viewport |
| headline | 70px | 1.0 | 900 | -0.6px | Sub-headlines and section headers |
| body | 18px | 1.67 | 400 | -0.1px | Regular paragraph and descriptive text |
| caption | 12px | 1.5 | 400 | 0 | Small UI labels and navigation items |

**Type rules:**
- Use massive, tightly tracked uppercase text for headlines to create maximum impact.
- Body text remains simple and highly legible to contrast with the expressive display type.
- All primary headlines use a geometric sans-serif category.

## 4. Spacing

Spacing rhythm is loose and dramatic, employing large padding values to allow the massive typography and bold sections to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 40 / 64 / 96 px
- **Rhythm:** Loose and dramatic, using large padding values to let the massive typography breathe.

## 5. Surfaces

Surfaces are defined by crisp, 1px solid outlines and thick, offset retro shadows, creating a playful, graphic 3D effect. The depth comes from flat, bold shapes rather than soft, diffused shadows.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(41, 42, 44, 1) and thick offset shadows for a retro 3D effect

## 6. Layout

The layout skeleton is composed of bold, full-bleed sections that prioritize massive centered typography and dramatic sectioning. It favors a direct, single-column flow with scattered floating elements over complex grids, creating a hero experience that fills the viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Bold, full-bleed sections with massive centered typography and scattered floating elements

## 7. Motion & Interaction

Motion is minimal and functional, relying on straightforward linear transitions and basic transforms for interactive feedback. The philosophy is to provide immediate, clear visual response to interaction without decorative flourish.

- **Durations:** micro 200ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle linear transitions on interactive elements
  - Transform-based hover effects on clickable items

- **Hover:** Standard pointer cursor with subtle linear transitions.
- **Click:** Immediate visual feedback via transform changes.
- **Transition:** All properties transition smoothly over 0.2s linear.
- **Keyboard:** Standard focus management not visibly emphasized in these screenshots.

## 8. Voice & Don'ts

The editorial voice is loud, proud, enthusiastic, and playful, matching the bold visual treatment. Headlines are massive, all-caps declarations, and calls to action are bold, shadowed, uppercase commands with a retro pop-art feel.

- **Tone:** Loud, proud, enthusiastic, and playful
- **Headline style:** Massive, all-caps, tightly tracked declarations
- **CTA style:** Bold, shadowed, uppercase commands with a retro pop-art feel
- **Avoid:** Restraint / Subtlety / Minimalism / Serif fonts / Muted color palettes / Formal or corporate language

### Don'ts
- ❌ Don't use generous negative space — screenshot shows text that aggressively fills the viewport.
- ❌ Don't use subtle drop shadows — screenshot shows thick, flat, offset retro shadows.
- ❌ Don't use muted or desaturated colors — screenshot shows a high-chroma palette of orange-red and bright yellow.
- ❌ Don't use complex card layouts or grids — screenshot shows a bold, full-bleed, center-aligned typographic hero.
- ❌ Don't use delicate or thin fonts — screenshot shows heavy, geometric sans-serif typefaces.
- ❌ Don't use a dark mode or neutral background — screenshot shows a vibrant, fiery red-orange (#FF4100) as the primary background.

The system deliberately avoids restraint, subtlety, minimalism, serif fonts, muted palettes, and any formal or corporate language.

## System Prompt (paste into AI tool)

```
This design is for Lamanna's Bakery, a bold, maximalist, and playful website for a Toronto Italian bakery and pizzeria. The visual identity is defined by massive, tightly tracked typography and a high-chroma palette featuring fiery orange-red (#FF4100) and sunshine yellow (#FFC700). The font categories are heavy geometric-sans for display and humanist-sans for body text. Critical constraints include avoiding minimalism, restraint, or any form of muted colors; the design must remain loud and expressive. Shadows should be thick, flat, and retro (3D offset style), never subtle or blurred. Never use serif fonts, as the aesthetic is strictly bold, modern, and graphic.
```