Grids & Spacing

Following the 8-pt grid system, we utilize the scale to effectively enforce hierarchy and breathability between elements.

We follow a hand-crafted scale following an 8-pt grid system, making minor tweaks only when it’s awkward on a particular viewport. As a general rule, we trust our eyes and move in between the major scales set.

Typography

Heading 1 .desktop-header

H1

Heading

H2

Heading

H3

Heading

H4
Heading
H5
Heading
H6
Cart
.Label
.Uppercase text (Used in Cart)
.Menu Item Wrap + .Menu Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body Copy + Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Small Paragraph
Inline hyperlinkInline hyperlink
Link
  • First Item
  • Second Item
  • Third Item
Unordered list
Block Quote
Block Quote
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form
Rich Text Block

Type System

Our type system is designed to marry typographic styles with appropriate functions in the interface as well as the content. This creates a clear visual pattern for users to follow and makes the content flow smoothly.

We follow a hand-crafted scale following an 8-pt grid system, making minor tweaks only when it’s awkward on a particular viewport. As a general rule, we trust our eyes and move in between the major scales set.

For setting the font size, we sticked to pixels or rem units (root ems pulling from html root of 16px) — it’s the only way to guarantee that the scale works. Only the largest header on a page can take on a responsive size by adding a subclass combo (i.e., 5-8 VW for desktop views and larger; 10 VW for tablet views and smaller).

For setting the line heights, we use pixel units as the standard, but set an equivalent scale using percent and rems for responsiveness. (i.e., For smaller type sizes: 150%, 130%; For bigger type sizes: 110%, 100%, 90%, 85%.)

Type Scale for Headers

Class Name + Properties
Size
Line Height
Advert
DIN Pro Condensed
Uppercase
Tight Spacing: -2px
83 px
5.2 rem
78 px
85 %
4.875 rem
Slogan
DIN Pro Condensed Bold
Uppercase
Tight Spacing: -1px
72 px
4.5 rem
60 px
85%
1.5 rem
The quick brown fox  
News Feed
Mobile subhead small + condensed

Interface Headers

Header Desktop - H1
DIN Pro Condensed Bold
Uppercase
Tight Spacing: -0.5px
60 px
3.75 rem
52 px
83 %
3.25 rem
The quick brown fox jumps over
Mobile scale Starts here
Header Small
DIN Pro Condensed Bold
Uppercase
Tight Spacing: -0.5px
48 px
3 rem
44 px
90 %
3 rem
The quick brown fox jumps over the lazy dog
Subhead Small - H2
DIN Pro Condensed
36 px
2.25 rem
36 px
100 %
2.25 rem
The quick brown fox jumps over the lazy dog
Mobile Header - H3
DIN Pro Condensed Bold
Uppercase
32 px
2 rem
28 px
93 %
1.875 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead - H4
DIN Pro Medium
Uppercase
Wide Spacing: 1.5px
20 px
1.25 rem
24 px
120 %
1.5 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead Small - H5
DIN Pro Normal
Uppercase
Wide Spacing: 1.5px
15 px
0.95 rem
17 px
125 %
0.9375 rem
The quick brown fox jumps over the lazy dog
Class Name + Properties
Size
Line Height
*Just add subclass combo "Serif"
Advert + Serif
Blacker Display Light
ItalicUppercase
Tight Spacing: -2px
83 px
5.2 rem
78 px
85 %
4.875 rem
tablet size
60px
85%
Mobile size
48px
85%
The quick brown rainbows 
Slogan + Serif
Blacker Display Light
Uppercase
Tight Spacing: -1px
72 px
4.5 rem
60 px
85%
1.5 rem
The quick brown fox
Mobile size
38px
38px
The quick brown fox
Header Desktop + Serif - H1
Blacker Display Bold
Italic
Tight Spacing: -1px
60 px
6 vw
54 px
90 %
3.25 rem
The quick brown fox
Header Small + Serif
Blacker Display Bold
Tight Spacing: -1px
48 px
3 rem
48 px
100 %
3 rem
The quick brown fox jumps over the lazy dog
Mobile scale Starts here
Subhead Small + Serif
- H2

