# rachelhow.com

Source: https://www.rachelhow.com/
Captured: 2026-10-28
Tags: portfolio, landing, light, both, minimal, editorial, human, warm, calm, playful, friendly
Colors: #f8f9f8, #d5d1ce, #0c1521, #b7afac, #d5a982, #603711, #232d4a, #eacbad
Type (h3): PP Woodland · 23.2px/27.84px · 400 — "Nostalgic Snack Museum"
Type (body): PP Mori · 15px/20.25px · 400 — "Documenting my favourite Malaysian childhood snacks!"
Type (small): PP Mori · 13px/19.5px · 400 — "2:24:07 AM MYT"
Radii: 12px (7), 999px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/rachelhow-com/hero.webp?v=27eff6c6
- Page crop (mid-1): https://media.lvly.design/library/rachelhow-com/mid-1.webp?v=a71b336b
- Page crop (mid-2): https://media.lvly.design/library/rachelhow-com/mid-2.webp?v=5d143dbc
- Hero (mobile): https://media.lvly.design/library/rachelhow-com/mobile-hero.webp?v=fdf562cf
- Full page (desktop): https://media.lvly.design/library/rachelhow-com/full.jpg?v=79316381
- Full page (mobile): https://media.lvly.design/library/rachelhow-com/mobile-full.jpg?v=7ce8c9f9
- Clip preview (mp4): https://media.lvly.design/library/rachelhow-com/video-b88k0d.preview.mp4?v=9210e5e5

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.

## Steal-worthy details

- Two-tone intro sentence: the name in ink (#0c1521), then the rest of the bio in pale taupe (#b7afac) at the same size and weight, so one line works as both a greeting and a subtitle with no second text block
- Fixed left rail instead of a top nav: an icon monogram, two small link groups (Home/Resources/Tools/Cursors, then About/Work/Field Notes) split by one extra gap, with the active link in ink and the rest in gray, and no dividers or fills
- Live local clock ("2:24:06 AM MYT") pinned at the bottom of the rail above a row of gray social glyphs, a quiet "a real person in a real time zone" signal
- Casual sentence-case section label ("Fun experiments I did recently") in 15px sans with a tiny hand-drawn glyph, in place of a formal H2
- Serif title and sans subtitle sit directly on the photo in white, with no scrim or gradient. It trusts the image's own lower third to give enough contrast
- Asymmetric two-column grid (a wide card of about 3fr beside a narrow one of 2fr) whose heights differ per column, so the rows stagger like a masonry wall without any masonry library
- Two-value radius system: 12px on every card, 999px on any pill. Nothing in between

## Style recipe

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.