# Arc (The Browser Company) — Marketing Site Design Spec

> Source: arc.net (live DOM, full CSS token system), 2026-07-09 (desktop 1512px).
> Coverage: marketing home + nav + hero + product-window mockup. App: n/a — Arc/Dia is a native macOS/Windows app, no web product (site only). Responsive: token-based (`--navbar-height`, `--page-padding`) but mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Playful, warm, hand-crafted marketing that feels like a friendly indie product rather than a corporate browser. The page sits on a warm cream `#FFFCEC` canvas washed with a soft pastel gradient (peach → lavender → cream) behind the hero, framed top and bottom by vivid electric-blue `#3139FB` bands with a signature **scalloped / wavy torn-paper edge** where blue meets cream. Type mixes personalities on purpose: a rounded square-grotesque (Marlin / Marlin Soft SQ) for confident brand headings and an editorial serif for large hero lines, with ABC Oracle carrying body copy — the combination reads warm and human. A single black rounded CTA pill and playful pastel accents (coral, salmon, light-green) keep it optimistic. Feels: playful, warm, crafted, optimistic.

## 2. Color Palette & Roles

### Brand core
| Token | Hex | Role / usage |
|---|---|---|
| brandBlue | `#3139fb` | Electric-blue header/footer bands, borders, links |
| brandDeepBlue | `#2404aa` | Deeper blue accents |
| brandDarkBlue | `#000354` | Darkest blue text on blue |
| brandOffwhite | `#fffcec` | Warm cream page canvas |
| brandRed | `#fb3a4d` | Alert / playful red accent |
| focusOutline | `#96c4ff` | Focus ring (pale blue) |
| highContrast / lowContrast | `#000` / `#fff` | Text / inverse |

### Playful secondary ("students" palette)
| Token | Hex | Role |
|---|---|---|
| arc_blue | `#0c50ff` | Alt bright blue |
| pinkish | `#f25e6b` | Coral-pink accent |
| salmon | `#f2c2ac` | Warm fill |
| light_green | `#d3e081` | Lime fill |
| off_white | `#f5f4e2` | Warmer cream panel |
| light_grey | `#e1e0ce` | Neutral warm panel (hover `#d7d6c4`) |
| text_dark / text_light | `#766e6a` / `#97928f` | Warm-grey body / muted |

Primary ramp is a coral-red (`primary6 #fa4531`); secondary ramp is teal-green — used for illustration/data, not chrome.

Rule: cream canvas + electric-blue bands is the frame; black is reserved for the primary CTA and headings. Pastel accents decorate, blue signals interactive.

## 3. Typography Rules

- Brand/display stack: `"Marlin Soft SQ"` and `Marlin` (rounded square grotesque)
- Editorial serif: large hero headlines set in a transitional serif (Times/Exposure fallback observed)
- Body stack: `"ABC Oracle", Helvetica, sans-serif`
- UI stack: `InterVariable, Inter, sans-serif`
- Mono: `"ABC Favorit Mono", Menlo, monospace`
- Font sizes token ramp: 10/12/14/16/20/24/32/36/40/48; line-heights 12–56; weights 400–800.

| Role | Size/Line | Weight | Tracking | Family |
|---|---|---|---|---|
| Hero (editorial) | ~44–48 | 400 | tight | Serif |
| Brand heading (h1) | 32 / 31.2 | 700 | -1.6px | Marlin Soft SQ |
| Body | 20 / 24 | 400 | 0 | ABC Oracle |
| Nav / UI | 16 | 400–500 | 0 | Marlin / Inter |

Pattern: rounded Marlin for brand voice + a serif for big editorial hero lines; ABC Oracle for readable body. Weight goes up to 700–800 for punchy headings (unlike the dev-tool captures).

## 4. Component Stylings

### Buttons
- **Primary CTA (Try Dia)**: black rounded pill `rgba(0,0,0,.85)`, white text, app-icon avatar on the left, arrow on the right, radius ~22px, soft drop shadow.
- **Nav links**: plain text on the blue band, cream/white, small inline glyphs (Max, Mobile).
- Links: brand blue `#3139fb`.

### Product-window mockup (signature)
- A rounded browser window (radius 12–16px) on white with `shadow-large` (`0 30px 60px rgba(0,0,0,.12)`), a traffic-light header, a "Work" space pill, and Arc's sidebar of colorful app icons in a grid — a literal render of the product.

### Cards / panels
- Warm panels on `off_white`/`light_grey`, radius 8–16px, soft `shadow-small/medium`, rounded and friendly.

## 5. Layout Principles

- Max width `1280px`, page padding `32px`, navbar height `64px`.
- Electric-blue band nav (logo left, links) → scalloped edge → cream hero (serif headline + subhead + black CTA pill) → product-window mockup → blue footer band with scalloped top.
- Spacing token scale: 4/8/12/16/24/32/40/48/56/64/72.
- Generous whitespace, centered hero.

