Flesh Peach
#efc4b2Warm surface wash behind portrait and select portfolio imagery — the only chromatic surface, used sparingly as atmospheric punctuation
GUSTAVO Faria ©
gustavo.work
Website preview
The design language
Gustavo Faria's portfolio operates as a printed monograph on white paper: an editorial spread where one massive serif date range dominates the right column while a compact bio and portrait anchor the left. The system is almost aggressively monochrome — four grays/black on white, no decorative color, no shadows, no rounded corners. Typography does all the heavy lifting: a custom display serif at 125-142px creates scale contrast against 16px system body text, and negative letter-spacing tightens the display letters into a single confident statement. Content is organized as a work selection table — project name, category, year — separated by hairline rules. The atmosphere is that of an art director's contact sheet: restrained, intentional, every element earning its space.
Color palette
accent
neutral
Paper White
#ffffffPage canvas, card surfaces — the foundational surface on which all content sits
Charcoal
#282828Primary text, hairline borders, structural rules — softer than pure black, reduces glare for long reading
Ink Black
#000000Display text fill, link borders, maximum contrast elements
Ash Gray
#dcdcdcHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Typography
Type scale
Major Third (1.25) · 16px basedisplay
142px · 400 · 0.81 · -6.67px trackingThe quick brown fox jumps
display-lg
125px · 400 · 1.02The quick brown fox jumps
body
16px · 400 · 1.17The quick brown fox jumps
caption
12px · 400 · 1.67 · -0.56px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
-apple-system
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.00
- Fallback
- SF Pro Text or system-ui
- Features
- "dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0
Body text, navigation, bio description, and work list content — system font chosen for zero-loading neutrality, letting the custom display serif own the page's identity. The system choice is deliberate: it disappears so the display type can speak.
Additional typeface
custom_21879 / custom_49610
- Weights
- 400, 700
- Sizes
- 12px, 125px, 142px
- Line height
- 0.81, 1.00, 1.02, 1.17, 1.67
- Letter spacing
- -0.047em (-6.7px at 142px)
- Fallback
- GT Sectra or Editorial New
- Features
- "dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0
Display serif used for the signature '2019 — 2025' hero statement at 125-142px with weight 400 and tight negative tracking; the 12px instance serves as small-caps section labels. The extreme size jump from 12px to 125px creates the page's defining scale contrast. Substitute: GT Sectra, Editorial New, or Tobias for similar editorial character.
Additional typeface
custom_49610
- Weights
- 400
- Sizes
- 125px
- Line height
- 1.02
- Features
- "dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0
custom_49610 — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 8px
- Section gap
- 48-64px
- Card padding
- 0px
- Element gap
- 8px
Border radius
tags
0pxcards
0pximages
0pxbuttons
0pxSpacing scale
1pxGuidelines
Do
- Use the custom display serif at 125-142px for hero statements with letter-spacing -0.047em
- Separate work list rows with 1px solid #dcdcdc bottom borders
- Set all text in #282828 on #ffffff — avoid pure #000000 for body text to reduce eye strain
- Maintain 0px border-radius on all elements — this is a flat, print-inspired system
- Use -apple-system for all UI and body text; the system font should disappear so the display serif owns the page
- Use #efc4b2 as the only chromatic surface, and only behind imagery — never as a UI background
- Anchor pages with a single massive display headline; let everything else stay small and quiet
Don’t
- Don't add shadows, gradients, or elevation effects — the design is intentionally flat
- Don't introduce accent colors, hover states with background fills, or decorative gradients
- Don't use border-radius greater than 0px — sharp corners are core to the editorial identity
- Don't mix the display serif into body text or UI labels — it belongs only at hero scale
- Don't use bold or heavy weights for body text — the 400 weight system font should stay calm
- Don't crowd the layout with multiple visual elements per section — let whitespace and scale do the work
- Don't use #000000 for borders or secondary text — reserve it for display text and high-contrast moments only
Components
Display Headline
Hero-level typographic statementMassive custom serif at 125-142px, weight 400, letter-spacing -0.047em, color #000000. Line-height 0.81-1.02 creates tight vertical rhythm. No background, no border — pure typographic presence. Used for date ranges and title statements that anchor a page.
Work List Row
Project entry in work selectionThree-column row: project name (left, bold weight 700, #282828), category (center, weight 400, #282828 or #dcdcdc), year (right, weight 400, #dcdcdc). Separated by 1px solid bottom border in #dcdcdc. Padding 12-16px vertical. No hover state, no background change.
Bio Block
Personal introductionSmall body text block in -apple-system 16px, color #282828. Includes name as bold/link, age, location, and current work. Left-aligned in sidebar column. No background or border — sits directly on canvas.
Hairline Divider
Structural separator between sections1px solid line, #dcdcdc or #282828. Full-width or column-width. The only structural element separating work list rows and page sections.
Portrait Card
Personal image with hover labelSquare image container, 0px radius, on #efc4b2 background. Small '(+)' or '(Hover Here)' label overlaid at center in -apple-system 12px, #282828. No shadow, no border.
Navigation Link
Top-level navigation itemPlain text link in -apple-system 16px, weight 400, color #282828. 1px solid #282828 bottom border on active/hover. No padding, no background. Sits inline with other nav items with horizontal gap.
Section Label
Small heading for content groupsUppercase or sentence-case label in -apple-system 12px, weight 400, color #dcdcdc. Marks sections like 'Work Selection' — intentionally muted to recede against project names.
Brand Mark
Identity lockup in header'GUSTAVO Faria ©' in -apple-system 16px, weight 700, color #282828. Mixed case with capital first letter and lowercase. Sits at top-left as the page's identity anchor.
Portfolio Thumbnail
Preview image of work pieceFull-width or half-width image, 0px radius, no border, no shadow. May have a colored background (peach, green gradient) visible as part of the artwork itself. No caption or overlay chrome.
Surfaces & elevation
Level 1
Paper Canvas
#ffffffPrimary page background
Level 2
Flesh Surface
#efc4b2Warm atmospheric wash behind portrait imagery
No shadows, no depth. The design is completely flat — separation between elements is achieved through whitespace, hairline borders, and scale contrast rather than elevation. This is a print-design sensibility applied to the web: elements sit on the same plane, divided by rules.
Layout & imagery
Layout
Two-column asymmetric layout: a narrow left sidebar (roughly 25% width) holds the bio, portrait, and identity mark; the right column (roughly 75%) holds the massive display headline and the work selection list. The hero '2019 — 2025' headline spans the full width of the right column at ~140px. Below it, the work selection is a full-width three-column table (project | category | year) with hairline dividers. The page flows vertically as a single long scroll with no section breaks beyond the work list rows. Navigation sits inline at the top-left. The overall rhythm is: compact sidebar → massive typographic statement → dense list of work entries. Max-width is effectively full-bleed, with padding from viewport edges only.
Imagery
Photography dominates: a single square portrait with a warm peach background anchors the left sidebar, and portfolio thumbnails appear as rectangular or square crops with their own contextual backgrounds (peach tones, green gradients). Images are sharp-edged with 0px radius, no overlays, no masks. The portrait is the only photographic element with a visible label ('(+) Hover Here'). Portfolio thumbnails may include typography or graphic elements as part of the artwork itself. No illustrations, no icons, no 3D renders — imagery is documentary and personal, treated as printed plates.
Design notes
Agent Guide
**Quick Color Reference** - text: #282828 - background: #ffffff - border: #dcdcdc - accent surface: #efc4b2 - ink black: #000000 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero section: white #ffffff background. Display headline '2019 — 2025' at 142px in custom display serif, weight 400, #000000, letter-spacing -0.047em, line-height 0.81. No other elements — let the type fill the space. 2. Create a work list row: three-column layout (60% / 25% / 15%). Project name in -apple-system 16px weight 700 #282828, category in 16px weight 400 #dcdcdc, year in 16px weight 400 #dcdcdc right-aligned. 1px solid #dcdcdc bottom border, 0px radius, 12px vertical padding. 3. Create a portrait card: square image container with #efc4b2 background, 0px radius, no border, no shadow. Centered overlay label '(+)' in -apple-system 12px #282828. 4. Create a bio block: left-aligned text in -apple-system 16px weight 400 #282828. Name 'Gustavo Faria' in weight 700. Short paragraph below. No background, no border, sits directly on white canvas. 5. Create a navigation bar: inline horizontal links 'Info' and 'Instagram' in -apple-system 16px weight 400 #282828, 8px horizontal gap between items. 1px solid #282828 bottom border on hover. No background, no padding above or below.
Similar brands
Pentagram partner portfolios
Same editorial-monograph approach: massive display type anchoring sparse layouts, monochrome palette, work presented as a structured list with hairline dividers
Mark Owens (markowens.id)
Identical 'designer contact sheet' aesthetic — custom display serif, white canvas, no decorative elements, content organized as typographic list with project/category/year columns
Bureau Cool
Shared restraint: custom display serif hero, monochrome interface, work entries as text rows with minimal chrome, 0px radius throughout
Studio Dumbar
Editorial portfolio structure with oversized display type, flat surfaces, and work presented as a typographic index rather than a visual gallery
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
