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.

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.

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.

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.

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.

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.

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.

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.

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.

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.