Text styles

Heading H1

Suisse Int'l Medium 72px/100%

Heading H2

Suisse Int'l Semi Bold 40px/129.99999523162842%

Heading H3

Suisse Int'l Semi Bold 32px/129.99999523162842%

Heading H4

Suisse Int'l Semi Bold 24px/129.99999523162842%

Heading H5

Suisse Int'l Semi Bold 18px/129.99999523162842%

Heading H6

Suisse Int'l Semi Bold 16px/129.99999523162842%

Hero subtitle

Suisse Int'l Light 20px/160.0000023841858%

Header subtitle

Suisse Int'l Light 18px/160.0000023841858%

Body Large

Suisse Int'l Regular 16px/160.0000023841858%

Body Medium

Main paragraph "All paragraphs"

Suisse Int'l Regular 14px/179.99999523162842%

Body small

Suisse Screen Regular 12px/179.99999523162842%

Input field

Suisse Int'l Regular 16px/129.99999523162842%

Lorem ipsum dolor

Suisse Int'l Semi Bold 72px/129.99999523162842%

Lorem ipsum dolor

Suisse Int'l Semi Bold 64px/129.99999523162842%

Suisse Int'l Medium 14px/100%

Suisse Int'l Medium 16px/100%

BUtton large

Suisse Int'l Medium 14px/139.9999976158142%

Suisse Int'l Medium 16px/100%

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

Static and dynamic content editing

Static and dynamic content editing
Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

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.

quote

Color styles

ss.ref.palette/neutral/100 - #FFFFFF

ss.ref.palette/neutral/10 - #1C2541

Primary/neutral10 - #1C2541

Primary/neutral40 - #424961

Primary/neutral50 - #686E80

Primary/neutral60 - #8D92A0

Primary/neutral70 - #B3B6C0

Primary/neutral80 - #D2D3D9

Primary/neutral90 - #E8E9EC

Primary/OffWhite - #F8F8F8

Secondary/primary10 - #001D35

Secondary/primary20 - #003256

Secondary/primary30 - #00497A

Secondary/primary40 - #0062A0

Secondary/primary50 - #007BC8

Secondary/primary60 - #0091EA

Secondary/primary70 - #5DB0FF

Secondary/primary80 - #9CCAFF

Secondary/primary95 - #E5EEFE

Secondary/primary90 - #D0E4FF

Tertiary/tertiary20 - #530051

Tertiary/tertiary30 - #790076

Tertiary/tertiary40 - #A3009F

Tertiary/tertiary50 - #C71FC0

Tertiary/tertiary60 - #EB3EDF

Tertiary/tertiary70 - #FF64F7

Tertiary/tertiary80 - #FF9EF3

Tertiary/tertiary90 - #FFE8F5

Tertiary/tertiary90 - #FFD1F4

Tertiary/tertiary10 - #330031

Success/tone10 - #031E06

Success/tone20 - #06320A

Success/tone30 - #134913

Success/tone40 - #286024

Success/tone50 - #3E7A37

Success/tone60 - #55964B

Success/tone70 - #6EB362

Success/tone80 - #89D27A

Success/tone90 - #BEFFB6

Success/tone90 - #A5F295

Warning/tone10 - #EF9646

Warning/tone20 - #F09D46

Warning/tone40 - #F2AC46

Warning/tone60 - #F3BA48

Warning/tone80 - #F2C94C

Warning/tone90 - #FFE08B

Red/tone10 - #410007

Red/tone20 - #680011

Red/tone30 - #92001C

Red/tone40 - #BB152C

Red/tone50 - #DF3341

Red/tone60 - #FF535B

Red/tone70 - #FF8888

Red/tone80 - #FFB3B1

Red/tone90 - #FFEAE8

Red/tone90 - #FFDAD8