mahdif.com

Mahdi Farra - Design leader who codessaved 26d ago · captured 26d ago

Seven details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #F9F9FB

ground#f9f9fb·93.86%#303c2f·1.76%#d2cece·1.68%#a8aaa6·0.68%#565c53·0.55%#828889·0.49%#d2ab95·0.40%#7d716b·0.27%

Sized by coverage · click to copy.

Typography1 family · 5 styles · inter

Mahdi Farra

inter · 32/40 · 600 · normal

Portfolio

inter · 24/30 · 500 · normal

DesignQA

inter · 16/20 · 700 · normal

Body

Design leader and design engineer. 17 years scaling teams, and my teams ship fas

inter · 18/27 · 400 · normal

Small

Yesterday

inter · 12/18 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsChat with my AI1 style

Chat with my AI

primary · fill #33384c · label #ffffff · radius 999px · border 0px · padding 10px 16px · height 44px · type 16px / 400

Shape5 radii · 22 uses

24px5 uses · 23%

8px5 uses · 23%

6px5 uses · 23%

99px4 uses · 18%

999px3 uses · 14%

AnalysisA personal site that reads like a well-kept app: a near-white `#f8f8f7` page, one centered column, and everything set in Inter at a modest 32px/600 heading and an 18px/400 body — no display type, n…

A personal site that reads like a well-kept app: a near-white #f8f8f7 page, one centered column, and everything set in Inter at a modest 32px/600 heading and an 18px/400 body — no display type, no drama. The hero is a portrait in a squircle mask, the name, a three-line bio, and a single dark pill ("Chat with my AI +") — a five-element hero on acres of quiet. Below it the content lives in large 24px-radius tonal panels one shade cooler than the page (Portfolio, Blog), each a soft gray slab with a heading top-left and generous inner padding; the panels do the sectioning, so there are almost no rules or borders anywhere. A floating three-icon pill nav (menu · home · sparkle) hangs at the top center in white with a hairline and a soft shadow, and iridescent 3D glass renders (a cube, a pencil) with chromatic fringing bleed out of the panel corners — the one indulgence in an otherwise disciplined, warm-gray system. The blog list is a plain stack of titles with tiny read-time / heart counters right-aligned in muted gray, tabular and quiet.

Style recipeBuild a light, quiet, single-column personal site.

Build a light, quiet, single-column personal site. Ground the page in #f8f8f7; set sections as large rounded panels (radius 24px, fill #f2f2f4, padding 80px 80px on desktop) with no borders — the tonal step is the only separator. Type is Inter throughout: headings 32px/600 with normal tracking and 40px line-height, body 18px/400 at 27px line-height in #565c53-class warm gray, metadata 12–13px in #828889, tabular-nums for counters. Ink and the one primary button are deep indigo-black #1b1639 (white text, 999px pill, 12px 20px padding, no border, no shadow); secondary actions are plain text links, never a second button style. Navigation is a fixed, top-center white pill (radius 999px, 1px #e5e5e5 hairline, 0 4px 16px rgba(0,0,0,.06) shadow) holding three 16px line icons at 12px gaps. Images: portraits and product shots in squircle or 8px-radius masks with no drop shadow; screenshots inside a minimal browser/phone frame. Allow exactly one decorative flourish per page — an iridescent glass 3D object with chromatic fringing, bleeding off a panel's rounded corner. Space generously (96–128px between panels, 48px between heading and content); keep color count to page, panel, ink, muted gray, and one 4px accent dot. No gradients, no borders on cards, no display fonts.

Details7 worth noting

mahdif.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Floating icon-pill nav
The floating icon-pill nav: three 16px Lucide-style icons in a white 999px pill with a hairline border and a soft shadow, fixed top-center — it stays put over the content and never competes with it.
2Tonal panels instead of borders
Tonal panels instead of borders: 24px-radius slabs in a gray one step off the page ground (#f9f9fb-ish on #f8f8f7) carry the whole section rhythm; no dividers, no card outlines.
3Squircle portrait mask
Squircle portrait with a hard edge (no circle, no drop shadow) as the only image in the hero — a continuous-curvature mask reads more designed than a circle avatar.
4Iridescent glass 3D objects
Iridescent glass 3D objects (cube, pencil) with RGB-split chromatic aberration, cropped by the panel's rounded corner so they feel placed rather than pasted.
5Metadata-rich blog rows
Blog rows as metadata-rich list items: title left, clock 1 · heart 2 · 2 days ago right in 12px muted gray; a small blue dot marks the newest post.
6One CTA, one color
One CTA, one color: the entire page has a single solid pill button in deep ink; every other action is a text link or an icon.
7Browser-framed portfolio cards
Portfolio cards framed as browser windows (three dots top-left) and a phone frame, so screenshots arrive with device context.

portfolio · landing · light · minimal, bento · calm, confident, human, friendly, elegant

mahdif.com

More like this