SearchSubmit
MUUDS

Curated catalog of analyzed web design.

seccosquared-com

Swiss-inspired bold minimalism driven by massive grotesque typography and generous negative space. High-energy vermilion orange fields contrast with quiet light grey panels and dark data modules.

boldquietclinical
Visit site

Colour

Background#efefef
Text#141414
Accent#ff4e27
Surface#ffffff
Muted#212529

Typefaces

Display
Lay Grotesk
Body
Lay Grotesk
Mono
—
Source
self_hosted
Scale
20 · 24 · 32 · 38 · 60 · 64

Layout

Grid
—
Container
—
Spacing base
5px
Radius
0px

Capture

Category
agency
Sections
18
Captured
2026-08-30
Rhythm
orange → light → dark → light → orange → light

Type rules

  • display type uses tight line-height below 1.0
  • body text constrained to tight column measures around 30 characters

Colour rules

  • hyper-saturated vermilion orange anchors hero, CTA, and key accents
  • neutral grey #efefef forms the base canvas for case studies and statements

Voice rules

  • declarative value propositions
  • concise action links

Holds it together

  • anchor terminal sections with full-bleed vermilion orange backgrounds
  • use oversized sentence-case grotesque typography for key brand claims
  • separate modular content using subtle 1px grid rules

Contrast

text on background16.0:1 AAA
muted text on background13.4:1 AAA
text on surface18.4:1 AAA
accent on background2.9:1 fail
background on accent2.9:1 fail

Type, measured

Body
20px / 1.15
Measure
31 characters
Display
188px / 0.87
Tracking
0em display
Scale ratio
1.75

Voice

Tone
direct, confident
Sentences
medium
Person
first
Vocabulary
specialized
Calls to action
learn, get, explore

Built with

Builder
—
Framework
—
Motion
gsap, three
WebGL
—
Nav
top_bar, 5 items
Length
15.8 screens

Sections in page order

3 marked strong · 18

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

  1. 00

    hero

    A stark, hyper-saturated orange hero section that relies on sparse grotesque typography and generous negative space to command focus.

    Mood
    bold
    Layout
    1 col · asymmetric · airy
    Open section →
    A stark, hyper-saturated orange hero section that relies on sparse grotesque typography and generous negative space to command focus.
  2. 01

    nav

    A massive cropped wordmark on a high-contrast orange block commands the header above a minimal, stark navigation bar.

    Mood
    bold + raw
    Layout
    1 col · stacked · airy
    Open section →
    A massive cropped wordmark on a high-contrast orange block commands the header above a minimal, stark navigation bar.
  3. 02

    statement

    Restrained, airy typography-only statement that lets large, precise grotesque type speak across generous neutral space.

    Mood
    quiet + clinical
    Layout
    2 col · stacked · airy
    Open section →
    Restrained, airy typography-only statement that lets large, precise grotesque type speak across generous neutral space.
  4. 03

    statement

    A disciplined, Swiss-inspired section pairing a modular grid icon and capability list with a bold, dark contrast statement block.

    Mood
    clinical + editorial
    Layout
    1 col · stacked · balanced
    Open section →
    A disciplined, Swiss-inspired section pairing a modular grid icon and capability list with a bold, dark contrast statement block.
  5. 04

    stats

    High-contrast, stark typographic metrics section dominated by towering bright orange statistics against deep black.

    Mood
    bold + clinical
    Layout
    1 col · split · balanced
    Open section →
    High-contrast, stark typographic metrics section dominated by towering bright orange statistics against deep black.
  6. 05

    logo bar

    A muted, dark-mode client logo strip arranged in equal columns with faint vertical grid dividers.

    Mood
    quiet + clinical
    Layout
    6 col · grid · balanced
    Open section →
    A muted, dark-mode client logo strip arranged in equal columns with faint vertical grid dividers.
  7. 06

    logo bar

    Subdued monochromatic client logo bar set within fine vertical grid dividers against a dark charcoal background.

    Mood
    quiet + clinical
    Layout
    6 col · grid · balanced
    Open section →
    Subdued monochromatic client logo bar set within fine vertical grid dividers against a dark charcoal background.
  8. 07

    feature

    Strong

    Spacious and restrained agency services showcase pairing an interactive vertical menu with an abstract graphic and clear descriptive copy.

    Mood
    clinical + quiet
    Layout
    2 col · split · airy
    Open section →
    Spacious and restrained agency services showcase pairing an interactive vertical menu with an abstract graphic and clear descriptive copy.
  9. 08

    statement

    Sparse, airy typography-only section intro presenting a clean grotesque headline against stark white space.

    Mood
    quiet + bold
    Layout
    6 col · asymmetric · airy
    Open section →
    Sparse, airy typography-only section intro presenting a clean grotesque headline against stark white space.
  10. 09

    feature grid

    Ultra-minimal, quiet three-column typography grid displaying service capabilities within subtle hairline borders.

    Mood
    quiet
    Layout
    3 col · grid · airy
    Open section →
    Ultra-minimal, quiet three-column typography grid displaying service capabilities within subtle hairline borders.
  11. 10

    statement

    Strong

    An ultra-minimalist, gallery-like vertical layout anchored by a stark orange circle and quiet corner typography.

    Mood
    quiet + bold
    Layout
    3 col · asymmetric · airy
    Open section →
    An ultra-minimalist, gallery-like vertical layout anchored by a stark orange circle and quiet corner typography.
  12. 11

    showcase

    A clean, quiet case study preview featuring a branded logo card alongside restrained editorial copy and an orange text link.

    Mood
    quiet + clinical
    Layout
    2 col · split · airy
    Open section →
    A clean, quiet case study preview featuring a branded logo card alongside restrained editorial copy and an orange text link.
  13. 12

    showcase

    Minimalist two-column brand showcase balancing a crisp logo card against quiet, measured product copy.

    Mood
    quiet + clinical
    Layout
    2 col · split · airy
    Open section →
    Minimalist two-column brand showcase balancing a crisp logo card against quiet, measured product copy.
  14. 13

    cta

    Stark graphic call-to-action pairing a bold vermilion block with spacious Swiss-style grotesk typography.

    Mood
    bold + editorial
    Layout
    2 col · split · airy
    Open section →
    Stark graphic call-to-action pairing a bold vermilion block with spacious Swiss-style grotesk typography.
  15. 14

    cta

    Vibrant high-contrast CTA header featuring large black grotesque type spanning across a blazing orange field.

    Mood
    bold
    Layout
    2 col · split · airy
    Open section →
    Vibrant high-contrast CTA header featuring large black grotesque type spanning across a blazing orange field.
  16. 15

    cta

    High-impact saturated orange contact form defined by stark underline input fields and a prominent white submit button.

    Mood
    bold + raw
    Layout
    1 col · stacked · balanced
    Open section →
    High-impact saturated orange contact form defined by stark underline input fields and a prominent white submit button.
  17. 16

    footer

    Strong

    Massive high-impact vermillion brand logotype dominating the footer space on a clean light grey ground.

    Mood
    bold
    Layout
    1 col · full bleed · airy
    Open section →
    Massive high-impact vermillion brand logotype dominating the footer space on a clean light grey ground.
  18. 17

    footer

    An ultra-spacious, restrained footer with hairline rules, clean grotesk typography, and a pop of red accent.

    Mood
    quiet + clinical
    Layout
    2 col · split · airy
    Open section →
    An ultra-spacious, restrained footer with hairline rules, clean grotesk typography, and a pop of red accent.

More like this

by shared mood