rachelhow.com

A personal portfolio that hands the whole stage to photography. The chrome is almost nothing: a warm off-white page (#fdfcf9), a fixed left rail of small gray text links under a hand-drawn monogram, and a one-sentence serif intro that switches from near-black ink to a soft taupe halfway through. Below it, a two-column grid of 12px-rounded photo and video cards (a wide column and a narrow one, set at different heights) carries the personality: real desk setups, sewn sticker dumplings and pixel-art scenes, each captioned in a serif set straight onto the image. The type pairing does the brand work: PP Woodland, a soft, slightly quirky serif, for display and card titles, and PP Mori for everything functional. The page reads like a scrapbook kept by someone with taste, not like a case-study deck.

Build on a warm off-white ground (#fdfcf9, with cards and panels in #f8f9f8). Use near-black navy ink #0c1521 for primary text and a warm taupe-gray #b7afac for secondary text. Taupe is the only "accent": no saturated brand color, because the imagery supplies all the color. Pair a soft, characterful display serif (PP Woodland or a similar humanist serif, weight 400, normal tracking, about 34px for the intro line and 23px for card titles) with a neutral grotesk (PP Mori or a similar face, 400, 15px/1.35 body, 13px for meta). Never bold anything. Hierarchy comes from the serif/sans switch and from ink versus taupe. Open with one long sentence: the first clause in ink, the remainder in taupe at the same size. Navigation is a fixed left rail of about 200px: a small monogram, then 14–15px gray links in spaced groups with the active one in ink, and a live clock plus monochrome social icons pinned to the bottom. Content sits in a two-column grid of unequal widths (about 3fr / 2fr) with a 20px gap, and the cards in each column have different heights so the rows stagger. Cards are full-bleed photos or looping video at 12px radius with no border and no shadow, captioned in white serif plus white sans placed directly on the image near the bottom-left (about 20px inset), with no overlay. Pills, if any, use 999px. Keep the whitespace generous and the UI chrome nearly invisible. Personality comes from photography, hand-made objects and small doodle glyphs, never from color blocks or decoration.