Style Guide

Atomic Design, Vertical Rythme and Color Theory.
Its purpose is to help teams unite around a common language during the creation and life of a product.

Elements

Atomic Design

Atomic Design is the core principle of this website’s architecture.
• Elements (atoms) are the basic unmodifiable units. Ex: spacing, fonts or colors.
• Components (molecules) are made of Elements. Ex: button (made of a font, a background color and a border radius).
• Modules (organisms) are sections of pages based on Elements and Components that can be re-used.
• The Website (ecosystem) is composed of multiple Pages that are composed of different Modules, Components and Elements.

 <div id=" component "> </div>   (with _component.scss) 
 <div id=" module "> </div>  (with _module.scss) 
 <div id="page">   (with _page.scss) 
    <div id="module" class="section"> 
      <div class="module--modifier" class="subsection"> </div> 
    </div> 
 </div>

Baseline

Vertical Rythme is based on an 8px baseline, genesis of all vertical spacing, margin, padding and line-heignt.

$b4; //4px
$b8; //8px
$b16; //16px
$b24; //24px
$b32; //32px
$b48; //48px
$b56; //56px
$b64; //64px
$b80; //80px
$b96; //96px
$b128; //128px
$b192; //192px

Colors

Color Theory is based on a HSB(10,60,100) primary color, genesis of all theme and messaging colors.

Color Primary

$color-primary
#FF8066
HSB(10,60,100)
primary action, link
$color-primary--hover
#D96C57
HSB(10,60,85)
primary hover
$color-primary--gradient
135deg,#FFE666,#FF6666
HSB(50,60,100) to HSB(360,60,100)
primary gradient

$color-primary--shade1
#FFE666
HSB(50,60,100)
primary shade 1
$color-primary--shade2
#FFCC66
HSB(40,60,100)
primary shade 2
$color-primary--shade3
#FFB366
HSB(30,60,100)
primary shade 3
$color-primary--shade4
#FF9966
HSB(20,60,100)
primary shade 4
$color-primary--shade5
#FF8066
HSB(10,60,100)
primary shade 5
$color-primary--shade6
#FF6666
HSB(360,60,100)
primary shade 6

Color Base

$color-base
#FFFFFF
rgba(255,255,255,1)
primary text, action
$color-base--064
#FFFFFF α(0.64)
rgba(255,255,255,0.64)
secondary text, no action
$color-base--012
#FFFFFF α(0.12)
rgba(255,255,255,0.12)
component background, strokes
$color-theme
#121212
rgba(12,12,12,1)
general background
$color-theme--096
#121212 α(0.96)
rgba(12,12,12,0.96)
header & alerts background

Color Messaging

$color-success
#52CC8F
HSB(150,60,80)
success
$color-success--hover
#42A674
HSB(150,60,65)
success hover
$color-danger
#E65C5C
HSB(360,60,90)
danger
$color-danger--hover
#BF4D4D
HSB(360,60,75)
danger hover
$color-info
#5CACE6
HSB(205,60,90)
info
$color-info--hover
#4D8FBF
HSB(205,60,75)
info hover

Texts

h1. Page Title

 //Source Sans Pro Regular / color-base 
//font-size: 60px / line-height: 80px

h2. Section Title

 //Source Sans Pro Regular / color-base 
//font-size: 50px / line-height: 64px

h3. Subsection Title

 //Source Sans Pro Regular / color-base 
//font-size: 30px / line-height: 48px

p. Text, p. Text (bold)

 //Source Sans Pro Regular, Bold / color-base, color-base--064 
//font-size: 20px / line-height: 32px

h5. Description, h5. Description (bold)

 //Source Sans Pro Regular, Bold / color-base, color-base--064 
//font-size: 16px / line-height: 24px

h6. Legal

 //Source Sans Pro Regular / color-base, color-base--064 
//font-size: 12px / line-height: 16px

code

 //Courier Regular / color-base 
//font-size: 16px / line-height: 24px

Settings

Setting Opacity

$setting-opacity--soft
α(0.32)
component disabled
$setting-opacity--strong
α(0.96)
header & alerts backgound

Setting Blur

$setting-blur
$b8

Setting Border

$setting-border
1px solid
color-base—background

Setting Radius

$setting-radius--soft
$b4
components
$setting-radius--strong
$b8
component containers
$setting-radius--round
$b256
round

Setting Shadow

