# Design System Inspired by Arc Browser

> Category: Productivity & SaaS
> "The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.

## 1. Visual Theme & Atmosphere

Arc Browser dissolves the boundary between the chrome and the page. Where Chrome and Safari treat the browser frame as a container, Arc treats it as scenery — the toolbar fades into the system wallpaper, the sidebar carries gradient warmth from the user's chosen "theme color", and translucency is everywhere. The visual signature is **frosted glass plus a single saturated gradient** — most often a peach-to-coral or violet-to-fuchsia bloom — that sets the emotional temperature of the entire window.

Typography uses **Inter** for chrome and a custom display serif (`Argent CF` or similar) for marketing — when Arc speaks publicly it speaks editorially, in a serif voice unusual for tech. The product itself is sans-only, with tight tracking and generous line-height.

Shapes are squircle-soft: 12–16px radii on cards, 8px on tabs, 9999px pills for tags. Borders are rare — Arc prefers tinted background washes (`rgba(255, 255, 255, 0.5)` over the gradient) to delineate panes.

**Key Characteristics:**
- Translucent frosted-glass surfaces over a saturated gradient background
- Theme-color gradients (peach-coral, violet-fuchsia, mint-cyan) as the primary mood
- Inter for product chrome, Argent CF (serif) for marketing display
- Squircle-soft 12–16px radii everywhere
- Sidebar-first layout: tabs, spaces, and bookmarks live on the left, not the top
- Color picker is a brand surface — themes are user-driven, not fixed
- Subtle shadows (`0 8px 32px rgba(0,0,0,0.08)`) over the gradient backdrop

## 2. Color Palette & Roles

### Primary Theme Gradients (User-selectable; default is "Sunset")
- **Sunset Start** (`#ff7e5f`): Peach gradient origin.
- **Sunset End** (`#feb47b`): Soft coral gradient terminus.
- **Twilight Start** (`#7f5af0`): Violet gradient origin.
- **Twilight End** (`#e84393`): Fuchsia gradient terminus.
- **Aurora Start** (`#16f2b3`): Mint gradient origin.
- **Aurora End** (`#0db4f7`): Cyan gradient terminus.

### Surface (Frosted)
- **Glass Light** (`rgba(255, 255, 255, 0.7)`): Standard frosted pane over gradient.
- **Glass Medium** (`rgba(255, 255, 255, 0.5)`): Hover state, tab pill background.
- **Glass Heavy** (`rgba(255, 255, 255, 0.85)`): Active pane, command bar.
- **Glass Dark** (`rgba(20, 20, 25, 0.6)`): Dark-mode frosted surface.

### Ink & Text
- **Ink Primary** (`#1a1a1f`): Primary text on light frosted surface.
- **Ink Secondary** (`#54545a`): Secondary text, tab title at rest.
- **Ink Muted** (`#8c8c93`): Tertiary, captions, URL bar.
- **Ink Inverse** (`#fafafa`): Text on dark frosted surface.

### Border & Divider
- **Border Glass** (`rgba(255, 255, 255, 0.4)`): Frosted-edge border.
- **Border Hairline** (`rgba(0, 0, 0, 0.06)`): Hairline divider on light surface.
- **Border Active** (`rgba(0, 0, 0, 0.18)`): Active tab outline.

### Brand Accent
- **Arc Coral** (`#ff5f5f`): Default brand color — used in marketing, `arc.net`.
- **Arc Lavender** (`#b794f4`): Secondary brand accent.

### Semantic
- **Success** (`#48bb78`): Toast confirmation.
- **Warning** (`#f6ad55`): Permission prompt.
- **Error** (`#f56565`): Form validation.

## 3. Typography Rules

### Font Family
- **Display / Marketing**: `Argent CF`, with fallback: `'Source Serif Pro', Georgia, serif`
- **Body / UI**: `Inter`, with fallback: `system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
- **Code / Mono**: `Berkeley Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Marketing Hero | Argent CF | 72px (4.5rem) | 400 | 1.05 | -0.03em | Editorial display, marketing only |
| Section Heading | Argent CF | 40px (2.5rem) | 400 | 1.15 | -0.02em | Marketing section titles |
| Page H1 | Inter | 32px (2rem) | 700 | 1.2 | -0.02em | Settings, command bar header |
| Page H2 | Inter | 22px (1.375rem) | 600 | 1.25 | -0.01em | Sub-section |
| Tab Title | Inter | 13px (0.8125rem) | 500 | 1.3 | -0.005em | Sidebar tab label |
| Body | Inter | 15px (0.9375rem) | 400 | 1.55 | normal | Settings prose, tooltips |
| Caption | Inter | 12px (0.75rem) | 500 | 1.4 | 0.01em | URL bar protocol, metadata |
| Code | Berkeley Mono | 13px (0.8125rem) | 400 | 1.5 | normal | URL bar, devtools |

### Principles
- **Serif moments are rare**: Argent CF appears only in marketing. The product is sans-only.
- **Title size is small**: tabs render at 13px so a long sidebar of 30+ tabs stays scannable.
- **Tracking tightens with size**: -0.03em at 72px, returning to normal by 15px.

## 4. Component Stylings

### Buttons

**Primary (Filled)**
- Background: linear-gradient on theme color (e.g., `linear-gradient(135deg, #ff7e5f, #feb47b)`)
- Text: `#ffffff`
- Padding: 10px 20px
- Radius: 12px
- Shadow: `0 4px 16px rgba(255, 127, 95, 0.3)`
- Hover: shadow grows to `0 8px 24px rgba(255, 127, 95, 0.4)`

**Glass (Secondary)**
- Background: `rgba(255, 255, 255, 0.7)`
- Backdrop: `blur(20px)`
- Text: `#1a1a1f`
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
- Padding: 10px 20px
- Radius: 12px

**Subtle**
- Background: transparent
- Text: theme color
- Hover: background `rgba(255, 127, 95, 0.1)`

### Tabs (Sidebar)
- Background at rest: transparent
- Background on hover: `rgba(255, 255, 255, 0.5)`
- Background active: `rgba(255, 255, 255, 0.85)` + soft shadow
- Padding: 8px 12px
- Radius: 8px
- Favicon: 16px square at left, 8px gap to title.

### Cards / Panes
- Background: `rgba(255, 255, 255, 0.7)`
- Backdrop: `blur(24px)` saturate 180%
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
- Radius: 16px
- Shadow: `0 8px 32px rgba(0, 0, 0, 0.08)`
- Padding: 24px

### Inputs (Command Bar)
- Background: `rgba(255, 255, 255, 0.85)`
- Backdrop: `blur(40px)`
- Text: `#1a1a1f`
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
- Radius: 14px
- Padding: 14px 18px
- Focus: shadow `0 0 0 4px rgba(255, 127, 95, 0.2)`

### Pills (Spaces / Bookmarks Folder)
- Background: theme color at 16% alpha
- Text: theme color (full)
- Padding: 4px 10px
- Radius: 9999px
- Font: 12px / 600

## 5. Spacing & Layout

- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
- **Sidebar**: 240px wide; collapsible to 56px.
- **Window radius**: 12px on the OS window itself (macOS-only flourish).
- **Padding inside panes**: 24px.

## 6. Motion

- **Duration**: 200ms for hover; 320ms for tab create/close; 480ms for "Little Arc" window expand.
- **Easing**: `cubic-bezier(0.32, 0.72, 0, 1)` for window expand (Apple's spring-style).
- **Tab swap**: 1px translate + opacity blend, no scale change.