Design Kit for The
Chilliwack Search and Rescue Website

A set of assets and guidelines for building a consistent and positive user experience across the website.

Version:

2023.01.03

Brand Colors
Primary Tones

This color is used for all Headings and Icons

80%

100%

120%

140%

160%

180%

Secondary Tones

Secondary colors come from alternative brand colors. This color is used for variation

80%

100%

120%

140%

160%

180%

Accent

This color is used for all important interactive elements like Buttons, CTAs, links

Normal

Hover

Neutral
Greyscale

Gray tones are the essence of the UI. Used for text or cards, etc

90%

70%

50%

30%

10%

System
Alert

Alerts are four colors used to indicate certain situations

Success

Danger

Warning

Info

Base
Background

Base color used for the background color of sections, cards

Main Background

Variant Background

Variant Background

Border

Base color used for divider, border, etc

Border

Flexible typography scale works perfectly for all breakpoints – desktop, tablet and mobile. 

Josefin Sans

Heading 1 - REM 4.375 - 700

Pack my box with five dozen liquor jugs.

Heading 2 - REM 3.125 - 700

Bright vixens jump; dozy fowl quack.

Heading 3- REM 2.375 - 600

John quickly extemporized five tow bags.

Heading 4- REM 1.75 - 600

Viewing quizzical abstracts mixed up hefty jocks.

Heading 5 - REM 1.312 - 600

My girl wove six dozen plaid jackets before she quit.

Heading 6 - REM 1 - 600

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf

Raleway

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Caption

Vivamus finibus congue arcu et ullamcorper. Sed eget condimentum neque.

Sub Title

Alve bazige

Quote

Curabitur non est sed urna facilisis aliquam. Pellentesque vel commodo ex, eget tristique augue. Quisque pharetra bibendum elit eget commodo. Ut eu imperdiet massa
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Huge

Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!

Tiny

Nulla nec ante nec enim maximus cursus sit amet vel nunc. Cras eu massa nisl. Donec ac elementum tortor

Label

Qualche notizia

Placeholder

Enter your email

Nav Menu

Homepage

About Us

Service

A collection of widgets used as sample of the use of color and typography. 

Button

Collection of buttons used in website ui design with variations

Button Icon

Counter

Counting numbers that rotate and stop at a certain value to show an achievement in numbers

Design Decisions
0 K
Home Builds
0 +
Home Values
0 M
Awards
0 +
Quote

Highlighted special sentences that form a series as an expression or statement

Chilliwack ElderCollege helps keep me active and thinking sharp.  

~ Andrej Karpathy