Style guide
Discover the design system behind MrHue, including brand colors, typography styles, UI components, and layout guidelines for a professional user experience.
Colors
Body color
#777777
Body font color two
#ffffffcc
Primary
#151515
Dark color
#050036
Grey 1
#f8f8f8
Grey 2
#d9d9d9
Grey 3
#f7f7f8
Logo
Logo
Favicons
Typography
Heading 1
Font weight : Medium
Font size : 5rem
Line height : 5.625rem
Heading 2
Font weight : Medium
Font size : 4.25rem
Line height : 4.875rem
Heading 3
Font weight : Medium
Font size : 3rem
Line height : 3.625rem
Heading 4
Font weight : Medium
Font size : 2rem
Line height : 2.625rem
Heading 5
Font weight : Medium
Font size : 1.5rem
Line height : 2.125rem
Heading 6
Font weight : Medium
Font size : 1.375rem
Line height : 2rem
Paragraph
All paragraph
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.
Medium text
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.
Small text
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.
Extra small text
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.
Icons
SVG Icon
Text alignments
Text left : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text center : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text right : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lists
- List item one text
- List item two text
- List item three text
Accordion
Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
Forms
section spacing
Section padding
Section padding top
Section padding bottom