---
name: Zen Browser
description: "This site is a great example of how to execute a 'calm' and 'premium' aesthetic using typography, spacing, and a restrained color palette for a software product."
version: alpha

colors:
  background: "#F2F0E3"
  primary: "#2E2E2E"
  tertiary: "#F76F53"
  neutral: "#9E9E9E"
  line: "rgba(46, 46, 46, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 8px
  md: 12px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#F2F0E3`)** — uses `bg` token
- **Primary text (`#2E2E2E`)** — uses `ink` token
- **Accent (`#F76F53`)** — uses `accent` token
- **Muted (`#9E9E9E`)** — uses `muted` token
- **Borders (`rgba(46, 46, 46, 0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- 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.

## Layout

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

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

## Elevation & Depth

- 0 4px 6px -1px rgba(0, 0, 0, 0.1)
- 0 10px 15px -3px rgba(0, 0, 0, 0.1)
- Borders: Subtle 1px borders using the muted ink color for faint separation.

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 24px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```