The Kingsway Christian Academy Brand System

Introduction

“Brand system? What's that” 
A brand system or design system is the set of the rules or guidelines that help determine how logos, colors, layouts, imagery, fonts, and even our tone and language fit together. Think of it like, "The visuals and voice that reinforce our values." Here's the whole point of using a design system...
Good branding results in less chaos and less noise.
The formula for branding is pretty simple: Consistency + Time = Trust. For example, our brand color is a shade of blue. We use blue on our signage, on letterhead, and pretty much everywhere. If we suddenly dropped a solid red logo on our site, it would break that chain of consistency. It would create confusion and, possibly, mistrust. We'd say something is "off-brand" when it's outside the expectations we've taken the time and care to establish in people's minds.
With branding, consistency is key.
Even more than a great logo, the thing that makes our branding actually "work" is doing the same things over and over again. We use our logo in one of only a few arrangements, without altering layouts or colors. We use the same fonts or family of fonts across web and print designs. For all our designs we draw from our core color palette and make sure every color we use complements them.
For branding on this website, we kept it “classy.”
For our website styling, we use a well-designed framework of "classes." Classes are web-specific styles and formatting applied in the website's stylesheets, or CSS, or sometimes  within <style> tags in code blocks. This creates a consistent look sitewide. (When you see text on this page with a preceding dot—like .c-h1—that's an example of a class. If this concept seems fuzzy—don't worry, this is meant for our nerdy website-building friends!)

Using a system of classes is a shorthand way for designers/developers to quickly create page elements without having to remember and/or type out the specifications every single time. For example, you don't have to know a color code to make a background our main color, just put .c-bg-accent.

Since styles live in one place, it also lets us make sweeping changes instead of going page, by page, by page (potentially hundreds of them). Nope, just change the styling for .c-text-m once, and it magically applies everywhere. (If you're a designer/developer reading this, it may help to know we're using a modified version of the OxyNinja Core framework, which you can get a cheatsheet for here.)

Typography

Just like the words we use hold weight and meaning, the way words look sets an important tone for our communication. The fonts we choose can help us communicate with further clarity and effectiveness, especially when we use them with consistency.

This site uses Newsreader as its heading font. Metropolis a beautifully-designed serif font family.

It uses Rubik as its paragraph—or body—text. Both of our chosen fonts are designed specifically for optimal readability, which helps us achieve further clarity and accessibility in our communication.  Both of the selected fonts are also open-source, which means the font can be shared and installed on any staff computers without purchasing special licensing.

Headings

Font: Newsreader Extra-Bold
Display
.c-h1-fat
Font size: 64px (4.5-3.5rem)
Use for: Page titles only, especially where you want a bold emphasis
Heading 1
.c-h1
Font size: 56px (3.5-2.5rem)
Use for: Page titles only
Heading 2
.c-h2
Font size: 48px (3-2rem)
Use for: Section Titles
Heading 3
.c-h3
Font size: 30px (1.5-2.5rem) 
Use for: Section Subtitle A
Heading 4
.c-h4
Font size: 20px (1.75-1.25rem)
Use for: Section Subtitle B
Heading 5
.c-h5
Font size: 18px (1-1.5rem)

Heading 6
.c-h6
Font size: 16px (1-1.25rem)

Body paragraphs

Font: Rubik
Body XL
.c-text-xl
Font size: 21px
Use for: Page header or Call-to-Action sections where either Body M or even Body L look "overwhelmed" by surrounding space.
Body L
.c-text-l
Font size: 18px
Use for: Sections where you want text to have a bit more emphasis than a standard paragraph.
Body M
.c-text-m
Font size: 16px
Use for: Default paragraph text—page content, blog posts, etc.
Text S
.c-text-s
Font size: 13px
Use for: Footnotes and explainer text (like this!) that should be de-emphasized from the main content.

Other useful text styles

Tagline Heading
.c-tagline
Tagline Alt Heading
.c-tagline-alt
Italic Text
.c-text-i
Bold Text
.c-text-b
Capitalized First Letters
.c-text-capitalized
All-Uppercase Text
.c-text-uppercase
Quoted text
.c-text-quote
Serif Font (Crimson Pro)
.c-text-serif
(Pro Tip: Combine text, color, or background classes for alternate uses!) 
Tagline Alt Heading w/ Pop Alt Background
.c-tagline-alt .c-bg-pop-alt  .c-text-light

Quoted text in italic.

.c-quote .c-text-serif  .c-text-i
Tagline heading in accent color
.c-tagline .c-text-accent 

Typographic examples

Here's an example of a Heading using the .c-h2 class. It's big and bold.
This is what a Heading using the .c-tagline class looks like: Clean and spaced-out.
Here's a body of text using the .c-text-m class. Churchly ipsum dolor amet dive in super sanctified, free outreach abundant life radiate sermon have your way. Unpack that passion charismatic sanctified pursuing youth pastor accountability group wrecked. Reach the nations NIV worship leader saved Toby Mac, seeker friendly emergent free contemporary watered down revival cell group dig in atmosphere announcement.
For sub-sections use the .c-h3 class.
Churchly ipsum dolor amet pour out hymn 10-40 window dive in, seeing the fruit super of the world tell the world intercessor starting point postmodern secular worship leader. Oceans praiseworthy charismatic contata tell the world good good Father.

Here's what a pull quote using the .c-text-quote class would look like:
“An adventure is only an inconvenience rightly considered. An inconvenience is only an adventure wrongly considered.”
—GK Chesterton (text using .c-tagline class)

Colors

Color is powerful. While colors don't necessarily "mean" anything on their own, they can create moods and feelings, or signify something important. Our color system uses a primary, secondary, light, and dark colors for most elements. We also have an expanded palette to help create an occasional "pop" when-needed.
Main Palette:
.c-bg-accent

Primary

#cc0000
.c-text-accent
.c-bg-accent-alt

Secondary

#dee5e5
.c-text-accent-alt
.c-bg-light

Light

#f7f7f7
.c-text-light
.c-bg-dark

Dark

#2c4251
.c-text-dark
Expanded Palette:
.c-bg-medium
Medium
#2c4251
.c-text-dark
.c-bg-pop
Pop
#2c4251
.c-text-pop
.c-bg-pop-alt
Pop Alt
#2c4251
.c-text-pop-alt

Ready to become a Kingsway Knight?

crossmenu