Class Theme Style Guide
Complete design system for WordPress
Color Palette
The Class theme uses a carefully selected color palette designed for clarity and trust. Primary teal and navy create visual hierarchy.
Primary (Teal)
#007B91
Primary Dark
#003D49
Brand Hover (Deep Teal)
#005F51
Secondary (Blue)
#26AAE1
Secondary Dark (Blue)
#2386B4
Brand (Navy)
#00205A
Body Text
#333333
Tertiary
#a9638f
Dark Grey
#B0B0B0
Medium Grey
#E0E0E0
Light Grey
#F2F2F2
White
#ffffff
Black
#000000
Typography
The theme uses Barlow for interface text and Frank Ruhl Libre for headings, creating a modern and professional aesthetic.
Font Families
Barlow (Sans-serif)
Used for all body text, headings, buttons, and interface elements. Clean, readable, and professional.
Frank Ruhl Libre (Serif)
Barley Used.
Font Sizes
Huge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
XXLarge 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
XXLarge 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
XXLarge 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
XLarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor.
Large: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor. Nunc non ultricies mauris. .
Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor. Nunc non ultricies mauris. Nulla consectetur porta neque, porta imperdiet nisi vulputate sit amet.
Normal: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor. Nunc non ultricies mauris. Nulla consectetur porta neque, porta imperdiet nisi vulputate sit amet. Vestibulum congue tincidunt est ut cursus.
Small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor. Nunc non ultricies mauris. Nulla consectetur porta neque, porta imperdiet nisi vulputate sit amet. Vestibulum congue tincidunt est ut cursus. Vivamus at interdum turpis, hendrerit porta diam.
Extra Small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum egestas urna quis auctor. Nunc non ultricies mauris. Nulla consectetur porta neque, porta imperdiet nisi vulputate sit amet. Vestibulum congue tincidunt est ut cursus. Vivamus at interdum turpis, hendrerit porta diam.
Buttons & CTAs
Buttons follow a consistent design system with primary, secondary, and outline variants. All buttons use the Barlow font at weight 600.
Fill Button
Outline Button
Spacing Scale
Consistent spacing creates visual harmony and improves readability. Use these predefined sizes throughout your layouts.
Spacing None
Spacing XS
Spacing S
Spacing M
Spacing L
Spacing XL
Spacing XXL
Spacing Section
Spacing – Gap
None
XS
S
M
L
XL
XXL
Section
Block Gap
Layout Dimensions
Two responsive content widths ensure layouts work beautifully across all screen sizes.