Typography

Headings Font Family

Font Family

Poppins

Poppins is the standard font to be used for all headlines, titles, and sub-headings.

Normal

400

Semi Bold

600

Bold

700

Extra Bold

800

Download Google Font

Body Font Family

Font Family

Inter

Inter is the standard font to be used for all body and block text.

Normal

400

Bold

700

Download Google Font

HTML Headings Tags

HTML tags define the default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Heading Classes

Use heading classes when typography style does not match the default HTML tag.

text-title-xxl

Sample text helps you understand how real text may look.

text-sub-title-xl

Sample text helps you understand how real text may look.

text-heading-1

Sample text helps you understand how text may look.

text-heading-2

Sample text helps you understand how it will look.

text-heading-3

Sample text helps you understand how text may look.

text-heading-4

Sample text helps you understand how real text may look.

text-heading-5

Sample text helps you understand how real text may look.

text-heading-6

Sample text helps you understand how real text may look.

Other HTML Tags

Body (All Pages)

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.

All Paragraphs

All Links

Text Link

All Block Quotes

Sample text 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.

All Unordered Lists

↳

All List Items

Sample text is being used as a placeholder for real text that is normally present as a placeholder for real text that is normally as a placeholder for real text that is normally as a placeholder for real text that is normally as a placeholder for real text that is normally
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Ordered Lists

↳

All List Items

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present as a placeholder for real text that is normally as a placeholder for real text that is normally as a placeholder for real text that is normally as a placeholder for real text that is normally

Text Size Classes

text-size-small

text-size-default

text-size-large

Text Weight Classes

text-weight-bold

This is bold text

text-weight-normal

This is normal text

Text Style Classes

text-style-italic

This is italic text

text-overline

overline text

text-style-allcaps

This is allcaps text

text-style-nowrap

text-style-underline

This is underlined text

Colors

Brand Colors

primary-fill

Primary

#2f7794

primary-light-fill

Primary Light

#60a4be

Neutral Background Color Classes

grey-dark-fill

Grey Dark

#282828

grey-med-fill

Grey Med

#777777

grey-light-fill

Grey Light

#CCCCCC

grey-lightest-fill

Grey Lightest

#F5F5F5

Text Color Classes

text-color-primary

This is dark text

text-color-dark

This is dark text

text-color-med-grey

This is grey text

text-color-white

This is white text

text-color-success

This is success text

text-color-error

This is error text

Background Colors

Solid Background Colors

background-color-white

background-color-lightest-grey

Buttons

button-dark

button-large

Button Dark

button-dark

Button Dark

button-dark

button-small

Button Dark

button-outline

button-large

Button Outline

button-outline

Button Outline

button-small

button-outline

Button Outline

Link Block +

button-dark

Icon Button

Link Block +

button-outline

Icon Button

button-light

Button Text Button Text Button Text

Link Block +

button-light

button-ghost

See Expertise

Form Elements

Text Inputs

Text Field

field-wrapper

↳

Field Label

↳

input-field-style

Name

Number Field

field-wrapper

↳

Field Label

↳

input-field-style

Zip Code

Phone Field

field-wrapper

↳

Field Label

↳

input-field-style

Phone

Email Field

field-wrapper

↳

Field Label

↳

input-field-style

Email Address

Select Field

field-wrapper

↳

Field Label

↳

input-field-style

Dropdown

Textarea Field

input-field-style

textarea

Textarea

Single Checkbox

field-wrapper

↳

Checkbox Field

↳

Checkbox

↳

Checkbox Label

Checkbox

Checkbox Group

field-wrapper

↳

Checkbox Field

↳

Checkbox

↳

Checkbox Label

Checkbox

Single Radio

field-wrapper

↳

Radio Button Field

↳

Radio Buttn

↳

Radio Label

Radio

Single Radio

field-wrapper

↳

Radio Button Field

↳

Radio Buttn

↳

Radio Label

Radio

Submit Button

button-aqua

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Other Elements

All Figures

↳

All Figure Captions

Placeholder.com placeholder image — Styled Caption Text

All Images

image-full-width

code-block

<!DOCTYPE HTML>
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

tag-wrapper

↳

tag

Agile

Scrum

Design Thinking

UX Research

System Architecture

Digital Transformation

Product Management

Microsoft 365

React JS

AI/ML

tag-wrapper

↳

tag-category

Colors Typography Buttons Forms

card-grey-large

card-grey-medium

card-grey-small

white-card-shadow

This is a white card with a shadow

Style Guide

Typography

Poppins

Inter

HTML Headings Tags

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Classes

Sample text helps you understand how real text may look.

Sample text helps you understand how real text may look.

Sample text helps you understand how text may look.

Sample text helps you understand how it will look.

Sample text helps you understand how text may look.

Sample text helps you understand how real text may look.

Sample text helps you understand how real text may look.

Sample text helps you understand how real text may look.

Other HTML Tags

Text Size Classes

Text Weight Classes

Text Style Classes

Colors

Brand Colors

Neutral Background Color Classes

Text Color Classes

This is dark text

This is dark text

This is grey text

This is white text

This is success text

This is error text

Background Colors

Solid Background Colors

Buttons

Form Elements

Other Elements

Chromatica Style Guide