# Dia · Oct 2026

Source: https://www.diabrowser.com/
Captured: 2026-10-09
Tags: saas, landing, light, both, editorial, minimal, warm, optimistic, calm, human, premium
Colors: #f7f6f0, #e2ae1a, #f9c730, #f5e1ad, #050505, #d4d4d3, #f5d26d, #bcb6a5
Type (h1): Exposure VAR · 38.793px/42.6723px · 500 · tracking -1.55172px — "More than a browser. A better workday."
Type (h2): Exposure VAR · 48px/56px · 500 · tracking -2.4px — "Dia reads between the tabs"
Type (h3): ABC Oracle · 20px/30px · 350 · tracking -0.4px — "Create clean lines between work, freelance, and personal life, with separate tab"
Type (body): ABC Oracle · 14px/20px · 400 — "Before the day kicks in, Dia's Morning Brief lays it all out (calendar, inbox, k"
Type (button): ABC Oracle · 10px/15px · 400 — "Download Dia for free"
Button: "Download Dia for free" — fill #000000, text #f8f8f8, radius 9999px, border 0px, padding 0px 22px 0px 24px, height 56px, type 20px/350
Radii: 12px (16), 20px (7), 16px (5), 9999px (4), 50% (2)

## Images

- Hero (desktop): https://media.lvly.design/library/diabrowser-com-v2/hero.webp?v=62e2c70b
- Page crop (mid-1): https://media.lvly.design/library/diabrowser-com-v2/mid-1.webp?v=341cbea4
- Page crop (mid-2): https://media.lvly.design/library/diabrowser-com-v2/mid-2.webp?v=8ec2fe0a
- Hero (mobile): https://media.lvly.design/library/diabrowser-com-v2/mobile-hero.webp?v=b90f0a91
- Full page (desktop): https://media.lvly.design/library/diabrowser-com-v2/full.jpg?v=6aa91a74
- Full page (mobile): https://media.lvly.design/library/diabrowser-com-v2/mobile-full.jpg?v=28b78242
- Clip preview (mp4): https://media.lvly.design/library/diabrowser-com-v2/video-n06gpt.preview.mp4?v=55333df2

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.

## Steal-worthy details

- Floating pill nav: a white chip with a 12px radius, a soft shadow and a 1px warm border, holding only a logo glyph and three text links, centered over the hero with no bar behind it
- Oversized ornamental wordmark (a swash serif at about 3x the headline's size, white) set behind the product window, so the window's top edge crops the letters and the brand reads as a backdrop, not a logo
- Blurred photographic wash instead of a flat brand fill: dappled light and leaf shadows in two yellows give the hero depth and warmth at no layout cost
- Bottom-docked CTA sheet: a cream ellipse rises from the viewport floor, carrying a 56px black pill ("Download … ↓", 20px at weight 350) and a 13px gray platform note, fixed through the whole scroll
- Product UI tinted to the brand: the window chrome and sidebar pick up a translucent butter tone (#f5e1ad), with an italic serif section label ("New updates") inside the app copy, so the screenshot shares the page's typography
- Scrollytelling step list: mono "01/02/03" indices over light serif step titles. Inactive steps fade to gray, and the active one gets a 2px black left rule plus body copy
- Editorial cover card: a briefing mock framed by rotated italic-serif date and time running up both sides, like a magazine spine
- Feature cards with hairline borders, a 16–20px radius and an uppercase tracked tag in a small rounded chip ("BETTER MEETINGS"), then 18–20px body copy and a cropped product shot bleeding off the card's bottom
- Privacy settings as a ticker: a row of monospaced "Memory On · Block ads On · Share content data Off" toggles turns a trust section into a readable strip
- A round "The Browser Company" seal stamped in the footer corner, a signed-by-the-maker detail

## Style recipe

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.