marcfavro.com

Marc Favro — Principal Product Designersaved 1d ago · captured 1d ago

Nine details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #FAF7F1

ground#faf7f1·84.16%#e5d0c7·4.21%accent#f25c3b·3.14%#b4ada7·2.15%#f6b09d·1.49%#f48c74·1.47%#8f877f·1.19%#5c524e·0.83%

Sized by coverage · click to copy.

Typography2 families · 5 styles · googleSansFlex, Roboto Mono

I’m Marc Favro

googleSansFlex · 91/86 · 700 · -0.730664px

Recent work

googleSansFlex · 16/24 · 600 · normal

Partner portal

googleSansFlex · 20/30 · 700 · -0.2px

Body

I’m a Principal Product Designer, based in Brooklyn, New York.

googleSansFlex · 91/86 · 700 · -0.730664px

Small

2026 GET A NEW JOB CAMPAIGN / M.FAVRO / 916-202-6702 / [email protected] COPY

Roboto Mono · 10/20 · 400 · normal

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

ButtonsProject Preview1 style

Project Preview

primary · fill #ff5841 · label #ffffff · radius 2px · border 0px · padding 4px 16px · height 32px · type 14px / 600

Shape5 radii · 12 uses

6px6 uses · 50%

2px3 uses · 25%

2.50876% 3.92179%1 use · 8%

2.51563% 3.92969%1 use · 8%

2.51762% 3.93277%1 use · 8%

AnalysisA product designer's portfolio built like a two-color print job.

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.

Style recipeDesign it as a two-color print job on warm paper.

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.

Details9 worth noting

marcfavro.com — the captured page — Landing, 1440 × 900 · captured Oct 8, 2026

1Two-color overprint hero headline
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.
2Diagonal knockout slash
A hard white diagonal slash knocks out the headline and the portrait like a die-cut, splitting "who" from "what" with a single gesture.
3Print-plate colophon
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.
4Crop-mark frame with registration diamonds
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.
5Fixed mono slug-line footer
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.
6Ring, index and label section rail
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.
7Gridded mat with mono tag caption
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.
8Graph-paper spread with coral rule
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.
9Numbered-dot career grid
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.