My website styleguide

...that I may or may not actually use

Colors

DodgerBlue

#1E90FF

LightSteelBlue

#B0C4DE

Orange

#FFA500

Bisque

#FFE4C4

Fonts

Roboto

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Noto Sans

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Space Mono

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Text Styles

H1: Main heading

  • Font-weight: 700 (bold)
  • Font-size: 30px
  • Font-family: Roboto

H2: Subheading

  • Font-weight: 600
  • Font-size: 24px
  • Font-family: Noto Sans

H3: Mini heading

  • Font-weight: 500
  • Font-size: 18px
  • Font-family: Noto Sans

P: Paragraph text (also default for lists and tables)

  • Font-weight: 400
  • Font-size: 16px
  • Font-family: Noto Sans

Code snippets

  • Font-weight: 500
  • Font-size: 18px
  • Font-family: Space Mono
  • Background-color: LightSteelBlue (#B0C4DE)