The health and safety of everyone at Channellock is extremely important to us. Read about our COVID-19 response here.

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:


link style

.white-link

.blue-container

Brand Colors:


Primary:

#00a1df | 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