SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Fudali Studio

Stark and high-impact solo design practice portfolio. Pure black canvases, tight uppercase sans-serif headings, and electric purple accents project confidence, while structured case study metrics and light showcase cards demonstrate rigorous execution.

boldclinicalquiet
Visit site

Colour

Background#000000
Text#ffffff
Accent#7163f1
Surface#18181b
Muted#85838e

Typefaces

Display
Mona Sans
Body
Mona Sans
Mono
—
Source
google
Scale
10 · 14 · 16 · 20 · 24 · 36

Layout

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

Capture

Category
portfolio
Sections
13
Captured
2026-08-29
Rhythm
dark x2 → light → dark x10

Type rules

  • display titles set in tight uppercase with negative tracking
  • body copy maintained at a narrow measure around 42 characters per line
  • eyebrows and category tags always rendered in uppercase sans-serif

Colour rules

  • pure pitch-black background anchors over 90 percent of the visual canvas
  • electric violet reserved strictly for primary CTA pills, active tags, and focal text spans
  • muted grey used for secondary descriptors and body copy to preserve contrast hierarchy

Voice rules

  • lead with quantifiable outcomes and concrete turnaround times
  • keep headlines under six words and pair directly with metric badges

Holds it together

  • highlight critical action phrases in electric violet against pure black backgrounds
  • structure case outcomes as bold numeral-first metric blocks below project titles
  • break the pitch-black flow with a single light-tinted showcase container for case studies

Contrast

text on background21.0:1 AAA
muted text on background5.6:1 AA
text on surface17.7:1 AAA
accent on background4.8:1 AA
background on accent4.8:1 AA

Type, measured

Body
24px / 1.25
Measure
42 characters
Display
120px / 0.8
Tracking
-0.017em display
Scale ratio
1.50

Voice

Tone
confident, direct, results-oriented
Sentences
short
Person
first
Vocabulary
plain
Calls to action
book, explore, view

Built with

Builder
framer
Framework
—
Motion
—
WebGL
—
Nav
—
Length
10.7 screens

Sections in page order

3 marked strong · 13

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

  1. 00

    hero

    High-contrast dark portfolio hero balancing sharp uppercase typography and award badges against a tight modular grid of case study imagery.

    Mood
    bold + editorial
    Layout
    13 col · split · balanced
    Open section →
    High-contrast dark portfolio hero balancing sharp uppercase typography and award badges against a tight modular grid of case study imagery.
  2. 01

    hero

    A crisp, high-contrast dark hero pairing generous black negative space with an electric violet badge card and punchy value propositions.

    Mood
    bold
    Layout
    12 col · split · airy
    Open section →
    A crisp, high-contrast dark hero pairing generous black negative space with an electric violet badge card and punchy value propositions.
  3. 02

    showcase

    Structured agency case study carousel pairing dense visual collages with precise project metrics and crisp typography.

    Mood
    clinical + editorial
    Layout
    4 col · grid · balanced
    Open section →
    Structured agency case study carousel pairing dense visual collages with precise project metrics and crisp typography.
  4. 03

    cta

    Strong

    High-contrast minimalist pitch on pure black pairing massive tinted typography with an inviting personal booking pill.

    Mood
    bold + quiet
    Layout
    2 col · split · airy
    Open section →
    High-contrast minimalist pitch on pure black pairing massive tinted typography with an inviting personal booking pill.
  5. 04

    feature grid

    Strong

    Crisp and structured dark-mode service packages arranged in an asymmetrical bento grid with neon accent tags and an electric indigo CTA.

    Mood
    clinical + bold
    Layout
    16 col · grid · balanced
    Open section →
    Crisp and structured dark-mode service packages arranged in an asymmetrical bento grid with neon accent tags and an electric indigo CTA.
  6. 05

    feature

    Sparse, dark process sequence with purple numeral accents and an expansive field of negative black space.

    Mood
    quiet + clinical
    Layout
    13 col · stacked · airy
    Open section →
    Sparse, dark process sequence with purple numeral accents and an expansive field of negative black space.
  7. 06

    logo bar

    Quiet dark-mode client directory organized neatly into categorized text lists and monochrome partner logos alongside an introductory narrative.

    Mood
    quiet + clinical
    Layout
    2 col · split · airy
    Open section →
    Quiet dark-mode client directory organized neatly into categorized text lists and monochrome partner logos alongside an introductory narrative.
  8. 07

    testimonial

    Quiet, text-driven testimonial grid in dark mode with bold white highlights drawing the eye across muted client quotes.

    Mood
    quiet
    Layout
    3 col · grid · airy
    Open section →
    Quiet, text-driven testimonial grid in dark mode with bold white highlights drawing the eye across muted client quotes.
  9. 08

    statement

    Strong

    A stark, high-contrast dark statement section pairing massive strikethrough typography with a mysterious portrait teaser.

    Mood
    bold
    Layout
    2 col · split · airy
    Open section →
    A stark, high-contrast dark statement section pairing massive strikethrough typography with a mysterious portrait teaser.
  10. 09

    feature

    Minimal pitch-black split section pairing solid purple feature callouts with a moody portrait photo.

    Mood
    bold + clinical
    Layout
    13 col · split · balanced
    Open section →
    Minimal pitch-black split section pairing solid purple feature callouts with a moody portrait photo.
  11. 10

    faq

    A pitch-black, minimalist FAQ section with crisp white typography and a quiet, structured two-column layout.

    Mood
    quiet + bold
    Layout
    2 col · split · airy
    Open section →
    A pitch-black, minimalist FAQ section with crisp white typography and a quiet, structured two-column layout.
  12. 11

    cta

    Minimalist pitch-black contact section featuring an inviting inline portrait and a clean email copy pill.

    Mood
    quiet + warm
    Layout
    1 col · centered · airy
    Open section →
    Minimalist pitch-black contact section featuring an inviting inline portrait and a clean email copy pill.
  13. 12

    footer

    Ultra-sparse black footer anchored by minimal location metadata, a copyable email pill, and an external profile link.

    Mood
    quiet + clinical
    Layout
    1 col · split · airy
    Open section →
    Ultra-sparse black footer anchored by minimal location metadata, a copyable email pill, and an external profile link.