Kickoff

Styleguide

Logo

Swatches

$color-primary

$color-secondary

$color-highlight

$color-text

$color-bg

$color-border

$color-link-default

$color-link-hover

Sass variables

Font size base: $font-size-base

Leading base: $leading-base

Typography scale: $type-scale

Sans font stack: $font-family-sans

Serif font stack: $font-family-serif

Mono font stack: $font-family-mono

Responsive Breakpoints: $breakpoints

Max layout width: $layout-max-width

Grid column count: $grid-column-count

Grid gutter width: $grid-gutter-width

Typography

Primary typeface

ABC

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 (.,:;?!£$@*&)

Secondary typeface

ABC

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 (.,:;?!£$@*&)

Typography examples

See more examples at trykickoff.com/demos/typography.html

Headings

The quick brown fox jumps over the lazy dog

Paragraphs

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.

Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.

Lists

List item
List item
List item
List item

List item
List item
List item
List item

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nemo laboriosam aliquid error sunt, expedita nisi dolorem perferendis quae laborum hic, modi fugiat voluptas! Architecto distinctio voluptatem, qui laborum blanditiis.
Zander Martineau