Colors Icon | Todyl
Colors
Primary colors
MXDR Accent
#3BA6D1
Secondary colors
Base Blue
#034B61
SASE
#8FB85B
SIEM
#FFBD5B
EDR
#E6683C
SOAR
#C45BA2
GRC
#5E62AC
LZT
#73C7A6
Light Gray
#F5F8FB
Neutral colors
Neutral 100
#061219
Neutral 200
#192D39
Neutral 300
#44525B
Neutral 400
#6A7276
Neutral 500
#B1BABB
Neutral 600
#C8D3D9
Neutral 700
#E4E9EA
Neutral 800
#FFFFFF
Gradient colors
Linear Top Heros
#061219 - #061219
Typography Icon | Todyl
Typography
TT Hoves
Regular
Medium
Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Download font
Text style
Size
Line Height
Weights
Display 9
60px
1.115em
Regular
Medium
Bold
Display 8
46px
1.125em
Regular
Medium
Bold
Display 7
38px
1.125em
Regular
Medium
Bold
Display 6
30px
1.125em
Regular
Medium
Bold
Display 5
24px
1.125em
Regular
Medium
Bold
Display 4
20px
1.125em
Regular
Medium
Bold
Display 3
18px
1.125em
Regular
Medium
Bold
Display 2
16px
1.125em
Regular
Medium
Bold
Display 1
14px
1.125em
Regular
Medium
Bold

Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

18px
1.150em
Regular
Medium
Bold

Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

16px
1.150em
Regular
Medium
Bold

Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

14px
1.150em
Regular
Medium
Bold
Shadows Icon | Todyl
Shadows
Neutral shadows
Small
Regular
Medium
Large
Todyl Custom Shadow
Small
Regular
Secondary color shadows
Small
Regular
Medium
Large
Logo Icon
Logo full
Buttons Icon | Todyl
Buttons
Primary button
Small
Default
Text
Icon
Number
Default
1
Default
1
Secondary button
Small
Default
Text
Icon
Number
Default
1
Default
1
Primary button Color variations
Links Icon | Todyl
Links
Links
Lists Icon | Todyl
Lists
Primary button
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Icon
Bullet
Number
Icon
Bullet
Number
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
Icons Icon | Todyl
Icons
Square Icons
Image Icon | TodylImage Icon | TodylEmail | TodylPhone Icon | Todyl
Social media square colored Icons
Social media square Icons
Logo Icon | Todyl
Icon font
Line icons rounded
Line icons squared
Filled icons
Social media square Icons
Avatars Icon | Todyl
Avatars
Square avatars
Default
24px
32px
40px
64px
120px
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
Circle avatars
Default
24px
32px
40px
64px
120px
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
John Nellen Avatar | Todyl
Avatar photos (replace)
John Nellen Avatar | TodylJames Pellizi Avatar | TodylChris Weibel Avatar | TodylDarrin Swan Avatar | TodylDavid Dewey Avatar | TodylRick Hensley Avatar | TodylMike Hanauer Avatar | TodylDavid Langlands Avatar | TodylZach Dressander Avatar | TodylKristen Guyler Avatar | TodylMaggie Dunstan Avatar | TodylSpeaker Guest Avatar | TodylDeveloper Avatar | Todyl
Inputs Icon | Todyl
Inputs
Inputs
Small
Default
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.
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.
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.
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
Small
Default
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Small
Default
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.
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Toggle Button
Placeholder
Placeholder
Upload
Image Icon | Todyl
Select a file to upload
Or drag and drop it here
Upload file
Badges Icon | Todyl
Badges
Badges
Primary
Neutral
Secondary
Tertiary
Primary
Neutral
Secondary
Tertiary
Small
Default
Small
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Tabs Icon | Todyl
Tabs
Tabs
Accordion Icon | Todyl
Accordions
Accordions

Accordion title


Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title


Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut. Sed eleifend tellus nonole tincidunt aliquet. Fusce aliquam mi felis.

Image Icon | Todyl
Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut.

Image Icon | Todyl
Accordion title

Lorem ipsum dolor sit amet, consectetur cdolor col adipiscing elit. Integer mattis nunc augue vel lacinia erat euismod ut.

Spacers Icon | Todyl
Spacers
Margin top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large