Style Guide

This is the style guide approved by The Daily Line. Text, Colors, Buttons and related classes and shades are included here for reference.

Text Styles

Fonts

Headline Font: Avenir LT Std 55 Roman, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,

Body Font: Avenir LT Std 55 Roman, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Monospace Font: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Headline Styles

This line is an example of our H1 Style

This line is an example of our H2 Style

This line is an example of our H3 Style

This line is an example of our H4 Style

This line is an example of our H5 Style
This line is an example of our H6 Style

Body Text

This color corresponds to our normal text style. Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply.

Unordered List

  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply

Ordered List

  1. Lorem Ipsum is simply
  2. Lorem Ipsum is simply
  3. Lorem Ipsum is simply
  4. Lorem Ipsum is simply
  5. Lorem Ipsum is simply

Colors

Colored Text

This text color corresponds to .text-primary class.

This text color corresponds to .text-secondary class.

This color corresponds to .text-success class

This color corresponds to .text-info class

This color corresponds to .text-warning class

This text color corresponds to .text-danger class

This color corresponds to .text-light class

This color corresponds to .text-dark class

This color corresponds to .text-muted class

This color corresponds to .text-white class

Colored Shades

Primary:
#D50000
Secondary:
#25C8D0
Success:
#28A745
Info:
#17A2B8
Warning:
#FFCC00
Danger:
#D50000
Dark:
#343A40
Light:
#F8F9FA
Indigo:
#6610f2
Purple:
#6F42C1
Pink:
#E83E8C
Red:
#D50000
Orange:
#FD7E14
Yellow:
#FFCC00
Green:
#28A745
Teal:
#20C997
Cyan:
#04989E

Mono Text

This text is colored white:#ffffff

This text is colored gray-100:#f8f9fa

This text is colored gray-200:#e9ecef

This text is colored gray-300:#dee2e6

This text is colored gray-400:#ced4da

This text is colored gray-500:#adb5bd

This text is colored gray-600:#6c757d

This text is colored gray-700:#495057

This text is colored gray-800:#343a40

This text is colored gray-900:#212529

This text is colored black:#000000

Mono Shades

white:
#FFFFFF
gray-100:
#F8F9FA
gray-200:
#E9ECEF
gray-300:
#EAEAEA
gray-400:
#CED4DA
gray-500:
#ADB5BD
gray-600:
#6C757D
gray-700:
#495057
gray-800:
#343A40
gray-900:
#212529
black:
#000000

Buttons

Primary Secondary Success Danger Warning Info Light Dark