Blacker Display Medium
Italic
Tight Spacing : -0.75px
36 px
36 px
100 %
2.25 rem
The quick brown fox jumps over the lazy dog
Mobile Header + Serif - H3
Blacker Display Light
Uppercase
30 px
28 px
100 %
1.875 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead + Serif - H4
Blacker Display Medium
Tight Spacing: -0.5px
22 px
24 px
120 %
1.5 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead Small + Serif - H5
Blacker Display Light
Italic
17 px
125 %
0.9375 rem
15 px
The quick brown fox jumps over the lazy dog
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?
Class Name + Properties
Size
Line Height
*Just add subclass combo "Serif"
Advert + Serif
Blacker Display Light
ItalicUppercase
Tight Spacing: -2px
83 px
5.2 rem
78 px
85 %
4.875 rem
tablet size
60px
85%
Mobile size
48px
85%
The quick brown rainbows 
Slogan + Serif
Blacker Display Light
Uppercase
Tight Spacing: -1px
72 px
4.5 rem
60 px
85%
1.5 rem
The quick brown fox
Mobile size
38px
38px
The quick brown fox
Header Desktop + Serif - H1
Blacker Display Bold
Italic
Tight Spacing: -1px
60 px
6 vw
54 px
90 %
3.25 rem
The quick brown fox
Header Small + Serif
Blacker Display Bold
Tight Spacing: -1px
48 px
3 rem
48 px
100 %
3 rem
The quick brown fox jumps over the lazy dog
Mobile scale Starts here
Subhead Small + Serif
- H2

Blacker Display Medium
Italic
Tight Spacing : -0.75px
36 px
36 px
100 %
2.25 rem
The quick brown fox jumps over the lazy dog
Mobile Header + Serif - H3
Blacker Display Light
Uppercase
30 px
28 px
100 %
1.875 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead + Serif - H4
Blacker Display Medium
Tight Spacing: -0.5px
22 px
24 px
120 %
1.5 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead Small + Serif - H5
Blacker Display Light
Italic
17 px
125 %
0.9375 rem
15 px
The quick brown fox jumps over the lazy dog
Header Desktop - H1
DIN Pro Condensed Bold
Uppercase
Tight Spacing: -0.5px
60 px
3.75 rem
52 px
83 %
3.25 rem
The quick brown fox jumps over
Mobile scale Starts here
Header Small
DIN Pro Condensed Bold
Uppercase
Tight Spacing: -0.5px
48 px
3 rem
44 px
90 %
3 rem
The quick brown fox jumps over the lazy dog
Subhead Small - H2
DIN Pro Condensed
36 px
2.25 rem
36 px
100 %
2.25 rem
The quick brown fox jumps over the lazy dog
Mobile Header - H3
DIN Pro Condensed Bold
Uppercase
32 px
2 rem
28 px
93 %
1.875 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead - H4
DIN Pro Medium
Uppercase
Wide Spacing: 1.5px
20 px
1.25 rem
24 px
120 %
1.5 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead Small - H5
DIN Pro Normal
Uppercase
Wide Spacing: 1.5px
15 px
0.95 rem
17 px
125 %
0.9375 rem
The quick brown fox jumps over the lazy dog
Class Name + Properties
Size
Line Height
*Just add subclass combo "Serif"
Advert + Serif
Blacker Display Light
ItalicUppercase
Tight Spacing: -2px
83 px
5.2 rem
78 px
85 %
4.875 rem
tablet size
60px
85%
Mobile size
48px
85%
The quick brown rainbows 
Slogan + Serif
Blacker Display Light
Uppercase
Tight Spacing: -1px
72 px
4.5 rem
60 px
85%
1.5 rem
The quick brown fox
Mobile size
38px
38px
The quick brown fox
Header Desktop + Serif - H1
Blacker Display Bold
Italic
Tight Spacing: -1px
60 px
6 vw
54 px
90 %
3.25 rem
The quick brown fox
Header Small + Serif
Blacker Display Bold
Tight Spacing: -1px
48 px
3 rem
48 px
100 %
3 rem
The quick brown fox jumps over the lazy dog
Mobile scale Starts here
Subhead Small + Serif
- H2

