Style Guide
Everything that makes the I Am Jo Webster site look like Jo: colours, fonts, components and the rules that hold it together. In the WordPress theme these are global settings, change one and the whole site updates.
Live accent colour
This is the one “special” colour used for highlights: buttons, links, the italic words in headlines, sparkles and interactive bits. Change it here and watch everything below update at once. In WordPress this is a single control under Appearance > Styles, so Jo can match it to her hair whenever she changes her photo, and it stays on brand everywhere.
#7a5c84 The lighter and darker shades (accent-soft, accent-deep) are generated automatically from your pick.Colour palette
A warm, monochrome base taken from Jo’s logo and photography, with one accent for life. Hex values shown for reference.
Typography
An elegant display serif paired with a clean sans, plus a script flourish that echoes Jo’s signature logo.
Transform the way you think, feel & act
A coach who has lived the work
Working with your conscious and subconscious mind to break limiting beliefs and step into lasting, confident change.
Core components
The reusable building blocks. In WordPress each of these is an editable block pattern.
Logo & signature
The script logo is treated as Jo’s signature. Three forms are used across the site.
Spacing, shape & motion
The numeric tokens that keep everything consistent. These map directly to the WordPress theme settings.
18px cards · 999px pills
66px top & bottom
1200px max
cubic-bezier(.22,1,.36,1)
fade + rise on scroll
gentle twinkle, accent colour