Page design
Scandinavian Minimal
A pale oat page under a thin birch rail: a light-weight sans headline beside an arched portrait under a line-drawn pendant lamp, then project cards standing as matted prints on birch planks with tapered brackets, three to a shelf, over a hairline list of more repos.
Paste this into an agent to rebuild the whole page from scratch.
Build a personal homepage that reads like a calm Scandinavian room: a birch rail along the top wall, things hung from it or set on birch shelves, light pastels and lots of air. The signature is the project shelf, where each project card stands as a matted print on a wooden plank with two tapered brackets underneath.
Use a `1200px` wrap. Run a `12px` birch rail across the very top of the page, drawn with a vertical gradient from `#e6d3b3` to `#d4b88e`, a faint repeating vertical grain (`1px` and `2px` lines at `5%` to `7%` brown every `38px` to `91px`) and a darker `#b8966a` bottom line. Below it, the header holds a small mark, the nav and an Evening / Daylight toggle. The current nav item is a surface pill with a hairline ring, and it hangs from the rail: a `2px` peg line `1.1rem` long rising from the pill's centre to a `10px` wooden knob just under the rail.
Use one humanist geometric sans, **Albert Sans**, for everything you read: display at weight 300 with `-0.035em` tracking (the home H1 at `clamp(2.75rem, 6.2vw, 5.4rem)`, line height `1.04`), body at `18px` to `19px`. Use **DM Mono** only for eyebrows, dates and meta. No serif. Daylight uses ground `#f5f1ea`, surfaces `#fbf9f5` and `#ede6da`, lines `#ddd4c6`, ink `#26241f`, secondary ink `#57524a` and a slate accent `#364f6a`. Four pastels code the collections, each paired with an ink of the same hue that passes AA on it: sky `#d8e2eb` with `#2f4a66` for AI, sage `#d9e1d1` with `#3c5739` for the Digital Garden, oat `#efe3c8` with `#6a4f1f` for tools, rose `#f0ddd6` with `#7a4337` for fiction. Evening is smoked oak and lamplight, not black: ground `#1c1a17`, surface `#25221e`, ink `#efe9df`, darker wood tones, and the accent lifting to `#a9c1db`. Persist the theme in `localStorage` inside try/catch.
The hero is two columns: on the left a mono eyebrow, the light H1 with one phrase in the accent colour, a lede, a filled slate button, a soft button and a text link, and a row of three large light-weight stats with mono labels; on the right an arched portrait (`border-radius: 999px 999px 18px 18px`, aspect `4 / 5`, max `380px`) with a `10px` mat ring and a `1px` line ring outside it, under a line-drawn pendant lamp whose shade glows warm in Evening.
Build each shelf as a grid of `--cols` columns (three, then two on the next shelf) with `1.75rem` gaps and `1.25rem` side padding, followed by a `16px` plank: the same birch gradient split at 60%, a grain overlay, an inset white top highlight and a soft drop shadow. Two brackets hang below the plank at 12% from each side, `12px` by `26px` wood-coloured trapezoids made with `clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%)`. Each card is a print: a `12px` mat in `#efe8dc` around the image with a `6px` radius, a `1px` line ring and a soft shadow, the image at `16 / 10` and slightly desaturated (`saturate(.78) contrast(.96)`) so mismatched illustrations read as one set, then a mono meta line, a title and a short description. A print lifts `3px` on hover and its title underlines. Text-only items get a pastel mat with a line-drawn leaf instead of an empty box. After the shelves, list more repositories as hairline rows with a star-count pill.
Follow with a shelf of three featured articles, a two-column AI section (intro on the left, dated hairline list on the right), a full-width sage band of Digital Garden cards, four pastel experiment tiles with line icons, three closing cards including a dark Work with me card, and an oat newsletter panel. Keep decoration to wood and pastels; heavier colour or extra ornaments break the calm. Below `1080px` shelves drop to two columns and below `860px` to one, the peg disappears, the nav moves behind a menu button and the hero stacks into one column, with no sideways scroll at `400px`. Motion is only the `200ms` print lift, removed under `prefers-reduced-motion`.
One self-contained file: markup, styles and scripts together.
Loading the page source…
The birch project shelves are the centrepiece, placed right after the home hero: every card is a matted print on a plank, and the room metaphor carries on through the current nav item hanging from the rail on a peg, shelved featured articles, a dated AI list, a sage band for the Digital Garden and pastel experiment tiles. The page keeps the demo's oat, birch and pastel palette.
Sections, top to bottom
- Home hero with arched portrait and pendant lamp
- Birch project shelves
- Start here shelf
- AI & Machine Learning list
- Digital Garden sage band
- AI Experiments pastel tiles
- Connect, Projects and Work with me
- Newsletter
- Footer
- Type
- Albert Sans (display, headings, body, UI) · DM Mono (eyebrows, dates, meta, code)
- Themes
- light+dark
- Palette
#f5f1ea#fbf9f5#ede6da#26241f#57524a#364f6a#e6d3b3#d4b88e#b8966a#d9e1d1#f0ddd6#d8e2eb#efe3c8#1c1a17#25221e#efe9df#a9c1db