Style Guide

A 72 Character Bigger Description Of Your Page Detail Goes Here.

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.