Style Guide

WPGuy Starter Kit — visual reference for colours, typography, components and section spacing. All values reference semantic tokens and update automatically when brand colours change.

Colour Palette

Neutral Scale

neutral-0

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

neutral-1000

Brand Colours

brand-primary → –color-primary

brand-primary-alt → –color-primary-alt

brand-secondary → –color-secondary

brand-secondary-alt → –color-secondary-alt

brand-tertiary → –color-tertiary

brand-tertiary-alt → –color-tertiary-alt

brand-quaternary → –color-quaternary

brand-quaternary-alt → –color-quaternary-alt

brand-quinary → –color-quinary

brand-quinary-alt → –color-quinary-alt

brand-senary → –color-senary

brand-senary-alt → –color-senary-alt

Utility Colours

utility-success

utility-danger

utility-warning

utility-info

Typography Scale

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Body

Body text — The quick brown fox jumps over the lazy dog. Used for all paragraph copy and general content throughout the site.

Muted

Muted text — Used for secondary content, captions, metadata, and supporting information.

Strong

Strong text — Used for emphasis, bold passages, and high-contrast text elements.

Link

This is a standard link — hover to see the hover colour.

Buttons

Primary Button Secondary Button Outline Button Ghost Button

Small Primary Small Secondary Small Outline

Utility States

Success

Your changes have been saved successfully.

Error

Something went wrong. Please try again.

Warning

Please review your details before proceeding.

Information

This feature is available on all plans.

Form Elements

Text Input

Email Input

Select

Textarea

Input — Error State This field contains an error.

Section Spacing

.section-outer–sm

Small vertical padding — clamp(2.5rem – 3rem). Use for compact sections, logo strips, and tight CTAs.

.section-outer (default)

Default vertical padding — clamp(3rem – 4rem). Use for standard content sections, feature rows, and general page sections.

.section-outer–lg

Large vertical padding — clamp(4rem – 6rem). Use for hero sections, major landing page sections, and anywhere a strong visual pause is needed.