# Arc Browser · Design system migration spec

> Source: https://arc.net  ·  Curated by OpenDesign  ·  en

> This site is worth including for its masterful blend of warmth, playfulness, and modern design that feels genuinely approachable.

## 1. Identity DNA

The Arc design system begins with the premise of a colorful, friendly toolbox that reimagines how you interact with the web. It is a modern, playful browser experience that blends productivity with personality, treating the browser less as a utility and more as a welcoming digital workspace.

**One-liner:** A warm, expressive browser experience that blends playful personality with modern productivity.
**Keywords:** playful · warm · expressive · modern · approachable
**Analogy:** A friendly, creative studio workspace that feels personal and inviting.

## 2. Color

The palette is built on a foundation of clean, high-contrast light surfaces, punctuated by a dominant bright blue that provides visual energy and warmth. This accent hue acts as a friendly beacon within an otherwise restrained system of whites and dark text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFCF7` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#696969` | placeholder |
| `--accent` | `#3139FB` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Warm off-white base with vibrant blue accent, using subtle noise textures for depth.

The core principle is to use color not as decoration, but as a tool to create a welcoming, focused environment that feels both professional and alive.

## 3. Typography

Typography favors humanist sans-serifs, chosen for their inherent warmth and approachable character. The voice is conversational, with bold headlines providing punch and generous line-heights ensuring body text remains comfortable for extended reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.4px | Hero headlines |
| heading | 28px | 1.2 | 700 | -0.28px | Section titles |
| body | 16px | 1.6 | 400 | 0.4px | Body text |
| caption | 12px | 1.4 | 500 | 0.4px | UI labels and captions |

**Type rules:**
- Use transitional-serif for large display headlines to create warmth.
- Use humanist-sans for body copy to maintain readability.
- Apply generous negative tracking to display sizes.

## 4. Spacing

A consistent 4px base unit underpins the rhythm, with generous spacing between sections creating essential breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous padding around interactive elements.

## 5. Surfaces

Surfaces are defined by subtle, layered shadows and the finest possible borders, creating a sense of depth that feels tangible without being heavy. The approach is minimalist, using shadow and edge to suggest structure rather than explicit framing.

- **Radius:** sm 4px · md 8px · lg 22px · pill 999px
- **Shadows:**
  - 0px 5px 5px 0px rgba(0, 0, 0, 0.1)
  - 0px 2px 8px 0px rgba(0, 0, 0, 0.25)
- **Borders:** Subtle 1px solid borders, often using the accent blue for emphasis.

## 6. Layout

The layout skeleton is a centered single-column structure, with sections allowed to span the full width for maximum compositional impact. This focused channel is surrounded by ample negative space, ensuring content is always the primary occupant of the viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard 12-column grid with responsive behavior, generous whitespace.

## 7. Motion & Interaction

Motion philosophy favors subtlety and refinement. Animations like smooth hover transitions and gentle fade-ins are employed to guide the eye and confirm interactions, never to distract.

- **Durations:** micro 100ms · small 150ms · medium 200ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transform on hover for interactive elements.
  - Smooth background color transitions.

- **Hover:** Subtle transform and box-shadow elevation on interactive elements.
- **Click:** Slight scale down or opacity change.
- **Transition:** All transitions are brief (100-200ms) for snappy feel.
- **Keyboard:** Standard focus rings using accent color.

## 8. Voice & Don'ts

The editorial voice is friendly, approachable, and slightly playful, using conversational, benefit-focused headlines that speak directly to the user. It consistently avoids corporate jargon, aggressive sales language, and overly technical terminology.

- **Tone:** Playful, friendly, and conversational.
- **Headline style:** Expressive serif headlines with personality.
- **CTA style:** Direct and inviting with playful icons.
- **Avoid:** Corporate jargon / Overly technical language / Cold or sterile tone

### Don'ts
- ❌ Don't use cold grays — screenshot shows warm off-white (#FFFCF7) as primary background.
- ❌ Don't use sharp corners everywhere — screenshot shows generous pill shapes and rounded corners.
- ❌ Don't use stark white backgrounds — screenshot shows warm, slightly yellowed whites.
- ❌ Don't use thin, lightweight typography — screenshot shows bold, expressive serif headlines.
- ❌ Don't use aggressive shadows — screenshot shows soft, subtle shadows for depth.
- ❌ Don't use rigid, corporate layout — screenshot shows playful, expressive compositions with noise textures.

The system deliberately avoids stark, corporate color schemes, harsh angular corners, dense layouts, and dark, moody backgrounds in favor of its defined welcoming aesthetic.

## System Prompt (paste into AI tool)

```
This is a warm, friendly browser product website that uses playful serif typography and expressive color to feel approachable. Key colors include warm off-white (#FFFCF7), vibrant blue (#3139FB), and black text. Font categories are transitional-serif for display and humanist-sans for body. Critical donts: don't use cold gray backgrounds, don't use sharp corners everywhere, don't use stark white (#FFFFFF), don't use thin typography, don't use aggressive shadows, don't use corporate layouts. The design balances modern productivity with playful personality through noise textures and warm tones.
```
