Webflow Style Guide

Agentbox is our ultimate startup Webflow Template & UI Kit designed for modern tech startups looking to launch an amazing website. It was designed & developed by the BRIX Agency team.

Get template Back to home

Colors

Accent color

Primary 1

#1D24E0

Secondary colors

Color 1

Teal 800

#98C1C2

Color 2

Teal 700

#ADCDCE

Color 3

Teal 600

#C1DADA

Color 4

Teal 500

#CCE0E1

Color 5

Teal 400

#D6E6E7

Color 6

Teal 300

#E0EDED

Color 7

Teal 200

#EBF3F3

Color 8

Teal 100

#F5F9F9

Color 2

#08415C

Color 3

#21546D

Color 4

#537A8D

Color 5

#84A0AE

Color 6

#9DB4BE

Color 7

#B5C6CE

Color 8

CFDADF

Neutral colors

800

Neutral 800

#000000

700

Neutral 700

#273135

600

Neutral 600

#6B787F

500

Neutral 500

#A0AFB7

400

Neutral 400

#C8D1D6

300

Neutral 300

#E2E6E9

200

Neutral 200

#F1F5F8

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

Kumbh Sans Bold

72px / 1.125em

Donec etdolr odio pelle ntesqu.

Display 2

Kumbh Sans Bold

56px / 1.214em

Donec et odio lom pellen tesqu diam.

Display 3

Kumbh Sans Bold

42px / 1.286em

Donec et odio pellen tesqu diam lorem ipsum dolor.

Display 4

Kumbh Sans Bold

28px / 1.429em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Headings

Heading H1

Kumbh Sans Bold

36px / 1.278em

Donec et odio dolor pelle ntesqu.

Heading H2

Kumbh Sans Bold

30px / 1.333em

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Heading H3

Kumbh Sans Bold

24px / 1.417em

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

Heading H4

Kumbh Sans Bold

20px / 1.500em

Donec et odio pellentesqu diam lorem ipsum dolor

Heading H5

Kumbh Sans Bold

18px / 1.556em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Heading H6

Kumbh Sans Bold

16px / 1.625em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Heading H7

Kumbh Sans Bold

18px / 1.000em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Body

Body Large

Inter Regular

20px / 1.700em

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

Inter Regular

18px / 1.667em

Body Small

Inter Regular

16px / 1.750em

Text single

500

Inter Regular

Inter Medium

Inter Bold

28px / 1.357em

Lorem ipsum dolor sit amet consectetur

400

Inter Regular

Inter Medium

Inter Bold

26px / 1.385em

Lorem ipsum dolor sit amet consectetur

300

DM Sans Regular

DM Sans Medium

DM Sans Bold

22px / 1.273em

Lorem ipsum dolor sit amet consectetur

200

Inter Regular

Inter Medium

Inter Bold

20px / 1.300em

Lorem ipsum dolor sit amet consectetur

100

Inter Regular

Inter Medium

Inter Bold

18px / 1.000em

Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

Inter

Lorem ipsum dolor sit amet consectetur

Text Link

Inter

Lorem ipsum dolor sit amet consectetur

Bullet List

Inter

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

Numbered List

Inter

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

Blockquote

Inter

20px / 1.700em

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Image & Caption

Text Uppercase

Inter

Lorem ipsum dolor sit amet consectetur

Text Strikethrough

Inter

Lorem ipsum dolor sit amet consectetur

Text Underline

Inter

Lorem ipsum dolor sit amet consectetur

Shadows

General shadows

Shadow 01

Shadow 02

Shadow 03

Shadow 04

Shadow 05

Shadow 06

Button shadows

Button color 01

Button color 02

Button color 03

Button white 01

Button white 02

Button white 03

Buttons

Primary buttons

Button Small

Button Default

Button Large

Button Small

Button Default

Button Large

Secondary buttons

Button Small

Button Default

Button Large

Button Small

Button Default

Button Large

Primary circle buttons



Secondary circle buttons



Download Apps buttons

Links

Badges

Primary badges

Small

Badge Small

Default

Badge Default

Large

Badge Large

Small

Badge Small

Default

Badge Default

Large

Badge Large

Small

Badge Small

Default

Badge Default

Large

Badge Large

Secondary badges

Small

Badge Small

Default

Badge Default

Large

Badge Large

Small

Badge Small

Default

Badge Default

Large

Badge Large

Small

Badge Small

Default

Badge Default

Large

Badge Large