Pizza Hut France

Overview

Pizza Hut France's design system embodies **Direct-Action Minimalism**—a utilitarian aesthetic that prioritizes order placement speed and menu clarity above decorative flourish. The brand personality is energetic yet trustworthy, speaking to hungry customers with urgency tempered by reliability. The UI centers on a clean white canvas (rgb(255, 255, 255)) punctuated by Pizza Hut's signature bold red (#da1a32) on all primary CTAs, creating immediate visual hierarchy. Voice: conversational, action-oriented, never apologetic. Example: 'Your pizza arrives in 28 minutes—track it live.'

Colors

The color system is anchored by **Primary Red (#da1a32)**, used exclusively on 'Order Now', 'Add to Cart', and 'Accept All' buttons to signal immediate action. This red is applied at full saturation (rgb(227, 1, 43) in computed DOM) to maximize contrast against white backgrounds and ensure accessibility (WCAG AAA on white). Secondary Blue (#339dff) appears in promotional badges and secondary CTAs, providing visual relief without competing for attention. The surface stack is deliberately neutral: white (#ffffff) as the base, grays (#e9ecef, #f2f2f2, #e2e2e2) for container separation, and dark text (#231f20) for readability. Disabled states use #6c757d (on-surface-variant) at 60% opacity to signal unavailability without harsh contrast loss. The outline color (#d0d0d0) is used for subtle 1px

Typography

Open Sans (Google Fonts, weights 300–800) is the sole typeface, chosen for its high legibility at small sizes (12px labels) and neutral personality that doesn't compete with food imagery. The type hierarchy is shallow: Display (56px, 700 weight) is reserved for hero headlines; Headline-lg (36px, 700) for section titles; Body-md (16px, 400) for product descriptions and body copy; Label-md (14px, 600) for button text and form labels. Letter-spacing is minimal (0 to -0.02em) to maintain density and urgency—no airy, luxury spacing. On small labels over busy backgrounds (e.g., promotional badges), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. Line-height is set to 1.5x font-size for body text (24px for 16px font) to aid scanning of menu items and order summaries.

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing responsive reflow on mobile without breakpoint-specific redesigns. Horizontal gutter is 24px on desktop, reducing to 12px on tablets and 8px on mobile. Container padding follows the spacing scale: lg (40px) for page margins, md (24px) for card interiors, sm (12px) for list items. White-space is functional, not decorative—sections are separated by 40px (lg spacing) to create breathing room between menu categories and checkout steps. The spacing scale (8px unit, xs/sm/md/lg/xl increments) ensures all measurements are multiples of 8, creating visual rhythm and reducing cognitive load during layout decisions. Product cards use md padding (24px) with 4px border-radius to feel approachable without softness.

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. Level 1 (Base): white surface (rgb(255, 255, 255)) with no shadow. Level 2 (Cards/Inputs): 1px solid border at #d0d0d0 + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards and form fields to separate them from the background. Level 3 (Modals/Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) + background-color: #ffffff to create clear modal separation. On hover, cards transition to Level 3 shadow (200ms ease-in-out) to signal interactivity. Disabled elements drop to Level 0 (no

Shapes

The design employs **Functional Sharpness**—minimal border-radius that prioritizes clarity and speed over organic warmth. Buttons use 4px radius (0.25rem), creating a subtle softness that feels modern without appearing playful. Cards and inputs use 8px radius (0.5rem) as the default, balancing approachability with precision. Modals and dropdowns use 12px radius (0.75rem) to signal elevation and importance. The select dropdown panel uses 4px radius to match button styling, creating visual cohesion. Badges use full radius (9999px) only when displaying status (e.g., 'New', 'Hot Deal') to differen

Components

**Action Elements**: Primary buttons (#da1a32 background, white text, 44px height, 12px 24px padding, 4px radius) are the dominant interactive element, appearing on every product card and at checkout. On hover, the background darkens to #c41428 (200ms transition) to signal responsiveness. Secondary buttons use transparent background with 2px #da1a32 border, allowing users to explore without committing. Ghost buttons (#ffffff background, #231f20 text, 1px #d0d0d0 border) are used for tertiary actions like 'View Details' or 'Cancel'.

**Containers & Surfaces**: Product cards (24px padding, 8px radius, 1px #d0d0d0 border, 0 3px 8px shadow) stack vertically in a grid, with hover state elevating to 0 8px 24px shadow. The card background remains white on hover, but the shadow transition (200ms)

Do's and Don'ts

**Do**

• Do use Primary Red (#da1a32) exclusively on primary CTAs (Order, Add to Cart, Checkout) to create unambiguous action signals.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile to preserve rhythm across breakpoints.
• Do apply 200ms ease-in-out transitions on button and card hover states to signal interactivity without feeling sluggish.
• Do use Open Sans 600 weight (14px) for all form labels and button text to ensure legibility at small sizes.
• Do stack product cards in a responsive grid with consistent 8px radius and 1px #d0d0d0 borders for visual cohesion.

**Don't**

• Don't use secondary colors (blue, gray) on primary CTAs—they dilute urgency and confuse user intent.
• Don't apply border-radius greater than 12px on structural elements; it introduces softness that conflicts with the direct-action aesthetic.
• Don't use shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12); excessive depth creates visual clutter on dense menu pages.
• Don't mix typefaces; Open Sans is the sole font family across all weights and sizes to maintain clarity and reduce cognitive load.
• Don't disable form fields without visual feedback (grayed text + #e9ecef background + cursor: not-allowed); ambiguity frustrates users during checkout.