SearchSubmit
MUUDS

Curated catalog of analyzed web design.

OpenPhone

Pragmatic modern SaaS meets lighthearted visual charm. Ultra-clean typography and high-fidelity interface mockups are energised by electric lime call-to-action buttons and 3D illustrated icons embedded directly into section headlines.

quietboldclinicalplayful
Visit site

Colour

Background#ffffff
Text#000000
Accent#edfc47
Surface#f7f6f5
Muted#222222

Typefaces

Display
Roobert
Body
Inter
Mono
—
Source
google
Scale
12 · 14 · 16 · 18 · 20 · 24

Layout

Grid
—
Container
—
Spacing base
4px
Radius
8px · 16px · 24px

Capture

Category
saas
Sections
14
Captured
2026-08-30
Rhythm
light x5 → dark x2 → light x4 → dark → light x2

Type rules

  • display headings set in sentence case with tight tracking (-0.02em)
  • body text maintains concise paragraph lengths under 30 characters per line

Colour rules

  • electric lime (#edfc47) is reserved exclusively for primary action triggers and highlight badges
  • full-width black (#000000) sections punctuate the bright white baseline layout

Voice rules

  • lead headlines with clear practical outcomes rather than feature jargon
  • pair core claims with specific metric-driven social proof

Holds it together

  • embed 3D illustrated objects directly within headline text flow to break typographic rigidity
  • apply electric lime (#edfc47) only to primary action buttons and focal badges
  • alternate airy white layout sections with solid black statement breaks

Contrast

text on background21.0:1 AAA
muted text on background15.9:1 AAA
text on surface19.5:1 AAA
accent on background1.1:1 fail
background on accent1.1:1 fail

Type, measured

Body
24px / 1.2
Measure
29 characters
Display
88px / 1.1
Tracking
-0.02em display
Scale ratio
1.38

Voice

Tone
direct, pragmatic, encouraging
Sentences
short
Person
second
Vocabulary
plain
Calls to action
try, talk, get, see, read

Built with

Builder
webflow
Framework
—
Motion
gsap, swiper
WebGL
—
Nav
top_bar, 64 items
Length
8.3 screens

Sections in page order

3 marked strong · 14

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

  1. 00

    nav

    A crisp, conventional SaaS header featuring a dark announcement bar over a clean white navigation bar.

    Mood
    quiet + clinical
    Layout
    12 col · stacked · balanced
    Open section →
    A crisp, conventional SaaS header featuring a dark announcement bar over a clean white navigation bar.
  2. 01

    hero

    Clean, ultra-minimal centered hero section with high-contrast black typography and a bright lime-yellow primary CTA on crisp white.

    Mood
    bold + quiet
    Layout
    3 col · centered · airy
    Open section →
    Clean, ultra-minimal centered hero section with high-contrast black typography and a bright lime-yellow primary CTA on crisp white.
  3. 02

    showcase

    A crisp, high-fidelity UI showcase showing multi-device communication tools seamlessly anchored by a trust-building logo strip.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · balanced
    Open section →
    A crisp, high-fidelity UI showcase showing multi-device communication tools seamlessly anchored by a trust-building logo strip.
  4. 03

    statement

    An ultra-minimal statement with generous negative space and a playful three-dimensional speech bubble embedded directly into the headline text.

    Mood
    playful + quiet
    Layout
    3 col · asymmetric · airy
    Open section →
    An ultra-minimal statement with generous negative space and a playful three-dimensional speech bubble embedded directly into the headline text.
  5. 04

    feature grid

    Modular six-card feature grid presenting software workflows through crisp, pastel-accented interactive UI mockups.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    Modular six-card feature grid presenting software workflows through crisp, pastel-accented interactive UI mockups.
  6. 05

    statement

    A stark dark section title anchored by an inline illustrated yellow coin icon adding a pop of playfulness.

    Mood
    bold + playful
    Layout
    3 col · asymmetric · airy
    Open section →
    A stark dark section title anchored by an inline illustrated yellow coin icon adding a pop of playfulness.
  7. 06

    testimonial

    Dark, high-contrast customer testimonial card featuring an embedded video story with punchy lime accent buttons and quantified impact metrics.

    Mood
    bold
    Layout
    1 col · split · balanced
    Open section →
    Dark, high-contrast customer testimonial card featuring an embedded video story with punchy lime accent buttons and quantified impact metrics.
  8. 07

    feature grid

    Clean, pragmatic feature grid presenting switching benefits across three subtle grey cards paired with clear action buttons.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · balanced
    Open section →
    Clean, pragmatic feature grid presenting switching benefits across three subtle grey cards paired with clear action buttons.
  9. 08

    logo bar

    An ultra-clean, minimal social proof bar pairing a succinct G2 rating claim with official review badges across generous white space.

    Mood
    quiet + clinical
    Layout
    12 col · split · airy
    Open section →
    An ultra-clean, minimal social proof bar pairing a succinct G2 rating claim with official review badges across generous white space.
  10. 09

    feature

    Strong

    Clean, airy feature section pairing an interactive industry pill grid with a sharp isometric house illustration.

    Mood
    playful + quiet
    Layout
    2 col · split · airy
    Open section →
    Clean, airy feature section pairing an interactive industry pill grid with a sharp isometric house illustration.
  11. 10

    logo bar

    A clean, modular grid of familiar SaaS integration icons housed in crisp rounded white tiles.

    Mood
    clinical + quiet
    Layout
    1 col · grid · airy
    Open section →
    A clean, modular grid of familiar SaaS integration icons housed in crisp rounded white tiles.
  12. 11

    cta

    Strong

    A crisp, dark-mode action grid featuring minimalist isometric wireframe illustrations accented by pops of acid yellow.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A crisp, dark-mode action grid featuring minimalist isometric wireframe illustrations accented by pops of acid yellow.
  13. 12

    cta

    Strong

    A punchy, airy call-to-action pairing playful isometric cash illustrations embedded directly into the headline with sleek dual CTA cards.

    Mood
    playful + bold
    Layout
    2 col · split · airy
    Open section →
    A punchy, airy call-to-action pairing playful isometric cash illustrations embedded directly into the headline with sleek dual CTA cards.
  14. 13

    footer

    Crisp, airy four-column site footer with strictly organized navigation links and minimal utilitarian typography.

    Mood
    quiet + clinical
    Layout
    4 col · grid · balanced
    Open section →
    Crisp, airy four-column site footer with strictly organized navigation links and minimal utilitarian typography.

More like this

by shared mood