Website Style Guide

Edit these styles and UI elements here and the changes will be reflected throughout your entire website.

Having trouble? Contact your site administrator.
Color Palette
Typography
Icons
Links & Buttons
Visual Elements
Premade

Brand Colors

Teal

Hex
#007C7C

Orange

Hex
#FF8105

Light Orange

Hex
#FFDFBF

Light Sea Green

Hex
#00B5A7

Midnight Green

Hex
#003C3E

Princeton Orange

Hex
#FF9829

System Colors

White

Hex
#FFFFFF

Black

Hex
#000000

Text Color

Hex
#212121

White Smoke

Hex
#F5F2F2
DL
Desktop size: 7rem
Mobile size: 4.3rem

Display LG

DM
Desktop size: 5.5rem
Mobile size: 3.5rem

Display MD

DS 
‍Desktop size: 4rem
Mobile size: 2.75rem

Display SM

DS 
‍Desktop size: 2.5rem
Mobile size: 2rem

Display XSM

H1  
Size: 3.5rem

Heading 1

H2  
Size: 2.5rem

Heading 2

H3 
Size: 1.75rem

Heading 3

H4
Size: 1.4rem

Heading 4

H5 
Size: 1rem
Heading 5
H6
Size: 1rem
Heading 6

Plain text

Badge 1
Badge 2
Badge 3
TXS  
Size: 0.8rem
© Copyright Beyond A Nanny
TS
‍Size: 0.95rem
© Copyright Beyond A Nanny
TM
Size: 1.2rem
© Copyright Beyond A Nanny
TL  
Size: 1.5rem
© Copyright Beyond A Nanny
TXL
Size: 1.8rem
© Copyright Beyond A Nanny
TXXL 
Size: 2.4rem
© Copyright Beyond A Nanny
Did you know- A text block is a generic text element, best used for text that isn't a heading, paragraph, or link. Use text blocks for copyright notices, tags, numbers, field labels, badges, etc.

Paragraphs

Paragraph XS
Size: 0.8rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod est tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimego veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex each ab commodo divad consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraph SM
Size: 0.95rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad miniatom veniam, quis nostrud exercitt cupidatat non proident,  in culpa qui officia deserunt mollit anim id est laborum.
Paragraph MD
Size: 1.2rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adim veniam, quids nostrud exercitation cupidatat non proident, sunt in culpa qui offici deserunt mollit anim id est laborum.
Paragraph LG
Size: 1.5rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Excepteur sint occaecat cupidatat non proident, inta caulpa qui officia deserunt mollit anim id est laborum.
Paragraph XL
Size: 1.8rem
Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango. Excepteur sint occaecat cupidatat proident.
Paragraph XXL
Size: 2.4rem
Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango.

tEXT cOLORS

‍Neutral Colored Text

T1 Off Black

T1 Black

T2 Opaque

T3 White

T4 White Smoke

Solid Colored Text

Text Teal

Text Orange

Text Light Sea Green

Text Midnight Green

Text Red

Text Green

Rich Text

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

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.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

  • Ordered List Item
  • Ordered List Item
  • Ordered List Item
  • Ordered List Item

- Supporting paragraph

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.

‍

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

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 italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

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.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- Supporting paragraph.

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.

3. Main Point

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. This is a link.

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

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.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

  • Ordered List Item
  • Ordered List Item
  • Ordered List Item
  • Ordered List Item

- Supporting paragraph

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.

‍

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

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 italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

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.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- Supporting paragraph.

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.

3. Main Point

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. This is a link.

Icons  /  Interface  /  Black
Icons  /  Social  /  Black
Icons  /  Misc. /  Outline
Icons  /  Misc. /  Filled
Icons  /  Social Sharing /  Default
Twitter
Facebook
Pinterest
Linkedin
Telegram
Reddit
Button
Primary
Button TextButton TextButton TextButton Text
Button Text
Button 2
Secondary
Button Text
Button Text
Button Text
Button Text
Button Text
Form Block  /  Text Fields  /  Inputs
Thank you! Your submission has been received!
We'll get back as soon as possible.
Oops! Something went wrong while submitting the form.
Spacers
10px
15px
20px
30px
Layout
Section
Page Width
Section Padding

Shadows

xxsmall
xsmall
small
medium
large
xlarge
xxlarge

Logo

Primary Logo

Logo Variations