## 6. Depth & Elevation

- Radii: 2/4/8/12/16/32 + round `9999px`; CTA pill ~22px.
- Shadow tokens: small `0 5px 10px rgba(0,0,0,.12)`, medium `0 8px 30px rgba(0,0,0,.12)`, large `0 30px 60px rgba(0,0,0,.12)`. Soft, low-alpha, friendly.
- Elevation via soft rounded shadows on light surfaces (opposite of the dev-tool hairline approach).

## 7. Motion

- Playful, spring-y micro-interactions on hover (CTA lift, icon wiggle character); content reveals on scroll.
- The scalloped band edges and product mockup are the visual anchors; motion is decorative and warm rather than technical.
- No heavy scroll-jacking observed; transitions are short and bouncy.

## 8. Backgrounds, Effects & WebGL

- Warm cream `#FFFCEC` canvas with a soft pastel radial/linear wash behind the hero (peach → lavender → cream).
- **Signature scalloped/wavy edge** dividing the electric-blue bands from the cream body (top of hero and above footer) — a torn-paper/zigzag motif.
- Subtle paper grain/noise on the blue bands.
- Soft drop shadows on the floating product window; no WebGL or video on the home.

## 9. Do's and Don'ts

### Do
- Use a warm cream `#FFFCEC` canvas framed by electric-blue `#3139FB` bands with a scalloped/wavy edge between them.
- Mix a rounded square-grotesque (Marlin Soft SQ) for brand headings with an editorial serif for big hero lines and ABC Oracle for body.
- Make the primary CTA a black rounded pill with an app-icon avatar and arrow.
- Add a soft pastel gradient wash (peach/lavender) behind the hero.
- Float product mockups on white with soft large shadows (`0 30px 60px rgba(0,0,0,.12)`), rounded 12–16px.
- Use playful pastel accents (coral `#f25e6b`, salmon, light-green) for decoration; keep blue for interactive.
- Use warm-grey body text (`#766e6a`), not pure black, for copy.

### Don't
- Don't flatten the scalloped band edges into straight lines — the wavy divider is the signature.
- Don't switch to a cool/neutral grey canvas; warmth (cream + pastels) is core.
- Don't use hairline-border, shadowless dev-tool elevation — Arc uses soft rounded drop shadows.
- Don't drop the type mix down to a single neutral sans; the Marlin + serif + Oracle combination is the voice.
- Don't let pastel accents take over chrome — they decorate, blue signals action.

## 10. Responsive Behavior

- Token-based: `--navbar-height 64`, `--mobile-cta-height 56`, `--page-padding-left/right max(0px,32px)`, `--announcement-banner-height`.
- Nav collapses on mobile; hero and mockup stack; CTA becomes full-width (56px) sticky.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fffcec` (cream) · Bands `#3139fb` (electric blue) · Text `#000`/`#766e6a` · CTA `rgba(0,0,0,.85)` · Accent-red `#fb3a4d`
- Fonts: Marlin Soft SQ (headings) + editorial serif (hero) + ABC Oracle (body) · Radius 8–16 / pill 22–9999 · Max-width 1280 · Navbar 64
- Shadows: small `0 5px 10px rgba(0,0,0,.12)`, large `0 30px 60px rgba(0,0,0,.12)` · Focus ring `#96c4ff`

<arc_design_language>
Use the Arc (Browser Company) design language: a warm cream canvas #FFFCEC framed top and bottom by vivid electric-blue #3139FB bands, joined by a signature scalloped / wavy torn-paper edge. Behind the hero sits a soft pastel wash (peach → lavender → cream). Type is a deliberate mix: rounded square-grotesque Marlin Soft SQ for confident brand headings (weight 700, tight -1.6px tracking), an editorial serif for large hero lines, and ABC Oracle for readable 20px body in warm grey #766e6a (not pure black). The primary CTA is a black rounded pill rgba(0,0,0,.85) with an app-icon avatar and a right arrow. Blue #3139FB signals interactive/links; playful pastel accents (coral #f25e6b, salmon #f2c2ac, light-green #d3e081) and a coral-red #fb3a4d decorate. Elevation is soft and friendly — rounded 12–16px surfaces floating on white with shadows 0 5px 10px / 0 8px 30px / 0 30px 60px rgba(0,0,0,.12); focus ring #96c4ff. Product mockups render the real app: a rounded browser window with a traffic-light header, a "Work" space pill and a grid of colorful app icons. Max-width 1280, 64px navbar, 32px padding, spacing on a 4/8/12/16/24/32/40/48/56/64/72 scale. Motion is playful and spring-y. Feels: playful, warm, crafted, optimistic. Avoid: flattening the scalloped band edges, a cool-grey canvas, shadowless hairline elevation, collapsing the type mix to one neutral sans, or letting pastels take over the chrome.
</arc_design_language>