aaraalto.com

A one-viewport personal site that is almost nothing but atmosphere: a peach-to-cream haze (#feeddb ground, palette 98% #fee7d3) that deepens toward a soft sunrise blush at the bottom edge, with a single left-aligned text block sitting in the upper-left third and the entire right two-thirds left empty. Type is DM Sans throughout at a light 400 weight — a 30px headline with tight negative tracking and a slightly muted body at 16.6px — so the hierarchy comes from size and color temperature (near-black heading, warm gray body) rather than weight. The lone saturated element is a small #ff4d00 orange dot that ends the headline like a full stop, and the two calls to action are pill outlines (9999px radius, hairline warm-gray border, no fill) with tiny inline glyphs — a down arrow for "Selected work", a copy icon for the email — that read as quiet affordances rather than buttons. The mobile view keeps the same composition, just stacked and with the haze pushed lower. Nothing is trying to be clever; the page is a calm, sun-warmed introduction that trusts one sentence and one dot to carry it.

Build on a warm off-white ground (#feeddb) with a vertical radial haze that deepens to a peach blush (#febea5 → #f99b77 at ~10% opacity) only in the bottom third of the viewport; keep everything above it flat. Use one sans throughout — DM Sans or a close geometric-humanist — at a single weight (400): display 30–32px with −0.42px tracking and 1.14 line-height, body 16–17px with −0.05px tracking and 1.55 line-height. Make hierarchy with color temperature, not weight: heading in near-black warm charcoal, body in a warm mid-gray (#91877b), tertiary in #ada193. Reserve one saturated accent, #ff4d00, and spend it on almost nothing — a dot, a focus ring, a cursor — never on fills for primary actions. Controls are ghost pills: 9999px radius, 1px border in #d2c2b3, transparent fill, 12px vertical / 16px horizontal padding, label at body size in the body gray, one 12px line icon inline after the label. Compose left-aligned in a single ~520px measure anchored to the upper-left third; leave the rest of the canvas empty on purpose. No cards, no shadows, no dividers; separation is whitespace (32px between heading and lede, 56px before the controls). On mobile keep the same block at full width with the haze pushed to the bottom quarter.