Style Guide
Brand assets and guidelines.
Howdy, fellow Whywamers
or YWAMers if you prefer.
This is our brand, and how we use it.
This is the YWAM Asunción style guide, not to confuse it with the main YWAM.org one.
Here you’ll read about our lovingly crafted brand, its graphic assets, as well as internal guidelines for using these various resources.
Logo
The YWAM Asunción logo and logo variations are the property of YWAM Asunción, they are a modified version of the YWAM isologo and the owner retains all rights.
- YWAM Asunción
- JUCUM Asunción
- YWAMAsunción
- JUCUMAsunción
Dark Logo + Color
Light Logo + Color
Light Logo
Contains .affinitydesign, .svg & .png versions of YWAM Asunción logo, in both dark and light version.
School logos (additional)
Color Palette
New Blood
Used to distinguish YWAM Asunción from the rest of our ministries. Used for all YWAM related call-to-actions.
#e40037
King SOLOMON
Used for ‘high priority / call-to-action’ buttons & text links. Works well as contrasting color on light background or saffron.
#44318d
NOT SO DARK
Secondary background color and text over a light background. Simply put, it’s easy on the eyes between contrasts.
#1a1a1a
New Blood HOVER HIGHLIGHT
Just use for button highlights
#f91f556
King SOLOMON HOVER HIGHLIGHT
Just use for button highlights
#8265a7
NOT SO DARK HOVER HIGHLIGHT
Just use for button highlights
#303030
Light Gray
Used as background or buttons for less striking content, and to highlight content blocks on a white background.
#87868A
NOT So WHITE
You saw it coming.
Used for all borders, separating content and for table alt rows.
#efefef
JUST WHITE
Used on text with dark colors.
Plenty of whitespace.
Less is more.
#ffffff
SOLOMON's CAPE
Another background color.
Goes with all the light colors and a perfect companion for King’s Solomon color. Other than his 700 wives and 300 concubines of course.
#2a1b3d
Saffron
#F7CA18
Alabaster
Horrible for texts. But perfect for an in-between ‘Not So White’ and ‘Just White’ background as the one you can see on this page. Also soft on the yes.
#f7f7f7
Typography
We use the following typefaces on ywamasuncion.com:
Racing Sans One is used mainly for headings (h1,h2,h3,h4).
Open Sans is used for paragraphs or body copy,
small headings (h5, h6) and button texts.
Open Sans Condensed is used for some Uppercase in Buttons and secondary headers.
Racing Sans One Regular
Racing Sans One Bold
Open Sans Light
Open Sans Regular
Open Sans Bold
OPEN SANS CONDENSED REGULAR
OPEN SANS CONDENSED BOLD
Guide to identify font weight
- 100: Thin, Hairline, Ultra-light, Extra-light
- 200: Light
- 300: Book
- 400: Regular, Normal, Plain, Roman, Standard
- 500: Medium
- 600: Semi-bold, Demi-bold
- 700: Bold
- 800: Heavy, Black, Extra-bold
- 900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster
Website Style Guidelines
Here you will find all the common HTML elements used across the site, not just on this one but the other ministries too.
Coding & Editing Standards
As this website is a WordPress based CMS, we prefer to follow their coding standards as well. This applies to both here on ‘ywamasuncion.com’ as well as the other ministries we manage.
Please refer to this guide for CSS coding best practices.
This is an H1 heading
Avoid using full page width paragraphs as much as possible.
Try to keep to a maximum of 12 words per line for best legibility.
This is an H2 heading
This is a big paragraph with the idea of creating the exact same example we mentioned not to do in the past. At the same time by defining simple yet very useful paddings, margins, and column restrictions you can create a perfect environment for readers to … well, read.
Coding Standards
This is an H1 heading
Avoid using full page width paragraphs as much as possible.
Try to keep to a maximum of 12 words per line for best legibility.
This is an H2 heading
This is a big paragraph with the idea of creating the exact same example we mentioned not to do in the past. At the same time by defining simple yet very useful paddings, margins, and column restrictions you can create a perfect environment for readers to … well, read.
COLOR MODE
This is an H1 heading
Avoid using full page width paragraphs as much as possible.
Try to keep to a maximum of 12 words per line for best legibility.
This is an H2 heading
This is a big paragraph with the idea of creating the exact same example we mentioned not to do in the past. At the same time by defining simple yet very useful paddings, margins, and column restrictions you can create a perfect environment for readers to … well, read.
