SearchSubmit
MUUDS

Curated catalog of analyzed web design.

saintsmary-com

Dreamy, futuristic, and playful. Pastel lilac and soft lavender canvases blend with surreal iridescent 3D elements, warped display typography, and code-comment-styled monospace labels to create an immersive creative director portfolio.

playfuldreamyquiet
Visit site

Rated

5.8/ 10

From 11 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged
8.4
Systemmeasured
4.2
Distinctionmeasured
2.2
on the grid
23%
vertical rhythm
36%
type on a scale
67%
contrast passing AA
40%
unlike the library
0.19
model craft
7.5/10
model deviation
6.3/10

Colour

Background#f3e8f8
Text#462446
Accent#e0ef5d
Surface#e8dbef
Muted#a79aac

Typefaces

Display
Parabole Display
Body
Aeonik
Mono
PP Fraktion Mono
Source
google
Scale
11 · 12 · 13 · 14 · 16 · 28

Layout

Grid
—
Container
—
Spacing base
8px
Radius
20px · 999px

Capture

Category
portfolio
Sections
11
Captured
2026-08-30
Rhythm
lavender x2 → soft lilac x2 → lavender x5 → dark void → lilac acid

Type rules

  • display headlines set in Parabole Display with uppercase tracking
  • commentary and technical metadata set in PP Fraktion Mono uppercase
  • body copy set in clean Aeonik

Colour rules

  • pale lavender #f3e8f8 acts as the primary dominant backdrop across the portfolio
  • deep dark purple-grey #1e1e1f isolates the interactive physics capabilities section
  • acid lime #e0ef5d serves as a vibrant high-contrast accent on badges and footer ribbons

Voice rules

  • use code comment slashes '//' prefixing explanatory paragraphs
  • number sections with bracketed indices like (01)

Holds it together

  • pair distorted uppercase display titles with right-aligned monospace code-comment side notes
  • encapsulate interactive badges, chips, and nav items in full pill capsules
  • break predominantly pastel layouts with a single dark void block for technical capabilities

Contrast

text on background11.1:1 AAA
muted text on background2.3:1 fail
text on surface9.9:1 AAA
accent on background1.1:1 fail
background on accent1.1:1 fail

Type, measured

Body
14px / 1
Measure
316 characters
Display
138px / 1
Tracking
-0.015em display
Scale ratio
1.77

Voice

Tone
playful, visionary, conversational
Sentences
medium
Person
first
Vocabulary
creative
Calls to action
know, copy

Built with

Builder
webflow
Framework
—
Motion
gsap, locomotive-scroll
WebGL
yes
Nav
top_bar, 1 items
Length
8.7 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

    nav

    An expansive, airy pastel lavender canvas framed by playful pill-shaped navigation elements and a faint subtle coordinate grid.

    Mood
    playful + dreamy
    Layout
    24 col · full bleed · airy
    Open section →
    An expansive, airy pastel lavender canvas framed by playful pill-shaped navigation elements and a faint subtle coordinate grid.
  2. 01

    statement

    Soft lilac statement section balancing a centered display headline with offset monospace commentary and a subtle gradient pill CTA.

    Mood
    dreamy + quiet
    Layout
    1 col · asymmetric · airy
    Open section →
    Soft lilac statement section balancing a centered display headline with offset monospace commentary and a subtle gradient pill CTA.
  3. 02

    announcement

    Pale lilac transitional section featuring a subtle section index tag and a pixelated looping ticker ribbon along the bottom edge.

    Mood
    quiet + dreamy
    Layout
    1 col · stacked · airy
    Open section →
    Pale lilac transitional section featuring a subtle section index tag and a pixelated looping ticker ribbon along the bottom edge.
  4. 03

    gallery

    Soft lavender showcase ribbon filled with surreal, fantastical character art cards underscored by a delicate typographic ticker.

    Mood
    dreamy
    Layout
    6 col · full bleed · balanced
    Open section →
    Soft lavender showcase ribbon filled with surreal, fantastical character art cards underscored by a delicate typographic ticker.
  5. 04

    other

    Strong

    Extremely sparse, quiet section marker defined by immense soft lilac negative space punctuated only by a tiny monospace index label.

    Mood
    quiet + clinical
    Layout
    1 col · full bleed · airy
    Open section →
    Extremely sparse, quiet section marker defined by immense soft lilac negative space punctuated only by a tiny monospace index label.
  6. 05

    statement

    Strong

    An airy portfolio section header animated by optically distorted display lettering alongside crisp monospace intro copy.

    Mood
    playful + editorial
    Layout
    24 col · asymmetric · airy
    Open section →
    An airy portfolio section header animated by optically distorted display lettering alongside crisp monospace intro copy.
  7. 06

    showcase

    Dreamy, staggered project cards floating across a soft lilac canvas with frosted glass overlays and colourful metadata pills.

    Mood
    dreamy + playful
    Layout
    2 col · asymmetric · airy
    Open section →
    Dreamy, staggered project cards floating across a soft lilac canvas with frosted glass overlays and colourful metadata pills.
  8. 07

    statement

    Quiet pastel transition section using split monospace captions and an airy delicate divider line.

    Mood
    quiet + editorial
    Layout
    1 col · split · airy
    Open section →
    Quiet pastel transition section using split monospace captions and an airy delicate divider line.
  9. 08

    logo bar

    A quiet row of muted client logos set inside soft rounded tiles over a pale lilac background.

    Mood
    quiet
    Layout
    1 col · full bleed · airy
    Open section →
    A quiet row of muted client logos set inside soft rounded tiles over a pale lilac background.
  10. 09

    feature

    Strong

    Dark experimental capabilities section featuring sliced display typography and physics-inspired floating skill pills drifting across a void.

    Mood
    playful + bold
    Layout
    1 col · asymmetric · airy
    Open section →
    Dark experimental capabilities section featuring sliced display typography and physics-inspired floating skill pills drifting across a void.
  11. 10

    footer

    Vast pastel lilac canvas with spaced monospace text anchored by a contrasting acid-lime footer strip.

    Mood
    playful + raw
    Layout
    1 col · stacked · airy
    Open section →
    Vast pastel lilac canvas with spaced monospace text anchored by a contrasting acid-lime footer strip.

More like this

by shared mood