Designing a premium portfolio: typography, color and motion

A portfolio has one job: make people trust you within a few seconds. Good typography and calm colors do most of that work.

Two fonts, two voices

A heavy sans-serif carries the headlines; an italic serif adds a human, editorial accent to one or two words. A monospace font handles the small labels.

:root {
  --f-head: 'Merriweather Sans', sans-serif;
  --f-accent: 'Playfair Display', serif;
  --f-mono: 'DM Mono', monospace;
  --bg: #F4F1EB;
  --accent: #E4572E;
}

A warm, quiet palette

Cream instead of pure white, near-black instead of black, and a single orange accent used sparingly. Everything else steps back so the work can shine.

Motion with a purpose

Sections fade in as you scroll, buttons respond to the cursor and the logo carousel moves slowly. Nothing jumps, nothing distracts.