MUUDS

Curated catalog of analyzed web design.

Praveen Shinde

Utilitarian and understated dark developer log. Deep zinc surfaces, tight monospace-accented metadata, and embedded tech icons create a clean, terminal-like workspace aesthetic. Restrained sizing keeps every element compact and readable.

Visit site

Colour

Background#09090b
Text#fafafa
Accent#dc2626
Surface#27272a
Muted#a1a1aa

Typefaces

Display
Satoshi
Body
Satoshi
Mono
ui-monospace
Source
self_hosted
Scale
11 · 12 · 13 · 14

Layout

Grid
Container
Spacing base
4px
Radius
6px · 12px · 9999px

Capture

Category
portfolio
Sections
5
Captured
2026-08-29
Rhythm
dark x5

Type rules

  • compressed type scale centered tightly around 14px body
  • body text rendered in muted grey with inline bold highlights
  • mono used strictly for metadata, timestamps, and widget details

Colour rules

  • dark zinc background throughout with subtle lighter borders for container division
  • primary text in bright off-white and secondary details in zinc grey
  • red accent reserved solely for status badges or error/expiry text

Voice rules

  • terse, factual descriptions without marketing flourishes
  • inline logos embedded within body sentences

Holds it together

  • embed brand icons inline alongside highlighted technology names in copy
  • enclose metadata items, tags, and secondary action buttons in fully rounded pill badges with hairline borders
  • maintain a tight single-column readable width for all biographical and project listings

Contrast

text on background19.1:1 AAA
muted text on background7.8:1 AAA
text on surface14.3:1 AAA
accent on background4.1:1 AA Large
background on accent4.1:1 AA Large

Type, measured

Body
14px / 1.5
Measure
99 characters
Display
14px / 1.5
Tracking
0.025em display
Scale ratio

Voice

Tone
technical, concise
Sentences
short
Person
first
Vocabulary
developer-focused
Calls to action
resume

Built with

Builder
Framework
next
Motion
WebGL
Nav
top_bar, 4 items
Length
1.9 screens

Sections in page order

3 marked strong · 5

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

  1. 00

    hero

    Strong

    A minimal, dark developer portfolio hero with subtle interactive widgets and inline tech stack iconography.

    Mood
    quiet + clinical
    Layout
    14 col · stacked · airy
    Open section →
    A minimal, dark developer portfolio hero with subtle interactive widgets and inline tech stack iconography.
  2. 01

    showcase

    Strong

    Minimal dark developer portfolio section featuring subtle experience bullet points transitioning into framed project UI previews.

    Mood
    quiet + clinical
    Layout
    13 col · stacked · balanced
    Open section →
    Minimal dark developer portfolio section featuring subtle experience bullet points transitioning into framed project UI previews.
  3. 02

    showcase

    A dark, restrained developer portfolio section displaying project previews and certification badges in structured cards.

    Mood
    clinical + quiet
    Layout
    1 col · grid · dense
    Open section →
    A dark, restrained developer portfolio section displaying project previews and certification badges in structured cards.
  4. 03

    showcase

    Strong

    Minimal dark list of technical articles and writing links arranged with muted timestamps.

    Mood
    quiet + clinical
    Layout
    16 col · stacked · dense
    Open section →
    Minimal dark list of technical articles and writing links arranged with muted timestamps.
  5. 04

    showcase

    Sparse minimal article listing with clean typography and timestamps isolated on a deep black background.

    Mood
    quiet + clinical
    Layout
    6 col · stacked · airy
    Open section →
    Sparse minimal article listing with clean typography and timestamps isolated on a deep black background.