Organisms thatsadam Design System

thats adam
Complex UI Sections

Self-contained sections of the interface built from multiple molecules and atoms. Organisms can stand alone and be reused across templates — the navigation, footer, stats bar, and CTA section all exist here.

Stats Bar

Full-bleed horizontal row of stat items. Bordered top and bottom. Horizontally scrollable on mobile with scroll-snap. Used on the homepage below the hero.

17+Years
50+Projects
3Awards
3Genres
<div class="stats-bar">
  <div class="stats-bar__item">
    <span class="stats-bar__value">17+</span>
    <span class="stats-bar__label label-s">Years of experience</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">50+</span>
    <span class="stats-bar__label label-s">Projects completed</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">3</span>
    <span class="stats-bar__label label-s">Design awards</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">3</span>
    <span class="stats-bar__label label-s">Different genres</span>
  </div>
</div>

CTA Section

Reusable call-to-action block. Blur glass background creates depth against the page canvas. Included at the bottom of every primary template via thats_adam_part('components/cta-section').

Get in touch and let's work together :)

Currently available for freelance opportunities and creative partnerships worldwide. Let's build something exceptional together.

Let's Talk 
<section class="cta-section">
  <div class="cta-section__blur" aria-hidden="true"></div>
  <div class="cta-section__content">
    <h2 class="cta-section__heading heading-xxl">Get in touch and let's work together :)</h2>
    <p class="cta-section__body body-m">Currently available for freelance opportunities and creative partnerships worldwide. Let's build something exceptional together.</p>
  </div>
  <a href="/contact" class="btn btn-secondary">Let's Talk</a>
</section>
Do

Always place the CTA section as the final element before the footer on any primary page template.

Don't

Don't modify the CTA heading per-page — shared copy ensures brand consistency across the site.

Hero Canvas Background

Procedural animated background. Generates a random maze via depth-first search, then animates glowing particles through paths. Interactive: click events trigger particle bursts. Theme-aware — reads colour values from CSS custom properties via getComputedStyle at runtime.

Modes

  1. Animated (homepage) — full particle + glow animation, click interactions, 30-second game mechanic with score tracking
  2. Static (services page) — maze renders once, no animation, passed via ['static' => true]
<!-- The parent must be position:relative — the canvas fills it -->
<section class="hero" style="position:relative;">
  <canvas id="hcbg-a1b2c3" class="hero-canvas-bg" data-static="0" aria-hidden="true"></canvas>
  …hero content…
</section>

Project Grid

2-column CSS grid of project cards. Includes a header row with section label + heading left, "All projects" ghost link bottom-right. WP_Query driven — shows published portfolio posts.

Anatomy

  1. Header row — label + heading left; "All projects" .btn-ghost right, align-items: flex-end
  2. Grid — grid-template-columns: repeat(2, 1fr), gap: var(--space-2xl) row / var(--space-1xl) column
  3. Cards — Project Card molecule, WP_Query loop of portfolio CPT
<div class="work-grid-wrap container">
  <div class="work-grid" id="work-grid">
    <article class="project-card" style="grid-column:1/4" …>…</article>
    <article class="project-card project-card--flip" style="grid-column:1/4" …>…</article>
  </div>
  <p class="work-grid__empty body-m" id="work-grid-empty" style="display:none">No projects match this filter.</p>
</div>

Homepage Hero

947px tall hero. Left column = audience selector (7 items, extralight, active = blue glow). Right column = heading + bio + CTA row. Animated geometric maze canvas background. Clicking a glow particle explodes it.

For Designers

I speak your language — and bridge the gap to dev.

From design system architecture to token-based theming — I build the vocabulary that makes handoff frictionless.

Anatomy

  1. Canvas BG — hero-canvas-bg.php (animated=true), position:absolute, mask fades at 55% down
  2. Audience selector (left) — 240px col · 7 items · var(--text-2xl) · var(--fw-extralight) · active = var(--color-active-glow) + glow shadow
  3. Hero text (right) — label-m + .heading-xxxl (responsive) + .body-l + CTA row (btn-primary + btn-secondary)
  4. Height — min-height: 947px on production; hero fills viewport minus nav
Audience variants
GeneralUnique heading, bio, and CTA label
DevelopersUnique heading, bio, and CTA label
Hiring managersUnique heading, bio, and CTA label
DesignersUnique heading, bio, and CTA label
Project managersUnique heading, bio, and CTA label
Solution architectsUnique heading, bio, and CTA label
ColleaguesUnique heading, bio, and CTA label
<section class="home2-hero" id="home2-hero">
  <div class="home2-hero__bg" aria-hidden="true">
    <img src="/wp-content/themes/thats-adam/assets/hero-photo.png" alt="" class="home2-hero__photo">
  </div>
  <div class="home2-hero__grid">
    <div class="home2-hero__left">
      <div class="home2-hero__row">
        <div class="home2-hero__as" id="home2-hero-as">
          <p class="home2-hero__as-text" id="home2-hero-as-text">As a <strong>Designer</strong></p>
        </div>
        <div class="home2-hero__for">
          <div class="home2-hero__for-label" id="home2-hero-for-label">…</div>
          <ul class="home2-hero__audience-list" id="home2-hero-audience-list">…</ul>
        </div>
      </div>
      <p class="home2-hero__body" id="home2-hero-body">So that you can quickly get a genuine sense of how I think, design and deliver — whoever you are and whatever brought you here today.</p>
    </div>
    <div class="home2-hero__name" aria-hidden="true">…</div>
  </div>
</section>