Webflow Style Guide

Aptonic X is our dark mode app Webflow Template created for iOS and Android apps looking for a cutting-edge design style. It was designed & developed by the amazing team at BRIX Agency.

Buy template Back to home

Colors

Accent color

Primary 1

#216FFF

Secondary colors

Color 1

#A420FC

Color 2

#13B4CA

Color 3

#272EE2

Color 4

#634BFA

Color 5

#8A1FDE

Neutral colors

800

Neutral 800

#060606

700

Neutral 700

#212121

600

Neutral 600

#5B5B5B

500

Neutral 500

#9E9E9E

400

Neutral 400

#BCBCBC

300

Neutral 300

#DADADA

200

Neutral 200

#F5F5F5

100

Neutral 100

#FFFFFF

System colors

400

Blue 400

#086CD9

300

Blue 300

#1D88FE

200

Blue 200

#8FC3FF

100

Blue 100

#EAF4FF

400

Green 400

#11845B

300

Green 300

#05C168

200

Green 200

#7FDCA4

100

Green 100

#DEF2E6

400

Red 400

#DC2B2B

300

Red 300

#FF5A65

200

Red 200

#FFBEC2

100

Red 100

#FFEFF0

400

Orange 400

#D5691B

300

Orange 300

#FF9E2C

200

Orange 200

#FFD19B

100

Orange 100

#FFF3E4

Typography

Special headings

Display 1

Clarity City Extra Bold

102px / 0.990em

Donec etdolr odio pelle ntesqu.

Display 2

Clarity City Bold

60px / 1.167em

Donec et odio lom pellen tesqu diam.

Display 3

Clarity City Bold

44px / 1.182em

Donec et odio pellen tesqu diam lorem ipsum dolor.

Display 4

Clarity City Bold

28px / 1.429em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Display 5

Clarity City Extra Bold

80px / 1.113em

Donec etdolr odio pelle ntesqu.

Headings

Heading H1

Clarity City Bold

54px / 1.222em

Donec et odio dolor pelle ntesqu.

Heading H2

Clarity City Bold

38px / 1.316em

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Heading H3

Clarity City Bold

24px / 1.417em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

Heading H4

Clarity City Bold

22px / 1.273em

Donec et odio pellentesqu diam lorem ipsum dolor

Heading H5

Clarity City Bold

18px / 1.333em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Heading H6

DM Sans Bold

16px / 1.375em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Body

Body Large

Clarity City Regular

22px / 1.727em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Body Default

Clarity City Regular

18px / 1.667em

Body Small

Clarity City Regular

14px / 1.714em

Text single

400

DM Sans Regular

DM Sans Medium

DM Sans Bold

24px / 1.083em

Lorem ipsum dolor sit amet consectetur

300

DM Sans Regular

DM Sans Medium

DM Sans Bold

20px / 1.100em

Lorem ipsum dolor sit amet consectetur

200

DM Sans Regular

DM Sans Medium

DM Sans Bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

100

DM Sans Regular

DM Sans Medium

DM Sans Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

Clarity City

Lorem ipsum dolor sit amet consectetur

Text Link

Clarity City

Lorem ipsum dolor sit amet consectetur

Bullet List

Clarity City

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Numbered List

Clarity City

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Blockquote

Clarity City

28px / 1.821em

“At risus viverra adipiscing at in tellus integer feugiat nisl pretium fusce id velit ut tortor sagittis orci a scelerisque purus semper eget at lectus urna duis convallis porta nibh”