# Arc design system

> Captured from https://arc.net/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/arc/). An independent analysis for reference: Arc and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Arc's site breaks the gray software page pattern: a saturated blue (#3139fb) fills wide bands at the top and bottom with a wavy edge, and much of the copy is set in that same blue. Between the bands sits a pale, warm gradient with a large headline and a dark rounded button. Corners stay soft at 8 to 10px, and the type mixes a rounded sans with a plain grotesk.

- Theme: light
- Mood: vivid, playful, blue
- Category: Browser

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#fffcec` | Raised panels, bands and cards |
| Text | `#3139fb` | Primary ink, 6.8:1 on the background |
| Accent | `#2702c2` | Primary actions |
| Highlight | `#3139fb` | Brand color in artwork, marks and badges |

Full palette, most used first: `#3139fb`, `#ffffff`, `#fffcec`, `#fffadd`, `#2702c2`, `#595959`, `#696969`, `#000000`.

## Typography

- **Marlin Soft SQ**: display and body, 70.4% of the text. Use Nunito. Marlin isn't a free font. Nunito is a rounded free stand-in, not a match.
- **Marlin**: body, 10% of the text. Use Inter. Marlin isn't a free font. Inter is a free stand-in, not a match.
- **ABC Oracle**: body, 7.2% of the text. Use Inter. ABC Oracle is a commercial typeface from Dinamo. Inter is a free stand-in.
- **InterVariable**: body, 5% of the text. Use Inter. The captured face is Inter, free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Marlin Soft SQ | 45.5px | 700 | 0.93 | -0.04em |
| Heading | Marlin Soft SQ | 40px | 700 | 0.98 | -0.04em |
| Subheading | ABC Oracle | 20px | 400 | 1.2 | 0 |
| Body | ABC Oracle | 20px | 400 | 1.2 | 0 |
| Small | Marlin Soft SQ | 16px | 700 | normal | 0 |

Sizes in use, largest first: 46px, 40px, 36px, 24px, 20px, 17px, 16px, 14px, 13px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px.

## Shape

Corner radii, smallest first: 8px, 10px.

Shadows, most used first:

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

## Components

### Primary button ("Download Arc for Windows")

- Fill: #2702c2
- Text: #ffffff, 14px at weight 600
- Border: none
- Ring or shadow: `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`
- Corner: 10px
- Height: 45px, padding 8px 0px

### Secondary button ("Download Arc for Mac")

- Fill: #ffffff
- Text: #2702c2, 14px at weight 600
- Border: none
- Ring or shadow: `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`
- Corner: 10px
- Height: 45px, padding 8px 0px

## Do

- Commit to one saturated color for large areas and for the copy itself.
- Use a playful edge, like a wave, between bands.
- Keep the center pale and calm so the bands frame it.

## Don't

- Mute the blue to a safe corporate tone.
- Divide big sections with straight hairlines.
- Add a second loud color next to the blue.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #fffcec;
  --color-text: #3139fb;
  --color-accent: #2702c2;
  --color-highlight: #3139fb;
  --font-display: "Marlin Soft SQ", "Nunito", system-ui, sans-serif;
  --text-display: 45.5px;
  --weight-display: 700;
  --font-heading: "Marlin Soft SQ", "Nunito", system-ui, sans-serif;
  --text-heading: 40px;
  --weight-heading: 700;
  --font-subheading: "ABC Oracle", "Inter", system-ui, sans-serif;
  --text-subheading: 20px;
  --weight-subheading: 400;
  --font-body: "ABC Oracle", "Inter", system-ui, sans-serif;
  --text-body: 20px;
  --weight-body: 400;
  --font-small: "Marlin Soft SQ", "Nunito", system-ui, sans-serif;
  --text-small: 16px;
  --weight-small: 700;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --radius-1: 8px;
  --radius-2: 10px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.