Text & Background Styles

NRF Test
Text & Background Styles

Text Styles

H1 - Page Title

Poppins semibold 42px #171717

H2 - The quick brown fox jumped over the lazy dog

Poppins semibold 30px #171717

H3 - The quick brown fox jumped over the lazy dog

Poppins semibold 24px #171717

H4 - The quick brown fox jumped over the lazy dog

Poppins semibold 20px #171717

Standard text - The quick brown fox jumped over the lazy dog

Poppins regular 16px #171717

Small text - The quick brown fox jumped over the lazy dog

Poppins regular 13px #171717

Caption text - The quick brown fox jumped over the lazy dog

Poppins regular 13px #696969

 

Link colors - The link color is #006B99. This has been contrast-tested and checked according to WCAG 2 standards and passes link-to-body-text, link-to-background and body-text-to-background for all specified background colors below. The hover state is #009DE0 and passes WCAG 2 standards for link-to-body-text-standards.

Background Styles

Background style 1 is colored #f2f2f2 with rounded corners and a slight box shadow.

border-radius:3px;
box-shadow:5px 5px rgba(0,0,0,0.02);

Background style 1 is colored #d8e8ef with rounded corners and a slight box shadow.

border-radius:3px;
box-shadow:5px 5px rgba(0,0,0,0.03);

 

Background style 1 is body color (#FFF) with a 3-pixel #d8e8ef stroke with rounded corners and a slight box shadow.

border:3px;
border-color:#d8e8ef; border-radius:3px;
box-shadow:5px 5px rgba(0,0,0,0.02);