Productivity

Arc

arc.net13 colors6 componentsABC OracleMulti-page · 12 screens

Arc is sunsetting on December 22, 2026. What happens next and the transition to Dia.

Remix Visit

Remix

Visit

12 screenshots captured· arc.net

1 / 12 · A farewell to Arc · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from arc.net

Primary

#FFFFFF

Primary CTA, brand accent, active state; Headings / primary text

#0047FF

Brand hue used alongside the achromatic primary

#6E5DBF

Accent / decorative

#2702C2

Accent / decorative

#3C3C43

Accent / decorative

Neutral

#0B0B0B

Default page background

#3139FB

Alternating section band

#FFFCEC

Body copy

#9F9F9F

Captions, secondary text

#7F7F7F

Tertiary / placeholder text

#222222

Label colour on brand surfaces

#000000

1px borders and dividers

#1A1A1A

Neutral

Typography · ABC OracleGoogle Fonts

body17px · 350 · 26.18px

h316px · 350

body17px · 350 · 23.97px

button22px · 350 · 26.4px

body20px · 350 · 28.4px

body17px · 400 · 23.97px

heading38px · 350 · 49.02px

heading20px · 350 · 28.4px

body22px · 350 · 31.02px

body21px · 350 · 29.82px

body18px · 350 · 18px

body16px · 400 · 20.48px

body13px · 350 · 24px

Typography · -apple-systemGoogle Fonts

body13px · 350 · 16px

body13px · 500 · 16px

body14px · 350 · 16px

body13px · 500

caption11px · 500 · 11px

body13px · 600 · 16px

body16px · 400 · 28px

button14px · 600 · 29px

body14px · 400 · 21px

body14px · 500 · 20.3px

body16px · 600 · 28px

body16px · 500

button13.3333px · 500

button12px · 500

button16px · 600

h136px · 700

h228px · 600 · 36px

h324px · 600

link16px · 500 · 28px

table-header14px · 500 · 21px

heading20px · 400 · 32px

heading20px · 600 · 28px

body20px · 700 · 32px

Typography · Exposure VARGoogle Fonts

h176px · 600 · 85.88px

h264px · 600 · 68px

Typography · ABC Favorit MonoGoogle Fonts

h413px · 400 · 18.59px

code13px · 400 · 13.767px

code12px · 700

code16px · 400

code16px · 700

Typography · MarlinGoogle Fonts

list-item16px · 400

h167px · 700 · 67px

Typography · Marlin Soft SQGoogle Fonts

nav-link14px · 500

heading28px · 700 · 30.8px

body24px · 700 · 24px

h145.51px · 700 · 42.25px

h224px · 600

link16px · 500

heading16px · 400 · 24px

h228px · 600 · 36px

Typography · InterVariableGoogle Fonts

caption12px · 600

link12px · 600

Spacing

8px

4px

24px

12px

16px

32px

20px

36px

Elevation

rgba(0, 0, 0, 0.1) 0px 5px 5px 0px

Components · 6

Remixes of Arc

Latest remixes

No public remixes yet. Be the first to make one.

Remix it