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

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
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]
PHP
<?php thats_adam_part('components/hero-canvas-bg'); ?>
<?php thats_adam_part('components/hero-canvas-bg', ['static' => true]); ?>

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

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