# mosaeedi.com

Source: https://www.mosaeedi.com/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, minimal, retro-warm, warm, human, confident, calm, friendly
Colors: #f9f6f0, #98928d, #d6cfc7, #1b2029, #76706e, #564e4f, #b3ada6, #a16f58
Type (h1): Sora · 65.6px/66.912px · 500 · tracking -0.984px — "I design products, and I build them."
Type (h2): Sora · 48px/48px · 400 · tracking -1.2px — "Selected work"
Type (h3): ui-sans-serif · 20px/28px · 400 · tracking -0.5px — "Snapr"
Type (body): ui-sans-serif · 18px/29.25px · 400 — "Senior product designer, 10+ years across AI, Web3, and B2B SaaS. Lately I’ve be"
Type (small): ui-sans-serif · 12px/16px · 500 · tracking 2.88px — "THE WORK"
Type (button): ui-sans-serif · 14px/20px · 500 — "Email Mo ↗"
Button (primary): "Email Mo↗" — fill #faf7f1, text #23201b, radius 9999px, border 0px, padding 12px 24px, height 44px, type 14px/500
Button (secondary): "Work" — text #5f584f, radius 0px, border 0px, padding 0px 0px, height 28px, type 18px/400
Radii: 9999px (13), 16px (5), 12px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/mosaeedi-com/hero.webp?v=a1772620
- Page crop (mid-1): https://media.lvly.design/library/mosaeedi-com/mid-1.webp?v=0c2b1f00
- Page crop (mid-2): https://media.lvly.design/library/mosaeedi-com/mid-2.webp?v=81c59918
- Hero (mobile): https://media.lvly.design/library/mosaeedi-com/mobile-hero.webp?v=5bb936a5
- Full page (desktop): https://media.lvly.design/library/mosaeedi-com/full.jpg?v=cfd58b0c
- Full page (mobile): https://media.lvly.design/library/mosaeedi-com/mobile-full.jpg?v=d459aaaf
- Clip preview (mp4): https://media.lvly.design/library/mosaeedi-com/video-wydm83.preview.mp4?v=7f15b56a

A senior product designer's portfolio on a cream paper ground (`#faf7f1`) that reads more like a warm studio than a résumé. Sora at ~66px/500 with tight −1px tracking carries a three-line hero, the last line switched to a clay terracotta (`#a16f58`) and underlined with a thin hand-brushed rule — the one moment of color on an otherwise near-monochrome page. A faint grid and a soft peach glow sit behind the headline; to its right a rounded-16px video card with a play button and a spinning "open to work" badge sticker turns the intro personal. Below, "Selected work" cards are white on cream with hairline borders, generous radius, a small numbered pill in each corner, and rows of tiny pill tags — every radius is either 9999px or 12–16px, so the whole page feels soft without going bubbly.

## Steal-worthy details

- Three-line hero where only the payoff line takes the accent color, plus a thin brushed underline beneath it — emphasis by color, not by weight or size.
- Faint background grid that fades out radially, with a warm peach glow behind the headline — texture that stays under the type.
- Circular rotating "OPEN TO WORK · 🤙" sticker badge overlapping the corner of the intro video, like a sticker on a laptop.
- Section eyebrow pattern: short accent hairline + letterspaced small caps ("THE WORK") above a large regular-weight heading.
- Project cards with a numbered pill (01, 02…) floating over the artwork, and a row of tiny bordered pill tags for role/stack — dense metadata that stays quiet.
- Ghost-flat pill CTA ("Email Mo↗") in the page's own cream — buttons dissolve into the ground rather than shout.
- Video card caption row: label left, "~2 minutes" right, in muted gray — sets expectations without a UI element.

## Style recipe

Build on a warm off-white paper ground `#faf7f1`; cards are white `#ffffff` with 1px hairline borders in `#d6cfc7` and 16px radius. Ink is a near-black warm charcoal `#23201b`/`#1b2029` for headings, `#564e4f` for body and `#98928d` for captions. Use exactly one accent, a clay terracotta `#a16f58`, and spend it on one phrase per screen plus thin rules and eyebrow lines — never on fills or large surfaces. Headings in Sora (or a geometric humanist like Outfit) at 56–66px, weight 500, letter-spacing −0.015em, line-height 1.02; body in the system sans at 18px/1.6. Eyebrows: 11px uppercase, +0.15em tracking, muted, preceded by a 40px accent hairline. Every control is a pill (9999px): primary CTA 44px tall, 12×24px padding, 14px/500, flat with no border; tags 20–22px tall with a hairline border and muted text. Add subtle depth with a radial peach glow (`#a16f58` at ~8% opacity, 600px blur) and a 1px grid at ~4% opacity that fades to nothing at the edges. Allow one playful sticker element — a rotating circular text badge or a tilted photo — per page, and keep everything else still. No drop shadows on cards; separation comes from white on cream and the hairline.