MUUDS

Curated catalog of analyzed web design.

Delta Board

Tactile and purpose-driven climbing hardware commerce with crisp editorial pacing. Warm, natural photography of wood craftsmanship and outdoor rock textures is framed by clean Swiss grotesque typography and spacious light backgrounds.

Visit site

Colour

Background#ffffff
Text#202223
Accent#fc4c00
Surface#f7f7f7
Muted#606a72

Typefaces

Display
Switzer
Body
Switzer
Mono
Source
self_hosted
Scale
11 · 12 · 14 · 16 · 18 · 24

Layout

Grid
Container
Spacing base
4px
Radius
0px · 8px · 20px

Capture

Category
ecommerce
Sections
12
Captured
2026-08-30
Rhythm
light x3 → warm → light → mixed → light x2 → dark → light → dark x2

Type rules

  • display headlines set in heavy sans-serif with tight line height and sentence case
  • eyebrow categories set in uppercase with wide letter spacing above section copy
  • body text measure kept around 43 characters per line for high legibility

Colour rules

  • pure white background (#ffffff) grounds product displays while dark charcoal (#171717) grounds closing actions
  • accent orange (#fc4c00) used sparingly for contextual inline hyperlinks and focal indicators

Voice rules

  • direct action verbs for climbing community
  • bilingual clarity on engineering and origins

Holds it together

  • anchor white typographic calls-to-action directly in the bottom corners of full-bleed product cards
  • separate editorial statements with bold uppercase ticker strips and structured multi-column spec lists
  • pair outdoor lifestyle imagery side-by-side with close-up manufacturing and design details

Contrast

text on background16.0:1 AAA
muted text on background5.5:1 AA
text on surface14.9:1 AAA
accent on background3.4:1 AA Large
background on accent3.4:1 AA Large

Type, measured

Body
16px / 1.5
Measure
43 characters
Display
100px / 1
Tracking
-0.024em display
Scale ratio
1.58

Voice

Tone
confident, craft-focused, declarative
Sentences
medium
Person
second
Vocabulary
plain
Calls to action
découvrir, voir

Built with

Builder
Framework
Motion
swiper
WebGL
Nav
top_bar, 0 items
Length
10.3 screens

Sections in page order

3 marked strong · 12

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

  1. 00

    hero

    A clean, quiet product hero with massive centered white typography overlaid directly across a muted climbing board visual.

    Mood
    quiet + bold
    Layout
    1 col · centered · airy
    Open section →
    A clean, quiet product hero with massive centered white typography overlaid directly across a muted climbing board visual.
  2. 01

    showcase

    A stark white, clinical product grid presenting climbing equipment with technical clarity and minimal catalog styling.

    Mood
    clinical + quiet
    Layout
    5 col · grid · balanced
    Open section →
    A stark white, clinical product grid presenting climbing equipment with technical clarity and minimal catalog styling.
  3. 02

    showcase

    Strong

    Clean and high-contrast climbing hardware showcase pairing an oversized typographic statement with split product cards.

    Mood
    bold + editorial
    Layout
    1 col · stacked · balanced
    Open section →
    Clean and high-contrast climbing hardware showcase pairing an oversized typographic statement with split product cards.
  4. 03

    showcase

    Strong

    Warm sculptural product photography against an ochre background with minimal white typography anchored in the lower corner.

    Mood
    warm + quiet
    Layout
    8 col · full bleed · airy
    Open section →
    Warm sculptural product photography against an ochre background with minimal white typography anchored in the lower corner.
  5. 04

    statement

    Crisp Swiss-inspired typography section pairing an asymmetric introductory statement with a large uppercase ticker.

    Mood
    clinical + quiet
    Layout
    1 col · asymmetric · airy
    Open section →
    Crisp Swiss-inspired typography section pairing an asymmetric introductory statement with a large uppercase ticker.
  6. 05

    feature

    Strong

    Rugged outdoor climbing photography paired with clean, spacious editorial typography that feels tactile and refined.

    Mood
    editorial + warm
    Layout
    2 col · stacked · airy
    Open section →
    Rugged outdoor climbing photography paired with clean, spacious editorial typography that feels tactile and refined.
  7. 06

    feature

    Clean documentary-style split feature pairing candid craftsmanship photography with concise editorial statements.

    Mood
    warm + editorial
    Layout
    2 col · grid · balanced
    Open section →
    Clean documentary-style split feature pairing candid craftsmanship photography with concise editorial statements.
  8. 07

    testimonial

    Clean customer review cards displaying user-submitted photos, star ratings, and short product feedback in a tidy carousel.

    Mood
    quiet + warm
    Layout
    3 col · grid · balanced
    Open section →
    Clean customer review cards displaying user-submitted photos, star ratings, and short product feedback in a tidy carousel.
  9. 08

    statement

    Atmospheric dusk rooftop view over Paris with quiet, minimal typography stating local craftsmanship pride.

    Mood
    quiet + warm
    Layout
    12 col · full bleed · airy
    Open section →
    Atmospheric dusk rooftop view over Paris with quiet, minimal typography stating local craftsmanship pride.
  10. 09

    logo bar

    Minimal grayscale logo bar providing understated social proof across a soft neutral background.

    Mood
    quiet + clinical
    Layout
    1 col · centered · airy
    Open section →
    Minimal grayscale logo bar providing understated social proof across a soft neutral background.
  11. 10

    footer

    Utilitarian dark multi-column footer with French e-commerce navigation, brand statement, and an email newsletter subscription field.

    Mood
    quiet + clinical
    Layout
    4 col · grid · balanced
    Open section →
    Utilitarian dark multi-column footer with French e-commerce navigation, brand statement, and an email newsletter subscription field.
  12. 11

    footer

    A clean, dark utility footer bar containing a language selector, copyright notice, legal navigation, and payment provider badges.

    Mood
    clinical + quiet
    Layout
    1 col · split · balanced
    Open section →
    A clean, dark utility footer bar containing a language selector, copyright notice, legal navigation, and payment provider badges.

More like this

by shared mood