Atoms thatsadam Design System

thats adam
Basic Building Blocks

The smallest functional units of the interface — indivisible elements that cannot be broken down further without losing their meaning. Buttons, type styles, labels, dividers. Everything else is built from these.

Buttons

Five variants mapped from Figma. All share the .btn base class. Hover transitions via the secondary-hover token. Active/pressed states use the blue glow token.

.btn-primary

Filled yellow. Single most important CTA per viewport. Limit to one visible at a time.

Default
Hover
Active
Disabled
.btn-secondary

Transparent with yellow border. Paired with primary where two CTAs are needed.

Default
Hover
Active
Disabled
.btn-ghost

Black weight, no border. Nav-adjacent or inline link contexts.

Default
Hover
Active
.btn-text

Regular weight. Nav links. Add .btn-text--active for current page state.

Default
Hover
Active page
.btn-large-text

Extralight 200. Exclusively for the hero audience selector — dramatic weight contrast is the point.

Default
Hover
Active
HTML
<button class="btn btn-primary">Get in touch</button>
<button class="btn btn-secondary">View work</button>
<a href="#" class="btn btn-ghost">Read more</a>
<a href="#" class="btn btn-text">Work</a>
<a href="#" class="btn btn-text btn-text--active">About</a>
<button class="btn btn-large-text btn-large-text--active">Designer</button>
Button hover/active text
var(--text-on-dark-btn)Primary button hover & active text — black (#000000), paired with --surface-branding-secondary-hover and --color-active-glow yellow/blue backgrounds
Do

Use exactly one .btn-primary per viewport. Pair with .btn-secondary for a secondary action.

Don't

Never place two .btn-primary buttons side by side — it dilutes hierarchy and confuses intent.

Typography Utilities

Utility classes that express the type system. Semantic level (h1–h6) and visual level are decoupled — you can use .heading-xxxl on a <p> tag.

label-s · 12px semibold uppercase +2px tracking

label-m · 16px semibold uppercase +4px tracking

label-xl · 24px semibold uppercase +6px tracking

body-m — Regular 16px · line-height 24px · tertiary colour. Used for descriptions and supporting copy throughout the site.

body-l — Regular 20px · line-height 32px. Intro paragraphs and pull-out descriptions.

heading-m · Black 32px

heading-xl · Black 48px

heading-xxl · Black 56px

Utility class reference
.label-s12px · fw-semibold · uppercase · ls-label-s · secondary colour
.label-m16px · fw-semibold · uppercase · ls-label-m · secondary colour
.label-xl24px · fw-semibold · uppercase · ls-label-xl · secondary colour
.body-m16px · fw-regular · lh-xs · tertiary colour
.body-l20px · fw-regular · lh-s · tertiary colour
.heading-m32px · fw-black · lh-m · primary colour
.heading-xl48px · fw-black · lh-xl · primary colour
.heading-xxl56px · fw-black · lh-xxl · primary colour (responsive)
.heading-xxxl96px · fw-black · lh-xxxl · primary colour (responsive)

Labels & Chips

Oval pill elements used for categorisation, insight tags, and metadata. Always border-radius: 100px with a primary-30 border.

  • Research insight
  • Navigation patterns
  • Mobile-first
CSS
<ul class="ui-entry__chips">
  <li class="ui-entry__chip">Research insight</li>
</ul>

/* .ui-entry__chip */
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--surface-branding-primary-30);
border-radius: 100px;
font-size: var(--text-m);
color: var(--text-on-dark-tertiary);

Dividers

1px horizontal rules using --surface-branding-primary-30. Used between list entries, section blocks, and accordion items.

.divider

HTML
<div class="divider"></div>

.divider { width: 100%; height: 1px; background: var(--surface-branding-primary-30); }

Filter Tabs

Single tab within a Filter Bar. Three states — idle (grey), hover (white), active (white + blue ::after underline via scaleX(0→1)). Class: .work-filter-tab / .work-filter-tab--active.

Idle
Hover
Active
Spec
class.work-filter-tab · .work-filter-tab--active
paddingvar(--space-xs) var(--space-m) — 8px 16px
fontInter · var(--fw-regular) · var(--text-m) 16px
idle colourvar(--text-on-dark-tertiary) — grey
hover colourvar(--text-on-dark-primary) — white
active colourvar(--text-on-dark-primary) + blue ::after underline (height:2px, scaleX 0→1 from left)
::after underlineposition:absolute · bottom:-2px · left/right: var(--space-m) · height:2px · background:var(--color-active-glow)

