Folio

Swiss quiet: white, hairline grid, the work speaks.

Portfolio/foliolight + dark

Exemplar: Swiss-minimal designer portfolios

Studied from grid-led portfolio work. Original tokens and copy; no assets copied.

Live tokens

Colors

bg
#FFFFFF

surface
#F7F7F7

surface-alt
#EFEFEF

text
#1A1A1A

text-muted
#6E6E6E

border
#E2E2E2

primary
#1A1A1A

on-primary
#FFFFFF

accent
#2948FF

on-accent
#FFFFFF

Type

Directionxxxl · 3.25rem

Design systemxxl · 2.5rem

Conversion notesxl · 1.75rem

Section headinglg · 1.25rem

Body copy for the pagemd · 1rem

Supporting textsm · 0.875rem

Meta labelxs · 0.75rem

Pack recipe 0123'Geist', 'Inter', system-ui, sans-serif

Pack recipe 0123'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace

Spacing, radius, shadow

xs 0.25rem

sm 0.5rem

md 1rem

lg 2rem

xl 3.5rem

xxl 6rem

sm 0px

md 2px

lg 2px

Component samples

Selected projects

Product design and design systems.

Neutral label; the work carries the page.

Available Jan 2027

Your email

For the occasional case note.

Harbor

Design system for a logistics suite

Role: lead designer — 2025

Recipe

Apply the rules, place the patterns, then tune the conversion notes against the rubric.

Rules

Keep the page white with a visible hairline grid.
Use one type family at three sizes only.
Give each project one hero image and three facts.
Align every block to the same column edges.
Let links be text. No button decoration.

Patterns

Project grid: two columns, equal cards, mono captions.
Case page: hero image, role, year, outcome.
About page as a short column with a portrait.
Footer with email and social links in one row.

Conversion notes

Put the email address in the header, not a form.
State availability in plain words: open or booked.
Keep the case page's outcome line above the gallery.

See this pack on your site.

Attach your URL. The audit maps your gaps to Folio or a better-fit pack.