# DESIGN.md · Arc (WR-006)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, Windows, iOS
- Color theme: Bold color accent · Layout pattern: Centered hero · Mood: Playful, colorful
- License / terms: Screenshots: fair-use reference captures; site content © Arc
- Industry: Consumer software
- Patterns: Centered hero, Sign-up entry

Bright, playful browser marketing site; Max feature page with video; download page as the conversion step.

### Analysis (ours)
arc.net in our capture is loud and playful: a saturated, slightly grainy blue (#3E45FA, ESTIMATED) frames a cream content band with wavy, ticket-stub edges, and the nav is plain white text on blue. At capture time the homepage hero promotes Dia, the makers’ newer browser, with a serif headline, a dark pill ‘Try Dia’ button containing the app icon and a product screenshot, so Arc itself is no longer the hero. The Max page centers a hand-drawn ‘MAX’ logotype, two short lines and a small red ‘Get Started’ pill above a large video frame, under a dark-blue Dia banner. The download page is a violet-to-blue gradient with the app icon, a two-line question headline, a note that Arc now gets Chromium updates only, and a white ‘Download Arc for Windows’ button. Lesson: texture, wavy dividers and a custom logotype give a consumer product personality that flat SaaS pages lack. Pitfall: cross-promotion for another product on all three pages dilutes the primary download path.

### Best practices (ours)
- Use texture, custom dividers and a hand-drawn logotype to give a consumer product personality.
- Keep one conversion button per page and make it the highest-contrast element (white on blue here).
- Say plainly when a product is in maintenance mode, next to the download button.
- Limit cross-promotions to one placement so they don’t compete with the main action.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAFA` ~14%
- `#3E45FA` ~14%
- `#615AEC` ~9%
- `#262282` ~9%
- `#C3BFC5` ~7%
- `#8D84D5` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Banner
- Gradient sections
- Video embed
- Download CTA

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://arc.net/) → Max features (https://arc.net/max) → Download (https://arc.net/download)

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://arc.net
- Capture: https://arc.net/
- Capture: https://arc.net/max
- Capture: https://arc.net/download
- Library entry: https://design-library-byt.pages.dev/entry/WR-006