Logo & Brand
Design System
Brand Guidelines
When people interact with our content, product and services, we want them to feel (…). When people see something from our brand they think it is (…). When thinking about our brand, we don’t want people to feel (…). If our brand was a person, they would be described as (…).
Color Palettes
#17535C
#11939C
#30C0C0
#74E1DB
#E4F9F6
#620042
#A30664
#DA127D
#F364A2
#FFE3EC
#1F2933
#3E4C59
#7B8794
#CBD2D9
#F5F7FA
Button, Shapes And Background Colors
Button
HEX #30c0c0
Button Rollover
HEX #74e1db
Text Colors
Headings
h1–h3
HEX #1F2933
Subheads
h4
HEX #11939C
Paragraph Text
HEX #3e4c59
Rollover Colors
Button Rollover
HEX #74e1db
Typography
Roboto Regular
Aa
Roboto Bold
Aa
Roboto Black
Aa
Lora Regular
Aa
Font Famlies
Font Family Name font-family: 'Font family Name',Helvetica,Arial,Lucida,sans-serif;
Display Text
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Body Text
Egestas hac netus praesent aliquam phasellus aliquet efficitur nullam. Id viverra mattis egestas. Sample link at felis lacus conubia donec habitant. Iprimis maximus at felis lacus conubia donec habitant erat neque nullam dapibus malesuada elementum metus accumsa.
Aptent eros justo pellentesque placerat volutpat sapien conubia amet accumsan. Sollicitudin elit velit erat fusce magna sapien etiam malesuada nascetur.
Functional Text
Sample label
h1- Main Header
font-family: “Font Family Name”
Device Size: 36px | 33px | 45px
font-size: clamp(36px, 1vw + 29px, 45px);
line-height: 1.2;
h2 – Sub Header
font-family: “Font Family Name”
Device Size: 32px | 36px | 40px
font-size: clamp(32px, 1vw + 26px, 40px);
line-height: 1.25;
h3 – Section Header
font-family: “Font Family Name”
Device Size: 25px | 28px | 32px
font-size: clamp(25px, 1vw + 20px, 32px);
line-height: 1.3;
h4 – Paragraph Header
font-family: “Font Family Name”
Device Size: 22px | 25px | 25px
font-size: clamp(22px, 1vw + 20px, 25px);
line-height: 1.35;
h5 – Paragraph Header
font-family: “Font Family Name”
Device Size: 20px | 22px | 22px
font-size:clamp(20px, 1vw + 18px, 22px);
line-height: 1.5;
h6 – Specialty Header
font-family: “Font Family Name”
Device Size: 14px | 16px | 18px
font-size: clamp(14px, 1vw + 11px, 18px);
line-height: 1.6;
letter-spacing: .05em;
text-transform:uppercase;
Base Paragraph
font-family: “Font Family Name”
Device Size: 14px | 16px | 18px
font-size: clamp(14px, 1vw + 11px, 18px);
line-height: 1.7;
CSS Clamp Boundaries
Text CSS Clamp is based on 1140px > 467px
css master class : jfd-base-text
H1-Lorem Ipsum Title
Base Paragraph – 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.
H2-Duis aute irure dolor
In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
H3- Excepteur sint occaecat
Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
H4-Culpa qui officia
In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
H5-Culpa qui officia
In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur.
H6-Culpa qui officia
In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur.
This is a link to other information.
Buttons & Forms
Imagery
Icons & Blurbs
Your content goes here.
Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings.
Your content goes here. Edit or remove this text inline or in the module Content settings.
Your content goes here. Edit or remove this text inline or in the module Content settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings.