Arc design system
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.
Arc colors
The brand roles and neutrals arc.net renders, with how many elements use each one.
Brand colors
- Primary
#2702c226 uses - Secondary
#fffadd54 uses - Accent
#3139fb296 uses
Neutrals
#000000299 uses#fffcec146 uses#ffffff72 uses#69696920 uses
Backgrounds
#fffcec#3139fb#ffffff
Text colors
#00000020.39:1 on #fffcec#ffffff1.03:1 on #fffcec#fffadd1.02:1 on #fffcec#fffcec1:1 on #fffcec#2702c210.88:1 on #fffcec#3139fb6.56:1 on #fffcec#6969695.33:1 on #fffcec
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#2702c2 | #ffffff | 11.21:1 | AAA |
#ffffff | #2702c2 | 11.21:1 | AAA |
Arc fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- Marlin: sans, most text (157 elements)
- Marlin Soft SQ: sans, most text (145 elements)
- InterVariable: sans, body (46 elements)
- ABC Favorit Mono: mono, body (10 elements)
- ABC Oracle: sans, body (6 elements)
- Exposure VAR: sans, body (1 elements)
Body text: 16px at weight 400, line height normal.
Weights in use: 400, 700, 600, 500, 800.
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 and radii
Spacing scale
Corner radii
- 4px
- 8px
- 22px
Corners stay small across the page. 2 distinct box shadows.
Motion
The motion reads as smooth.
Durations
xs: 100mssm: 200ms
Easing
- ease-in-out (9 uses):
ease
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (7), links (49), navigation (1), footer (1).
By category
| 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 |
- 7 font families — consider limiting to 2 (heading + body)
- 749 duplicate CSS declarations
Download the tokens
The files designlang wrote for arc.net. Run it yourself for a fresh read: npx designlang arc.net.
The core values as CSS variables
: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;
}Read arc.net yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Arc use?
What are Arc's brand colors?
How do I use the Arc design system in my own app?
Is this the official design system?
Measured from the public pages of arc.net on 21 May 2026. Arc is a trademark of its owner; designlang is not affiliated with it. More: the full Arc brand kit, the token extraction guide and the markdown version of this page.