# mahdif.com

Source: https://mahdif.com/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, minimal, bento, calm, confident, human, friendly, elegant
Colors: #f9f9fb, #303c2f, #d2cece, #a8aaa6, #565c53, #828889, #d2ab95, #7d716b
Type (h1): inter · 32px/40px · 600 — "Mahdi Farra"
Type (h2): inter · 24px/30px · 500 — "Portfolio"
Type (h3): inter · 16px/20px · 700 — "DesignQA"
Type (body): inter · 18px/27px · 400 — "Design leader and design engineer. 17 years scaling teams, and my teams ship fas"
Type (small): inter · 12px/18px · 400 — "Yesterday"
Type (button): inter · 16px/24px · 400 — "Chat with my AI"
Button (primary): "Chat with my AI" — fill #33384c, text #ffffff, radius 999px, border 0px, padding 10px 16px, height 44px, type 16px/400
Radii: 24px (5), 8px (5), 6px (5), 99px (4), 999px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/mahdif-com/hero.webp?v=7cb83a39
- Page crop (mid-1): https://media.lvly.design/library/mahdif-com/mid-1.webp?v=6a397a76
- Page crop (mid-2): https://media.lvly.design/library/mahdif-com/mid-2.webp?v=5444d5ed
- Hero (mobile): https://media.lvly.design/library/mahdif-com/mobile-hero.webp?v=27a5e84a
- Full page (desktop): https://media.lvly.design/library/mahdif-com/full.jpg?v=269eb4cf
- Full page (mobile): https://media.lvly.design/library/mahdif-com/mobile-full.jpg?v=71458346
- Clip preview (mp4): https://media.lvly.design/library/mahdif-com/video-pf457v.preview.mp4?v=6db85416

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.

## Steal-worthy details

- 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.
- **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.
- **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.
- **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.
- **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.
- **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.
- Portfolio cards framed as **browser windows** (three dots top-left) and a phone frame, so screenshots arrive with device context.

## Style recipe

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.