# meodai.color.pizza

Source: https://meodai.color.pizza/
Captured: 2026-11-02
Tags: portfolio, landing, light, both, editorial, minimal, swiss, calm, human, elegant, technical
Colors: #f7f7f7, #cfcfd0, #b6b6b6, #939397, #747474, #b5b5f7, #414141, #7474a3
Type (h1): Libre Caslon Condensed · 34px/37.4px · 400 — "David Aerne"
Type (h2): Libre Caslon Condensed · 22px/28.6px · 400 — "Projects I'm particularly proud of"
Type (h3): Libre Caslon Condensed · 22px/28.6px · 400 — "Color Names"
Type (body): Libre Caslon Condensed · 15px/27px · 400 · tracking 0.15px — "Computational Designer · Interaction Developer Software Artist Zürich"

## Images

- Hero (desktop): https://media.lvly.design/library/meodai-color-pizza/hero.webp?v=d67f31fd
- Page crop (mid-1): https://media.lvly.design/library/meodai-color-pizza/mid-1.webp?v=d554d613
- Page crop (mid-2): https://media.lvly.design/library/meodai-color-pizza/mid-2.webp?v=65c794b3
- Hero (mobile): https://media.lvly.design/library/meodai-color-pizza/mobile-hero.webp?v=c4cf2361
- Full page (desktop): https://media.lvly.design/library/meodai-color-pizza/full.jpg?v=04b976ed
- Full page (mobile): https://media.lvly.design/library/meodai-color-pizza/mobile-full.jpg?v=73ad7799
- Clip preview (mp4): https://media.lvly.design/library/meodai-color-pizza/video-me9aoc.preview.mp4?v=a5ce8d3b

A personal homepage for a computational designer, set in one condensed serif (Libre Caslon Condensed, 400 throughout) on a flat #f7f7f7 sheet with no fills, no cards and no radii. A sticky left rail holds a line-drawn self-portrait, the name and a stacked role line, with the social links parked at the viewport's bottom; the right two-thirds runs as a three-column ledger: prose in the middle, a project title with a ↗ in the right column, each row closed by a 1px gray hairline. The only color is a blue-violet that shows up in the portrait's glasses and an inline logo glyph. Everything else is gray type at a few values. It reads like a well-set book index of someone's obsessions.

## Steal-worthy details

- A line-drawn, stippled self-portrait stands in for a logo or photo. It's mostly gray ink with one spot of the accent blue in the eyeglasses, so the brand color is introduced through the person.
- The left identity rail is sticky for the whole scroll. The portrait, name and role stay put while the project ledger moves past, and the social links sit pinned at the rail's bottom edge, so the column works as both header and footer.
- The role line uses middots and a long em-rule ("Software Artist —— Zürich") in #747474 at 15px: a typeset subtitle with no chips or badges.
- An inline brand glyph sits right after an underlined link ("Elastiq" plus a small blue loop mark), so a mention carries its logo at text height without breaking the line.
- Projects run as a ledger, not a card grid. Each row puts a paragraph of origin story on the left and the project name with a small ↗ at 22px in the right column, and a full-width #cfcfd0 hairline separates the rows.
- A quiet topic line ("Color · Generative art · Interfaces") floats alone in the far column at body size, doing a tagline's job with no visual weight.
- One typeface at one weight for the whole page. Hierarchy comes only from size (34 / 22 / 15px) and gray value, and the condensed serif makes the long paragraphs feel narrow and literary.

## Style recipe

Set the whole page in one condensed serif (Libre Caslon Condensed, or a condensed Caslon/Garamond fallback to Georgia) at weight 400 only: display 34px/1.1, section and item heads 22px/1.3, body 15px with a generous 27px line height (1.8) and +0.15px tracking. Never use bold. Build hierarchy from size and gray value alone: ink #414141 for body, #747474 for secondary lines and nav, #939397 for faint meta. Background is one flat #f7f7f7 with no surfaces, shadows or radii (0 everywhere). The only structure is 1px #cfcfd0 hairlines spanning the content columns. Lay out on a wide three-column grid with ~44px outer margins: a sticky identity rail on the left (~1/3), with links pinned to its bottom, and the content in two columns to the right, prose (~370px measure) and a label column. Present lists as ledger rows (text left, title plus a small ↗ right, a hairline between rows, ~40px vertical padding) instead of cards. Links are body-color text with a thin underline. The one accent is a muted blue-violet (#7474a3, rendering as a brighter periwinkle #b5b5f7 at small sizes). Use it sparingly, in an illustration detail, a link underline or an inline glyph, never as a fill. Separate metadata with middots and long em-rules rather than chips. Keep imagery to monochrome line art with a single spot of the accent.