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 |