S1L Site

Typography

What meaning looks like

Synergy One Typography has been designed to be easy on the eyes. With contrast thats readable, clear and a pleasure to read. To make reading sections easier, all paragraphs extend their section at a 75% width. Messages should never be an obstacle for a user to read and understand.

h1 Header

Yellow underline is optional. 1.25rem equals 20px on desktop. 20px is large for desktop body copy, and the sans-serif font makes all body copy extremely easy to see for all ages, and makes the text extremely easy to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit at Synergy One Lending. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h2 Header

Yellow underline is optional. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h3 Header

Yellow underline is optional. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h4 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h5 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h6 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Right and Left Alignment

Responsive typography branding

The alteration of left and right alignment helps for visual stimulation. It’s a nice option for having a side bar for bullets, images, and tips related to the text on the opposing side.

h1 Header

1.25rem equals 20px on desktop. 20px is large for desktop body copy, and the sans-serif font makes all body copy clearly visible for all ages, and the text is extremely easy to read. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit at Synergy One Lending. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h2 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h3 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h4 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h5 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

h6 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Typography Scale

MAJOR THIRD TYPE SCALE

Synergy One Lending’s website uses a major third type scale (multiplication increments of 1.25). This gives a visual harmony to all text sections, and clearly speaks to the users satisfaction of viewing and reading all sections. All margin spacing has also been measured in this type scale.

The typography has 5 browser width based ‘break points’, which shift sizing down or up an increment according to the size of the device the site is being viewed on. They are Widescreen(+2400px), Desktop(+1200px), Tablet Extra(-1200px), Tablet(-1024px), and Mobile(-767px) width devices. If you decrease the width of your browser, the appropriate size numbers next to the headings below will adjust depending on the width of you browser.

Generally all typography sizing has a large size for Widescreen, a normal size for Desktop Tablet extra and tablet and finally a small size for mobile.
4.768rem/76.29px
3.815rem/61.04px
3.052rem/48.83px

h1 • Nunito Sans • 900

3.815rem/61.04px
3.052rem/48.83px
2.441rem/39.06px

h2 • Nunito Sans • 900

3.052rem/48.83px
2.441rem/39.06px
1.953rem/31.25px

h3 • Nunito Sans • 900

2.441rem/39.06px
1.953rem/31.25px
1.563rem/25.00px
h4 • Nunito Sans • 700
1.953rem/31.25px
1.563rem/25.00px
1.25rem/20.00px
h5 • Nunito Sans • 800
1.563rem/25.00px
1.25rem/20.00px
1.25rem/20.00px
h6 • Nunito Sans • 800

S1L Web Branding

Responsive typography branding

Synergy One Typography has been designed to be easy on the eyes. With contrast thats readable, clear and a pleasure to read. Messages should never be an obstacle for a user to read, digest, and understand.

Typography Colors

In Hex-Code Values

The typography colors have been arranged into 2 groups which have brightness and tone variations. 

Blacks

We have 3 variations of Black. Two tones of Off Black, which is good to reduce eye strain cause by heavy contrast, and a Pitch Black, to make the text pop out, when necessary.

500
#393939

Contrast Check:
500
#393939
500
#393939
500
#393939

700
#282828

Contrast Check:
300
#282828
300
#282828
300
#282828

900
#000000

Contrast Check:
50
#000000
50
#000000
50
#000000
This is an example of our 500 Black at 20px, 400 font weight
This is an example of our 700 Black at 20px, 400 font weight
This is an example of our 900 Black at 20px, 400 font weight

Whites

We have 3 variations of White. Two tones of Off White, which is good to reduce eye strain cause by heavy contrast, and a Pure White, to make the text pop out, when necessary.

50
#FFFFFF

Contrast Check:
50
#FFFFFF
50
#FFFFFF
50
#FFFFFF

300
#FBFAF6

Contrast Check:
300
#FBFAF6
300
#FBFAF6
300
#FBFAF6

500
#F8F6F6

Contrast Check:
500
#F8F6F6
500
#F8F6F6
500
#F8F6F6
This is an example of our 50 White with a 20px font size and 400 font weight
This is an example of our 300 White with a 20px font size and 400 font weight
This is an example of our 500 White with a 20px font size and 400 font weight

Colors With Fonts

For Links, the Primary Colors are used to signify that it may be clicked on. Also, S1l.com uses the other Accent Colors for website Links. Particularly for form text, which displays on Errors, Success, and Warning text on the forms.Last we have the standard shades of Grey as well.

