Style Guide
Complete visual reference for all design tokens, utilities, and components from style.css and design-system.css.
Typography System
HTML Heading Tags
Default heading styles are defined in style.css.
<h1>
H1 Headline
<h2>
H2 Headline
<h3>
H3 Headline
<h4>
H4 Headline
<h5>
H5 Headline
<h6>
H6 Headline
Heading Classes
Apply heading typography to non-heading elements. Use when semantic HTML doesn’t match the visual design.
.text-h1
Heading Style H1
.text-h2
Heading Style H2
.text-h3
Heading Style H3
.text-h4
Heading Style H4
.text-h5
Heading Style H5
.text-h6
Heading Style H6
Heading Emphasis
Using <em> inside headings applies accent color + serif font.
<h2><em>
Headline with Emphasis
<h3><em>
Another Styled Headline
Other HTML Classes
All Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
All Links
Text Size Scale
Fluid typography classes using clamp() for responsive sizing. Defined in style.css.
.text-size-hero
48→72px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-xxxl
36→48px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-xxl
30→42px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-xl
27→38px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-lg
21→27px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-md
18→21px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-regular
15→18px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-sm
14→16px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-xs
14→15px
The Quick Brown Fox Jumps Over The Lazy Dog
.text-size-tiny
12→13px
The Quick Brown Fox Jumps Over The Lazy Dog
Text Weights
Font weight utilities from design-system.css.
.text-weight-bold
700
The Quick Brown Fox
.text-weight-medium
600
The Quick Brown Fox
.text-weight-normal
400
The Quick Brown Fox
Text Color Utilities
Text color utilities from design-system.css.
.text-primary
Primary brand color text
.text-strong
High-contrast body text (default ink)
.text-secondary
Subhead/secondary emphasis
.text-muted
De-emphasized helper text
.text-inverse
White text for dark backgrounds
Text Style Utilities
Text transformations and decorations from design-system.css.
.text-style-allcaps
text transform uppercase
.text-style-italic
Italic text style
.text-style-link
Underlined text
.text-style-strikethrough
Strikethrough text
.text-style-nowrap
This text will not wrap to the next line no matter how long it gets
.text-style-tagline
Bold uppercase tagline
.text-style-quote
This is a styled quote with left border and padding
.text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
.text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Text Alignment
.text-align-center
Center aligned text
.text-align-right
Right aligned text
Color System
Neutral Colors
Base grayscale palette for backgrounds, text, and borders. Defined in WordPress Customizer.
Built using a perceived scale with https://www.tints.dev and OKLCH colors.
–neutral-0
–neutral-50
–neutral-100
–neutral-200
–neutral-300
–neutral-400
–neutral-500
–neutral-600
–neutral-700
–neutral-800
–neutral-900
–neutral-950
Brand Colors
Primary brand and accent colors. Defined in WordPress Customizer.
Built using a linear scale with https://www.tints.dev and OKLCH colors.
–primary-50
–primary-100
–primary-200
–primary-300
–primary-400
–primary-500
–primary-600
–primary-700
–primary-800
–primary-900
–primary-950
–accent-100
–accent-200
–accent-300
–accent-400
–accent-500
–accent-600
–accent-700
–accent-800
–accent-900
Background Utilities
Background color classes from design-system.css.
.bg-white
White Background
Pure white surface for maximum contrast. Use for cards, modals, and elevated content on colored backgrounds.
Sample Link.bg-light
.bg-base
Base Background
Primary section background. Slightly darker than light for subtle contrast.
Sample Link.bg-shade
Shade Background
Alternating sections and subtle tints. Links automatically use --link-contrast for better visibility.
.bg-dark
Border & Radius
Border Side Utilities
Apply borders to specific sides. From design-system.css.
.border
.border-top
.border-right
.border-bottom
.border-left
.border-horizontal
.border-vertical
Border Color Modifiers
Combine with border utilities to change color.
.border-light
.border
.border-dark
Border Radius
.radius-sm
.radius-md
.radius-lg
Box Shadow
.shadow-sm
Headers, cards at rest
.shadow-md
Cards on hover, dropdowns, elevated elements
.shadow-lg
Modals, overlays, mobile menus
Divider Utility
.divider-horizontal
Spacing System
Spacing Scale
Fluid spacing tokens using clamp() for responsive sizing. Defined in style.css.
–spacing-xxs
6→8px
–spacing-xs
12→16px
–spacing-sm
16→24px
–spacing-md
20→32px
–spacing-lg
32→48px
–spacing-xl
48→80px
–spacing-xxl
64→104px
–spacing-xxxl
96→160px
Section Spacing Classes
Vertical padding classes for major page sections
.section-sm
24→56px
.section-md
40→88px
.section-lg
56→112px
.section-xl
72→144px
Padding Size Utilities
Apply padding on all sides.
.padding-0
.padding-xxs
.padding-xs
.padding-sm
.padding-md
.padding-lg
.padding-xl
.padding-xxl
.padding-xxxl
Padding Direction Classes
Apply padding to specific sides (combine with size classes like .padding-md).
.padding-top
.padding-right
.padding-bottom
.padding-left
.padding-horizontal
.padding-vertical
.padding-global
Margin Size Utilities
Apply margin on all sides.
.margin-0
.margin-xxs
.margin-xs
.margin-sm
.margin-md
.margin-lg
.margin-xl
.margin-xxl
.margin-xxxl
Margin Direction Classes
Apply margin to specific sides (combine with size classes like .margin-md).
.margin-top
.margin-right
.margin-bottom
.margin-left
.margin-horizontal
.margin-vertical
Gap Utilities
Set spacing between flex/grid children.
.gap-xxs
.gap-xs
.gap-sm
.gap-md
.gap-lg
.gap-xl
Layout System
Container Widths
Centered containers with max-width constraints.
.container-sm
48rem / 768px
Narrow container for focused content like forms and single-column layouts.
.container-md
64rem / 1024px
Medium container for articles and standard content
.container-lg
var(–gb-container-width)
Large container matching GeneratePress theme settings (typically 1200px)
Grid Layouts
CSS Grid system with predefined column structures. All grids stack to 1 column on mobile.
.grid
.grid–2col
Column 1
Column 2
.grid
.grid–3col
Column 1
Column 2
Column 3
.grid
.grid–4col
Column 1
Column 2
Column 3
Column 4
.grid
.grid–content-media
1.25fr 1fr
Content Column
Slightly wider column for text content. Useful for content-first layouts.
.grid
.grid–media-content
1fr 1.25fr
Content Column
Media-first layout with wider content column on the right.
Flexbox Utilities
.flex-column
Item 1 (centered)
Item 2 (centered)
.flex-column
.flex-column–start
Item 1 (centered)
Item 2 (centered)
.flex-column
.flex-column–end
Item 1 (centered)
Item 2 (centered)
Flex Utility
Simple flex display class for quick layouts.
.flex
Item 1
Item 2
Item 3
Grid Alignment Utilities
Control alignment of items within grid/flex containers
.items-center
.justify-center
Centered
Content
.items-start
Top
Aligned
.items-end
Bottom
Aligned
.items-stretch
Stretched
Items
.is-center
.is-right
Special Layout Classes
.section-bordered
Section with left and right borders plus horizontal padding. Resets on mobile.
.stretch-link
Clickable Card
The entire card is clickable thanks to .stretch-link on parent
Positioning System
Positioning Utilities
Position and z-index utilities from design-system.css.
.relative
Sets position: relative
.absolute
Sets position: absolute
.z-base
z-index:1
Base stacking context (includes position: relative)
.z-elevated
z-index:2
Elevated elements
.z-overlay
z-index:10
Overlays, modals, and top-level UI
Buttons & UI Elements
Button Variants
Button system from design-system.css.
Buttons on Dark Backgrounds
Buttons with Icons
Use .button--icon for proper spacing.
Button Groups
Flex container for multiple buttons with consistent spacing.
.button-group
.button-group
.is-center
.button-group
.is-right
Swiper Navigation
Arrow controls for Swiper carousels. From design-system.css.
.swiper__arrow
Tag System
Small labels for categories, filters, and badges.
Card System
Card Components
Flexible card component with image, body, title, and meta sections.
.card (Vertical)
.card
.card–horizontal
Horizontal Card
Image System
Image Wrapper Utilities
Aspect ratio containers with border options.
.img-wrapper
.img-wrapper–square
.img-wrapper
.img-wrapper–16×9
.img-wrapper
.img-wrapper–3×2
.img-wrapper
.img-wrapper–bordered
Available Aspect Ratios
.img-wrapper--square— 1:1.img-wrapper--16x9— 16:9 (video/widescreen).img-wrapper--8x6— 8:6.img-wrapper--3x2— 3:2 (photo).img-wrapper--2x3— 2:3 (portrait).img-wrapper--card— No border radius (for cards)
Background Image Wrapper
Full-bleed background images with dark overlay for hero sections.
.img-wrapper
.img-wrapper–background
Content Over Background
Includes 50% dark overlay via ::after pseudo-element
Icon System
Icon Size Classes
Consistent icon sizing matching spacing scale
.icon
.icon–xs
1rem / 16px
.icon
.icon–sm
1.5rem / 24px
.icon
.icon–md
2rem / 32px
.icon
.icon–lg
3rem / 48px
Animation System
Scroll Reveal Animations
Adds .is-visible class via JavaScript intersection observer in k3-core.js
.fade-in
Opacity only animation for images and media.
.fade-in-up
Fade and translate up — default for text content
.fade-in-sequence
Same as fade-in-up but for staggered sequences
.scale-in
Fade and scale — use for icons and badges only
Accessibility Note: All animations respect prefers-reduced-motion and disable automatically for users who prefer reduced motion.
Visibility & Responsive Utilities
.hide
Hidden on all screen sizes
.hide-tablet
Hidden on tablet and below (≤1024px)
.hide-mobile
Hidden on mobile (≤767px)
.mobile-order-first
Moves element to first position on mobile
.mobile-order-last
Moves element to last position on mobile
Miscellaneous Utilities
.list-unstyled
- List item without bullets
- List item without bullets
- List item without bullets
a.no-ul