{"id":9,"date":"2026-07-16T20:46:55","date_gmt":"2026-07-16T20:46:55","guid":{"rendered":"https:\/\/evergreen.gladding.dev\/?page_id=9"},"modified":"2026-07-16T20:46:59","modified_gmt":"2026-07-16T20:46:59","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/evergreen.gladding.dev\/?page_id=9","title":{"rendered":"Style Guide"},"content":{"rendered":"\n
\n
\n

Evergreen Web Style Guide<\/h1>\n\n\n\n

A reference for spacing, typography, colours and component styles. <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Core Colours<\/h2>\n\n\n\n

The six foundation colors from GeneratePress Customizer. All variants (tints, shades, alphas) derive from these.<\/p>\n\n\n\n

\n
\n

Brand 1<\/p>\n\n\n\n

var(–brand-1)<\/p>\n<\/div>\n\n\n\n

\n

Brand 2<\/p>\n\n\n\n

var(–brand-2)<\/p>\n<\/div>\n\n\n\n

\n

Accent<\/p>\n\n\n\n

var(–accent)<\/p>\n<\/div>\n\n\n\n

\n

Contrast<\/p>\n\n\n\n

var(–contrast)<\/p>\n<\/div>\n\n\n\n

\n

Contrast 2<\/p>\n\n\n\n

var(–contrast-2)<\/p>\n<\/div>\n\n\n\n

\n

Contrast 3<\/p>\n\n\n\n

var(–contrast-3)<\/p>\n<\/div>\n\n\n\n

\n

Base<\/p>\n\n\n\n

var(–base)<\/p>\n<\/div>\n\n\n\n

\n

Base 2<\/p>\n\n\n\n

var(–base-2)<\/p>\n<\/div>\n\n\n\n

\n

Base 3<\/p>\n\n\n\n

var(–base-3)<\/p>\n<\/div>\n\n\n\n

\n

Gradient 1<\/p>\n\n\n\n

background-image: linear-gradient(to right, var(–brand-1) 0%, var(–brand-2) 100%)<\/p>\n<\/div>\n\n\n\n

\n

Gradient 2<\/p>\n\n\n\n

background-image: linear-gradient(180deg, var(–brand-1) 0%, var(–brand-2) 100%)<\/p>\n<\/div>\n\n\n\n

\n

Gradient 3<\/p>\n\n\n\n

background-image: radial-gradient(var(–brand-2) 0%, var(–brand-1) 100%)<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n

Brand 1 Colour Variants<\/h2>\n\n\n\n

Generated via color-mix() from the accent color. Tints mix with white, shades with black, alphas with transparent.<\/p>\n\n\n\n

Tints (mixed with white)<\/h3>\n\n\n\n
\n
\n

tint-10<\/p>\n<\/div>\n\n\n\n

\n

tint-30<\/p>\n<\/div>\n\n\n\n

\n

tint-50<\/p>\n<\/div>\n\n\n\n

\n

tint-70<\/p>\n<\/div>\n\n\n\n

\n

tint-90<\/p>\n<\/div>\n<\/div>\n\n\n\n

Shades (mixed with black)<\/h3>\n\n\n\n
\n
\n

shade-10<\/p>\n<\/div>\n\n\n\n

\n

shade-20<\/p>\n<\/div>\n\n\n\n

\n

shade-30<\/p>\n<\/div>\n\n\n\n

\n

shade-40<\/p>\n<\/div>\n\n\n\n

\n

shade-50<\/p>\n<\/div>\n<\/div>\n\n\n\n

Alphas (transparency)<\/h3>\n\n\n\n
\n
\n

alpha-10<\/p>\n<\/div>\n\n\n\n

\n

alpha-20<\/p>\n<\/div>\n\n\n\n

\n

alpha-30<\/p>\n<\/div>\n\n\n\n

\n

alpha-50<\/p>\n<\/div>\n\n\n\n

\n

alpha-70<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Accent Colour Variants<\/h2>\n\n\n\n

Generated via color-mix() from the accent color. Tints mix with white, shades with black, alphas with transparent.<\/p>\n\n\n\n

Tints (mixed with white)<\/h3>\n\n\n\n
\n
\n

tint-10<\/p>\n<\/div>\n\n\n\n

\n

tint-30<\/p>\n<\/div>\n\n\n\n

\n

tint-50<\/p>\n<\/div>\n\n\n\n

\n

tint-70<\/p>\n<\/div>\n\n\n\n

\n

tint-90<\/p>\n<\/div>\n<\/div>\n\n\n\n

Shades (mixed with black)<\/h3>\n\n\n\n
\n
\n

shade-10<\/p>\n<\/div>\n\n\n\n

\n

shade-20<\/p>\n<\/div>\n\n\n\n

\n

shade-30<\/p>\n<\/div>\n\n\n\n

\n

shade-40<\/p>\n<\/div>\n\n\n\n

\n

shade-50<\/p>\n<\/div>\n<\/div>\n\n\n\n

Alphas (transparency)<\/h3>\n\n\n\n
\n
\n

alpha-10<\/p>\n<\/div>\n\n\n\n

\n

alpha-20<\/p>\n<\/div>\n\n\n\n

\n

alpha-30<\/p>\n<\/div>\n\n\n\n

\n

alpha-50<\/p>\n<\/div>\n\n\n\n

\n

alpha-70<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n