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 (…).
- #063ba5
- #e02b20
- #032363
- #e5e9ef
- #861913
Color Palette Subsets
Shades of #257e91
- #063ba5
- #053594
- #042f84
- #042973
- #032363
- #031d52
- #021742
- #011131
- #010b21
- #000510
Tints of #257e91
- #063ba5
- #1e4eae
- #3762b7
- #5075c0
- #6989c9
- #829dd2
- #9bb0db
- #b4c4e4
- #cdd7ed
- #e6ebf6
Tints of #032363
- #032363
- #1c3872
- #354e82
- #4e6591
- #677ba1
- #8191b1
- #9aa7c0
- #b3bdd0
- #ccd3df
- #e5e9ef
Tints of #e02b20
- #e02b20
- #c9261c
- #b32219
- #9c1e16
- #861913
- #701510
- #59110c
- #430c09
- #2c0806
- #160403
Color Palette Assignments
Assignments
- Primary Brand#063ba5
- Accent#e02b20
- Base Text#010b21
- Hyperlink / Primary Btn#063ba5
- Link Hover#e02b20
- Primary Button Hover#032363
- Secondary Button#e02b20
- Secondary Hover#861913
- Button Text#f8f4ec
Typography
Aa
Aa
Aa
Aa
Font Families
Font Family Name font-family: 'Font family Name',Helvetica,Arial,Lucida,sans-serif;
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
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.
Sample label
h1 – Main Heading
Font-Style Details (.headline)
.
h2 – Sub Header
Font-Style Details (.subhead-lg)
.
h3 – Section Header
Font-Style Details (.subhead-md)
.
h4 – Paragraph Header
Font-Style Details (.subhead-reg)
.
h5 – Paragraph Header
Font-Style Details (.subhead-sm)
.
h6 – Specialty Header
Font-Style Details (.subhead-x-sm)
.
Base Paragraph (.base-text)
Font-Style Details
.
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
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.