Style Guide - Minimal

This style guide is the basis for all designs for WP Easy

This is a simple view of basic styles, for a full set of styles see our full style guide

Colors

Standard SOP for color usage with ACSS:

  • Base – is used for Text colors etc.
  • Primary – Used CTA, etc.
  • Secondary – Complimentary of Primary, if needed 
  • Accent – Least used color for highlights if needed
  • Action – Variation of Primary to adjust for A11y contrast. Use for links and buttons.

Primary & Action should account for 60% of color usage.

Secondary should account for 30% of color usage. 

Accent should only account for 10% of color usage.

Base

BASE
BASE
DARK
DARK
MEDIUM
MEDIUM
LIGHT
LIGHT
ULTRA LIGHT
ULTRA LIGHT

Primary

BASE
BASE
DARK
DARK
MEDIUM
MEDIUM
LIGHT
LIGHT
ULTRA LIGHT
ULTRA LIGHT

Secondary

BASE
BASE
DARK
DARK
MEDIUM
MEDIUM
LIGHT
LIGHT
ULTRA LIGHT
ULTRA LIGHT

Accent

BASE
BASE
DARK
DARK
MEDIUM
MEDIUM
LIGHT
LIGHT
ULTRA LIGHT
ULTRA LIGHT

Action

BASE
BASE
DARK
DARK
MEDIUM
MEDIUM
LIGHT
LIGHT
ULTRA LIGHT
ULTRA LIGHT

Typography (Semantic)

I am a heading 1

text--l Let your heart take you to wherever you want to be.

I am a heading 2

Normal Text Let your heart take you to wherever you want to be.

I am a heading 3

text--s Let your heart take you to wherever you want to be.

I am a heading 4

text--xs Let your heart take you to wherever you want to be.

Typography (class)

.font--hero-heading
Hero Heading
.font--hero-lede
Hero Lede Text
.font--accent
Accent Text