Brand Style Guide
Colors
This is the brand color palette
Color Dark
#181D24
Text Color Dark
#151515
Color Dark Transparent
#1E1D1E / A15
Color Light
#F2F2F2
Text Color Light
#F2F2F2
Color Light Transparent
#F2F2F2 / A15
Line color 01
#089CC3
Line color 02
#5ECFF9
Line color 03
#BC82DC
Line color 04
#DC82A9
Line color 05
#B4DC82
Glass
#F2F2F2 / A87
Typography
HTML Heading tags
Fonts: Satoshi, System-UI, Merriweather (for direct medical references.)
H1 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 41px / 130%
H2 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 34px / 130%
H3 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 28px / 130%
H4 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 23px / 130%
H5 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 19px / 140%
H6 - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 16px / 140%
Heading Classes
Use class prefix heading - on H1, H2, H3, or any other piece of text to change it to a specific heading size.
Heading Xlarge - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 41px / 130%
Looks like H1
Heading Large - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 34px / 130%
Looks like H2
Heading Big - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 28px / 130%
Looks like H3
Heading Medium - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 23px / 130%
Looks like H4
Heading Small - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 19px / 140%
Looks like H5
Heading Tiny - Aa Bb Cc
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. Nunc ut sem vitae risus tristique posuere.
Satoshi Bold 16px / 140%
Looks like H6
Paragraphs
Paragraphs and other common text elements. If you edit the styles here, they will change across the website.
Paragraph Normal - System-UI Normal 16px / 180%
Paragraph Small - System-UI Normal 14px / 180%
Rich Text
If you edit the block quote style here, it will change across the website.
A Rich Text Element
The rich text element allows you to create and format:
- headings,
- paragraphs,
- blockquotes,
- images
- video
... All in one place instead of adding and formatting them individually. Just double-click and easily create content.
Static and dynamic content editing
Pelentesque habitant morbi tristique senectus:
- Item 1
- Item 2
- Item 3
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.