Design

Are.na

are.na10 colors5 componentsarealMulti-page · 12 screens

Are.na is a platform for connecting ideas and building knowledge.

Remix Visit

Remix

Visit

12 screenshots captured· are.na

1 / 12 · Are.na · 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 are.na

Primary

#00075F

Primary CTA, brand accent, active state

#5E6DEE

Accent / decorative

Neutral

#000000

Default page background

#E2DFE9

Alternating section band

#FFFFFF

Headings / primary text

#B2B2B2

Body copy

#999999

Captions, secondary text

#696969

Tertiary / placeholder text

#EDEDED

1px borders and dividers

#333333

Neutral

Typography · areal

body12.5px · 400 · 16.875px

body14.4px · 700 · 0px

body12.5px · 700 · 0px

body24px · 400 · 30px

button16px · 400 · 23.2px

body14.4px · 400 · 20.88px

nav-link12.5px · 700 · 0px

h219.2px · 700 · 27.84px

h319.2px · 400 · 23.04px

body16px · 400 · 23.2px

h116px · 700 · 23.2px

link16px · 400 · 16px

button12.5px · 700 · 16.875px

h119.2px · 400 · 27.84px

link12.5px · 400 · 16.875px

button14.4px · 700 · 0px

heading19.2px · 400 · 27.84px

h128px · 700 · 35px

hero-display28px · 700 · 35px

h212.5px · 400 · 16.875px

body19.2px · 400 · 27.84px

heading32px · 400 · 40px

caption10px · 600 · 10px

link14.4px · 400 · 20.88px

Spacing

12px

4px

16px

20px

36px

64px

24px

132px

Components · 5

Remixes of Are.na

Latest remixes

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

Remix it