Utility Classes - Canvas Design System

Container

Centered, max-width containers for page content. Defined in css/styles.css and css/listing-redesign.css.

Class	Max-Width	Token	Usage
`.container`	1120px	`--container-xl`	Default page content wrapper
`.hero-container`	1120px	`--container-xl`	Hero section inner wrapper
`.listing-content-grid`	1120px	`--container-xl`	Card grid on listing pages

<div class="container">
  <!-- Content centered at max 1120px -->
</div>

info

Use the --container-* tokens from platform-tokens.css when setting max-widths inline: --container-xs (480px), --container-sm (640px), --container-md (768px), --container-lg (960px), --container-xl (1120px), --container-2xl (1280px).

Sections

Section wrappers provide vertical padding and optional background colors. Defined in css/styles.css.

Class	Behavior
`.section`	Vertical padding (80px top/bottom), centered content
`.section-light`	White background (#FFFFFF)
`.section-alt`	Alternating gray background (gray-50)
`.section-dark`	Dark ink background (#2C2416), white text
`.section-navy`	Navy gradient background, white text
`.structured-section`	Content-focused section with centered text and grid
`.coming-soon`	Section for upcoming feature cards

<section class="section">
  <?= ws_section_header('Section Title', ['subtitle' => 'Subtitle text']) ?>
  <div class="features-grid">
    <!-- Content cards -->
  </div>
</section>

Grids

CSS Grid layout utilities for card grids and content layouts.

Design System Grids

Used within design system documentation pages. Defined in ds-header.php.

Class	Columns	Gap	Mobile
`.ds-grid-2`	2 equal columns	16px	Stacks to 1 column
`.ds-grid-3`	3 equal columns	16px	Stacks to 1 column
`.ds-grid-4`	4 equal columns	16px	Stacks to 1 column

Content Grids

Used on public-facing pages. Defined in css/styles.css and css/listing-redesign.css.

Class	Columns	Usage
`.features-grid`	3 columns (auto-fill, min 280px)	Feature cards on landing pages
`.coming-soon-grid`	2 columns	Coming soon feature cards
`.listing-content-grid`	3 columns (auto-fill, min 300px)	Listing cards (workshops, exercises, etc.)

<!-- Feature grid -->
<div class="features-grid">
  <?= ws_feature_card('Title', 'Description', ['icon' => 'star']) ?>
  <?= ws_feature_card('Title', 'Description', ['icon' => 'star']) ?>
</div>

<!-- Listing card grid -->
<div class="listing-content-grid">
  <?php foreach($items as $item): ?>
    <?php renderListingCard($item); ?>
  <?php endforeach; ?>
</div>

Hero Classes

Hero section layout classes. Defined in css/styles.css. See the ws_hero() component for the PHP helper.

Class	Purpose
`.hero`	Outer hero wrapper (full-width, padded)
`.hero-container`	Inner container (max-width 1120px, flex layout)
`.hero-content`	Text column (max-width 540px)
`.hero-badge`	Small label above the title
`.hero-title`	Primary heading (Fraunces, clamp-sized)
`.hero-title-accent`	Italic + colored + underline span in title
`.hero-subtitle`	Description paragraph below title
`.hero-actions`	Button row
`.hero-stats`	Stat row with dividers
`.hero-visual`	Image/illustration column

Background Patterns

Texture classes for page backgrounds. See Patterns & Templates for visual reference.

Class	Effect	Used By
`.hero-bg-pattern`	Dot pattern overlay on hero sections	Main site, Tips, Coach
`bg-pattern-grid`	Fine grid lines on paper-colored background	Tips, Intervention, Podcasts
`bg-pattern-dots`	Subtle dot texture	Detail pages

Breakpoints

Standard breakpoints used across the platform. Use the raw pixel values in @media queries — CSS custom properties can't be used in media queries.

Name	Value	Token	Usage
Mobile	`480px`	`--bp-mobile`	Small phones, compact layouts
Mobile Landscape	`640px`	`--bp-mobile-landscape`	Phones in landscape, small drawers
Tablet	`768px`	`--bp-tablet`	Primary breakpoint — grid collapse, nav toggle
Tablet Landscape	`960px`	`--bp-tablet-landscape`	Sidebar layouts, modals
Desktop Small	`1120px`	`--bp-desktop-sm`	Content container max-width
Desktop	`1280px`	`--bp-desktop`	Full desktop layouts

/* Standard media query pattern */
@media (max-width: 768px) {
  .my-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .my-element { padding: var(--space-4); }
}

Miscellaneous

Class	Purpose	Source
`.check-list`	Unordered list with checkmark icons (green)	`css/styles.css`
`.card-wrapper`	Generic card link wrapper with hover effects	`css/listing-redesign.css`
`.listing-card`	Content listing card (workshops, exercises, etc.)	`css/listing-redesign.css`
`.display-text`	Hero-scale display heading with accent `<em>`	`css/styles.css`