--- title: "Roberta's Pizza design system" variant: extended source: https://www.robertaspizza.com/ captured_at: 2026-10-12 theme: light industry: food-beverage generator: Design DNA (https://four.wiralomi.com/style/robertaspizza-com) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Roberta's Pizza · Design System > Neighborhood pizza energy, served with theatrical flair **Theme:** light · **Industry:** food-beverage · **Source:** https://www.robertaspizza.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._ Roberta’s pairs a vivid red-and-charcoal identity with oversized, characterful display lettering and generous white space. Full-bleed food and event photography gives the long homepage the feel of a lively restaurant experience rather than a conventional menu site. ## North star Make every section feel like a playful neighborhood restaurant poster: bold red and expressive type against spacious white or charcoal, supported by real food imagery. ## Overview The page balances a clean white canvas with deep charcoal sections and unmistakable red bands, buttons, and illustrated accents. The measured palette is deliberately tight: #ffffff carries most editorial content, #2b2f36 anchors navigation and dark section panels, and #ed2023 marks high-priority actions and energetic transitions. Oversized Borensa display lettering gives major headings a retro, hand-painted character, while Offset TM handles the readable copy and larger link labels. The opening is a full-screen, muted kitchen video with a centered red wordmark and a compact delivery CTA; later sections alternate generous white layouts, dark textured panels, and saturated red shop/social areas. Food photography is cropped boldly, sometimes bleeding to the edges, while small illustrated pizza motifs add playful punctuation. Checkerboard dividers, decorative stars, and irregular section edges make the spacious scroll feel handcrafted. Keep surfaces mostly flat and let image contrast, color blocks, and typography create hierarchy. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Oven Charcoal | `#2b2f36` | `--color-oven-charcoal` | brand | Primary dark section bands, navigation and body text; also used for outlines and dark CTA surfaces. | | Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and light section background; also provides contrast for dark panels and red buttons. | | Sauce Red | `#ed2023` | `--color-sauce-red` | accent | Primary delivery and about CTAs, vivid shop and social bands, and brand accents. | | Deep Black | `#000000` | `--color-deep-black` | surface | Use in dark image overlays and subtle black-to-transparent fades, not as a dominant text color. | ### Semantic aliases `--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#2b2f36` (Oven Charcoal) · `--color-surface-2` → `#000000` (Deep Black) · `--color-text` → `#2b2f36` (Oven Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#2b2f36` (Oven Charcoal) · `--color-accent` → `#ed2023` (Sauce Red) · `--color-on-accent` → `#ffffff` (Gallery White) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#2b2f36` | `#ffffff` | 13.44:1 | AAA | | `#2b2f36` | `#000000` | 1.56:1 | fail | | `#ffffff` | `#2b2f36` | 13.44:1 | AAA | | `#ffffff` | `#000000` | 21:1 | AAA | | `#ed2023` | `#ffffff` | 4.35:1 | AA-large | | `#ed2023` | `#2b2f36` | 3.09:1 | AA-large | | `#ed2023` | `#000000` | 4.83:1 | AA | ### Gradients - `linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0))` - `linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0))` ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Offset TM | `--font-body` | webfont | 400 | Body copy, section headings, and larger content links | Barlow Condensed | | Borensa | `--font-display` | webfont | 400 | Display headlines, CTA labels, navigation labels, and captions | Rye | - **Offset TM:** Regular weight throughout; body copy and navigation-oriented content often use uppercase, while headings and links retain mixed case. - **Borensa:** Regular weight with distinctive decorative forms; display and CTA text is commonly uppercase, with tight caption and nav tracking. ### Type scale — Golden Ratio (ratio ≈ 1.565, base 20px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 120px | 400 | 0.88 | 0 | uppercase | Borensa | Oversized decorative titles for major promotional sections. | | h1 | 80px | 400 | 0.88 | 0 | uppercase | Borensa | Large uppercase headline treatment for primary page statements. | | h2 | 54px | 400 | 1.11 | 0 | — | Offset TM | Section titles such as events, shop, and newsletter. | | h3 | 24px | 400 | 1.25 | 0 | — | Offset TM | Subsection headings and feature titles. | | body | 20px | 400 | 1.5 | 0 | uppercase | Offset TM | Restaurant descriptions and supporting copy, often uppercase. | | caption | 14px | 400 | 2.14 | -0.02em | uppercase | Borensa | Compact uppercase labels and image-related details. | | nav | 14px | 400 | 2.14 | -0.02em | uppercase | Borensa | Short uppercase navigation and utility labels. | | link | 24px | 400 | 1.25 | 0 | — | Offset TM | Prominent content links and image-card labels. | ## Spacing & layout - Base unit **4px**, density **spacious**. - Scale (most used values): 12, 16, 18, 20, 24, 25, 30, 32, 40, 64, 96, 128 px. - Section rhythm 128px · element gap 40px · card padding — · max content width 1400px. A long, spacious homepage uses a measured max-width of 1400px, with full-bleed video, image, and color-band sections breaking up white content areas. Layouts shift between centered single-column copy, two-column editorial and card compositions, and image-led grids. Section rhythm is generous, with a measured 128px section gap and 40px element gap; preserve the distinct transitions rather than compressing the page into a dense feed. Center major titles and keep supporting content easy to scan. ## Shape & elevation - Radius: button `7px` · nav `50%` · link `7px` · xs `7px` - Shadow `sm` (link): `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px` - Motion: standard transition `0.3s ease` on interactive elements. The visual language is mostly flat: strong color panels and imagery establish depth instead of stacked cards. Use thin, square-edged outlines around selected image cards and checkerboard dividers between major sections. Measured link shadow is subtle; reserve it for a small interactive detail rather than applying a general shadow system. ## Imagery Lead with full-bleed, softly darkened kitchen video, then use vivid photographs of pizza, restaurant events, products, and social moments. Crop food and people close, with some images extending to the viewport edges or serving as card backgrounds. Hand-drawn pizza characters, stars, and other small decorative illustrations appear as accents, not substitutes for photography. ## Components ### Primary CTA Sauce Red (#ed2023) fill, white uppercase Borensa label, and a measured rounded radius of about 7px. Use for delivery, catering, and about actions. ### Hero video header Full-bleed kitchen footage with centered red wordmark, a compact menu control, a red delivery CTA, and a bottom row of secondary actions. ### Dark content band Oven Charcoal (#2b2f36) section surface with high-contrast light headings, restrained decorative stars, and aligned content. ### Image card Photographic card with a square-edged dark outline and a large Offset TM link label positioned over the image. ### Checkerboard divider A narrow black-and-white checker pattern marking transitions between distinct full-width sections. ### Newsletter form Centered heading and brief copy above a horizontal email input and Sauce Red submit action on a dark textured panel. ### Measured component styles - **Primary button** (“ORDER DELIVERY”): background #ed2023 · text #ffffff · radius 7.2px · padding 20px 24px · 400 22px Borensa · uppercase - **Secondary button** (“ORDER FROZEN”): background #ffffff · text #2b2f36 · radius 7.2px · padding 20px 30px · 400 22px Borensa · uppercase - **Link** (“Shop Pizza”): transparent background · text #ffffff · border 2px solid #2b2f36 · radius 0px · padding 0px 0px 30px 20px · 400 24px Offset TM - **Input**: transparent background · text #2b2f36 · radius 0px · padding 28px 18px · 400 20px Offset TM - **Card**: transparent background · text #2b2f36 · border 2px solid #2b2f36 · radius 0px · padding 0px · 400 24px Offset TM - **Navigation item** (“BOOK A TABLE ORDER CATERING ORDER DELIVE”): transparent background · text #2b2f36 · radius 0px · padding 0px · 400 24px Offset TM ## Do - Use the measured palette only for brand UI colors. - Give primary actions the Sauce Red fill and white label. - Pair expressive Borensa headings with readable Offset TM copy. - Alternate spacious white sections with bold charcoal or red bands. - Use real food and restaurant photography as a central visual element. - Keep major image and color sections full-bleed where appropriate. ## Don't - Do not add unmeasured brand colors to UI surfaces. - Do not make the layout uniformly card-based or compact. - Do not use heavy shadows across the page. - Do not replace the decorative display type with generic bold sans-serif. - Do not treat illustration-only colors as part of the core palette. - Do not crowd the generous section spacing with extra interface elements. ## Agent prompt Build a new restaurant page in Roberta’s Pizza’s expressive editorial style. Use Gallery White (#ffffff) as the main canvas, Oven Charcoal (#2b2f36) for dark bands and text, and Sauce Red (#ed2023) for primary actions and energetic section accents. Keep Deep Black (#000000) limited to image fades and overlay details. Use a decorative display face similar to Borensa for uppercase titles and CTA labels, paired with an Offset TM-like condensed sans for copy and links. Create generous section spacing, a few full-bleed food photographs, centered headline moments, and varied one- or two-column content blocks. Add restrained checkerboard separators and small hand-drawn food motifs. Favor flat surfaces, square image framing, and clear high-contrast actions; avoid dense dashboards, gradients as decoration, and generic card grids. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Full-viewport kitchen video with overlaid header controls and a bottom-centered row of three actions. | delivery CTA, table booking, video pause control | full-bleed video, centered red wordmark, dark overlay, red button | | 2 | feature-split | White editorial section with centered description and large pizza imagery flanking the copy. | about link | white canvas, food photography, centered copy, red CTA | | 3 | feature-split | Charcoal band with a centered title and a two-column lower content area. | catering order, delivery order, location information | dark textured panel, light display heading, red actions, decorative stars | | 4 | gallery | Full-bleed horizontal strip of food photography. | visual browsing | edge-to-edge photographs, darkened image treatment, checkerboard divider | | 5 | feature-split | White editorial layout with a text column and a larger event photograph. | more information link | centered display title, illustrated accents, asymmetric photo layout | | 6 | content-feed | Full-width charcoal panel with centered heading, side controls, and a centered action. | carousel navigation, see all link | dark patterned background, light display type, small red button | | 7 | product-grid | Full-width Sauce Red panel with a centered title above three image cards. | shop category links | red section band, three photographic cards, white card labels | | 8 | cta | Open white two-column composition with a character illustration beside three service actions. | catering order, table booking, delivery order | hand-drawn pizza character, spacious white canvas, mixed red and charcoal buttons | | 9 | team | Centered title above two side-by-side photographic brand cards. | brand discovery | decorative title, outlined image cards, overlay labels | | 10 | gallery | Red social band with a centered heading and a staggered strip of photographs. | social discovery | red panel, decorative icons, overlapping photo strip | | 11 | newsletter | Charcoal closing panel with centered signup content and a compact footer row. | email signup, privacy and press links | dark textured background, centered heading, horizontal form, red submit action | ## Source CSS custom properties (selected) ```css --brand--white: white; --font-family--body: "Offset TM",Arial,sans-serif; --brand--smoke: #2b2f36; --_typography---body--body-font-size: 1.5rem; --font-weight--normal: 400; --_typography---body--body-letter-spacing: 0em; --font-family--heading: Borensa,Arial,sans-serif; --_typography---h1--h1-font-size: 7.5rem; --_typography---h1--h1-font-weight: 400; --_typography---h1--h1-letter-spacing: 0em; --_typography---h2--h2-font-size: 5rem; --_typography---h2--h2-font-weight: 400; --_typography---h2--h2-letter-spacing: 0em; --_typography---h3--h3-font-size: 3.75rem; --_typography---h3--h3-font-weight: 400; --_typography---h3--h3-letter-spacing: 0em; --_typography---h4--h4-font-size: 3.375rem; --_typography---h4--h4-font-weight: 400; --_typography---h4--h4-letter-spacing: 0em; --_typography---h5--h5-font-size: 2.25rem; --_typography---h5--h5-font-weight: 400; --_typography---h5--h5-letter-spacing: 0em; --_typography---h6--h6-font-size: 1.625rem; --_typography---h6--h6-font-weight: 400; --_typography---h6--h6-letter-spacing: 0em; --_layout---spacing--xxsmall: .25rem; --_layout---spacing--xlarge: 4rem; --_layout---spacing--xsmall: .5rem; --_layout---spacing--huge: 6rem; --_layout---spacing--large: 3rem; --_layout---spacing--xxlarge: 5rem; --_layout---spacing--tiny: .125rem; --_layout---spacing--small: 1rem; --_layout---spacing--medium: 2rem; --font-weight--semi-bold: 600; --_theme---background--success: #cef5ca; --_theme---text-color--success: #114e0b; --_layout---spacing--global-padding: 1.25rem; --brand--red: #ed2023; --font-weight--medium: 500; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/robertaspizza-com