$setting-shadow--soft
0 2px 4px α(0.12)
0 2px 4px α(0.12)
$setting-shadow--strong
0 10px 20px α(0.20)
0 5px 10px α(0.10)
$setting-shadow--motion
light to strong
shadow motion

Components Web

Buttons

Button Styles

 <button class=" button button-primary--gradient "></button> 
 <button class=" button button-primary "></button> 
 <button class=" button button-base "></button> 
 <button class=" button button-base "> 
    <icon-gael class=" icon "> </icon-gael> 
 </button> 
 <button class=" button button-base--ghost "></button> 
 <button class=" button button-white--ghost "></button> 
 <button class=" button button-success "></button> 
 <button class=" button button-danger "></button>

Button Sizes

 <button class=" button button-base button-block "></button> 
 <button class=" button button-base button-small "></button> 
 <button class=" button button-base button-mini "></button>

Button Tags

 <button class=" button button-base--ghost button-tag "> </button> 
 <<button class=" button button-base--ghost button-small button-tag "> </button> 
 <button class=" button button-base--ghost button-mini button-tag "> </button>

Button Specials

 <button class=" button button-special button-base "></button> 
 <button class=" button button-special button-primary "> </button> 
 <button class=" button button-special button-base--ghost "> </button> 
 <button class=" button button-special button-white--ghost "> </button> 
 <a class=" display--inline-block "> 
    <button class=" button button-special button-base "></button> 
 </a> 
 <button class=" button button-special button-base button-small "> </button>

Button State

 <button class=" button button-base" disabled ></button> 
 <button class=" button button-primary" disabled > </button> 
 <button class=" button button-base button-active "></button>

 <a class="link link-base "></a> 
 <a class="link link-base link-bold "></a> 
 <a class="link link-primary "></a> 
 <a class=" link link-primary link-bold "></a> 
 <a class=" link link-white "></a> 
 <a class=" link link-white link-bold "> </a> 
 <a class=" link link-external "> </a> 
 <a class=" link link-external link-bold "> </a> 
 <a class=" link link-base link-small "> </a> 
 <a class=" link link-base link-mini "> </a> 
 <a class=" link link-base link-active "> </a>

Forms

Form Field

code

Selection Controls

code

Icons

Icon Styles

 <icon-gael class=" icon color-base "></icon-gael> 
 <icon-gael class=" icon color-primary "></icon-gael> 
 <icon-gael class=" icon color-white "></icon-gael>

Icon Sizes

 <icon-gael class=" icon color-base icon-mini "></icon-gael> //12px
 <icon-gael class=" icon color-base icon-small "></icon-gael> //16px
 <icon-gael class=" icon color-base "></icon-gael> //20px
 <icon-gael class=" icon color-base icon-big "></icon-gael> //30px

Tooltips

code

Brand

Contact

You can contact me on LinkedIn, or send me an email.

Style Guide

Elements

Atomic Design

Baseline

Colors

Color Primary

$color-primary

#FF8066

HSB(10,60,100)

primary action, link

$color-primary--hover

#D96C57

HSB(10,60,85)

primary hover

$color-primary--gradient

135deg,#FFE666,#FF6666

HSB(50,60,100) to HSB(360,60,100)

primary gradient

$color-primary--shade1

#FFE666

HSB(50,60,100)

primary shade 1

$color-primary--shade2

#FFCC66

HSB(40,60,100)

primary shade 2

$color-primary--shade3

#FFB366

HSB(30,60,100)

primary shade 3

$color-primary--shade4

#FF9966

HSB(20,60,100)

primary shade 4

$color-primary--shade5

#FF8066

HSB(10,60,100)

primary shade 5

$color-primary--shade6

#FF6666

HSB(360,60,100)

primary shade 6

Color Base

$color-base

#FFFFFF

rgba(255,255,255,1)

primary text, action

$color-base--064

#FFFFFF α(0.64)

rgba(255,255,255,0.64)

secondary text, no action

$color-base--012

#FFFFFF α(0.12)

rgba(255,255,255,0.12)

component background, strokes

$color-theme

#121212

rgba(12,12,12,1)

general background

$color-theme--096

#121212 α(0.96)

rgba(12,12,12,0.96)

header & alerts background

Color Messaging

$color-success

#52CC8F

HSB(150,60,80)

success

$color-success--hover

#42A674

HSB(150,60,65)

success hover

$color-danger

#E65C5C

HSB(360,60,90)

danger

$color-danger--hover

#BF4D4D

HSB(360,60,75)

danger hover