Using Client-First — Version 2.1

Style Guide

This guide is for how to use the basic template sections, components, and tags presented in a basic style.

Typography

Using fonts Tektur for headings and Noto Sans for paragraphs

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Font size : 4 REM | Line height : 1.1 | Letter spacing : Normal | Font Weight: 400 Normal

H1
heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

Font size : 3.5 REM | Line height : 1.2 | Letter spacing : Normal | Font Weight: 600 Semi Bold

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Font size : 3.5 REM | Line height : 1.2 | Letter spacing : Normal | Font Weight: 700 Bold

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Font size : 3 REM | Line height : 1.2 | Letter spacing : Normal | Font Weight: 700 Bold

heading-style-h4

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Font size : 1.25 REM | Line height : 1.5 | Letter spacing : Normal | Font Weight: 400 Normal

Buttons

Button combo class system.

button
is-brand
Button Text
button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-text
Button Text

Colors

#fffff

#e5e5e5

#ccc

#414141

#3a3a3a

#141414

#e50914

#c11119

#f50723