ZenHub Style Guide

#5e60ba
$color-brand-main
#00D090
$color-brand-secondary
#2196F3
$color-brand-tertiary
#FE6A68
$color-brand-fourth
#F8A208
$color-brand-fifth
#0D12E8
$color-brand-sixth
#9763FF
$color-brand-seventh
#FAC400
$color-brand-eighth
#333d47
$color-grey-alpha
#6C718B
$color-grey-beta
#A4A7C5
$color-grey-gamma
#dadeee
$color-grey-delta
#F2F3FA
$color-grey-epsilon
#F6F8FC
$color-grey-zeta
#353784
$color-brand-main--0
#5E60BA
$color-brand-main
#AEAFDC
$color-brand-main--1
#DFDFF1
$color-brand-main--2
#EEEFF8
$color-brand-main--3
#037350
$color-brand-secondary--0
#00D090
$color-brand-secondary
#7FE7C7
$color-brand-secondary--1
#CCF6E9
$color-brand-secondary--2
#E5FAF3
$color-brand-secondary--3
#135E99
$color-brand-tertiary--0
#2196F3
$color-brand-tertiary
#90CAF9
$color-brand-tertiary--1
#D3EAFD
$color-brand-tertiary--2
#E8F4FD
$color-brand-tertiary--3
#B34948
$color-brand-fourth--0
#FE6A68
$color-brand-fourth
#FEB4B3
$color-brand-fourth--1
#FFE1E1
$color-brand-fourth--2
#FEF0EF
$color-brand-fourth--3
#8F5F07
$color-brand-fifth--0
#F8A208
$color-brand-fifth
#FBD083
$color-brand-fifth--1
#FEECCE
$color-brand-fifth--2
#FEF5E6
$color-brand-fifth--3
#14166A
$color-brand-sixth--0
#0D12E8
$color-brand-sixth
#8688F3
$color-brand-sixth--1
#CFD0FA
$color-brand-sixth--2
#E6E7FC
$color-brand-sixth--3
#5B2BBA
$color-brand-seventh--0
#9763FF
$color-brand-seventh
#CBB1FF
$color-brand-seventh--1
#EAE0FF
$color-brand-seventh--2
#F4EFFF
$color-brand-seventh--3
#BD9400
$color-brand-eighth--0
#FAC400
$color-brand-eighth
#FCE17F
$color-brand-eighth--1
#FEF3CC
$color-brand-eighth--2
#FEF9E5
$color-brand-eighth--3
#9763FF
$color-brand-seventh
#0D12E8
$color-brand-sixth
#17EAD9
$color-gradient-delta
#2196F3
$color-brand-tertiary
#0D12E8
$color-brand-sixth
#49C5FC
$color-gradient-gamma
#0D12E8
$color-brand-sixth
#293159
$color-dark-beta
#374677
$color-dark-gamma
#4C5C8E
$color-dark-delta
#353784
$color-dark-theta
#eef4f7
$color-light-main
Icon Typekit
Typekit
Proxima Nova
$font-primary
Regular
Semi Bold
Icon Typekit
Typekit
Gibson
$font-secondary
Regular
Aa
#5e60ba
$color-type-alpha
Aa
#72799B
$color-type-beta
Aa
#A3A7C5
$color-type-gamma
Aa
#ffffff
$color-type-delta
Agile Project Management
@mixin textTitle--xl()
Agile Project Management
@mixin textTitle--lg()
Agile Project Management
@mixin textTitle--md()
Agile Project Management
@mixin textTitle--sm()
Agile Project Management
@mixin textTitle--xs()
Agile Project Management
@mixin textTitle--2xs()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--lg()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--md()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--sm()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--xs()
Agile Project Management
@mixin textTitle--xl()
Agile Project Management
@mixin textTitle--lg()
Agile Project Management
@mixin textTitle--md()
Agile Project Management
@mixin textTitle--sm()
Agile Project Management
@mixin textTitle--xs()
Agile Project Management
@mixin textTitle--2xs()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--lg()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--md()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--sm()
Adding ZenHub to our team has resulted in a huge improvement to our workflow.
@mixin textBody--xs()
Add ZenHub to GitHub
.Btn--xs.Btn--primary
Add ZenHub to GitHub
.Btn--sm.Btn--primary
Add ZenHub to GitHub
.Btn--md.Btn--primary
Add ZenHub to GitHub
.Btn--lg.Btn--primary
Add ZenHub to GitHub
.Btn--xs.Btn--secondary
Add ZenHub to GitHub
.Btn--sm.Btn--secondary
Add ZenHub to GitHub
.Btn--md.Btn--secondary
Add ZenHub to GitHub
.Btn--lg.Btn--secondary
Add ZenHub to GitHub
.Btn--xs.Btn--tertiary
Add ZenHub to GitHub
.Btn--sm.Btn--tertiary
Add ZenHub to GitHub
.Btn--md.Btn--tertiary
Add ZenHub to GitHub
.Btn--lg.Btn--tertiary
Add ZenHub to GitHub
.Btn--xs.Btn--fourth
Add ZenHub to GitHub
.Btn--sm.Btn--fourth
Add ZenHub to GitHub
.Btn--md.Btn--fourth
Add ZenHub to GitHub
.Btn--lg.Btn--fourth
New
.Label-small.LabelFullColour-one
New
.Label-big.LabelFullColour-one
New
.Label-small.LabelFullColour-two
New
.Label-big.LabelFullColour-two
New
.Label-small.LabelFullColour-three
New
.Label-big.LabelFullColour-three
New
.Label-small.LabelFullColour-four
New
.Label-big.LabelFullColour-four
New
.Label-small.LabelFullColour-five
New
.Label-big.LabelFullColour-five
New
.Label-small.LabelFullColour-six
New
.Label-big.LabelFullColour-six
New
.Label-small.LabelFullColour-seven
New
.Label-big.LabelFullColour-seven
New
.Label-small.Label-has-border.LabelTextColour-one
New
.Label-big.Label-has-border.LabelTextColour-one

When referencing us in writing, ZenHub is always written as a single word, with an uppercase Z and an uppercase H.

ZenHub
Zenhub
zenhub
Zen Hub
Zen hub
zen hub
$box-shadow-alpha
$box-shadow-alpha-hover
$box-shadow-beta
$box-shadow-beta-hover
$box-shadow-gamma
$box-shadow-gamma-hover