TYPOGRAPHY

SYSTEM

Bases:

Base Color: Bone
Base Alignment: Center

Color Classes:

Color Warm Sand

Color Sea Green

Color Navy

Color White

Alignment:

Align Left

HTML Tag: All H1 Headings

Font: Sea Font
Capitalize: All Caps
Use: Hero / key campaign title

Desktop

Font Size: 6rem
Line Height: 1.05
Weight: 400 - Normal
Letter Spacing: 0em

Mobile

Font Size: 2.5rem
Line Height: 1.1
Weight: 400 - Normal
Letter Spacing: -0.02em

my heading 1

my heading 1

Class: Color Sea Green

my heading 1

Class: Color Warm Sand

my heading 1

Class: Color Navy

my heading 1

Class: Color White

my heading 1

Class: Align Left

HTML Tag: All H2 Headings

Font: Sea Font
Capitalize: Every Word
Use: Main sections

Desktop

Font Size: 3rem
Line Height: 1.1
Weight: 500 - Medium
Letter Spacing: 0.008em

Mobile

Font Size: 2.25rem
Line Height: 1.18
Weight: 400 - Normal
Letter Spacing: 0.008em

my heading 2

my heading 2

Class: Color Sea Green

my heading 2

Class: Color Warm Sand

my heading 2

Class: Color Navy

my heading 2

Class: Color White

my heading 2

Class: Align Left

HTML Tag: All H3 Headings

Font: Canela
Capitalize: Every Word
Use: Editorial headings / featured menu blocks

Desktop

Font Size: 2rem
Line Height: 1.15
Weight: 400 - Normal
Letter Spacing: 0em

Mobile

Font Size: 1.5rem
Line Height: 1.15
Weight: 400 - Normal
Letter Spacing: 0em

my heading 3

my heading 3

Class: Color Sea Green

my heading 3

Class: Color Warm Sand

my heading 3

Class: Color Navy

my heading 3

Class: Color White

Heading 3

Class: Align Left

HTML Tag: All H4 Headings

Font: Canela

Use: Subtitles / categories

Desktop

Font Size: 1.5rem
Line Height: 1.25
Weight: 700 - Bold
Letter Spacing: 0em

Mobile

Font Size: 1.3rem
Line Height: 1.35
Weight: 700 - Bold
Letter Spacing: 0.02em

Heading 4

Heading 4

Class: Color Sea Green

Heading 4

Class: Color Warm Sand

Heading 4

Class: Color Navy

Heading 4

Class: Color White

Heading 4

Class: Align Left

HTML Tag: All H5 Headings

Font: Gill Sans Nova
Capitalize: All Caps
Use: Labels / cards / schedules

Desktop

Font Size: 1.125rem
Line Height: 1.35
Weight: 700 - Bold
Letter Spacing: 0em

Mobile

Font Size: 1rem
Line Height: 1.45
Weight: 700 - Bold
Letter Spacing: 0.03em

my Heading 5
my Heading 5

Class: Color Sea Green

my Heading 5

Class: Color Warm Sand

my Heading 5

Class: Color Navy

my Heading 5

Class: Color White

my Heading 5

Class: Align Left

HTML Tag: All H6 Headings

Font: Gill Sans Nova (All caps)

Use: Metadata / captions / UI

Desktop

Font Size: 1.5rem
Line Height: 1.4
Weight: 400 - Normal
Letter Spacing: 0.02em

Mobile

Font Size: 1rem
Line Height: 1.5
Weight: 400 - Normal
Letter Spacing: 0.02em

Heading 6
Heading 6

Class: Color Sea Green

Heading 6

Class: Color Warm Sand

Heading 6

Class: Color Navy

Heading 6

Class: Color White

Heading 6

Class: Align Left

HTML Tag: Paragraph

Font: Canela

Desktop

Font Size: 1.1rem
Line Height: 1.6
Weight: 300 - Light
Letter Spacing: 0.02em

Mobile

Font Size: 0.95rem
Line Height: 1.7
Weight: 300 - Light
Letter Spacing: 0.02em

Paragraph

Class: Paragraph

Paragraph

Class: Color Sea Green

Paragraph

Class: Color Warm Sand

Paragraph

Class: Color Navy

Paragraph

Class: Color White

Paragraph

Class: Align Left

HTML Tag: Paragraph + Class: Paragraph Small

Font: Canela

Desktop

Font Size: 0.875rem
Line Height: 1.4
Weight: 400 - Normal
Letter Spacing: 0.02em

Mobile

Font Size: 0.8rem
Line Height: 1.6
Weight: 400 - Normal
Letter Spacing: 0em

Paragraph

Class: Paragraph Small

Paragraph

Class: Paragraph Small + Color Sea Green

Paragraph

Class: Paragraph Small + Color Warm Sand

Paragraph

Class: Paragraph Small + Color Navy

Paragraph

Class: Paragraph Small + Color White

Paragraph

Class: Paragraph Small + Align Left

HTML Tag: All Links

Font: Canela

Use:

Desktop

Font Size: 1.1rem
Line Height: 1.6
Weight: 300 - Light
Letter Spacing: 0.02em

Mobile

Font Size: 0.95rem
Line Height: 1.7
Weight: 300 - Light
Letter Spacing: 0.02em

Happily created by Caramelo

Happily created by Caramelo

Class: Color White

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

Text link

Bold text

Emphasis

Superscript

Subscript