# Arc design system: colors, fonts and tokens

> Arc's website (arc.net) uses a light interface with #2702c2 as its primary color and Marlin as the main typeface, with Marlin Soft SQ alongside it. designlang measured 12 font sizes from 12px to 45.51px, 13 spacing values, 3 corner radii.

Source: https://arc.net, captured 21 May 2026. Page: https://designlang.app/design-system/arc

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#2702c2` | 26 |
| Secondary | `#fffadd` | 54 |
| Accent | `#3139fb` | 296 |

Neutrals: `#000000`, `#fffcec`, `#ffffff`, `#696969`

Backgrounds: `#fffcec`, `#3139fb`, `#ffffff`

## Fonts

- Marlin (sans), 157 elements
- Marlin Soft SQ (sans), 145 elements
- InterVariable (sans), 46 elements
- ABC Favorit Mono (mono), 10 elements
- ABC Oracle (sans), 6 elements
- Exposure VAR (sans), 1 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 45.51px | 700 | 42.25px | -1.8204px | h1, span |
| 40px | 700 | 39px | -1.6px | p, span |
| 36px | 700 | 36px | -0.72px | span |
| 32px | 700 | 31.2px | -1.6px | h1, span |
| 28px | 700 | 30px | -1.4px | div, em |
| 24px | 400 | 28.8px | normal | a, img, span, svg |
| 20px | 400 | 24px | normal | p |
| 17px | 500 | 25.5px | normal | div, strong, span, a |
| 16px | 400 | normal | normal | html, head, meta, link |
| 14px | 500 | normal | -0.28px | a, span, svg, g |
| 13.3333px | 400 | normal | normal | button, svg, path |
| 12px | 400 | normal | 1.8px | div, br, svg, path |

## Spacing

2px, 32px, 37px, 48px, 64px, 72px, 80px, 90px, 128px, 150px, 155px, 160px, 383px

## Radii

4px, 8px, 22px

## Motion

Feel: smooth. Durations: 100ms, 200ms.

## Audit

Overall 87/100 (grade B).

- Color Discipline: 100/100
- Typography Consistency: 50/100
- Spacing System: 85/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #2702c2;
  --color-secondary: #fffadd;
  --color-accent: #3139fb;
  --color-background: #fffcec;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #fffcec;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #696969;
  --font-primary: "Marlin", sans-serif;
  --font-secondary: "Marlin Soft SQ", sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 22px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/arc-net/arc-net-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/arc-net/arc-net-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/arc-net/arc-net-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/arc-net/arc-net-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/arc-net/arc-net-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/arc-net/arc-net-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/arc-net/arc-net-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/arc-net/arc-net.brand.pdf)

Regenerate: `npx designlang arc.net`