---
title: "Lamanna Bakery design system"
variant: extended
source: https://www.lamannabakery.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/lamannabakery-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lamanna Bakery · Design System

> Big type, bold colour, and a larger-than-life slice.

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.lamannabakery.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lamanna Bakery’s homepage turns a bakery and pizzeria into a vivid, playful visual experience, led by oversized typography and punchy orange-yellow contrast. Full-bleed food imagery, decorative bursts, and colourful section panels balance the brand’s exuberance with clear paths to browse the menu, order, and shop.

## North star

Treat every section like a bold food poster: lead with oversized type, saturated colour fields, and purposeful cutout imagery.

## Overview

The page is driven by a vivid vermilion canvas (#ff4100) and saturated golden yellow (#ffc700), creating a high-energy palette that carries through the navigation, hero lettering, and recurring decorative details. Blush pink (#fdbeba) and white (#ffffff) create contrast in selected content and footer areas; the screenshot shows a pale pink introduction block with cream-like illustrated shapes, so judge these quieter surfaces as intentional section changes rather than the overall brand canvas. Right Grotesk Spatial Black anchors the page with huge, tightly set display headlines, while Nimbus Sans Extended supports readable body copy. The layout alternates expansive color fields with full-bleed food and merchandise photography, punctuated by repeated ticker-like strips and starburst buttons. Shadowed, offset headline treatments and cutout imagery add a tactile, poster-like quality. Generous section breaks let each colour panel and oversized message read as its own graphic moment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pizza Flame | `#ff4100` | `--color-pizza-flame` | brand | Dominant canvas and section-band colour; also frames the oversized yellow hero headline and ticker strips. |
| Golden Crust | `#ffc700` | `--color-golden-crust` | brand | Primary display-text and navigation colour on orange; also fills menu and promotional panels. |
| Bakery White | `#ffffff` | `--color-bakery-white` | surface | Measured surface colour for selected light areas; not the defining page canvas in the screenshot. |
| Blush Icing | `#fdbeba` | `--color-blush-icing` | accent | Soft pink section background, notably behind the bakery introduction and footer content. |

### Semantic aliases

`--color-canvas` → `#ff4100` (Pizza Flame) · `--color-surface` → `#ffffff` (Bakery White) · `--color-surface-2` → `#fdbeba` (Blush Icing) · `--color-text` → `#ffc700` (Golden Crust) · `--color-border` → `#ff4100` (Pizza Flame) · `--color-accent` → `#ff4100` (Pizza Flame) · `--color-accent-2` → `#ffc700` (Golden Crust) · `--color-accent-3` → `#fdbeba` (Blush Icing)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffc700` | `#ff4100` | 2.23:1 | fail |
| `#ffc700` | `#ffffff` | 1.56:1 | fail |
| `#ffc700` | `#fdbeba` | 1.01:1 | fail |
| `#ff4100` | `#ffffff` | 3.5:1 | AA-large |
| `#ff4100` | `#fdbeba` | 2.21:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| nimbus-sans-extended-regular | `--font-body` | webfont | 400 | Body copy and supporting descriptions | Montserrat |
| nimbus-sans-extended-bold | `--font-nimbus-sans-extended-bold` | webfont | 400 | Emphasized supporting copy and secondary text | Montserrat |
| rightgrotesk-spatialblack-webfont | `--font-display` | webfont | 400 | Display headlines, hero text, and navigation | Archivo Black |
| obviously-condensed-semibold | `--font-obviously-condensed-semibold` | webfont | 400 | Prominent text links such as menu calls to action | Oswald |

- **nimbus-sans-extended-regular:** Regular, extended sans forms keep small supporting copy clean and legible against saturated panels.
- **nimbus-sans-extended-bold:** Bold extended sans adds emphasis within the otherwise lighter supporting-text system.
- **rightgrotesk-spatialblack-webfont:** Extremely bold display forms dominate; headings are tightly tracked, with navigation set uppercase.
- **obviously-condensed-semibold:** Condensed, weighty link lettering makes calls to action compact and poster-like.

### Type scale — Augmented Fourth (ratio ≈ 1.444, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 132px | 400 | 0.83 | -0.003em | — | rightgrotesk-spatialblack-webfont | Oversized hero slogan and main graphic statements. |
| h1 | 130px | 400 | 0.77 | -0.002em | — | rightgrotesk-spatialblack-webfont | Primary hero headline, especially the stacked “Home of the Big Slice” message. |
| h2 | 100px | 400 | 0.9 | -0.001em | — | rightgrotesk-spatialblack-webfont | Major section titles, including the bakery introduction and menu. |
| h3 | 90px | 400 | 0.76 | -0.001em | — | rightgrotesk-spatialblack-webfont | Secondary promotional and content-section headlines. |
| h4 | 70px | 400 | 0.86 | -0.001em | — | rightgrotesk-spatialblack-webfont | Smaller section headings and feature titles. |
| body | 21px | 400 | 1.48 | 0 | — | nimbus-sans-extended-regular | Introductory copy, food descriptions, and supporting text. |
| nav | 30px | 400 | 1 | -0.02em | uppercase | rightgrotesk-spatialblack-webfont | Uppercase primary navigation links. |
| link | 32px | 400 | 1.16 | 0 | — | obviously-condensed-semibold | Prominent menu and action links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 6, 10, 15, 20, 30, 43, 50, 60, 100, 120, 130 px.
- Section rhythm 120px · element gap — · card padding — · max content width 1354px.

The page uses full-width colour bands and media rather than a persistent card grid. Content is centred within a measured page maximum of 1354px, with expansive headline compositions and image-led sections. At the top, navigation sits along the edges with the logo centred; the hero fills the viewport with stacked display lettering. Large measured section gaps create a deliberate pause between featured blocks, while the overall density stays spacious despite the busy graphic details. Text is typically centred in promotional panels, with split layouts used where food or merch photography needs room.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The system is mostly flat: saturated section fills and sharp colour transitions do the structural work instead of card shadows or gradients. Large headline lettering sometimes receives a pronounced offset shadow, creating a printed, dimensional poster effect. Buttons use a measured 50% radius, while repeated ticker bands and decorative motifs provide layering without conventional bordered cards.

## Imagery

Use cutout-style photography of pizza, baked goods, and branded merchandise as the visual counterpoint to flat colour fields. Food images are large and isolated, integrated into illustrated sections with playful doodles, starbursts, or hand-drawn accents. Keep photography vivid and appetizing, with clean edges and bold framing; avoid generic lifestyle imagery. Illustrations support the bakery’s exuberant visual language rather than defining the core palette.

## Components

### Edge-to-edge hero

Fill the opening view with Pizza Flame (#ff4100), a centred brand mark, edge-positioned navigation, and enormous Golden Crust (#ffc700) display lettering.

### Starburst CTA

Use a circular or spiked promotional badge for actions such as ordering, with bold contrast and compact centred lettering.

### Ticker strip

Repeat a short phrase and small decorative marks across a narrow Golden Crust (#ffc700) band between large sections.

### Poster headline

Set section titles in the heavy display face and use a distinct offset shadow to make the lettering feel printed and dimensional.

### Food cutout

Place large, isolated food photography alongside or beneath text, with small illustrated accents around the image.

### Promotional colour panel

Give menu or brand-story content a full-width colour block, centred title, concise supporting copy, and a distinctive CTA.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 50% · padding 1px 6px · 400 13.3333px Arial
- **Link** (“VIEW MENU”): transparent background · text #ffc700 · radius 0px · padding 10px · 400 32px obviously-condensed-semibold
- **Navigation item** (“SHOP MERCH ORDER ONLINE”): transparent background · text #292a2c · radius 0px · padding 0px · 400 18px Open Sans

## Do

- Use Pizza Flame (#ff4100) and Golden Crust (#ffc700) as the unmistakable core palette.
- Make the main headline oversized, bold, and visually dominant.
- Build clear full-width colour bands instead of a conventional stack of cards.
- Pair vivid food cutouts with illustrated flourishes and poster-like titles.
- Use blush panels sparingly to mark a clear change of section.
- Keep navigation and calls to action easy to locate amid the visual energy.

## Don't

- Do not dilute the orange-yellow contrast with a muted, neutral-first palette.
- Do not use small, understated display headings.
- Do not make every section a bordered card or add generic shadows.
- Do not crowd supporting copy into the oversized headline treatment.
- Do not use unrelated lifestyle photography in place of food and branded merchandise.
- Do not let decorative details obscure ordering or menu actions.

## Agent prompt

Build a new page in Lamanna Bakery’s exuberant, poster-like visual style. Use Pizza Flame (#ff4100) for dominant full-width canvases and Golden Crust (#ffc700) for giant headlines, navigation emphasis, and graphic accents. Reserve Blush Icing (#fdbeba) for occasional soft section panels, with Bakery White (#ffffff) used sparingly as a light surface. Use an exceptionally heavy display face for stacked headlines, extended sans-serif body copy, and compact condensed lettering for prominent links. Organize the page as spacious, full-bleed colour bands with clear section breaks, not a card grid. Add appetizing food cutouts, small playful illustrations, ticker strips, and starburst CTAs. Preserve legibility and keep menu, order, and shop actions immediately recognizable. Avoid gradients, restrained minimalism, and generic corporate components.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed opening with centred logo, edge-aligned navigation, and oversized stacked headline. | Shop and order navigation, Large brand promise | Orange-yellow contrast, Oversized display type, Full-bleed media |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lamannabakery-com