Style Guide

 Stork Digital Style Guide

This Style guide contains styles and components used throughout Stork's website and software.Use links below to find what you need.

01

Typography

Typeface, Weights, styles.

Typeface

Stork uses Neue Haas Grotesk Text Pro for all typefaces.

Stork font styles

Font Weights

Neue Haas Grotesk Text Pro- 55 Roman / 400 Normal
Neue Haas Grotesk Text Pro- 65 Medium / 500 Medium
Neue Haas Grotesk Text Pro- 75 Bold / 700 Bold

Headings

H1 - 46 px / -1.5 px spacing

H2- 40 px / -1 px spacing

H3- 30 px / -0.5 px spacing

H4- 24 px / -0.5 px spacing

H5- 20 px / -0.5 px spacing
H6- 16 px / normal spacing

Text sizes

Subtitle - 12 px / 5 px spacing Lorem ipsum dolor sit amet.

Text - 20 px / Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Medium - 16 px / Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Small - 14 px / Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hint - 12 px / Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text styles

Text Default - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Meduim - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block quotes

Block Quote

Rich Text

Rich Text

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.

Stork Style Guide

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!

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.

Unordered list
  • unordered list item
  • unordered list item
  • unordered list item
Ordered list
  1. ordered list item
  2. ordered list item
  3. ordered list item
blockquotes

Ordered list

  1. list item 1
  2. list item 1
  3. list item 1

Unordered list

  • list item 1
  • list item 1
  • list item 1

02

Colors

Color palette

Primary Colors

Sunset
#f15a29
Sunset Shade
#fd8274

Secondary Colors

Black
#000000
Slate Grey
#58595b
Light Grey
#b4b3b4
Light
#f2f4f8

Whites

White
#ffffff
Opacity Light
#ffffff 70%
Opacity Hard
#ffffff 30%

03

Elements

Buttons, fields, components, etc.

Field Elements

Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alerts

Looks like we're having trouble.
Default Alert Error
Looks like we're having trouble.
Warning Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Confirm Alert

Badges

52
52
52
52
52
Default
Primary
Success
Warning
Error
1
Version 1.0
1
Version 1.0

Avatars

X Large
96px
Large
60px
Medium
40px
Small
30px
X Small
18px

TB

X Large
96px

TB

Large
60px

T

Medium
40px

T

Small
30px

T

X Small
18px
User Online
User Talking
Multi. Users Talking
User Away
User Offline

04

Full Brand Suite

The whole brand. all of it.