Dia · Oct 2026

A browser launch page that treats sunshine as the brand. The hero is a full-bleed field of blurred, sun-dappled marigold (#f9c730 over #e2ae1a shadows), with a thin white serif line on top and a huge ornamental swash-serif "DIA" wordmark that sinks behind a frosted, butter-tinted app window. Below it everything relaxes into warm paper (#fbfaf6 / #f7f6f0) with near-black ink. Display type is a light, literary serif (Exposure VAR 500 at 38–48px, tracking around -0.05em) set against ABC Oracle, a soft grotesk at 300–400 for body and UI. Small monospaced numerals and tag labels add a quiet product-notebook feel. Product shots stay generous and real, never illustrated, and the single black pill CTA lives in a cream arched sheet pinned to the bottom of the viewport the whole way down. Hairline-bordered feature cards with 12–20px radii carry the middle of the page. The whole thing reads as a magazine about a calmer workday, not a feature list.

Build the page on warm paper, not white: background #fbfaf6, surfaces #f7f6f0, ink #050505, muted text #6b6a65, hairlines #d4d4d3 or a warm #bcb6a5 at low opacity. Let one saturated brand color own the first screen: a full-bleed marigold field (#f9c730 with #e2ae1a shadows), ideally a blurred photo or dappled-light texture in those hues rather than a flat fill. Use the paler #f5e1ad for tints inside product UI, chat bubbles and window chrome. Pair a light literary display serif (500 weight, 38–54px, line-height ~1.15, tracking -0.04 to -0.05em; set in white on the color field, ink on paper) with a soft humanist grotesk at 300–400 for body (14–20px, line-height 1.45–1.5) and UI. Add a small monospace for indices, labels and toggles. An italic serif works as an occasional accent inside product copy. Navigation is a single floating white chip (12px radius, 1px warm border, soft shadow) with a logo glyph and two to four text links, and no full-width bar. Primary action: a solid black pill, 56px tall, 9999px radius, text #f8f8f8 at 20px weight 350, with a trailing arrow. Dock it in a cream arched sheet at the bottom of the viewport so it stays available without a sticky header. Cards: 1px hairline borders, no fill or a faint paper tone, radii 12px (controls) / 16px / 20px (cards), and an uppercase tracked micro-tag in a rounded chip at the top. Show the real product in large, softly shadowed windows tinted toward the brand color, and let screenshots bleed off card edges. Number sequential ideas with small mono "01/02/03". Fade inactive items to gray and mark the active one with a 2px ink rule. Keep motion and decoration quiet: no gradients beyond the hero wash, no icons for decoration, and generous vertical spacing (120–160px between sections). The tone is calm and optimistic: a magazine about a good day, not a spec sheet.