Colors

White

#ffffff

Black

#000000

Neutral 25

#fcfcfd

Neutral 50

#f9fafb

Neutral 100

#f2f4f7

Neutral 200

#eaecf0

Neutral 300

#d0d5dd

Neutral 400

#98a2b3

Neutral 500

#667085

Neutral 600

#475467

Neutral 700

#344054

Neutral 800

#1d2939

Neutral 900

#101828

Primary 25

#f5fbff

Primary 50

#f0f9ff

Primary 100

#e0f2fe

Primary 200

#b9e6fe

Primary 300

#7cd4fd

Primary 400

#36bffa

Primary 500

#0ba5ec

Primary 600

#0086c9

Primary 700

#026aa2

Primary 800

#065986

Primary 900

#0b4a6f

Success 100

#d3f8df

Success 700

#087443

Success 900

#084c2e

Warning 100

#fef0c7

Warning 700

#b54708

Warning 900

#7a2e0e

Error 100

#fee4e2

Error 700

#b42318

Error 900

#7a271a

Typography

The bright sun cast long shadows across the deserted street

Heading XXLarge - 3.5rem / 1.2

The bright sun cast long shadows across the deserted street

Heading XLarge - 3rem / 1.2

The bright sun cast long shadows across the deserted street

Heading Large - 2.5rem / 1.2

The bright sun cast long shadows across the deserted street

Heading Medium - 2rem / 1.3

The bright sun cast long shadows across the deserted street

Heading Small - 1.5rem / 1.4

The bright sun cast long shadows across the deserted street

Heading XSmall - 1.25rem / 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nunc, efficitur eget sem at, fringilla euismod elit. In hac habitasse platea dictumst. Curabitur nisl lacus, sagittis ut consectetur sed, congue vel felis. Vivamus id ante enim. Curabitur porta pellentesque tortor ut molestie.

Body text Large - 1.25rem / 1.5

Body text Medium - 1.125rem / 1.5

Body text Regular - 1rem / 1.5

Body text Small - 0.875rem / 1.5

Body text Tiny - 0.75rem / 1.5

Heading Style H1

Heading Style H2

Heading Style H3

Heading Style H4

Heading Style H5

Heading Style H6

Buttons

Primary Large

Secondary Large

Primary Small

Secondary Small

Link

Primary Large

Seconday Large

Seconday Large

Seconday Large

Link

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

The white water rafting trip was suddenly halted by the unexpected brick wall

Lorem ipsum dolor sit amet
Nam ut faucibus leo
Orci varius natoque penatibus
et magnis dis parturient montes

The tree fell unexpectedly short

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus euismod turpis sit amet finibus facilisis. Donec id ornare lorem, id pulvinar sem. Pellentesque eget sapien nisl. Fusce accumsan justo non massa commodo, at sollicitudin lectus accumsan. Vestibulum porta lorem sed elit tempus rhoncus. Praesent feugiat nibh at nibh vehicula, sed rhoncus arcu porttitor. Phasellus magna est, gravida at ornare vel, tempus vel sapien. Sed aliquet ipsum mollis tincidunt consequat. Nullam pharetra est est, nec mattis nulla pharetra vel. Duis nec efficitur enim.

tempus vel sapien. Sed aliquet ipsum mollis tincidunt consequat. Nullam pharetra est est, nec mattis nulla pharetra vel. Duis nec efficitur enim.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The old apple revels in its authority

Phasellus magna est, gravida at ornare vel, tempus vel sapien. Sed aliquet ipsum mollis tincidunt consequat. Nullam pharetra est est, nec mattis nulla pharetra vel. Duis nec efficitur enim.

Lorem ipsum dolor sit amet
Nam ut faucibus leo
Orci varius natoque penatibus
et magnis dis parturient montes

‍

A glittering gem is not enough

Phasellus magna est, gravida at ornare vel, tempus vel sapien. Sed aliquet ipsum mollis tincidunt consequat. Nullam pharetra est est, nec mattis nulla pharetra vel. Duis nec efficitur enim.

‍