Number Circle

106×106px circular badge used as a fallback when no step image is uploaded in the Flow block. Blue border with a black shadow. Number is zero-padded.

01
02
03
CSS
.acf-flow__img-wrap {
  width: 106px; height: 106px;
  border-radius: 100px;
  border: 1px solid var(--surface-branding-primary-60);
  box-shadow: 0 0 20px 0 var(--shadow-glow);
  display: flex; align-items: center; justify-content: center;
}
.acf-flow__number {
  font-size: var(--text-3xl);  /* 48px */
  font-weight: var(--fw-black);
  color: var(--text-on-dark-primary);
}

Section Header

Pink uppercase label stacked above a black-weight heading. Used at the top of every ACF block that has a titled section. Two size combinations.

Small — Subheading S + Heading M

Research findings

User needs drive every decision

Large — Subheading M + Heading XL

Case study

Designing for complexity

Spec
Labelvar(--text-xs/m) · var(--fw-semibold) · uppercase · var(--text-on-dark-secondary) · tracking var(--ls-label-m)
Headingvar(--text-2xl/3xl) · var(--fw-black) · var(--text-on-dark-primary)
Gap (small)var(--space-m) — 16px
Gap (large)var(--space-1xl) — 40px

Icons

Three inline SVG icons used across the system. Always rendered as inline SVG — never <img> — to prevent distortion. Thumb-down is thumb-up with transform: scaleY(-1).

thumb_up
thumb_down
Bio icon bio
Spec
thumb_up / thumb_down44×44px · fill: currentColor (red via parent) · thumb_down uses transform:scaleY(-1)
bio44×55px · <img> from assets/icon-bio.svg
colourvar(--surface-branding-primary) on parent

List Item

Icon + text pair used in persona bios. 44px icon column, 24px gap, text column with bold label prefix + regular body.

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

Frustrations: Designers who can't communicate trade-offs

Spec
layoutflex row · align-items:center · gap: 24px (var(--space-l))
icon col44px wide · flex-shrink:0 · red via currentColor
text16px · var(--fw-regular) · var(--text-on-dark-tertiary) · bold prefix in var(--fw-black)

Input (base)

Bare input atom. Bottom border only — no surrounding box. Four states. Used inside the Input Field molecule which adds a label and helper text.

Idle
Focus (blue)
Success
Error
Spec
height69px
fontRoboto · var(--fw-regular) · var(--text-l) 20px
borderbottom only · idle: var(--surface-branding-primary-30) · focus: var(--color-active-glow) 2px · success: #63eb47 (dark) / #1a7a0f (light) · error: #ff3344
radius0 — no rounding

Preview Image

Thumbnail used in project cards. Two aspect ratios. Hover shows a black shadow and a "View project" button overlay. Focus shows a 4px blue border.

Idle — 1:1
Image
Hover
ImageView project
Focus
Image
1:2 crop
1:2
Spec
border-radiusvar(--radius-xs) — 8px
hoverfilter: drop-shadow(0 0 30px var(--shadow-glow)) + "View project" btn overlay
focus4px solid var(--surface-branding-primary) border
aspect ratios1:1 (square) or 1:2 (portrait)

Mock Up Screen

Phone-frame mockup at 208×438.63px. Black shadow via drop-shadow filter. Used in the Screen Mockups block — images must be PNG with transparent background for the shadow to work.

Screen
Screen
Spec
size208 × 438.63px (production) — scaled 75% here for display
border-radiusvar(--radius-m) — 16px
glowfilter: drop-shadow(0 0 30px var(--shadow-glow))
image requirementPNG with transparent background — glow bleeds correctly

Client Grid

"Selected Clients" showcase row. Client names at 50% opacity — present but not prominent. Large black-weight type makes the brand names readable at a glance.

Selected Clients

Accenture Novo Nordisk Maersk LEGO
Spec
label.label-m — "Selected Clients"
namesvar(--text-2xl) 32px · var(--fw-black) · var(--text-on-dark-primary) · opacity: 0.5
layoutflex row · gap: var(--space-2xl) 64px · flex-wrap
paddingpadding-block: var(--space-4xl) 96px