Primary

The Primary Colors are used on all the interactive elements, CTA’s, links, inputs, active states, etc.

50
#FFDF4F

Contrast Check:
50
#FFDF4F
50
#FFDF4F
50
#FFDF4F

300
#FFD447

Contrast Check:
300
#FFD447
300
#FFD447
300
#FFD447

500
#FFC207

Contrast Check:
500
#FFC207
500
#FFC207
500
#FFC207

700
#EAB310

Contrast Check:
700
#EAB310
700
#EAB310
700
#EAB310

900
#D39F24

Contrast Check:
900
#D39F24
900
#D39F24
900
#D39F24

Accent A Design

The Accent A Color is used alongside the Primary to give a calming cool sensation that creates the perfect balance with Orange

50
#A8E6FF

Contrast Check:
50
#A8E6FF
50
#A8E6FF
50
#A8E6FF

300
#70D5FF

Contrast Check:
300
#70D5FF
300
#70D5FF
300
#70D5FF

500
#14BAFF

Contrast Check:
500
#14BAFF
500
#14BAFF
500
#14BAFF

700
#009BDB

Contrast Check:
700
#009BDB
700
#009BDB
700
#009BDB

900
#007AAC

Contrast Check:
900
#007AAC
900
#007AAC
900
#007AAC

Accent B
Sucess

This Secondary Accent Color is also used alongside the Primary to indicate to the user that the element is a secondary focus

50
#1AE7E0

Contrast Check:
50
#1AE7E0
50
#1AE7E0
50
#1AE7E0

300
#01D5CE

Contrast Check:
300
#01D5CE
300
#70D5FF
300
#70D5FF

500
#00B5AF

Contrast Check:
500
#00B5AF
500
#00B5AF
500
#00B5AF

700
#018F8A

Contrast Check:
700
#018F8A
700
#018F8A
700
#018F8A

900
#006C68

Contrast Check:
900
#006C68
900
#006C68
900
#006C68

Accent C
Warning

These colors depict an emotion of attention, generally gain attention or for warning text in a form field

50
#FFCD36

Contrast Check:
50
#FFCD36
50
#FFCD36
50
#FFCD36

300
#FFB833

Contrast Check:
300
#FFB833
300
#FFB833
300
#FFB833

500
#F8971F

Contrast Check:
500
#F8971F
500
#F8971F
500
#F8971F

700
#E87C00

Contrast Check:
700
#E87C00
700
#E87C00
700
#E87C00

900
#D46A00

Contrast Check:
900
#D46A00
900
#D46A00
900
#D46A00

Accent C Error

These colors depict an emotion of negativity, generally used across error states for form fields

50
#ED2000

Contrast Check:
50
#ED2000
50
#ED2000
50
#ED2000

300
#DA281D

Contrast Check:
300
#DA281D
300
#DA281D
300
#DA281D

500
#C20C00

Contrast Check:
500
#C20C00
500
#C20C00
500
#C20C00

700
#A40A00

Contrast Check:
700
#A40A00
700
#A40A00
700
#A40A00

900
#7D0700

Contrast Check:
900
#7D0700
900
#7D0700
900
#7D0700

Neutral

These colors are used for text colors, , backgrounds,, separators, modals, etc.

50
#F4F4F4

Contrast Check:
50
#F4F4F4
50
#F4F4F4
50
#F4F4F4

100
#ECECEC

Contrast Check:
100
#ECECEC
100
#ECECEC
100
#ECECEC

200
#D9D9D9

Contrast Check:
200
#D9D9D9
200
#D9D9D9
200
#D9D9D9

300
#C0C0C0

Contrast Check:
300
#C0C0C0
300
#C0C0C0
300
#C0C0C0

400
#A9A9A9

Contrast Check:
400
#A9A9A9
400
#A9A9A9
400
#A9A9A9

500
#8E8E8E

Contrast Check:
500
#8E8E8E
500
#8E8E8E
500
#8E8E8E

600
#7C7C7C

Contrast Check:
600
#7C7C7C
600
#7C7C7C
600
#7C7C7C

700
#5F5F5F

Contrast Check:
700
#5F5F5F
700
#5F5F5F
700
#5F5F5F

800
#323232

Contrast Check:
800
#323232
800
#323232
800
#323232

900
#121212

Contrast Check:
900
#121212
900
#121212
900
#121212