Dia-Browser
A soft, airy product-marketing page for the Dia browser built on a near-white canvas (#f8f8f8) with a watercolor green-to-blue aurora gradient behind a giant ultra-light display headline. The personality is calm and editorial — a thin 96px sans display headline punctuated by a single bold serif accent word ("your"), monochrome black UI chrome, and floating fully-rounded glass cards (profile chip, app-icon tile, picture-in-picture preview, media player) that demo the product as ambient artifacts rather than illustrations. Color is reserved almost entirely for product UI fragments; the layout itself stays grayscale.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-hero
96px · 300 · 1.05
The quick brown fox jumps
display-serif
48px · 650 · 1.167
The quick brown fox jumps
body
18px · 400 · 1.5
The quick brown fox jumps
button
10px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 5px | |
| xs | 10px | |
| sm | 14px | |
| md | 16px | |
| lg | 20px | |
| xl | 30px | |
| xxl | 40px | |
| section | 70px | |
| section-lg | 80px | |
| section-xl | 90px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xxs | 5px | |
| xs | 6px | |
| sm | 10px | |
| md | 12px | |
| lg | 14px | |
| xl | 16px | |
| xxl | 20px | |
| xxxl | 24px | |
| full | 9999px |
FAQ
- What colors does Dia-Browser use?
- Dia-Browser's core palette includes #000000, #000000, #ffffff, #ffffff, #f8f8f8. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Dia-Browser DESIGN.md.
- What font does Dia-Browser use?
- Dia-Browser's primary typeface is ABC Oracle. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Dia-Browser design system?
- A soft, airy product-marketing page for the Dia browser built on a near-white canvas (#f8f8f8) with a watercolor green-to-blue aurora gradient behind a giant ultra-light display headline. The persona…