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

Universal Modal

Universal modal using a universal modal metaobject handle or a section ID with a Button Metaobject.
Can be tested using the Button Metaobject: "Test Universal Modal Metaobject"
Universal Modal with custom section content