CURATED · OPEN · FREE

Zen Browser

A beautifully designed, privacy-focused browser for a calmer internet.

browserproduct

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://zen-browser.app

📦 Browse pack contents →

Identity DNA

calmprivacybeautifulcleanzen

A modern, privacy-focused browser offering a calm digital environment.

Color

#F76F53Accent

#2E2E2EInk

#F2F0E3BG

#9E9E9EMuted

rgba(46, 46, 46, 0.1)Line

Warm, off-white canvas with deep charcoal text and a single warm coral accent.

Typography

transitional-serif · humanist-sans

display60px · 500
body16px · 400

Use a transitional serif for large display headlines to add elegance and warmth. · Use a clean humanist sans-serif for body text to ensure readability and a friendly tone.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing (e.g., 96px, 144px) creates a calm, breathable layout.

Surfaces

sm · 8px

md · 12px

lg · 24px

pill · 999px

Subtle 1px borders using the muted ink color for faint separation.

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 10px 15px -3px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered, single-column layout for the hero section, flowing into feature sections.

Motion & Interaction

150msmicro

200mssmall

600msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity and transform transitions for interactive elements and page reveals.

Subtle background color changes or slight scale/transform effects on interactive elements. · Immediate visual feedback via state changes.

Components

button Pill-shaped buttons with high contrast (dark bg, light text) or subtle outlines.
card Rounded containers (24px radius) used to showcase features or browser windows.
chip Not prominently visible in the provided screenshots.
input Not prominently visible in the provided screenshots.
hero Large, centered serif headline with a single accent-colored word, followed by a subheadline and primary actions.

Voice & Don'ts

Tone Calm, reassuring, and focused on user experience and privacy.
Headlines Large, elegant serif typography that emphasizes specific key words with accent colors.
CTAs Clear, action-oriented language like 'Beta is now available!' or 'Support Us'.

Don't use a pure white background — screenshot shows a warm off-white (#F2F0E3) instead.
Don't use sharp, rectangular corners on primary elements — screenshot shows rounded corners (8px, 24px) instead.
Don't use a cold, tech-blue accent — screenshot shows a warm coral (#F76F53) instead.
Don't use dense, cramped layouts — screenshot shows generous vertical spacing (96px, 144px) instead.
Don't use a rigid, grid-heavy design for the hero — screenshot shows a centered, typography-driven layout instead.
Don't use a dark background as the primary canvas — screenshot shows a light, warm theme instead.
Avoid: Aggressive marketing language
Avoid: Cluttered layouts
Avoid: Cold, clinical aesthetics
Avoid: Loud color palettes

Inside the pack — real screenshots

Zen Browser — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Zen Browser's design prioritizes a calm, beautiful, and privacy-focused experience. The palette is built on a warm off-white background (#F2F0E3) with deep charcoal text (#2E2E2E) and a single coral accent (#F76F53). Typography pairs a transitional serif for elegant headlines with a clean humanist sans-serif for readable body text. The layout is spacious, centered, and breathable, using generous vertical spacing and rounded corners (24px) on key components. Key donts: Do not use a cold blue accent; do not create dense, cramped layouts; do not use sharp, 90-degree corners on primary elements; do not use a pure white background; do not use aggressive, loud typography; do not clutter the interface with unnecessary visual noise.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko