SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Mode

Groundbreaking and editorial. Deep forest green sets a cerebral foundation, electrified by bright chartreuse interlocking pill shapes and warm serif typography. Complex analytical concepts are presented through clean, puzzle-like containers and approachable product miniatures.

boldeditorialplayfulquiet
Visit site

Colour

Background#043f2e
Text#eef2e3
Accent#c8f169
Surface#c8f169
Muted#78c51c

Typefaces

Display
Grenette
Body
Graphik
Mono
—
Source
self_hosted
Scale
12 · 14 · 16 · 18 · 22 · 36

Layout

Grid
—
Container
—
Spacing base
4px
Radius
12px · 24px · 32px

Capture

Category
saas
Sections
11
Captured
2026-08-29
Rhythm
dark x2 → light → dark x3 → light x3 → dark x2

Type rules

  • display headlines use Grenette serif in sentence case with tight tracking
  • body text rendered in Graphik at roughly 45 characters per line measure
  • section labels and UI tags set in uppercase tracking-spaced sans-serif

Colour rules

  • deep forest green (#043f2e) anchors the background across the primary narrative
  • electric chartreuse (#c8f169) frames key headline words, primary cards, and high-impact CTA containers
  • invert text colour to dark forest green when rendered inside chartreuse surfaces

Voice rules

  • lead with the collaborative benefit between analysts and business teams
  • pair concise serif headlines with explanatory sans-serif subtext

Holds it together

  • break hero and headline phrases across interlocking rounded chartreuse blocks
  • use high-contrast colour flipping: cream text on dark green surfaces, dark green text on lime surfaces
  • frame product diagrams as simplified, rounded UI cards rather than literal full screenshots

Contrast

text on background10.5:1 AAA
muted text on background5.6:1 AA
text on surface1.1:1 fail
accent on background9.3:1 AAA
background on accent9.3:1 AAA

Type, measured

Body
18px / 1.3
Measure
45 characters
Display
96px / 0.9
Tracking
-0.02em display
Scale ratio
1.52

Voice

Tone
confident, collaborative, clear
Sentences
medium
Person
second
Vocabulary
technical
Calls to action
try, request, explore, save

Built with

Builder
—
Framework
gatsby
Motion
—
WebGL
—
Nav
top_bar, 3 items
Length
10.5 screens

Sections in page order

3 marked strong · 11

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

  1. 00

    hero

    A punchy, graphic hero contrasting lime and forest green interlocking blocks with warm office photography and refined serif typography.

    Mood
    bold + editorial
    Layout
    14 col · asymmetric · balanced
    Open section →
    A punchy, graphic hero contrasting lime and forest green interlocking blocks with warm office photography and refined serif typography.
  2. 01

    statement

    Deep forest green backdrop with a large, warm serif headline delivering a calm, grounded statement.

    Mood
    editorial + quiet
    Layout
    16 col · centered · airy
    Open section →
    Deep forest green backdrop with a large, warm serif headline delivering a calm, grounded statement.
  3. 02

    feature

    Strong

    Playful and structured dual feature section with interlocking chartreuse and cream panels housing simplified data UI widgets.

    Mood
    playful + editorial
    Layout
    2 col · split · balanced
    Open section →
    Playful and structured dual feature section with interlocking chartreuse and cream panels housing simplified data UI widgets.
  4. 03

    statement

    A restrained, deep-green editorial statement banner led by an expressive serif headline and paired CTA buttons.

    Mood
    editorial + quiet
    Layout
    4 col · centered · airy
    Open section →
    A restrained, deep-green editorial statement banner led by an expressive serif headline and paired CTA buttons.
  5. 04

    showcase

    Deep forest green negative space framed around a quiet, floating isometric stack of pastel layers and dissolving cubes.

    Mood
    quiet + dreamy
    Layout
    12 col · centered · airy
    Open section →
    Deep forest green negative space framed around a quiet, floating isometric stack of pastel layers and dissolving cubes.
  6. 05

    logo bar

    Rich forest green client logo grid anchored by an elegant serif statement of industry leadership.

    Mood
    editorial + quiet
    Layout
    5 col · grid · airy
    Open section →
    Rich forest green client logo grid anchored by an elegant serif statement of industry leadership.
  7. 06

    testimonial

    Vibrant lime and forest green customer testimonial featuring an oversized quotation mark integrated into a speech-bubble container.

    Mood
    playful + bold
    Layout
    13 col · asymmetric · balanced
    Open section →
    Vibrant lime and forest green customer testimonial featuring an oversized quotation mark integrated into a speech-bubble container.
  8. 07

    cta

    Vibrant lime green card framing a dark forest green demo invitation with stylized product UI and warm serif typography.

    Mood
    playful + bold
    Layout
    12 col · split · balanced
    Open section →
    Vibrant lime green card framing a dark forest green demo invitation with stylized product UI and warm serif typography.
  9. 08

    feature

    Strong

    Rich forest and chartreuse green split section pairing an editorial serif headline with interlocking rounded feature tiles.

    Mood
    editorial + bold
    Layout
    2 col · split · balanced
    Open section →
    Rich forest and chartreuse green split section pairing an editorial serif headline with interlocking rounded feature tiles.
  10. 09

    cta

    Strong

    A high-contrast call to action framed inside a massive lime-green geometric letterform against deep forest green.

    Mood
    bold + editorial
    Layout
    7 col · asymmetric · airy
    Open section →
    A high-contrast call to action framed inside a massive lime-green geometric letterform against deep forest green.
  11. 10

    footer

    Deep forest green footer anchored by an oversized chartreuse wordmark and an airy, structured link hierarchy.

    Mood
    quiet + bold
    Layout
    9 col · split · airy
    Open section →
    Deep forest green footer anchored by an oversized chartreuse wordmark and an airy, structured link hierarchy.