fbpx

Style Guide

Logos

CIESC
KINL-Logo-Favicon-dark

Colors

Primary

#177A91
rgb(23, 122, 145)

Secondary

#0a203f
rgb(10, 32, 63)

Tertiary

#EFEFEF
rgb(239, 239, 239)

Action/Focus

#B8D426
rgb(184, 212, 38)

Typography

Heading 1 - Open Sans - 50px/70px

Page Titles

Heading 2 - Open Sans - 36px/54px

Section Titles

Heading 3 - Open Sans - 28px/42px

Section Sub-Titles

Heading 4 - Open Sans - 24px/36px

Element Titles (Photos, Grid Items)

Heading 5 - Open Sans - 20px/30px

Element Sub-Titles

Heading 6 - Open Sans - 16px/24px

Meta Information (Dates, Categories, Tags)

Paragraph Text – Source Sans Pro – 18px/27px

Content Text

Default Structure and Layouts

Default Full-Width Sections

SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.

ROW elements should be default padding containing CONTENT elements inside.

CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).

Default 50/50 Sections

Default 50/50 Sections

SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.

ROW element should be default padding containing CONTENT elements inside, with ROW element layout set to 50/50 using 30px column gap, equal column height enabled, and content position set to middle.

CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).

Default 50/50 Sections

This section layout should usually include text content on one side and video or image content on the other side.

Default 1/3 by 1/3 by 1/3 Sections

DEFAULT 1/3 by 1/3 by 1/3 SECTIONS

SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.

ROW element should be default padding containing CONTENT elements inside, with ROW element layout set to 33/33/33 using 30px column gap, equal column height enabled, and content position set to default.

CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).

DEFAULT 1/3 by 1/3 by 1/3 SECTIONS

This layout should be used for showcasing information that may lead to other pages or to organize related content that could be organized with 3 different sub-titles.

DEFAULT 1/3 by 1/3 by 1/3 SECTIONS

This layout should include icons or images in each column, if possible, to lessen the wall of text effect on the eye with graphics.

Send this to a friend