Gladding Digital Themes Web Style Guide
A reference for spacing, typography, colours and component styles.
Core Colours
The six foundation colors from GeneratePress Customizer. All variants (tints, shades, alphas) derive from these.
Accent
var(–accent)
Contrast
var(–contrast)
Contrast 2
var(–contrast-2)
Base
var(–base)
Base 2
var(–base-2)
Base 3
var(–base-3)
Accent Colour Variants
Generated via color-mix() from the accent color. Tints mix with white, shades with black, alphas with transparent.
Tints (mixed with white)
tint-10
tint-30
tint-50
tint-70
tint-90
Shades (mixed with black)
shade-10
shade-20
shade-30
shade-40
shade-50
Alphas (transparency)
alpha-10
alpha-20
alpha-30
alpha-50
alpha-70
Semantic Colours
Success, Warning, Error, and Info colors for UI states.
Typography
Headings, paragraphs, and special text styles.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead Paragraph (1.125rem). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Standard Paragraph (1rem). Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Small Text (0.875rem). Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headline Class
Tagline Class
Spacing Scale
Based on an 8px grid using rem units. Use these tokens for consistent spacing throughout layouts.
–spacing-xs
0.5rem (8px)
–spacing-sm
1rem (16px)
–spacing-md
1.5rem (24px)
–spacing-lg
2rem (32px)
–spacing-xl
3rem (48px)
–spacing-2xl
4rem (64px)
–spacing-3xl
6rem (96px)
–spacing-4xl
8rem (128px)
Cards
Card component variations using Global Styles.
Card Base
Basic card with background color and padding. Uses .card class.
Card Bordered
Card with subtle border. Uses .card–bordered class.
Card Accent
Card with accent tint background. Uses .card–accent class.
Section & Wrapper Sizes
Section styles control vertical padding; wrapper styles control content max-width. Mix and match for different layouts.
Sections (vertical padding)
.section-xs — 48px
.section-sm — 64px
.section-md — 96px (default)
.section-lg — 128px
.section-xl — 160px (heroes)
Wrappers (max-width)
.wrapper-xs — 640px
.wrapper-sm — 800px
.wrapper-md — 1200px (default)
.wrapper-lg — 1400px
.wrapper-xl — 1600px
.wrapper-full — 100%