Blacker Display Medium
Italic
Tight Spacing : -0.75px
36 px
36 px
100 %
2.25 rem
The quick brown fox jumps over the lazy dog
Mobile Header + Serif - H3
Blacker Display Light
Uppercase
30 px
28 px
100 %
1.875 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead + Serif - H4
Blacker Display Medium
Tight Spacing: -0.5px
22 px
24 px
120 %
1.5 rem
The quick brown fox jumps over the lazy dog
Mobile Subhead Small + Serif - H5
Blacker Display Light
Italic
17 px
125 %
0.9375 rem
15 px
The quick brown fox jumps over the lazy dog
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?

Type Scale for the Whole Site

Class Name + Properties
Size
Line Height
Body Copy + Large
DIN Pro Normal
Add emphasis
Use Case: Interface Deck
24 px
32 px
130 %
2 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Medium
DIN Pro Normal
Add emphasis
Use Case: Product Price
18 px
24 px
125 %
1.5 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy
DIN Pro Normal
Add emphasis
Use Case: Body Paragraph
16 px
22 px
125 %
1.375 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Tiny
DIN Pro Normal
Italic
Add emphasis
Use Case: Captions / Comments / Caveat

11 px
13 px
75 %
0.8125 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Class Name + Properties
Size
Line Height
Content Paragraph + Large
DIN Pro Normal
Add emphasis
Use Case: Interface Deck
24 px
32 px
130 %
2 rem
Well, the way they make shows is, they make one show. That show's called a pilot. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
Content Paragraph + Medium
DIN Pro Normal
Add emphasis
Use Case: Product Price
18 px
26 px
145 %
1.625 rem
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
Content Paragraph
DIN Pro Normal
Add emphasis
Use Case: Body Paragraph
16 px
24 px
150 %
1.5 rem
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Chapter One

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Ingredients List
  • - one cup coffee
  • - another one
  • - and another one

Image from Unsplash

Side bar 1

What if Tarantino wrote for us?

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.

We'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Strawberry fields forever. THE BEATLES.

Chapter Three

Because Samuel L. Ipsum says so

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr. Glass.

Character Monikers
  1. Pulp Fiction Jules Winnfield. (1994)
  2. The Hateful Eight Major Marquis Warren. (2015)
  3. Snakes on a Plane Neville Flynn. (2006)
  4. Jackie Brown Ordell Robbie. (1997)

My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

Utility Classes

To be used for styling components within sections, containers and divs. These classes are to be combined with one another to allow for styling flexibility between elements without the need for single-use names. Ultimately, this will allow for components to be congruent with one another while having their own visual identity tied to their function.

Text styling

.uppercase-text
.inline

.Tiny

to be used for elements in containers and responsive
Block Alignment
.align-left
.align-center
.tablet-centered
.mobile-centered
.full-width
.Margin top auto

Par width medium -- max width 60ch. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Par width medium -- max width 60ch. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Par width medium -- max width 60ch. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Contact link

Margins and Padding

Spacing

.Tablet-Margin right small

Grid Alignment
Full width grid
Full width grid

Colors

PRIMARY Colors

Color Name
HEX
HSL
Dark Sienna
#2E0505
360, 80, 10
Seal Brown
#591F0A
16, 80, 19
Chinese Red
#A52A12
16, 80, 19
Flame
#E75723
16, 80, 19
Unbleached Silk
#FADCD1
16, 80, 19
Boracay Tan
#994D00
16, 80, 19
Orange Peel
#FFA21F
16, 80, 19
Maximum Yellow
#FFC370
16, 80, 19
Navajo White
#FFDDAD
16, 80, 19
Blanched Almond
#FFEACC
16, 80, 19
Deep Molave
#994D00
16, 80, 19
Molave
#994D00
16, 80, 19
Olive
#994D00
16, 80, 19
Acid Green
#994D00
16, 80, 19
Beige Green
Beige Green

#994D00
16, 80, 19
Charcoal
#304050
210, 25, 25
Steel Teal
#5C8799
198, 40, 60
Pewter Blue
#8CACBA
198, 25, 64
Beau Blue
#BFD1D9
198, 25 , 85
Cultured (Blue)
#EFF3F5
198, 25, 95
Old Liver
#493737
360, 14, 25
Champorado

