Design system - That's Adam

Research findings

User needs shape every decision

Through twelve stakeholder interviews and two rounds of usability testing, we identified three core user needs that shaped the entire design direction and validated our initial assumptions.

Anatomy

Header (col 1) — label-s + heading-m
Body (col 2–3) — text-l, tertiary colour, spans two columns

ACF Fields

labeltextSection eyebrow
headingtextSection heading
bodytextareaMain copy (large, tertiary)

.acf-text-block { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-2xl); }
.acf-text-block__header { grid-column:1; }
.acf-text-block__body   { grid-column:2/span 2; font-size:var(--text-l); }

Variant: --bullets

Approach

How we work

A structured process that moves from broad research to focused delivery.

Discovery & stakeholder interviews
Synthesis and affinity mapping
Prototyping and testing

Variant: --no-image

Context

The brief

A fast-growing logistics startup needed a delivery tracking interface that worked equally well for dispatchers on desktop and couriers on mobile, without a separate codebase.

Variant: --image-left

Image

Process

Mapping the journey

We mapped every touchpoint across the end-to-end delivery experience to identify friction points and prioritise redesign effort.

Variant: --image-right

Outcome

Final solution

A unified responsive interface that reduced dispatcher errors by 34% and cut courier training time in half.

Image

Anatomy

bullets — Two-column bullet grid, no image
no-image — Header col left (1fr), body right (2fr)
image-left — 50/50 grid, image left
image-right — 50/50 grid, image right

ACF Fields

layoutselectbullets / no-image / image-left / image-right
labeltext
headingtext
bodywysiwygRich text, supports lists + links
imageimageRequired for image-left/right
bullet_itemsrepeaterFor bullets layout

/* Four layout variants */
.acf-text-plus--bullets     { flex-direction: column; }
.acf-text-plus--no-image    { display: grid; grid-template-columns: 1fr 2fr; }
.acf-text-plus--image-left,
.acf-text-plus--image-right { display: grid; grid-template-columns: 1fr 1fr; }

Good design is as little design as possible.

— Dieter Rams

Anatomy

Quote text — text-5xl, fw-black, centered, primary colour
Attribution — text-m, fw-semibold, uppercase, secondary colour

ACF Fields

quotetextThe quote text
attributiontextName / source

.acf-pull-quote__text {
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  text-align: center;
  color: var(--text-on-dark-primary);
}

Discovery

Define the problem space through stakeholder interviews and competitive analysis.

Definere

Synthesise research into opportunity areas and a clear design brief.

Levere

Ship tested, production-ready designs with full developer handoff documentation.

Anatomy

Row — 2-column grid; left → col 1, right → col 2
Card — 106px circle (image or number) + title + body
Connector — JS-drawn SVG path, stroke: primary-30, 8px corners

ACF Fields

labeltext
headingtext
descriptiontextHalf-width intro description
stepsrepeaterstep_title, step_body, step_image, side (left/right)

/* JS draws connector SVG between adjacent cards */
.acf-flow__connector { position:absolute; overflow:visible; pointer-events:none; }
.acf-flow__connector path { fill:none; stroke:var(--surface-branding-primary-30); stroke-width:2; }

Feature	That's Adam	Competitor A	Competitor B
Responsive design	Full	Partial	None
Dark mode	Token-driven	None	Manual
Designsystem	Figma source CSS tokens Living docs	Style guide only	None

Note: first column header renders at text-xl in red; first column cells render in red, uppercase, semibold. Subsequent columns are grey.

Anatomy

Column headers — text-l, fw-black, tertiary grey; first-child: text-xl, red secondary
Row label (col 1) — semibold, red secondary, uppercase, 4px tracking; flex row with optional 150×150px image
Data cells — text-m, tertiary; bullet lists use custom red square marker (no disc)
table-layout: fixed — equal column widths enforced
Mobile — overflow-x: auto, table-layout reverts to auto, min-width 300px per cell

ACF Fields

labeltext
headingtext
columnsrepeatercolumn_heading
rowsrepeaterrow_label, row_image, cells (sub-repeater: cell_content, cell_bullets)

.acf-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.acf-table th, .acf-table td { padding:var(--space-l) var(--space-m); vertical-align:middle; border-bottom:1px solid var(--surface-branding-primary-30); }
.acf-table th { font-size:var(--text-l); font-weight:var(--fw-black); color:var(--text-on-dark-tertiary); border-bottom:2px solid var(--surface-branding-primary-30); }
.acf-table th:first-child { font-size:var(--text-xl); color:var(--text-on-dark-secondary); }
.acf-table td:first-child { font-weight:var(--fw-semibold); color:var(--text-on-dark-secondary); text-transform:uppercase; letter-spacing:4px; }
.acf-table__bullets li::before { content:''; display:block; width:8px; height:8px; background:var(--surface-branding-primary); margin-top:6px; }

Screen

Dashboard view

Screen

Detail view

Anatomy

