Zen Browser DESIGN.md

Calm privacy-first browser design with customizable chrome, quiet gradients, compact productivity features, and a focus on a less distracting web.

1. Visual Theme & Atmosphere

Zen Browser should feel like a calmer internet: private, focused, beautiful, and deeply customizable without becoming noisy. The product language centers productivity features such as Workspaces, Compact Mode, Glance, Split View, Zen Mods, and personal theme control.

• Mood: calm, private, flexible, focused, open-source
• Density: medium, with compact browser chrome and productivity panels
• Character: soft dark/light surfaces, user-controlled accent color, subtle gradients, minimal browser furniture

2. Color Palette & Roles

Treat accent colors as user-themeable. The system should work when the user changes theme color, contrast, or gradient settings.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #4F8CFF;
  border-radius: 999px;
  background: #4F8CFF;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.browser-panel {
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #FFFFFF;
  padding: 18px;
}

.chrome-bar {
  min-height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0F172A, #334155);
  color: #FFFFFF;
}

.input {
  min-height: 44px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0 14px;
}

5. Layout Principles

Prioritize browser chrome, tabs, workspace switching, split views, and theme customization. Keep settings grouped and easy to scan.

6. Depth & Elevation

css.shadow-panel { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); }
.shadow-chrome { box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16); }

Use soft shadows and translucent surfaces sparingly. Depth should support focus, not add distraction.

7. Do's and Don'ts

Do make privacy, productivity, and customization visible. Do support compact and spacious modes. Do not make the browser feel corporate. Do not use loud gradients that fight the "calmer internet" message.

8. Responsive Behavior

Keep toolbar controls at least 44px tall and preserve readable labels in compact mode.

9. Agent Prompt Guide

Design like Zen Browser: calm privacy-first browser UI, customizable accent gradients, compact productivity chrome, split-view and workspace features, soft panels, and a focused open-source tone.