Highlighter Yellow
#fef199Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
André Cândido
andre-candido.comWebsite preview
The design language
André Cândido's portfolio operates as an editorial design studio: a near-monochrome canvas of off-white paper and near-black ink, with one warm yellow accent that breaks the page like a highlighter mark. The signature is the pairing of PP Mori — a geometric sans — with Editorial New, a high-contrast didone serif used at extreme display sizes (up to 160px) for headlines that behave like magazine covers. Components are quiet and lightweight: hairline borders, pill-shaped buttons (24-50px radius), capsule-shaped images (800px radius), and no shadows. The footer inverts into a deep #111118 panel where the yellow reappears, creating a single dramatic dark moment in an otherwise airy light page. The visual system is dense with personality despite being 97% achromatic — circular text badges, playful geometric project cards, and asymmetric editorial grids give it character without color.
Color palette
accent
neutral
Ink Black
#111118Primary text, nav text, dark footer surface, filled button background, badge fills — near-black with a barely-perceptible cool tint reads as warmer than pure #000 in print contexts
Paper White
#ffffffPage canvas, card surfaces, button text on dark fills, inverted button text — the dominant ground
Soft Ash
#ddddddMuted borders, image placeholder backgrounds, secondary dividers
Stone Gray
#bdbdbdList dividers, body-level borders, tertiary structural lines
Slate
#7c7c7cHelper text, de-emphasized body copy, subtle metadata
Graphite
#333333Link text and link borders in body context — slight lift from pure ink
True Black
#000000Hard border accent in lists and structural dividers where maximum contrast is needed
Night Forest
#283338Navigation-specific borders and text — a cool desaturated charcoal distinct from the warm Ink Black
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
160px · 200 · 1The quick brown fox jumps
heading-lg
72px · 200 · 1.1The quick brown fox jumps
text-70
70px · 200 · 1.1The quick brown fox jumps
heading
48px · 200 · 1.1The quick brown fox jumps
heading-sm
24px · 400 · 1.2The quick brown fox jumps
subheading
18px · 400 · 1.4The quick brown fox jumps
body
16px · 400 · 1.4 · 0px trackingThe quick brown fox jumps
text-15
15px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
PP Mori
- Weights
- 200, 400, 600
- Sizes
- 12px, 14px, 15px, 16px, 18px, 24px, 72px
- Line height
- 1.00–1.40
- Letter spacing
- 0.107em at 12-15px, tighter at larger sizes
- Fallback
- Inter, Manrope, or DM Sans
Body, nav, UI, and secondary display — the workhorse sans. Weight 200 carries small labels with editorial lightness; 400 is body; 600 is reserved for button text and emphasis. The unusually wide 0.107em letter-spacing on small text (12-15px) gives nav and badges an open, tracked-out feel typical of fashion-editorial UI.
Additional typeface
Editorial New
- Weights
- 200
- Sizes
- 48px, 70px, 72px, 160px
- Line height
- 1.00–1.20
- Fallback
- Playfair Display, DM Serif Display, or Libre Caslon Display
Hero and section display headlines only — a thin didone serif at extreme sizes (70-160px) with 1.0 line-height. The whisper-thin weight 200 is the signature: most serif sites use 400-600 for display, this site lets the letterforms almost disappear, making the few words monumental. The contrast between the ultra-thin serif and the heavier PP Mori body creates the magazine-cover tension that defines the brand.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Section gap
- 80-120px
- Card padding
- 24px
- Element gap
- 16-24px
Border radius
nav
80pxcards
8pxlinks
8pxbadges
50pximages
800pxbuttons
24pxheadings
150pxSpacing scale
4px6px8px10px12px16px18px20px24px32px40px48px60px64px71px80px112px140px243pxGuidelines
Do
- Use Editorial New weight 200 exclusively for display headlines at 48px or larger — never below 48px, never above weight 200
- Keep the page 97% achromatic: Ink Black, Paper White, and grayscale neutrals handle 95% of the visual load
- Apply 0.107em letter-spacing to all PP Mori text at 12-15px — this tracked-out feel is the small-type signature
- Use 24px radius for buttons, 8px for cards, 800px for images — the radius scale is dramatic and must be preserved
- Reserve #fef199 yellow for the dark footer panel only — it is the single chromatic event on the page
- Maintain generous section gaps of 80-120px between major blocks; the airy rhythm is editorial, not compact
- Let display headlines run full-width without max-width constraints; the oversized serif is the layout
Components
Filled Pill Button (Light)
Primary CTA on light backgroundsInk Black (#111118) fill, Paper White (#ffffff) text, PP Mori 14-15px weight 600, letter-spacing 0.107em, uppercase tracking. 24px border-radius, 16px horizontal × 10px vertical padding. 1px Ink Black border for definition.
Ghost Pill Button
Secondary action on light backgroundsTransparent fill, 1px Ink Black (#111118) border, Ink Black text. 24px border-radius, 16px × 10px padding. Used for the 'Start a project' and 'About me' actions.
Capsule Link Button
Inline text-link with border treatment8px radius, 1px border in #333333 or #111118, small PP Mori 14-15px weight 400. Behaves like a pill-tag hybrid for 'Work with me' in nav.
Work Card
Portfolio project tile in the grid8px border-radius, contains a capsule-shaped (800px radius) image, project name overlaid in PP Mori 600. Image bleeds to capsule shape regardless of source aspect ratio. No shadow.
About Card (Sidebar)
'Your New Partner' intro blockLeft-column card with portrait image, uppercase PP Mori 12-14px label 'YOUR NEW PARTNER' with down-arrow icon, intro paragraph in PP Mori 16px, embedded ghost button.
Footer CTA Panel
Dark closing section with primary conversionFull-width Ink Black (#111118) background, 'Ready to take your brand to the next level?' in PP Mori body weight. Massive pill button: outlined in Highlighter Yellow (#fef199), 150px radius, Editorial New or PP Mori text at 48-72px, arrow icon in a separate circular capsule (50px radius) touching the main pill.
Circular Text Badge
Decorative availability indicator (the 'AVAILABLE NOW' element)Text wraps around an invisible circle in PP Mori 12px weight 400, 0.107em tracking, Ink Black on white. A small emoji or icon sits at the center. Used as a single floating decorative element — not a repeatable component.
Service/Client Logo Row
Trust strip showing partner brandsHorizontal row of monochrome logos, PP Mori or custom, evenly spaced with 24-40px gaps. No borders, logos sit directly on white. Filters to grayscale for uniformity.
Navigation Bar
Top-level site navigationSticky/fixed top bar, white background, 1px bottom border. Logo block (name + 'Visual Designer' sub-label) left, centered nav links (Work, Services, About) in PP Mori 15-16px, capsule CTA right. 80px radius on the nav container edges in some breakpoints.
Project Detail Image Card
Large showcase image within portfolio pages800px border-radius creating a capsule/lozenge shape. No padding, no border, no shadow — the shape IS the container. Used for phone mockups and hero project visuals.
Headline Display Block
Section-opening serif statementEditorial New weight 200 at 70-160px, line-height 1.0-1.1, Ink Black on white. Occupies full width of its container. No uppercase, no decoration — the extreme thinness is the visual event.
Surfaces & elevation
Level 1
Paper
#ffffffBase page canvas and card surfaces
Level 2
Soft Mist
#ddddddSubtle alt sections, image card backgrounds, muted panels
Level 3
Ink Black
#111118Footer and CTA panel — the only dark surface, creates the page's only dramatic inversion
Design notes
Agent Guide
primary action: #111118 (filled action) Create a Primary Action Button: #111118 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
