arc.net

---
site: Arc from The Browser Company
url: "https://arc.net"
generated_at: "2026-05-14T22:15:55.489Z"
generator: "designlang@12.11.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#2702c2"
    secondary: "#fffadd"
    accent: "#3139fb"
    background: "#fffcec"
    foreground: "#000000"
  typography:
    sans: Marlin
    mono: ABC Favorit Mono
    base: 16
  spacing:
    base: 2
    scale: "[2, 32, 37, 48, 64, 72, 80, 90, 128, 150]"
  radii:
    sm: 4
    md: 8
    xl: 22
  shadows:
    md: "rgba(0, 0, 0, 0.1) 0px 5px 5px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **flat** material.

> "Arc is the Chrome  replacement I've been  waiting for."

The author writes in a **friendly** voice; headings tend to be **Title Case** case and **verbose**.

Reading order detected on the source: `nav → testimonial → content → sidebar → testimonial → testimonial → content → content → footer → sidebar`.

Source: <https://arc.net>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#2702c2` | 26 |
| secondary | `#fffadd` | 54 |
| accent | `#3139fb` | 296 |
| background | `#fffcec` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#fffcec` · `#ffffff` · `#696969`

**Total unique colors detected:** 7.

# Typography

**Families**
- `Marlin` · 157 uses
- `Marlin Soft SQ` · 145 uses
- `Times` · 67 uses
- `InterVariable` · 46 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `45.51px` | `700` | `42.25px` |
| h2 | `32px` | `700` | `31.2px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `2px` · `32px` · `37px` · `48px` · `64px` · `72px` · `80px` · `90px` · `128px` · `150px`

**Layout primitives:** 0 grid containers · 62 flex containers.

# Elevation and Depth

**Shadow scale**
- `md` — `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px`
- `md` — `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`

**Z-index layers:** 5

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `xl` — `22px`

# Components

**Detected patterns:** `buttons` · `links` · `navigation` · `footer`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | large | 3 |

# Do's and Don'ts

**Do's**
- Use `download` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **verbose** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 7 font families — consider limiting to 2 (heading + body).
- Don't 749 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://arc.net>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._