Styleguide
0

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.

Donec et odio pellentesqu diam volutpat commod.

Heading H2

Inter Bold
32px / 1.5em

Donec et odio pellentesqu diam volutpat commod.

Donec et odio pellentesqu diam volutpat commod.

Heading H3

Inter Bold
24px / 1.417em

Donec et odio pellentesqu diam volutpat commod.

Donec et odio pellentesqu diam volutpat commod.

Heading H4

Inter Bold
22px / 1.273em

Donec et odio pellentesqu diam volutpat commod.

Donec et odio pellentesqu diam volutpat commod.

Heading H5

Inter Bold
18px / 1.333em
Donec et odio pellentesqu diam volutpat commod.
Donec et odio pellentesqu diam volutpat commod.

Heading H6

Inter Bold
16px / 1.375em
Donec et odio pellentesqu diam volutpat commod.
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

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body Small

Inter Regular
12px / 1.833em

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.

Text single

400

Inter Regular
Inter Medium
Inter Bold
18px / 1.111em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

300

Inter Regular
Inter Medium
Inter Bold
16px / 1.125em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

200

Inter Regular
Inter Medium
Inter Bold
14px / 1.143em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

100

Inter Regular
Inter Medium
Inter Bold
12px / 1.167em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

50

Inter Regular
Inter Medium
Inter Bold
10px / 1.2em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
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
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

300

Inter Regular
Inter Medium
Inter Bold
16px / 1.125em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

200

Inter Regular
Inter Medium
Inter Bold
14px / 1.143em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

100

Inter Regular
Inter Medium
Inter Bold
12px / 1.167em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

50

Inter Regular
Inter Medium
Inter Bold
10px / 1.2em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
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

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
  1. Lorem ipsum dolor sit amet consectetur
  2. Posuere enim mi pharetra neque proin dic
  3. Mauris aliquet faucibus iaculis dui vitae ullamco

Avatar photos

32 x 32
40 x 40
48 x 48
80 x 80
120 x 120
160 x 160

Avatar letters

JC
32 x 32
JC
40 x 40
JC
48 x 48
JC
80 x 80
JC
120 x 120
JC
160 x 160
Inputs Icon - Webflow Template

Inputs

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

Primary badges

Small
Small
Small
Default
Default
Default
Large
Large
Large
Small
Small
Small
Default
Default
Default
Large
Large
Large
Small
Small
Small
Default
Default
Default
Large
Large
Large

Secondary badges

Small
Small
Small
Default
Default
Default
Large
Large
Large
Small
Small
Small
Default
Default
Default
Large
Large
Large
Small
Small
Small
Default
Default
Default
Large
Large
Large

Alert banners

Empty states

No Records Found - Dashly X Webflow Template
No records available
There are no records here to display
Action Completed - Dashly X Webflow Template
Action completed !
This action has been completed successfully !
Dismiss
There's Been An Error - Dashly X Webflow Template
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 - Dashly X Webflow Template
Notification alert
There are no records here to display
Icon Font Icon - Webflow Template

Icon fonts

Dashly Custom Icons

Line icons rounded

Line icons square

Filled icons

Social media icons

Popups

Preview popup
Preview popup
Preview popup
Preview popup
Preview popup
Preview popup
Preview popup
Preview popup
Preview popup

Explore our collection of 200+ Premium Webflow Templates