SearchSubmit
MUUDS

Curated catalog of analyzed web design.

localheroes-ocado-logistics-com

Comic book pop-art energy meets approachable community recruitment. Saturated purple and canary yellow blocks, speech bubbles, and rounded Fredoka typography create a heroic yet friendly aesthetic. Curved photo masks and high-contrast pill elements keep the mood lively and welcoming.

playful
Visit site

Colour

Background#ffffff
Text#373a36
Accent#f7ea48
Surface#7d55c7

Typefaces

Display
Fredoka
Body
Fredoka
Mono
—
Source
google
Scale
16 · 18 · 24 · 32 · 54

Layout

Grid
12 columns
Container
1084px
Spacing base
5px
Radius
9999px

Capture

Category
other
Sections
9
Captured
2026-08-30
Rhythm
mixed → teal → light x2 → purple → light x2 → teal → yellow

Type rules

  • use Fredoka across all hierarchy levels from display headlines to body text
  • body text set at 16px with line height of 1.5 at approximately 50 characters per line
  • hero and high-impact headlines set in bold uppercase display type

Colour rules

  • high-saturation purple (#7d55c7) acts as the primary brand block colour for hero and key feature panels
  • canary yellow (#f7ea48) reserved exclusively for high-priority CTA pill buttons, badges, and comic callouts
  • mint turquoise (#49c5b1) used as a secondary break panel and accent button fill

Voice rules

  • frame delivery drivers as community superheroes and local legends
  • keep tone cheerful and encouraging with conversational phrasing like 'faffing' and 'sparkly'

Holds it together

  • all interactive buttons and requirement tags must use full pill radius (border-radius: 9999px)
  • alternate saturated full-bleed colour blocks (purple, teal, yellow) with clean white background sections
  • use comic-inspired speech bubbles and halftone bursts to emphasize hero text and key incentives
  • crop imagery inside rounded arch or circle masks to maintain a soft, friendly silhouette

Contrast

text on background11.5:1 AAA
text on surface2.2:1 fail
accent on background1.3:1 fail
background on accent1.3:1 fail

Type, measured

Body
16px / 1.5
Measure
50 characters
Display
54px / 1
Tracking
0em display
Scale ratio
1.36

Voice

Tone
enthusiastic, friendly, encouraging
Sentences
medium
Person
second
Vocabulary
colloquial
Calls to action
apply, join, follow

Built with

Builder
framer
Framework
—
Motion
—
WebGL
—
Nav
—
Length
7.8 screens

Sections in page order

9

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

  1. 00

    hero

    Energetic pop-art comic visuals meet upbeat recruitment messaging across a vibrant purple banner and rounded dual-column layout.

    Mood
    playful + bold
    Layout
    12 col · stacked · balanced
    Open section →
    Energetic pop-art comic visuals meet upbeat recruitment messaging across a vibrant purple banner and rounded dual-column layout.
  2. 01

    statement

    A vibrant turquoise location announcement using rounded friendly typography and generous asymmetrical whitespace.

    Mood
    playful
    Layout
    3 col · split · airy
    Open section →
    A vibrant turquoise location announcement using rounded friendly typography and generous asymmetrical whitespace.
  3. 02

    video

    Energetic and comic-book inspired recruitment video player featuring bold saturated pop colours and hero graphics.

    Mood
    playful + bold
    Layout
    12 col · centered · balanced
    Open section →
    Energetic and comic-book inspired recruitment video player featuring bold saturated pop colours and hero graphics.
  4. 03

    careers

    Clean and airy careers section pairing friendly rounded typography with structured shift details and a mint call-to-action button.

    Mood
    playful + quiet
    Layout
    2 col · split · airy
    Open section →
    Clean and airy careers section pairing friendly rounded typography with structured shift details and a mint call-to-action button.
  5. 04

    careers

    Vibrant and approachable recruitment section featuring high-contrast yellow requirement pills alongside a curved photographic crop of a driver.

    Mood
    playful + warm
    Layout
    1 col · split · balanced
    Open section →
    Vibrant and approachable recruitment section featuring high-contrast yellow requirement pills alongside a curved photographic crop of a driver.
  6. 05

    announcement

    Clean and playful onboarding update featuring a looping delivery route graphic paired with friendly, rounded typography.

    Mood
    playful + warm
    Layout
    8 col · split · airy
    Open section →
    Clean and playful onboarding update featuring a looping delivery route graphic paired with friendly, rounded typography.
  7. 06

    careers

    A cheerful and friendly benefits grid layout with rounded typography and subtle teal outline icons on a clean white backdrop.

    Mood
    playful + warm
    Layout
    3 col · grid · balanced
    Open section →
    A cheerful and friendly benefits grid layout with rounded typography and subtle teal outline icons on a clean white backdrop.
  8. 07

    cta

    Vibrant turquoise banner featuring a friendly rounded pill button inviting visitors to connect on social media.

    Mood
    playful + warm
    Layout
    6 col · centered · airy
    Open section →
    Vibrant turquoise banner featuring a friendly rounded pill button inviting visitors to connect on social media.
  9. 08

    cta

    Vibrant and cheerful recruitment call-to-action pairing punchy brand yellow with a pill button and delivery photography.

    Mood
    playful + bold
    Layout
    12 col · split · balanced
    Open section →
    Vibrant and cheerful recruitment call-to-action pairing punchy brand yellow with a pill button and delivery photography.

More like this

by shared mood