Skip to content
Library

Dia Browser. Blackroom gallery meets editorial broadsheet.

  • Productivity
  • Mixed theme
  • 12 colors
  • 5 typefaces

Dia's visual language is editorial and cinematic: a pitch-black hero that erupts into a screaming human face gives way to a calm, magazine-like expanse of white space, serif display headlines, and whisper-thin type. The system lives almost entirely in black and white (4% colorfulness) with surgical chromatic accents — lime wash, golden yellow, and a sweeping spectrum gradient that reads like a rainbow scar through the page. Components are floating and weightless: glassmorphic nav pills, 9999px-radius buttons that hover above their content, 20px-radius cards with barely-there shadows. Typography does the heavy emotional work — the ultra-condensed Exposure Variable at 112px with 0.85 line-height creates headline impact through vertical compression rather than weight, while ABC Oracle at 300-400 carries body copy with editorial calm. The page breathes: 80px section gaps, generous line-heights (2.19 for body), and asymmetric layouts that refuse the standard SaaS card grid.

Screenshot of Dia Browser
Captured from diabrowser.com on October 11, 2026

Dia Browser design system

Dia Browser

Brand1

  • Sweeping rainbow gradient — the brand's signature motion element, traveling across hero and section dividers

Accent2

  • Accent background wash, highlight zones, editorial color punctuation

  • Secondary accent wash, warm highlight zones

Neutrals9

  • Primary text, button text, icon fills — the dominant ink across all surfaces

  • Hero background, dramatic dark sections — the opening stage of the experience

  • Dark button backgrounds on light surfaces — secondary action fill

  • Secondary text, muted nav, helper labels — softer than pure black for hierarchy

  • Tertiary text, inactive nav items, disabled states

  • Placeholder text, very subtle UI dividers

  • Button fills, pill backgrounds, header wash — slightly warmer than Bone, the dominant secondary surface

  • Page canvas, nav backgrounds, base surface beneath cards

  • Primary page canvas and white card surfaces. Do not promote it to the primary CTA color

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure Black on Lime Wash

19.35 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.