Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Typography

Lineto Brown Pro
700 - Bold

Aa

Lineto Brown Pro
400 - Normal

Aa

Lineto Brown Pro
300 - Light

Aa

Lineto Brown Pro
100 - Thin

Aa

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph
Size: 16px

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.

Paragraph Small
Size: 10px

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.

Rich Text

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.

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!

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident. This is a link.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

  1. List item
  2. List item
  3. List item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

  • List item
  • List item
  • List item

Rich Text Blog

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident. This is a link.

Image caption

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat.

Formatting code blocks in blog posts

For code blocks, it needs to be formatted as blockquote with a CODE header. e.g.  For more information on how this was implemented, go to the private Github project.

-- CODE language-kotlin --
java.lang.RuntimeException: Whoops!
   at com.foo.mylib.RequestInterceptor.interceptRequest(RequestInterceptor.kt:5)
   at com.foo.mylib.HttpClient.doGet(HttpClient.kt:9)
   at com.foo.mylib.HttpClient.makeRequest(HttpClient.kt:5)
   at com.foo.mylib.DownloadManager.downloadFile(DownloadManager.kt:5)

You don't need to close a block, the end of the blockquote does that for you. It needs to be in a single block though (so no gaps in the white line down the left hand side). You have to put new lines in a blockquote using shift-enter, otherwise it separates it into 2 blockquotes. When adding the header, it doesn’t handle it very well. I add a character (e.g. a), add the header and then put in a newline. Then return and remove the character on the first line. If you don’t do that way it separates the blockquote. It is a bit picky.

Current languages that are supported: ["json", "php", "python", "properties", "kotlin", "bash", "dockerfile", "nginx", "plaintext", "objectivec", "shell", "ruby", "yaml", "swift", "coffeescript", "css", "groovy", "go", "sql", "xml", "markdown", "dart", "apache", "ini", "http", "perl", "cs", "diff", "javascript", "java", "cpp", "makefile", "html, "gradle", "protobuf", "rust"]

Inline code in blog posts

For inline you need to wrap the code in placeholders. [CODE language-bash]go test -bench=.[/CODE]

You can leave out the language and it will default to plaintext. e.g. [CODE]Hello World!![/CODE]

Open Drift widget

This script has been added to the body tag on the blog template to open the Drift widget. Within the blog post, you would link the text and add # in place of the link.

<script>
   $(document).ready(function () {
       $(".blog-rich-text.w-richtext a[href='#']").attr('onclick', 'drift.api.startInteraction({ interactionId: 294212 });');
   });
</script>
  • List item
  • List item
  • List item

Colors

Primary palette

Indigo
#4949E4

Midnight
#000D47

Secondary palette

Pacific
#37C2D9

Sunflower
#FFA300

Orchid
#A15FFF

Coral
#FF5A60

Neutral palette

Batman 90
#212121

Batman 80
#323232

Batman 70
#4A4A4A

Batman 60
#636363

Batman 50
#7C7A7C

Batman 40
#959595

Batman 30
#AEAEAE

Batman 20
#C6C6C6

Batman 10
#E9E9E9

Batman 00
#F8F8F8

Buttons & Text Links

All buttons are Symbols which turns the element into a reusable component.

Button
Primary

Button
Primary - Trial

Button
Secondary

Button
White Secondary

Button
External

Button
‍‍
Drift Widget

Text Link
Arrow

Icons