• English
  • Spanish

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.

Check out YWAM Asunción's Homepage

About our commitment as an organization

Go to Styles

Color Palette

These are the colors that form the YWAM Asunción brand & website. Below you will find information about each color and how best to use it.
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
Used for ‘high priority / call-to-action’ buttons & text links. Works well as contrasting color on light background or King’s Solomon.
#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
Here is a rough guide to match the numerical scale with the most common weight terms:
  • 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
Download Font Pack
Contains all the fonts in .ttf Compressed on a zip. They are all Google Font Families free to use. If you prefer to download each font family from Google Fonts you can do so going to the following links:

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. 

EXAMPLE BUTTON
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. 

EXAMPLE BUTTON
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. 

EXAMPLE BUTTON
DARK MODE