Styleguide

Dashly UI Kit

Dashly X is our premium portal & dashboard Webflow Template & UI Kit with 40+ pages and 60+ views. It was designed by the team of Webflow Designers & Developers at BRIX Templates.

Get template

Primary colors

Color 1

#1476FF

Secondary colors

Color 1

#1045CC

Color 2

#F4F7FF

Color 3

#F6F1FF

Color 4

#9240FB

Color 5

#FFF7E8

Color 6

#FFB016

Color 7

#FFF4F4

Color 8

#FF414C

Color 9

#EEF9FF

Color 10

#68CAFF

Color 11

#EDFBEE

Color 12

#45C74E

Neutral colors

Neutral 800

#0B0E2C

Neutral 700

#303350

Neutral 600

#6F7182

Neutral 500

#989AAD

Neutral 400

#CACBD7

Neutral 300

#E9EAF3

Neutral 200

#F7F9FC

Neutral 100

#FFFFFF

System colors

Blue 400

#086CD9

Blue 300

#1D88FE

Blue 200

#8FC3FF

Blue 100

#EAF4FF

Green 400

#13A570

Green 300

#14CA74

Green 200

#BDE5CD

Green 100

#E4FAED

Red 400

#DC2B2B

Red 300

#FF5A65

Red 200

#FFBEC2

Red 100

#FFEFF0

Orange 400

#D5691B

Orange 300

#FF9E2C

Orange 200

#FFD19B

Orange 100

#FFF3E4

Special headings

Display 1

Inter Medium

78px / 1.077em

Donec et odio pellentesqu diam.

Display 2

Inter Bold

54px / 1.222em

Donec et odio pellent diam volutpa com.

Display 3

Inter Bold

44px / 1.182em

Donec et odio pellent diam volutpa com lorem.

Display 4

Inter Bold

22px / 1.455em

Donec et odio pellent diam volutpa com lorem.

Headings

Heading H1

Inter Bold

42px / 1.286em

Donec et odio pellentesqu diam volutpat commod.

Heading H2

Inter Bold

32px / 1.5em

Donec et odio pellentesqu diam volutpat commod.

Heading H3

Inter Bold

24px / 1.417em

Donec et odio pellentesqu diam volutpat commod.

Heading H4

Inter Bold

22px / 1.273em

Donec et odio pellentesqu diam volutpat commod.

Heading H5

Inter Bold

18px / 1.333em

Donec et odio pellentesqu diam volutpat commod.

Heading H6

Inter Bold

16px / 1.375em

Donec et odio pellentesqu diam volutpat commod.

Body

Body Large

Inter Regular

18px / 1.778em

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

14px / 1.857em

Body Small

Inter Regular

12px / 1.833em

Text single

400

Inter Regular

Inter Medium

Inter Bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

300

Inter Regular

Inter Medium

Inter Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

200

Inter Regular

Inter Medium

Inter Bold

14px / 1.143em

Lorem ipsum dolor sit amet consectetur

100

Inter Regular

Inter Medium

Inter Bold

12px / 1.167em

Lorem ipsum dolor sit amet consectetur

50

Inter Regular

Inter Medium

Inter Bold

10px / 1.2em

Lorem ipsum dolor sit amet consectetur

Text single Uppercase

400

Inter Regular

Inter Medium

Inter Bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

300

Inter Regular

Inter Medium

Inter Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

200

Inter Regular

Inter Medium

Inter Bold

14px / 1.143em

Lorem ipsum dolor sit amet consectetur

100

Inter Regular

Inter Medium

Inter Bold

12px / 1.167em

Lorem ipsum dolor sit amet consectetur

50

Inter Regular

Inter Medium

Inter Bold

10px / 1.2em

Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

Inter

14px / 1.857em

Lorem ipsum dolor sit amet consectetur

Text Link

Inter

14px / 1.857em

Lorem ipsum dolor sit amet consectetur

Bullet List

Inter

14px / 1.857em

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

Numbered List

Inter

14px / 1.857em

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

Button primary

Secondary buttons

Primary circle buttons



Secondary circle buttons



Download Apps buttons

Links

Avatar photos

32 x 32

40 x 40

48 x 48

80 x 80

120 x 120

160 x 160

Avatar letters

32 x 32

40 x 40

48 x 48

80 x 80

120 x 120

160 x 160

Inputs

Input texts

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text area

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Checkboxes

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radio buttons

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Toggle button

Upload Box

Drop your image here or browse your files

Max file size 10MB. Supports PNG, JPG and PDF

Primary badges

Small

Default

Large

Small

Default

Large

Small

Default

Large

Secondary badges

Small

Default

Large

Small

Default

Large

Small

Default

Large

Alert banners

Empty states

No Records Found - Dashly X Webflow Template

No records available

There are no records here to display

Action completed !

This action has been completed successfully !

Dismiss

There's been an error

There are no records here to display

No Records Available - Dashly X Webflow Template

No records found

There are no records here to display

Notification alert

There are no records here to display

Icons

Square icons

Icon fonts

Dashly Custom Icons









































































































Line icons rounded















































































































































Line icons square















































































































































Filled icons





















































































































Social media icons

Popups

Preview popup