# marcfavro.com

Source: https://www.marcfavro.com/
Captured: 2026-10-08
Tags: portfolio, landing, light, both, editorial, retro-warm, swiss, warm, human, playful, confident
Colors: #faf7f1, #e5d0c7, #f25c3b, #b4ada7, #f6b09d, #f48c74, #8f877f, #5c524e
Type (h1): googleSansFlex · 91.333px/86.462px · 700 · tracking -0.730664px — "I’m Marc Favro"
Type (h2): googleSansFlex · 16px/24px · 600 — "Recent work"
Type (h3): googleSansFlex · 20px/30px · 700 · tracking -0.2px — "Partner portal"
Type (body): googleSansFlex · 91.333px/86.462px · 700 · tracking -0.730664px — "I’m a Principal Product Designer, based in Brooklyn, New York."
Type (small): Roboto Mono · 10px/20px · 400 — "2026 GET A NEW JOB CAMPAIGN / M.FAVRO / 916-202-6702 / MARCFAVRO@GMAIL.COM COPY "
Type (button): googleSansFlex · 14px/24px · 600 — "Project Preview"
Button: "Project Preview" — fill #ff5841, text #ffffff, radius 2px, border 0px, padding 4px 16px, height 32px, type 14px/600
Radii: 6px (6), 2px (3), 2.50876% 3.92179% (1), 2.51563% 3.92969% (1), 2.51762% 3.93277% (1)

## Images

- Hero (desktop): https://media.lvly.design/library/marcfavro-com/hero.webp?v=853f8269
- Page crop (mid-1): https://media.lvly.design/library/marcfavro-com/mid-1.webp?v=fb8510e3
- Page crop (mid-2): https://media.lvly.design/library/marcfavro-com/mid-2.webp?v=9b1b9a53
- Hero (mobile): https://media.lvly.design/library/marcfavro-com/mobile-hero.webp?v=adabb4c9
- Full page (desktop): https://media.lvly.design/library/marcfavro-com/full.jpg?v=bd47249f
- Full page (mobile): https://media.lvly.design/library/marcfavro-com/mobile-full.jpg?v=96ac1aab
- Clip preview (mp4): https://media.lvly.design/library/marcfavro-com/video-6ehbpt.preview.mp4?v=ae3e5981

A product designer's portfolio built like a two-color print job. Coral (#f25c3b) and warm umber (#5c524e) are the two "plates" on cream paper (#faf7f1), and the hero runs them as an overprint: "I'm Marc Favro" in umber collides with "I'm a Principal Product Designer, based in Brooklyn, New York." in coral at 91px/700 Google Sans Flex. A stippled pen-and-ink self-portrait sits on top, and a white diagonal knockout slash cuts through the whole stack. The page stays inside a fixed white frame with crop marks, a registration diamond at top and bottom center, and a Roboto Mono footer strip that reads like a printer's slug line ("2026 GET A NEW JOB CAMPAIGN / M.FAVRO / …"). Below the hero the page calms down. Numbered sections (01–05) stack as cream panels separated by white gutters. Case studies alternate left and right, each a dark umber device bezel on a dotted-grid mat. Coral is kept for buttons, section numbers and mono tag rows. The page ends on a dark umber contact band.

## Steal-worthy details

- Two-plate overprint headline: the name in umber and the role in coral are set at the same size and tracking so their lines interleave and collide, and the misregistration becomes the hero.
- A hard white diagonal slash knocks out the headline and the portrait like a die-cut, splitting "who" from "what" with a single gesture.
- A printer's colophon in 10px Roboto Mono gray, right-aligned under the hero ("ED.02 / 06 · PLATE: CORAL / BLACK · REG. ±02"), names the palette as print plates.
- Fixed page chrome drawn as a print sheet: crop-mark ticks at each corner, double-bar gutters, and diamond registration marks at top and bottom center frame every scroll position.
- A persistent mono slug line pinned to the bottom edge carries the contact details (phone and an underlined email) as a "campaign" credit, so contact is always one glance away.
- Section headers are a hollow ring in the left gutter, a coral mono index ("01") and a coral 16px/600 label. Together they form a quiet three-column rail that repeats down the page.
- Each case study sits on a dotted-grid mat inside a thick umber device bezel, with a coral mono tag row ("B2B platform • Information architecture • …") set under the mat like a caption.
- The reference-library section uses a full graph-paper background, a right-aligned display stack, a thick vertical coral rule, and a bold 28px statement to its right. It reads as a magazine spread opener.
- The career history is a three-column grid of coral numbered dots, each followed by company, role and years, with case-study links underlined beneath. It replaces a résumé timeline.

## Style recipe

Design it as a two-color print job on warm paper. Use a cream page panel (#faf7f1) inside a white outer frame (#ffffff). Ink is warm umber (#5c524e for text, #3f3734 for bezels and the closing band), secondary text is taupe (#8f877f), and hairlines and dot grids are #e5d0c7 / #b4ada7. Coral #f25c3b is the one accent: display type, section numbers, links and tag rows. Buttons use the slightly hotter #ff5841. Coral tints #f48c74 and #f6b09d are for washes only.

Set everything in Google Sans Flex (a geometric humanist sans works as a substitute). The display is 88–96px/700 with line-height 0.95 and tracking -0.008em. Use it big, and set two phrases in two colors so they overlap or interleave like misregistered plates. Section labels are 16px/600, card titles 20px/700 at -0.01em, and body copy 15–16px/400 with 1.5 line-height in umber. Metadata, tags, colophons and nav are Roboto Mono at 10–12px, often uppercase, in taupe or coral, with bullets as separators.

Frame the viewport like a press sheet: a fixed white border about 32px wide with crop-mark ticks at the corners, small diamond registration marks at top and bottom center, and a fixed bottom mono slug line carrying contact details. Split the content into stacked cream panels with about 32px white gutters. Head each panel with a left rail of a hollow 12px ring, a mono coral index (01, 02…) and a coral label.

Keep the shapes almost square. Buttons are 2px radius, 32px tall, 4px 16px padding, 14px/600 white on #ff5841, with a trailing arrow and no border or shadow. Cards and mats are 6px. Present screenshots inside thick (12–16px) umber device bezels on a dotted or graph-paper mat, with a mono tag caption underneath. Use one hand-drawn stippled or etched illustration for personality, plus a single bold graphic cut (a white diagonal knockout) in the hero. Leave out gradients, shadows, glass and pill shapes. Texture comes from grids, dots and stipple.