Glow — filter: drop-shadow(0 0 24px var(--lightbox-img-shadow))
Container — No overflow:hidden — glow must bleed outside bounds
Images — object-fit: contain (not cover) to preserve frame shape

ACF Fields

labeltext
headingtext
layoutselectdefault / split-meta
imagesrepeaterimage, caption, bullets

.acf-screen-mockups__mockup img {
  filter: drop-shadow(0 0 24px var(--lightbox-img-shadow));
}
/* No overflow:hidden on parent */

SJ

Sarah Johnson Senior Product Manager

The handoff between design and development was always where things broke down — I needed a designer who understood both sides.

Insights

Cross-functional communication
Design-dev handoff pain
Need for process clarity

Anatomy

Ghost number — absolute right:-0.05em; clamp(120px,22vw,220px); fw-black; red; opacity 0.07; z-index 0
Photo — 240×240px; border-radius:12px; object-position:50% 20% (face-favoured); initials fallback: red fw-black clamp(2rem,5vw,4rem)
Navn — `.heading-m` class; primary colour
Role — text-m; fw-semibold; tertiary; uppercase; ls-label-xl (6px)
Quote — clamp(text-xl,3.5vw,2.4rem); fw-extralight; italic; primary; max-width:78ch; ls-heading; lh-xl
Insights label — fw-semibold; secondary red; uppercase; ls-label-xl
Chips — column flex; pill border (surface-branding-primary-30, radius 100px); tertiary text; mobile: flex-wrap row

ACF Fields

labeltext
headingtext
descriptiontextHalf-width intro
interviewsrepeaterparticipant_name, participant_role, participant_photo, quote, insights (sub-repeater: insight_text)

.ui-entry__quote {
  font-size: clamp(var(--text-xl), 3.5vw, 2.4rem);
  font-weight: var(--fw-extralight);
  font-style: italic;
  max-width: 78ch;
}

As

As a visitor

I want to quickly understand what kind of designer Adam is, so I can decide if he fits my project.

User stories

As a recruiter

I want to see evidence of process, not just polished outputs.

Re

Cl

As a client

I want to contact Adam and get a clear sense of services and pricing.

Anatomy

Neuron canvas — `<canvas class="acf-us-neurons">` — seeded organic node/axon pattern, radial fade to edges, z-index 0
Hub circle — 240px, double box-shadow (outer blue glow + inset tint), grid-column:2, justify-self/align-self:center
SVG lines — JS drawn from hub circumference to nearest card edge; base line: #7e1b42 + glow filter; bolt overlay: animated stroke-dashoffset; dot: leading spark
Cards — 106px img-wrap (radius-xs), title: text-xl fw-black secondary, body: text-m tertiary; hover fires bolt animation + scale(1.04)
Right cards — `.acf-us-spider__card--right { flex-direction:row-reverse }`

ACF Fields

labeltext
headingtext
descriptiontextareaoptional intro text under the heading
hub_labeltextcentre hub text, defaults to "User stories"
storiesrepeaterstory_title, story_body, story_image

/* Hub: centred in 3-col grid on desktop */
.acf-us-spider { display:grid; grid-template-columns:1fr 1fr 1fr; }
.acf-us-spider__hub { grid-column:2; min-width:240px; height:240px; border-radius:999px; }
.acf-us-description { font-size:var(--text-l); color:var(--text-on-dark-tertiary); margin-bottom:var(--space-2xl); }

MK

Marcus Klein

“I don't have time to decode a designer's portfolio — show me the impact fast.”

Interests: Startups, SaaS, scale-up culture, impact metrics

Tech frustrations: Designers who can't communicate trade-offs

Job: Head of Product, SaaS startup

Location: Copenhagen, Denmark

Age Group: 35–44

Bio:

Marcus has spent 8 years in product roles at scale-ups across the Nordics. He evaluates design partners primarily on communication quality and ability to translate user insight into shipping decisions.

Anatomy

Photo col — full-width 1:1 image (object-fit:cover, 50% 30%) or placeholder with bold initials (clamp 3–6rem, red)
Bio col — name (48px/900), glowing 2px divider, italic quote (32px/400)
List items — inline SVG thumb-up icon (interests) + thumb-down icon (frustrations), 44px wide, red
Demographics — indented 68px (44px icon + 24px gap) to align with list text
Row 2 — bio rich text section + three placeholder squares (opacity fade)
Alternating layout — even-numbered cards get .prs-card--flip via PHP global counter, reversing row direction

ACF Fields

labeltext
headingtext
persona_cardsrepeatername, tagline, photo, quote, bio (wysiwyg), goals (repeater → goal_text), frustrations (repeater → frustration_text), job, nationality, location, gender, age_group, relationship, kids

/* Card: two-row flex column */
.prs-card { display:flex; flex-direction:column; gap:64px; }

/* Row 1: photo col + bio col */
.prs-card__header-row { display:flex; flex-direction:row; align-items:flex-end; gap:64px; }
.prs-card--flip .prs-card__header-row { flex-direction:row-reverse; }

