MUUDS

Curated catalog of analyzed web design.

Mosam Biswas

Bold, engineered, and editorial. Monolithic uppercase typography and wireframe stroked lettering establish stark technical dominance over a deep carbon backdrop, softened only by delicate italic serif accents and razor-sharp monospaced data grids.

Visit site

Colour

Background#0b0b0a
Text#edebe4
Accent#ff5227
Surface#131311
Muted#ffffff

Typefaces

Display
Syne
Body
Manrope
Mono
Space Mono
Source
google
Scale
12 · 14 · 16 · 18 · 24 · 74

Layout

Grid
Container
Spacing base
8px
Radius
0px · 9999px

Capture

Category
portfolio
Sections
9
Captured
2026-08-29
Rhythm
dark x9

Type rules

  • display headlines set in massive uppercase sans-serif with select keywords accented in an italic serif
  • technical metadata, indexes, and status tags strictly formatted in uppercase monospace
  • body paragraphs set in neutral sans-serif at approximately 86 characters per line

Colour rules

  • deep carbon black (#0b0b0a) serves as the persistent background across all viewports
  • vermilion orange (#ff5227) is used sparingly as an active accent on status indicators and italic headline words

Voice rules

  • lead with personal first-person technical clarity followed by an honest conversational translation
  • quantify project outcomes with stark numerical metrics before technical stack specs

Holds it together

  • pair solid uppercase display typography with wireframe outline counterparts for visual rhythm
  • punctuate headlines with exactly one warm italic serif accent word in vermilion orange
  • prefix all major section headings with parenthesized index numbers like `(01)`
  • render projects and experience as dense tabular rows separated by hairline border rules

Contrast

text on background16.5:1 AAA
muted text on background19.7:1 AAA
text on surface15.6:1 AAA
accent on background6.1:1 AA
background on accent6.1:1 AA

Type, measured

Body
16px / 1.6
Measure
86 characters
Display
74px / 1.02
Tracking
-0.02em display
Scale ratio
1.47

Voice

Tone
candid, technical, confident
Sentences
medium
Person
first
Vocabulary
technical
Calls to action
scroll, view, read, enter

Built with

Builder
Framework
Motion
WebGL
yes
Nav
top_bar, 6 items
Length
7.7 screens

Sections in page order

3 marked strong · 9

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

  1. 00

    hero

    A striking technical portfolio hero dominated by massive typography that transitions from solid geometry into razor-sharp wireframe outlines.

    Mood
    bold + editorial
    Layout
    15 col · stacked · balanced
    Open section →
    A striking technical portfolio hero dominated by massive typography that transitions from solid geometry into razor-sharp wireframe outlines.
  2. 01

    showcase

    Dark, structured portfolio index combining stark tabular project listings with an expressive mixed-type headline accent.

    Mood
    editorial + raw
    Layout
    15 col · stacked · dense
    Open section →
    Dark, structured portfolio index combining stark tabular project listings with an expressive mixed-type headline accent.
  3. 02

    statement

    Strong

    High-contrast typographic statement section pairing massive sans-serif capitals with a warm orange italic serif accent on deep black.

    Mood
    bold + editorial
    Layout
    14 col · stacked · airy
    Open section →
    High-contrast typographic statement section pairing massive sans-serif capitals with a warm orange italic serif accent on deep black.
  4. 03

    statement

    Monochrome editorial about section featuring a stark portrait, structured biographical copy, and high-contrast numerical stats.

    Mood
    editorial + clinical
    Layout
    10 col · split · balanced
    Open section →
    Monochrome editorial about section featuring a stark portrait, structured biographical copy, and high-contrast numerical stats.
  5. 04

    feature

    A sparse, dark tech stack breakdown structured like an austere developer index with monospace category labels.

    Mood
    clinical + quiet
    Layout
    12 col · stacked · balanced
    Open section →
    A sparse, dark tech stack breakdown structured like an austere developer index with monospace category labels.
  6. 05

    showcase

    Stark, dark research paper showcase blending clinical monospaced metadata with an elegant italic serif title.

    Mood
    editorial + clinical
    Layout
    13 col · stacked · airy
    Open section →
    Stark, dark research paper showcase blending clinical monospaced metadata with an elegant italic serif title.
  7. 06

    showcase

    A dark, elegant portfolio gallery presenting a horizontal row of vertical photographs framed by editorial typography and index numbering.

    Mood
    editorial + quiet
    Layout
    1 col · stacked · airy
    Open section →
    A dark, elegant portfolio gallery presenting a horizontal row of vertical photographs framed by editorial typography and index numbering.
  8. 07

    cta

    Strong

    Monolithic, full-bleed uppercase typography commands the entire screen in stark black and bone contrast.

    Mood
    bold + raw
    Layout
    15 col · full bleed · airy
    Open section →
    Monolithic, full-bleed uppercase typography commands the entire screen in stark black and bone contrast.
  9. 08

    footer

    Strong

    Massive wireframe outlined lettering dominates a stark dark technical portfolio footer with structured data columns.

    Mood
    bold + raw
    Layout
    14 col · grid · airy
    Open section →
    Massive wireframe outlined lettering dominates a stark dark technical portfolio footer with structured data columns.