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

Color Schemes

Icon Only Buttons (Primary White)
Text Only Buttons (Secondary White)
Text And Icon Buttons (Primary Dark)
Text Only Buttons (Secondary Dark)
Citrine Buttons (Primary)
Outline Citrine Buttons (Secondary)

Loading State

Animations

(Using Only Tailwind Classes)
Animated Icon Examples
Animated Slot Examples

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
Universal Side Drawer Demo

MEDIA GALLERY

Product Gallery Example
  • Test Product, Does Not Auto Cancel
  • mobile swipe threshold: 70px
  • enable text overlay: true
SKUs: BAS001, BAS002
Suspension Seatpost
Test bike blue - SKUs: BLU001, BLU002
soltera text overlay text
Test bike info - 750W Motor - common
Test bike info - Hydraulic disc brakes - common
Test bike info - up to 60 mile range - common
aventure bike info - class 3 top speed 38mph w/throttle - common
Test bike info - 400 lb payload - common
Test bike info - 4" fat tire - common
Test bike blue - SKUs: BLU001, BLU002
Test bike blue - SKUs: BLU001, BLU002
Test bike blue - SKUs: BLU001, BLU002
Pace 500.3 Step through basalt - SKUs: BAS001, BAS002
Test bike basalt - SKUs: BAS001, BAS002
Test bike basalt - SKUs: BAS001, BAS002
Cool brake shot - common
cool water shot - common
cool wheelie - common
abound lr gif - common
/
A Best e-Mountain Bike Winner in the 2024 Bike Awards. A Best e-Mountain Bike Winner in the 2024 Bike Awards.
SKUs: BAS001, BAS002
Test bike blue - SKUs: BLU001, BLU002
Test bike info - 750W Motor - common
Test bike info - Hydraulic disc brakes - common
Test bike info - up to 60 mile range - common
aventure bike info - class 3 top speed 38mph w/throttle - common
Test bike info - 400 lb payload - common
Test bike info - 4" fat tire - common
Test bike blue - SKUs: BLU001, BLU002
Test bike blue - SKUs: BLU001, BLU002
Test bike blue - SKUs: BLU001, BLU002
Pace 500.3 Step through basalt - SKUs: BAS001, BAS002
Test bike basalt - SKUs: BAS001, BAS002
Test bike basalt - SKUs: BAS001, BAS002
Cool brake shot - common
cool water shot - common
cool wheelie - common
abound lr gif - common
/
test variants
Promo Gallery Example
swipe threshold set to 100px on mobile
/
/

Dynamic Section Alpine Data

Dynamic Section 1

This is the content of the dynamic section 1.

Async Alpine Section

This is the content of the async alpine section.