Introduction

Typography

Class-based text styles for consistent hierarchy and readability.

Headings

The key difference between “heading-style-” and “All Headings” is that the latter includes the default browser margins. This makes “All Headings” especially useful for dynamically rendered rich text, where consistent spacing is needed without manual adjustments.

heading-style-h1

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

All H1 Headings

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

heading-style-h2

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

All H2 Headings

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

heading-style-h3

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

All H3 Headings

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

heading-style-h4

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

All H4 Headings

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

heading-style-h5

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

All H5 Headings

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

heading-style-h6

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

All H6 Headings

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

Text Classes

Text classes when typography style doesn't match the default HTML tag.

text-size-large

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

text-size-base

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

text-size-small

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

text-size-xsmall

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

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Text Special Classes

text-overline-large

text-overline-base

text-overline-small

Colors

This is some text inside of a div block.

Text Colors

text-color-dark

text-color-light

text-color-lime

text-color-cyan

text-color-purple

text-color-red

Background Colors

background-color-white

background-color-grey

background-color-navy

background-color-midnight

Layout Primitives

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Assets

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Patterns

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Code Embeds

This is some text inside of a div block.

Card Code Embed

This is some text inside of a div block.

Components

Buttons

This is some text inside of a div block.

Cards

This is some text inside of a div block.

Card: is-base

This is some text inside of a div block.

Heading

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is some text inside of a div block.

Heading

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is some text inside of a div block.

Heading

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Card: is-large (dark)

This is some text inside of a div block.

Heading

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Card: is-large (light)

This is some text inside of a div block.

Heading

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Pills

This is some text inside of a div block.

DFFRNT Style Guide

Introduction

Typography

Headings

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

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

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

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

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

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

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

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

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

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

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

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

Text Classes

Text Weights

Text Alignments

Text Special Classes

Colors

Text Colors

Background Colors

Layout Primitives

Heading

Assets

Heading

Patterns

Heading

Code Embeds

Card Code Embed

Components

Buttons

Cards

Card: is-base

Heading

Heading

Heading

Card: is-large (dark)

Heading

Card: is-large (light)

Heading

Navigation

Pills

ChangeLog