Templates thatsadam Design System

thats adam
Page Compositions

Templates define how organisms are arranged into complete pages. They establish layout rhythm, section order, and contextual rules about which organisms appear together. Three templates power the entire site.

front-page.php

Homepage

The most interactive page. Hero canvas game mechanic and audience-switching system are unique to this template.

Page structure

Navigation organism
Hero organism — Canvas BG · Audience selector · Heading variants · CTA row · Game mechanic
Stats Bar organism
Project Grid organism — WP_Query · 2-column · Project Card molecules
CTA Section organism
Footer organism

Unique behaviours

  • Målgruppevælger7 audience types (Designer, Developer, Hiring Manager, PM, SA, Colleague, General). Each swaps heading, bio, and CTA label
  • Game mechanic30-second interactive experience. Score tracked in scoreboard overlay
  • Pattern selectorGeometric maze vs Plasma canvas, switchable via bottom-right control
Do

Keep the audience selector as the primary left-column element — it earns its space by personalising the hero for every visitor type.

Don't

Don't add more than 6 portfolio items to the homepage grid — truncate and link to the full work archive.

page-services.php

Services Page

Custom page template (Template Name: Services). Hero uses the static canvas background. Double Diamond is an SVG composition.

Page structure

Navigation organism
Services Hero — Static canvas BG · Heading + red variant · Blockquote
Services Grid — 2-col · Service Card molecules · ACF repeater
Process Section — Double Diamond SVG · Accordion organism
CTA Section organism
Footer organism

Unique behaviours

  • ACF fallbacksAll fields have hardcoded fallback values — the page looks correct even without CMS data
  • Double DiamondSVG polygon composition with drop-shadow glow filter
  • AccordionNative details/summary, all items open by default (open attribute)
Do

Keep the services list to 6 items — the 2-column grid reads best at 3 rows (6 cards).

Don't

Don't use the animated canvas background on the services page — the static version is intentional, reducing motion on a content-heavy page.

single-portfolio.php

Case Study

The most content-rich template. Fixed hero followed by an open-ended flexible content area assembled from any combination of ACF blocks. Lightbox zoom available on all images.

Page structure

Navigation organism
Case Study Hero — Full-bleed image · Overlay: title + desc · Project stats bar
Flexible Content Area — any combination of ACF blocks
CTA Section organism
Footer organism

Unique behaviours

  • Portfolio CPTPosts use the portfolio custom post type, displayed via single-portfolio.php
  • Lightbox.cs-lightbox triggered on image click — position:fixed overlay with close button
  • BlocksText Block, Text Plus, Pull Quote, Flow, Table, Screen Mockups, User Interviews, User Stories, Personas, Preference Testing, Full Width Image
Do

Open with a Text Block for context, use Pull Quote to mark the design pivot, close with Screen Mockups showing the final solution.

Don't

Don't stack more than two consecutive text-only blocks — alternate with visual blocks to maintain reading momentum.