Color Palette
Background Colors
Blue (Primary)
#3139FB · ×337
Cream White
#FFFCEC · ×150
Text Colors
Light Yellow
#FFFADD · ×56
No Border Colors Detected
No border color tokens were detected in the Arc design system. Arc uses transparent or inline-derived borders rather than named border color tokens.
Typography
Serif · Times (base)
Times
A browser that feels good. Built for focus and flow.
Regular · 400
Bold · 700
Mono · ABC Favorit Mono
Favorit Mono
--color-blue: #3139FB; --font-size-6xl: 45.51px;
Regular · 400
Medium · 500
Additional Font Families
Marlin
Marlin Soft SQ
Exposure VAR
ABC Oracle
InterVariable
-apple-system
Arc Browser
6xl · 45.51px · Bold · Times · line-height: 42.25px · tracking: −1.82px
A browser that thinks with you.
4xl · 36px · Bold · Times · line-height: 39px · tracking: −1.6px
Tabs, Spaces, and Focus modes
2xl · 28px · Bold · Times · line-height: 36px · tracking: −0.72px
Arc reimagines how you use the web — with spaces, split views, and a sidebar that puts you in control of your browsing experience.
Body · 17px · Regular · InterVariable · line-height: 28.8px
Import your bookmarks, extensions, and settings from Chrome or Safari.
Body Small · 16px · Regular · InterVariable · line-height: 30px
Spaces · Little Arc · Max · Boosts · Easels
Caption · 14px · Regular · InterVariable · line-height: 24px
DOWNLOAD · macOS · NEW TAB
Mono Label · 12px · Medium · ABC Favorit Mono · tracking: 1.8px
Letter Spacing — 9 tokens
Arc Browser
Tight
−1.8204px · hero display
Arc Browser
Normal
−1.6px · headings
Arc Browser
Wide
−1.4px · subheadings
LABEL TEXT
ls-9
+1.8px · uppercase labels
Spacing
Spacing Scale
25 tokens — 2px → 459.391px
Borders
Border Widths
Arc uses both hairline (1px) and thin (2px) borders. The 2px thin border is notably prominent — used for active/hover states on interactive elements, reflecting Arc's signature thick outline aesthetic.
Shadows / Elevation
Shadow Tokens
2 tokens — subtle black-shadow system
sm
×6
rgba(0,0,0,.1) 0px 5px 5px — subtle lift for cards and dropdowns
md
×1
rgba(0,0,0,.25) 0px 2px 8px — stronger elevation for modals and popovers
Z-Index
| Layer | Value | Usage |
|---|
| Base | 1 | Base content layer, default stacking |
| Raised | 3 | Slightly elevated elements, inline tooltips |
| Overlay | 99 | Modals, drawers, full-screen overlays |
| Top | 100 | Navigation bar, topmost persistent UI |
Arc uses a compact 4-layer z-index stack with a notable gap — values jump from 3 directly to 99. This reflects a clear two-tier model: low-level UI elements (1, 3) versus fully overlapping system chrome (99, 100).
Breakpoints
No Breakpoint Tokens Detected
Arc's design system defines no CSS custom property breakpoints at the token level. Responsive layout is handled through fixed layout constants defined in CSS — --max-width: 1280px and --navbar-height: 64px — rather than named breakpoint tokens.
📐
Max Width
1280px
--max-width: 1280px
🔝
Navbar Height
64px
--navbar-height: 64px
📱
Page Padding
32px
--padding: 32px
Opacity
Opacity Tokens
2 tokens — 40% and 50%
Arc uses only 2 opacity tokens, both mid-range. Like X, transparency is primarily achieved through RGBA color values embedded directly into the color tokens rather than named opacity properties.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Light Yellow | Black | 19.97:1 | AAA |
| Light Yellow | Blue (#3139FB) | 6.42:1 | AA |
| Light Yellow | Cream White (#FFFCEC) | 1.02:1 | Fail |
| Light Yellow | Pure White (#FFFFFF) | 1.05:1 | Fail |
| Light Yellow | Blue Dark (#2702C2) | 10.66:1 | AAA |
| Mid Gray | Black | 3.83:1 | AA Large |
| Mid Gray | Blue (#3139FB) | 1.23:1 | Fail |
| Mid Gray | Cream White (#FFFCEC) | 5.33:1 | AA |
| Mid Gray | Pure White (#FFFFFF) | 5.49:1 | AA |
| Mid Gray | Blue Dark (#2702C2) | 2.04:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Blue Primary--color-blue#3139FB
Cream White--color-white#FFFCEC
Pure White--color-white-2#FFFFFF
Blue Dark--color-blue-2#2702C2
Light Yellow (Text)--color-light-yellow#FFFADD
Mid Gray (Text)--color-mid-gray#696969
White 3--color-white-3#FFFCEA
Dark Blue--color-dark-blue#210784
Dark Blue 2--color-dark-blue-2#26069C
Dark Blue 3--color-dark-blue-3#2404AA
Blue 3--color-blue-3#0034FE
Light Red--color-light-red#FF9999
Serif (Base)--font-family-baseTimes
Marlin--font-family-2Marlin
Marlin Soft SQ--font-family-3Marlin Soft SQ
Exposure VAR--font-family-4Exposure VAR
ABC Oracle--font-family-5ABC Oracle
System--font-family-6-apple-system
ABC Favorit Mono--font-family-7ABC Favorit Mono
InterVariable--font-family-8InterVariable
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs--font-size-2xs12px
xs--font-size-xs14px
sm--font-size-sm16px
base--font-size-base17px
lg--font-size-lg20px
xl--font-size-xl24px
2xl--font-size-2xl28px
3xl--font-size-3xl32px
4xl--font-size-4xl36px
5xl--font-size-5xl40px
6xl (Hero)--font-size-6xl45.51px
Tight (Hero)--letter-spacing-tight−1.8204px
Normal (H1)--letter-spacing-normal−1.6px
Wide (H2)--letter-spacing-wide−1.4px
Wider (H3)--letter-spacing-wider−0.72px
Widest (H4)--letter-spacing-widest−0.28px
ls-6--letter-spacing-ls-6−0.14px
ls-7--letter-spacing-ls-7+0.4px
ls-8--letter-spacing-ls-8+0.6px
ls-9 (Labels)--letter-spacing-ls-9+1.8px
space-192--space-192128px
space-256--space-256147.5px
space-24 (152.5)--space-24152.5px
space-25 (309px)--space-25309.18px
space-26 (459px)--space-26459.391px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Ease Out--easing-ease-outease-out
Ease In-Out--easing-ease-in-outease-in-out
Base--z-11
Raised--z-23
Overlay--z-399
Top Nav--z-4100
Design System Preview · Arc from The Browser Company · Generated 19/04/2026 · 14 color tokens · 11 font-size · 8 font-family · 4 font-weight · 8 line-height · 9 letter-spacing · 25 spacing · 4 radius · 2 border-width · 2 shadow · 3 duration · 2 easing · 4 z-index · 0 breakpoints · 2 opacity