Digital Design System: Channellock
grid-container
↓
Framework:
Foundation 6 with XY Grid and 24 columns.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Font Styles:
Header font:
Trade Gothic Next Condensed, 700 weight
Body font:Trade Gothic Next Condensed, 400 weight
Special Headlines:Agency FB Condensed, 700 weight .agency-font
.agency-font.xl
h1: 48px
h2: 40px
h3: 31px
h4: 25px
h5: 20px
h6: 16px
paragraph: 22px
.white-text
.blue-text
.red-text
Components:
.blue-container
Add some content here.
Brand Colors:
Primary:
#009DDB | rgb(0,161,223)
.blue-background
$white
#ffffff | rgb(255,255,255)
.white-background
$light-gray
#efefef | rgb(239,239,239)
.light-gray-background
$medium-gray
#cacaca | rgb(202,202,202)
$dark-gray
#231f20 | rgb(35,31,32)
.dark-gray-background
$black
#000000 | rgb(0,0,0)
.black-background
Icons:
Spacing Styles:
.line-height-1
.margin-0
.margin-bottom-0
.margin-top-2 | 32px
.margin-bottom-2 | 32px
.margin-top-3 | 48px
.margin-bottom-3 | 48px
.padding-1 | 16px
.padding-bottom-2 | 32px
.padding-bottom-3 | 48px
.padding-vertical-3 | 48px
.padding-vertical-4 | 64px