arc.net tasarım sistemi

---
version: alpha
name: "arc.net"
description: "Design system extracted from https://arc.net/ on 2026-09-28"
colors:
  background: "#ffffff"
  foreground: "#3139fb"
  muted-foreground: "#fffcec"
  primary: "#3139fb"
  on-primary: "#ffffff"
  border: "#3139fb"
typography:
  headline-display:
    fontFamily: "Marlin Soft SQ"
    fontSize: "46px"
    fontWeight: 700
    lineHeight: "0.92"
    letterSpacing: "-1.8204px"
  headline-lg:
    fontFamily: "Marlin Soft SQ"
    fontSize: "32px"
    fontWeight: 600
    lineHeight: "1.4"
  headline-md:
    fontFamily: "Marlin Soft SQ"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "Marlin Soft SQ"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: "0.98"
    letterSpacing: "-1.6px"
  label-md:
    fontFamily: "Marlin Soft SQ"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "-apple-system"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: "2.07"
    letterSpacing: "-0.14px"
rounded:
  none: "0px"
  xl: "22px"
  md: "8px"
  sm: "4px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "48px"
components:
  button-secondary:
    backgroundColor: "#3139fb"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "8px"
    height: "36px"
    padding: "8px 10px"
  button-primary:
    backgroundColor: "#2702c2"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "10px"
    height: "45px"
    padding: "8px 61px"
---

# arc.net

## Overview

Arc from The Browser Company: Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions with the Arc browser.

Soft, well-rounded controls, layered shadows for depth, confident display type at 46px / 700, a single blue accent on neutrals. The site ships in light mode by default. Measured from 395 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| foreground | `#3139fb` | Primary text |
| muted-foreground | `#fffcec` | Secondary text, captions |
| primary | `#3139fb` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| border | `#3139fb` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#3139fb`, `#262623`, `#2702c2`.

The accent `#3139fb` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Marlin Soft SQ** for h1, body: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **-apple-system** for button: system font stack.

Font link found on the page: `https://fonts.googleapis.com`

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Marlin Soft SQ | 46px | 700 | 0.92 | -1.8204px |
| headline-lg | Marlin Soft SQ | 32px | 600 | 1.4 | normal |
| headline-md | Marlin Soft SQ | 24px | 600 | 1.4 | normal |
| body-md | Marlin Soft SQ | 40px | 700 | 0.98 | -1.6px |
| label-md | Marlin Soft SQ | 13px | 500 | 1.4 | normal |
| button | -apple-system | 14px | 600 | 2.07 | -0.14px |

Type scale in use: 12px, 13px, 14px, 16px, 17px, 20px, 24px, 28px, 40px, 46px. Base body size 40px.

The H1 renders at 32px / 700, center aligned, up to 0px wide, tracking -1.6px. Sample: "Arc is the Chrome replacement I've been waiting for.".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 48 (px).
- Flex and grid gaps: 8, 12, 16, 24, 32, 44 px.
- Content max width: 1200px, centred.
- Breakpoints: 480px, 600px, 650px, 800px, 1000px.
- Header: 36px tall, static, background `rgba(0, 0, 0, 0)`; 6 nav links at 16px / 400 (Max · Mobile · Developers · Students · Blog).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`
- shadow-2: `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px`

## Shapes

- Buttons: 22px
- Inputs: 22px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, xl 22px, md 8px, sm 4px, full 9999px

## Components

### Button, secondary

Background transparent (it sits on `#3139fb`, so place it on that colour), text `#ffffff`, border 1px solid transparent, radius 8px, height 36px, padding 8px 10px, 14px / 500. Sample label: "Max".

### Button, primary

Background `#2702c2`, text `#ffffff`, border none, radius 10px, height 45px, padding 8px 61px, 14px / 600, shadow `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`. Sample label: "Download Arc for Windows".

### Link

Colour `#fffadd`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1200px | 318px | 16px | 32px, 0 lines, center | 36px, 5 links | media below text | 3→1 col; 4→4 col; 2→1 col | content-width |
| laptop 1024px | 659px | 110px | 16px | 32px, 0 lines, center | 36px, 5 links | media below text | 3→1 col; 3→3 col; 2→1 col | content-width |
| tablet 768px | 659px | 58px | 16px | 32px, 0 lines, center | 32px, 0 links | media below text | 2→1 col; 3→3 col; 2→1 col | content-width |
| phone 390px | fluid | 0px | 16px | 32px, 3 lines, center | 32px, 0 links | media below text | 2→1 col; 2→1 col | content-width |

- H1 goes 32px → 32px (100%), 0 → 3 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 16px at every width.
- Phone side gutter 0px.
- Section top padding 72px → 72px.

## Interaction & Motion

13 elements carry transitions; typical 0.15s with ease, mostly on transform, background, box-shadow. 1 running keyframe animations (scroll 78.5225s infinite).

- Hover on button-secondary ("Max"): background transparent → #17039480, moves up 0.9px; cursor pointer; transition transform, background | 0.15s, 0.15s | ease, ease | delay 0s, 0s.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 1409px gap, shifted right; transparent, radius 0px, padding 0px 0px, shadow none; appears instantly (no fade); removed instantly on leave.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#3139fb` for actions and focus; never paint large areas with it.
- Do keep body text at 40px in Marlin Soft SQ.
- Do match corner radii per element class (buttons 22px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.