#775B59
4, 14, 41
Clay
#994D00
16, 80, 19
Rose Clay
#994D00
16, 80, 19
Platinum (Brown)
#994D00
16, 80, 19
Eerie Black
#18181B
16, 80, 19
Asphalt
#28262C
16, 80, 19
Raisin
#504C57
262, 7, 32
Old Lavander
#787283
261, 7, 48
Platinum (Lavander)
#E5E4E7
261, 7, 90

NEUTRAL Colors

Color Name
HEX
HSL
Eerie Black

#18181B
250, 7, 10
Asphalt
#994D00
16, 80, 19
Eerie Black

#994D00
16, 80, 19
Cultured (Blue)
Cultured (Blue)
#994D00
Quick Silver
Cultured
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?

Buttons

standard Button
standard Button+ primary

When using buttons use the following process:

Button Styling
Class: [Button Class]
Combo Class: [Primary/Secondary/Tertiary]
(e.g. Standard Button + Primary)

Position Styling Global Classes
Align Left -- margin-left: 0
Align Right -- margin-right: 0

Sizing Global Classes
Small Button
Large Button

Additional styling

Button small
Button small
Button Class
Primary
Secondary
Tertiary
Standard Button
DIN Pro Normal

Secondary and Tertiary buttons have a Cultured 50% opacity background
Button TextButton TextButton Text
Standard Arrow Button

Add → symbol

Shift+Spacebar x 4 between text and arrow
Button Text    →Button Text    →Button Text    →
Standard Arrow Button

Add → symbol

Shift+Spacebar x 4 between text and arrow
filter-fltr-active
Class Name + Properties
Size
Line Height
Body Copy + Large
DIN Pro Normal
Add emphasis
Use Case: Interface Deck
24 px
32 px
130 %
2 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Medium
DIN Pro Normal
Add emphasis
Use Case: Product Price
18 px
24 px
125 %
1.5 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy
DIN Pro Normal
Add emphasis
Use Case: Body Paragraph
16 px
22 px
125 %
1.375 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Tiny
DIN Pro Normal
Italic
Add emphasis
Use Case: Captions / Comments / Caveat

12 px
16 px
75 %
1 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?

Icons

Forms

Form Types:
Button Class
Primary
Secondary
Standard Button
DIN Pro Normal

Secondary and Tertiary buttons have a Cultured 50% opacity background
Standard Arrow Button

Add → symbol
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Class Name + Properties
Size
Line Height
Body Copy + Large
DIN Pro Normal
Add emphasis
Use Case: Interface Deck
24 px
32 px
130 %
2 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Medium
DIN Pro Normal
Add emphasis
Use Case: Product Price
18 px
24 px
125 %
1.5 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy
DIN Pro Normal
Add emphasis
Use Case: Body Paragraph
16 px
22 px
125 %
1.375 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Tiny
DIN Pro Normal
Italic
Add emphasis
Use Case: Captions / Comments / Caveat

12 px
16 px
75 %
1 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?
Class Name + Properties
Size
Line Height
Body Copy + Large
DIN Pro Normal
Add emphasis
Use Case: Interface Deck
24 px
32 px
130 %
2 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Medium
DIN Pro Normal
Add emphasis
Use Case: Product Price
18 px
24 px
125 %
1.5 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy
DIN Pro Normal
Add emphasis
Use Case: Body Paragraph
16 px
22 px
125 %
1.375 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
Body Copy + Tiny
DIN Pro Normal
Italic
Add emphasis
Use Case: Captions / Comments / Caveat

12 px
16 px
75 %
1 rem
~0123456789!&#
The quick brown fox jumps over the lazy dog
H1

It's a Strange Time for Travel

H2

Watch the Short Film by Team GRID

H3

Chapter One

H4

Heritage Category

H5
Subsection Name
H6
Got questions?

Logos

Eastern CommunicationsEastern CommunicationsEastern CommunicationsEastern Communications
Subscribe to our newsletter
Oops! Something went wrong while submitting the form.