/* Photo: full-width square, border-radius 16px (not a circle) */
.prs-card__photo { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; }

/* Glowing divider between name and quote */
.prs-card__divider { height:2px; background:var(--surface-branding-primary);
  box-shadow:0 0 30px 0 var(--shadow-glow); }

/* Quote: 32px regular italic */
.prs-card__quote { font-size:32px; line-height:56px; font-weight:400; font-style:italic; }

Carousel

Full-bleed, click-and-drag horizontal carousel. The first slide's left edge lines up with the rest of the page's content column on load, with more revealed by dragging/scrolling right — no scroll-snap, same freeform mechanic as the homepage Portfolio carousel. Each slide is one of the existing Text Block / Text + / Image layouts, nested via a second flexible-content field, rendered at a compact scale (scoped-down type/space tokens + forced single-column, bullet lists excepted) so full-page-sized blocks don't overwhelm a slide.

Step 1

Discovery

Image

Step 2

Research

Anatomy

Track — full-bleed breakout (`width:100vw; left:50%; transform:translateX(-50%)`, same technique as `.svc-process::before`), `padding-left:calc(max(0px, (100vw - 1440px) / 2) + page-padding-x)` lines the first slide's left edge up with `.container`'s own left inner edge at any viewport width
Slide — `width:min(840px, 82vw)`, locally overrides `--text-3xl/-2xl/-l` and `--space-2xl/-xl` smaller, plus forces the nested block's multi-column grids to single-column EXCEPT bullet lists, which keep their normal 2-column grid at this width (re-collapsed to 1 column only on mobile, ≤768px, where the slide itself shrinks to 340px)
Drag — `mousedown`/`mousemove`/`mouseup` on the track sets `scrollLeft` directly; a `moved > 6px` guard suppresses click-through to links/buttons inside a slide

ACF Fields

labeltext
headingtext
descriptiontextareaoptional intro text under the heading
slidesflexible_contentnested — layouts: text_block, text_plus, image_full_width (same sub_fields as those top-level blocks)

.acf-carousel__track {
  width:100vw; left:50%; transform:translateX(-50%);
  padding-left:calc(max(0px, (100vw - 1440px) / 2) + var(--page-padding-x));
  overflow-x:auto; cursor:grab;
}
.acf-carousel__slide {
  flex:0 0 auto; width:min(840px, 82vw);
  --text-3xl:28px; --text-2xl:22px; --text-l:16px;
  --space-2xl:var(--space-l); --space-xl:var(--space-m);
}

Full-width image — any aspect ratio

Anatomy

Header (optional) — .acf-image-full__header: label + heading above image
Image — .acf-image-full__img — fills 100% container width, loading="lazy"
Border radius — var(--radius-xs) 8px on the <img> tag

ACF Fields

labeltextOptional eyebrow label
headingtextOptional heading
imageimageRequired — the image to display
alt_texttextOptional override for image alt attribute

.acf-image-full { }
.acf-image-full__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xs);
}

Homepage hero layout

Participants were shown two homepage hero variants and asked which felt more trustworthy.

Option A 68%
Option B 32%

Option A — Bold headline first

Screen

Option B — Image first

Screen

Outcome

Option A was chosen by 68% of participants. The bold headline first approach communicated credibility more quickly than leading with imagery.

Anatomy

Donut chart — CSS mask: radial-gradient on conic-gradient background
Legend — Colour dots (border-radius: 2px) + percentage labels
Mockup — aspect-ratio 432/911, glow drop-shadow
Outcome — background: primary-10, border-left: 3px solid primary

ACF Fields

labeltext
headingtext
testsrepeatertest_label, test_desc, options (sub-repeater: option_name, option_colour, option_percentage, option_mockup), outcome_text

/* Donut chart: no JS, no SVG */
.acf-pref-test__donut {
  width: 166px; height: 166px;
  background: conic-gradient(var(--a-color) 0% var(--a-pct), var(--b-color) var(--a-pct) 100%);
  mask: radial-gradient(transparent 40%, black 40%);
}

Text Block

User needs shape every decision

Anatomy

ACF Fields

Text Plus

How we work

The brief

Mapping the journey

Final solution

Anatomy

ACF Fields

Large Pull Quote

Anatomy

ACF Fields

Flow Diagram

Discovery

Definere

Levere

Anatomy

ACF Fields

Table Block

Anatomy

ACF Fields

Screen Mockups

Delivered solution

Anatomy

ACF Fields

User Interviews

Anatomy

ACF Fields

User Stories

As a visitor

As a recruiter

As a client

Anatomy

ACF Fields

Personas

Marcus Klein

Anatomy

ACF Fields

Carousel

Discovery

Research

Anatomy

ACF Fields

Image Full Width

Delivered solution

Anatomy

ACF Fields

Preference Testing

Which layout do users prefer?

Homepage hero layout

Anatomy

ACF Fields