logdna

LogDNA
Digital Style Guide

Use this style guide template to quickly align your websites brand and visual direction. Take control of global styles to edit typography, colors & elements across the whole site.

Style Guide Overview

Lost? That's what this guide is here for.

Here, you will find all the elements (color, typography, quotes, buttons, etc.) that one will need to manage the site for LogDNA.

Color Palette

Primary Palette

Magenta
PRIMARY 1
Violet
PRIMARY 2

Secondary Palette

Egyptian
ACCENT 1
Teal
ACCENT 2

Typography Palette

Anchor
NEUTRAl 1
Pearl River
NEUTRAL 2
White
NEUTRAl 3

Typography Styles

Headings

Aa Bb Cc Dd Ee

Display
60px

Aa Bb Cc Dd Ee

Heading 1
50px

Aa Bb Cc Dd Ee

Heading 2
40px

Aa Bb Cc Dd Ee

Heading 3
35px

Aa Bb Cc Dd Ee

Heading 4
30px
Aa Bb Cc Dd Ee
Heading 5
20px
Aa Bb Cc Dd Ee
Heading 6
17px

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!

heading 5 style

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.

Paragraph

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
22px

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
18px

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
16px

Paragraph

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
22px

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
18px

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
16px

Quotes & Lists

Quotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 1
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Quote 2
Colored

Lists

  • Example Item 1
  • Example Item 2
  • Example Item 3
List Dots
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Numbers
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Letters

Buttons (arrows)

Button Primary

Start Free Trial
Magenta Button
Start Free Trial
Dark Blue Button
Start Free Trial
Violet Button
Start Free Trial
Egyptian Button
Start Free Trial
Magenta Button Outline
Start Free Trial
Violet Button Outline
Start Free Trial
Egyptian Button Outline
Start Free Trial
Button Outline

Button Secondary

Buttons

Button Primary

Submit
Magenta Button
Submit
Violet Button
Submit
Egyptian Button
Submit
Teal Button
Submit
Button Outline
Submit
Button Outline
Submit
Button Outline
Submit
Button Outline
Submit
Button Gradient
Submit
Button Disabled

Button Secondary