🎨 [Internal] Gorgias' Guideline

Colour Palette

Brand
#0075FF
Coral
#FF9090
Navy
#0024A1
Human
#FFF9F4
Dark
#161616
Gray_3
#4e5d78
Gray_2
#AFAFAF
Gray_1
#DDDDDD
Gray_0
#EEEEEE
White
#ffffff

Typography Styles

Headings

Aa Bb Cc Dd Ee

Heading 1
56px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 2 idem h1
44px

Aa Bb Cc Dd Ee

Heading 3
36px

Aa Bb Cc Dd Ee

Heading 4
34px
Aa Bb Cc Dd Ee
Heading 5
28px
Aa Bb Cc Dd Ee
Heading 6
24px

Body Copy

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
18px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Detail Messages
12px

Quotes

“Gorgias gives us a holistic view of our customers. This way, we can provide them with fast & personalized help.”
Nicole Snow,  Founder & CEO @ Darn Good Yarn
Plain Quote Block
18px

Additional Copy Elements

  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

This line of text is meant to be treated as deleted text.

Deleted Text
18px

This line of text is meant to be treated as deleted text.

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px

You can use the mark tag to link text.

Link Text
18px

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.

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.

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

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!

dsds
  • list 1
  • list 2
  1. one
  2. two

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.
sdqsdqsdqsd sqdqs

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.

text test

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

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!

dsds
  • list 1
  • list 2
  1. one
  2. two

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.
sdqsdqsdqsd sqdqs

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.

text test

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

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!

dsds
  • list 1
  • list 2
  1. one
  2. two

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.
sdqsdqsdqsd sqdqs

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.

text test

Avatars

Looking for something else? View the glossary

Buttons

Looking for something else? View the glossary

Field Elements

Looking for something else? View the glossary

Form Fields

Input Fields

Alert Bars

Looking for something else? View the glossary

Badges

Looking for something else? View the glossary

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0

Icons

Looking for something else? View the glossary