# aaraalto.com

Source: https://aaraalto.com/
Captured: 2026-09-13
Tags: portfolio, landing, light, both, minimal, luxury, warm, calm, optimistic, human, confident
Colors: #fee7d3, #d2c2b3, #ada193, #febea5, #91877b, #f99b77
Type (h2): DM Sans · 21px/26.4px · 500 — "Nurse AI Copilot"
Type (h3): DM Sans · 13px/19.5px · 400 — "Services"
Type (body): DM Sans · 21px/34.8px · 600 — "I design and build products from idea to production."
Type (button): DM Sans · 13px/19.5px · 400 — "All work"
Button (primary): "All work" — text #000000, radius 999px, border 1px, padding 0px 14px, height 28px, type 13px/400
Radii: 9999px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/aaraalto-com/hero.webp?v=50f021e3
- Hero (mobile): https://media.lvly.design/library/aaraalto-com/mobile-hero.webp?v=1153485f
- Full page (desktop): https://media.lvly.design/library/aaraalto-com/full.jpg?v=3d0ac52b
- Full page (mobile): https://media.lvly.design/library/aaraalto-com/mobile-full.jpg?v=c548056b
- Clip preview (mp4): https://media.lvly.design/library/aaraalto-com/video-zwg68a.preview.mp4?v=3fcc3eba

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.

## Steal-worthy details

- The accent as punctuation: a single 10px `#ff4d00` dot after the headline's last word, doing the work a coloured word or underline usually does — brand color with zero surface area.
- A vertical "sunrise" gradient that lives only in the bottom third of the viewport, so the page has depth and mood while the reading area stays a flat, calm cream.
- Ghost pill CTAs: hairline warm-gray border, transparent fill, body-size label, one 12px glyph — an email address as a copy-to-clipboard pill rather than a mailto button.
- Weight-flat typography: heading and body both DM Sans 400; contrast is size (30 vs 16.6px), tracking (−0.43px vs −0.05px) and a two-step warm-gray text color.
- A hard 1440-wide layout that still uses only ~520px of it — the emptiness on the right is the design, and it survives to mobile where it becomes vertical breathing room.
- A skip-to-content link styled as a real solid `#ff4d00` square button — the one loud element on the page, hidden until keyboard focus.

## Style recipe

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.