Portfolio Website Examples: Fonts, Colors, and Spacing

Contents

• [The fastest comparison method](#the-fastest-comparison-method)
• [How to read the supplied examples](#how-to-read-the-supplied-examples)
• [Three portfolio directions to choose from](#three-portfolio-directions-to-choose-from)
• [A brief you can use immediately](#a-brief-you-can-use-immediately)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A strong portfolio website makes the work easy to understand while giving the studio or creator a distinct point of view. Compare each example by font roles, color hierarchy, spacing rhythm, project-card treatment, and how quickly a visitor can reach the work itself before choosing a style to adapt.

The fastest comparison method

Use this five-point checklist for every reference:

1. Work visibility: How soon does a project, case study, or selected client appear? Is the opening screen a work sample, an introduction, or a visual statement?
2. Typography: Does the typeface feel quiet so the work leads, or expressive enough to become part of the identity? Check headline width, body line height, labels, navigation, and any display treatment.
3. Color system: Identify the page background, text colors, accent, hover states, borders, and project-specific colors. Decide whether the palette frames the work or competes with it.
4. Spacing and rhythm: Measure the relationships between project title, description, image, metadata, and the next item. Portfolio pages often feel polished because repeated spacing makes very different projects feel connected.
5. Interaction and density: Note whether the site favors a simple list, a grid, oversized images, motion, or a more editorial sequence. Choose the amount of movement and detail your own work can support consistently.

Open the examples below and compare their first screen, project grouping, and typography before borrowing a pattern. COLLINS, Fix Studio, and Daniel Sun offer different reference points for thinking about studio presentation, compact project browsing, and a more personal portfolio voice.

How to read the supplied examples

COLLINS can help you study a bold studio presentation. Look at how a strong visual identity frames the work and how project information is separated from the visual impact. If you borrow this direction, protect readability with short labels, clear project names, and enough space around each featured piece.

Fix Studio is useful for examining a tighter presentation. Focus on the balance between project thumbnails, titles, and supporting details. A compact layout can help visitors scan more work, but it needs consistent image ratios, predictable card spacing, and a clear hover or link treatment so the page does not become a wall of unrelated tiles.

Daniel Sun is a useful reference for a more individual portfolio tone. Study how personal voice, project selection, and composition work together. A personal site does not need to look loud to feel distinctive. One unusual type choice, image treatment, or navigation behavior may be enough when the rest of the system stays calm.

The captured Linear typography reference lists Inter Variable, Berkeley Mono, and Tiempos Headline in different roles. These are observed details from Linear, not typography findings for COLLINS, Fix Studio, or Daniel Sun. You can use them as a test set: Inter Variable for a neutral interface, Berkeley Mono for metadata or technical labels, and Tiempos Headline for a more editorial headline. Compare the result against your work before committing to a font pairing.

Three portfolio directions to choose from

Choose a gallery direction when visitors need to scan many projects quickly. Use repeated cards, short descriptions, consistent crops, and a simple filter or category system only when it helps the visitor find relevant work.

Choose an editorial direction when each project needs context. Use larger images, wider section breaks, longer project introductions, and a deliberate reading order. Keep the number of featured projects smaller so the page has room to explain decisions.

Choose a personal studio direction when the creator's voice is part of the offer. Use one distinctive brand move, then repeat it across headings, navigation, links, or project transitions. Avoid adding a different visual style to every project unless the variation is intentional and easy to navigate.

A brief you can use immediately

Write down the audience, the three projects to feature first, the desired project-card ratio, the headline and body font roles, the background and accent colors, the standard card padding, and the mobile stacking rule. Add one sentence describing what visitors should understand after the opening screen. Then ask for a desktop and mobile version of the first three projects before building every case study.

Finally, check the page without images. Project names, categories, and descriptions should still create a usable path. Then check it with images only. The work should feel related through spacing and structure, even when the images have very different colors.

Use this in your AI agent

> Find captured portfolio website examples and compare COLLINS, Fix Studio, and Daniel Sun where available. Inspect typography roles, color hierarchy, project-card layout, image ratios, spacing rhythm, information density, and personal versus studio voice. Use the observations to recommend a gallery, editorial, or personal studio direction, then return a practical design brief with font, color, spacing, and mobile rules.

Install Fudge for your AI agent to compare those captured references while planning the portfolio.

Keep the browsing structure familiar and place the distinctive choices around it. Visitors should recognize project links, titles, categories, and navigation immediately. Then use one or two repeated identity choices, such as an unusual headline face, a strong accent color, oversized project numbers, a distinctive image crop, or an editorial transition between sections.

Start with a plain version of the page and make sure the projects are easy to scan. Add the identity choice to the headline, project labels, and one interaction rather than changing every component. If the work itself is colorful, use a quiet page background and restrained controls. If the work is minimal, a stronger type or spacing system can carry more of the personality.

Test three moments: the opening screen, the project index, and the case-study transition. If the same visual idea appears in all three, the portfolio will feel intentional. If each moment introduces a new style, remove the weakest one. Compare the supplied studio and personal references for consistency of structure, then make the content and selected work your main source of difference.

Start with one highly readable sans serif for navigation, body copy, project titles, and metadata. Use a second face only when it adds a clear role, such as a monospace style for technical labels or an editorial face for large headlines. The captured Linear reference includes Inter Variable, Berkeley Mono, and Tiempos Headline in distinct roles, so it is a useful set to test, but it should remain inspiration rather than a claim about the supplied portfolio sites.

For spacing, define three levels: compact spacing inside metadata and buttons, medium spacing between a project title and its image or description, and large spacing between projects or page sections. Keep those relationships consistent across desktop and mobile. Use a readable content width for paragraphs and let project images extend wider when the work benefits from scale.

Before choosing final values, make one sample project card, one featured project section, and one mobile stack. Check whether the title, image, description, and next project read as separate groups. If they do, repeat those values across the site. This is safer than choosing isolated padding numbers for every component.

Related questions

• SaaS landing page design references for Claude Code
• Portfolio Website Design References for Claude Code
• SaaS landing page examples with fonts, colors, and spacing
• Fintech Website Examples: Fonts, Colors, and Spacing