Style Guide

A complete guide to all The Diana Awards modular interface elements.
Colors
A complete color swatch used to color all interface elements on the website.
Anti-Bullying Theme Colors
Primary 1
#42B59D
Primary 2
#1A193A
Primary 3
#f3b43f
Grays
Gray 1
#40474d
Gray 2
#6d7276
Gray 3
#e0e1e1
Gray 4
#f2f3f5
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Button Sizes
Small
Standard
Large
Theme Colors
Primary 1
Primary 2
Primary 3
Outline
Feedback Colors
Success
Warning
Error
Grays & White
Gray 1
Gray 2
Gray 3
Gray 4
White
Circle Buttons
Icons
Search
Finish
Sign up with Google
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Text Primary 1
Text Primary 2
Text Primary 3
Text Success
Text Warning
Text Error
Handwriting
Other Headings
Large, medium and small headings for when you want something a little different to your regular heading sizes. Also great when you want to have a big heading but not have it be a <h1> tag.</h1>

Large Heading

Medium Heading

Rich Text
This is used in blog posts and other CMS areas. Pay attention to line heights etc.

Heading 1

Mauris, ornare senectus platea laoreet quisque ac neque. Malesuada sit libero ut massa. Egestas commodo nulla tortor nunc adipiscing amet, netus nunc. Ullamcorper facilisi ridiculus at commodo lectus in id.

Egestas commodo nulla tortor nunc adipiscing amet, netus nunc. Ullamcorper facilisi ridiculus at commodo lectus in id.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem platea non elementum sollicitudin felis. Consequat nec leo nisi vivamus at in rhoncus. Dignissim non ac aliquet id vel aliquet sit eu ipsum. Aliquet erat suspendisse dui.

  • Urna egestas posuere volutpat libero, in. Nunc, semper id montes, molestie sit libero nibh. Vitae volutpat orci enim viverra nam justo, neque. Congue nec eget arcu.
  • Tortor orci praesent sed et turpis cursus. Lectus nunc ut proin consectetur id nec. Risus amet sed in vel turpis mattis id. Integer suspendisse dui urna metus, maecenas. Eleifend fermentum viverra nunc quam adipiscing id nibh pellentesque dignissim. Magna quis ac dui in sagittis. Aliquam arcu cursus rhoncus ut elementum.
    Massa velit lectus ac amet.
Here is the image caption

Mauris, ornare senectus platea laoreet quisque ac neque. Malesuada sit libero ut massa. Egestas commodo nulla tortor nunc adipiscing amet, netus nunc. Ullamcorper facilisi ridiculus at commodo lectus in id.

Another heading? Why not.

Tortor orci praesent sed et turpis cursus. Lectus nunc ut proin consectetur id nec. Risus amet sed in vel turpis mattis id. Integer suspendisse dui urna metus, maecenas. Eleifend fermentum viverra nunc quam adipiscing id nibh pellentesque dignissim. Magna quis ac dui in sagittis. Aliquam arcu cursus rhoncus ut elementum.
Massa velit lectus ac amet.

“The way they did it was incredible, amazing and without fault. Flawless.”

Eget suspendisse faucibus nunc massa volutpat risus nec. Neque lacus a euismod ultricies lobortis commodo sed. Auctor suspendisse sed semper vitae porta viverra cursus.

  • Vitae volutpat orci enim viverra nam justo, neque.
  • Magna quis ac dui in sagittis. Aliquam arcu cursus rhoncus ut elementum. Massa velit lectus ac amet.
  • Sit bibendum volutpat aliquet vulputate nibh dictum eros.
Alignment
Align left, align right, align center. American center, not British centre.
Valued Customer
Valued Customer
Valued Customer
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Icons - Interface
Headings, body and other common text elements.
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Link
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Dropdowns
Preset styles to imply depth on interface components
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho
Background Colours
Below are all the classes available for background colours available for pretty much every part of the website. The match the colour section at the top of the style guide.