Aventon Design Guide

Typography

Poppins

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl
text-7xl
text-8xl
text-9xl

Open Sans

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl
text-7xl
text-8xl
text-9xl

Open Sans Condensed

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl
text-7xl
text-8xl
text-9xl

Colors

Primary

900
800
700
600
500
400
300
200
100
50

Red

900
800
700
600
500
400
300
200
100
50

Grey

900
800
700
600
500
400
300
200
100
50

Blue

900
800
700
600
500
400
300
200
100
50

Green

900
800
700
600
500
400
300
200
100
50

Yellow

900
800
700
600
500
400
300
200
100
50

Teal

900
800
700
600
500
400
300
200
100
50

Grid System

1

2

3

4

5

6

7

8

9

10

11

12

Buttons

Icon Only Buttons (Primary White)

Text Only Buttons (Secondary White)

Text And Icon Buttons (Primary Dark)

Text Only Buttons (Secondary Dark)

Buttons In Loading State