Skip to content

Latest commit

 

History

History
297 lines (239 loc) · 17.8 KB

design_style_guide.md

File metadata and controls

297 lines (239 loc) · 17.8 KB
Raw

Clay.io Design Style Guide

Contents

1. Branding

  1. Colors
  2. Logos
  3. Badges

2. Site Styling

  1. Fonts
  2. Element styling
  3. Breakpoints

1. Branding

1.1 Colors

Orange Primary

Value Code HEX RGB Color
200 $ ffcc80 255, 204, 128
500 $orange ff8a00 255, 138, 0 Alt text
600 $ f47300 244, 115, 0 Alt text
700 $ e96a03 233, 106, 3 Alt text

Blue Primary

Value Code HEX RGB Color
200 $ 90caf9 144, 202, 249
500 $blue 008aff 0, 138, 255 Alt text
600 $ 0078ff 0, 120, 255 Alt text
700 $ 0060ff 0, 96, 255 Alt text

Secondary colors

Value Code HEX RGB Color
500 $red f44336 244, 67, 54 Alt text
500 $green 66bb6a 102, 187, 106 Alt text

Greys

Value Code HEX RGB Color
000 $white ffffff 255, 255, 255 Alt text
100 $greyLightest f5f5f5 245, 245, 245 Alt text
200 $greyLighter eeeeee 238, 238, 238 Alt text
300 $greyLight e0e0e0 224, 224, 224 Alt text
400 $greyMedium bdbdbd 189, 189, 189 Alt text
500 $greyDark 9e9e9e 158, 158, 158 Alt text
600 $greyDarker 757575 117, 117, 117 Alt text
900 $greyDarkest 212121 33, 33, 33 Alt text

1.2 Logos

Logos are primarily in .svg and .png formats.

Note: linked images below are reference only.

Name Image
logo_standard Alt text
logo_alt Alt text
logo_cloud Alt text

1.3 Badges

Can be used by on promotional material or to link to games

Note: linked images below are reference only.

Name Image
gray Alt text
gray_alt Alt text
gray_mini Alt text
orange Alt text
orange_alt Alt text
orange_mini Alt text

2. Site Styling

2.1 Fonts

Branding Font

To be used exclusively on logo and promo image material.

  • FF Enzo

Site Font

To be used globally across the Clay.io site and apps

  • Roboto
Font Sizing
Name Weight Size
Display 4 300 Light 112px
Display 3 400 Regular 56px
Display 2 400 Regular 45px
Display 1 400 Regular 34px
Headline 400 Regular 35px
Title 500 Medium 20px
Subhead 400 Regular 16px
Body 2 500 Medium 14px
Body 1 400 Regular 14px
Caption 400 Regular 12px
Button 500 Medium 14px

Icons

Name Icon
achievement Alt text
add Alt text
add-circle Alt text
ads Alt text
arrow-back Alt text
arrow-down Alt text
arrow-forward Alt text
arrow-up Alt text
badge Alt text
calendar Alt text
challenge Alt text
chat Alt text
check Alt text
chevron-left Alt text
chevron-right Alt text
close Alt text
close-circle Alt text
cloud Alt text
cloud-upload Alt text
computer Alt text
controller Alt text
credit-card Alt text
crown Alt text
delete Alt text
dev Alt text
dice Alt text
doc Alt text
edit Alt text
folder Alt text
globe Alt text
grid Alt text
group Alt text
happy Alt text
heart Alt text
help Alt text
home Alt text
info Alt text
link Alt text
lock Alt text
mail Alt text
menu Alt text
music Alt text
notifications Alt text
package Alt text
photos Alt text
play Alt text
play-circle Alt text
profile Alt text
refresh Alt text
save Alt text
search Alt text
settings Alt text
share Alt text
smartphone Alt text
star Alt text
star-half Alt text
stats Alt text
ticket Alt text
time Alt text
zipped Alt text
facebook Alt text
github Alt text
google-plus Alt text
kik Alt text
linkedin Alt text
twitter Alt text
youtube Alt text

2.2 Element Styling

Shadows
Z-Index CSS
1 box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
2 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 6px 18px 0 rgba(0, 0, 0, 0.15);
3 box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.05), 0 13px 30px 0 rgba(0, 0, 0, 0.15);
4 box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.05), 0 20px 40px 0 rgba(0, 0, 0, 0.15);
5 box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.05), 0 27px 55px 0 rgba(0, 0, 0, 0.15);
Buttons

Rounded button

Alt text

  • Corner radii: 20px

  • Height: 40px

  • Disabled: 50% opacity

  • Shadow: Z-1

  • Primary rounded button:

    • Fill color: Orange primary
    • Text color: White

  • Secondary rounded button:

    • Fill color: White
    • Text color: Blue primary

Check box

Alt text

  • Corner radii: 3px
  • Width: 20px
  • Height: 20px
  • Selected color: Orange primary
  • Normal color: Medium grey

Radio button

Alt text

  • Width: 20px
  • Height: 20px
  • Selected color: Orange primary
  • Normal color: Medium grey
Input fields

Text input field

Alt text

  • Corner radii: 3px
  • Height: 40px
  • Left/right inner padding: 10px
  • Background color: White
  • Stroke: 1px
    • Normal:
      • Stroke color: Lighter grey
    • Active:
      • Stroke color: Medium grey
  • Hint text color: Medium grey
  • Typed text: Darkest grey
Hyperlink text
  • Normal color: Orange accent
  • On hover: Orange primary
Modals

  • Modal corner radii: 3px

  • Dark overlay: 70% black

  • Modal shadow: Z-3

    Close icon

    • Close button shadow: Z-2
Spinner
  • White fade
    • Top: 90°
    • Bottom: -90°
    • Height: 25% of middle image (square)
-moz-linear-gradient( rgba(242,242,242,0) 0%, rgba(242,242,242,0.90196) 100%);
-webkit-linear-gradient( rgba(242,242,242,0) 0%, rgba(242,242,242,0.90196) 100%);
-ms-linear-gradient( rgba(242,242,242,0) 0%, rgba(242,242,242,0.90196) 100%);
  • Respin button
    • Width: 50px
    • Height: 50px
box-shadow: 0px 0px 30px 0px rgba(38, 38, 38, 0.5);
Header Bar
  • Shadow: Z-1
Game Images
  • Shadow: Z-1

2.3 Breakpoints

Standard media-query breakpoints to be used in the site design

  • 320px
  • 360px
  • 480px
  • 600px