Styleguide

Typography + Buttons

TOP LEVEL

Freight Display

H1, H2, H3

 

Proxima Nova

H4, Paragraphs, Misc, Mono, Buttons

Lightest 1: .white

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Lightest 2: .white-bold

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Light 1: .light

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Light 2: .light-bold

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Bright 1: .bright-inverse

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Bright 2: .bright

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Dark 1: .dark

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Dark 2: .dark-bold

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Darkest 1: .black

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button

Darkest 2: .black-bold

This Is A Headline One

This Is A Headline Two

This Is A Headline Three

This Is A Headline FOUR

This is the paragraph 1 style. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

This is the paragraph 2 style. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus.

This is the paragraph 3 style. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

This is the monospaced style. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Primary Button
Secondary Button
Tertiary Button