Screenshot of Assembly

Assembly

www.joinassembly.com

The reference for clean-corporate B2B HR-tech with illustrated character imagery and a dotted-grid texture — Inter at every weight, single blue accent, friendly illustrations carrying the visual personality.

Hr Platform Employee Recognition Saas strong

Design tokens

white
slate50
slate100
slate200
slate300
slate400
slate500
slate600
slate700
slate950
black
blue50
display
Inter, system-ui, -apple-system, sans-serif
body
Inter, -apple-system, system-ui, sans-serif
mono
ui-monospace, system fallback

Do / Don't

Reference it for

  • Illustrated character imagery (children's-book / flat illustration style) as the visual personality — replaces both photography and isometric mockups
  • Pure white with dotted-grid texture as the page background — the dotted texture adds subtle depth without distracting
  • Single Tailwind blue #2563eb as the only brand accent — used on CTAs, link colour, and inline emphasis ("Missing", "Perform Better" coloured words in H2s)
  • Inter at every weight — only 2 @font-face declarations (variable axis WOFF2), the leanest font setup in the library
  • Section-level coloured-word emphasis — "Recognition Is Still Missing Where It Matters Most" and "Engaged Teams Stay Longer - and Perform Better" — selectively colouring 1-2 words in each H2 with the brand blue
  • Stat-first problem framing — "Nearly 7 in 10 employees say they don't get the recognition they deserve" + cited source ("*Data from Gallup")
  • 4-section dense page rhythm — shorter than typical, each section doing heavier work
  • Real customer testimonials with photos + name + role + company (4 cards in a 2×2 grid)

Do not copy

  • The orange-triangle "ASSEMBLY by Quantum Workplace" wordmark — brand-specific
  • The Gallup stat citation pattern — only use real data sources
  • The illustrated character style (children's-book) — needs to match the brand's tone; reads as twee on enterprise brands
  • The "Recognition" specific copy — Assembly's positioning
  • The Quantum Workplace parent-brand framing — Assembly's specific context

Signature moves

illustrated-character personality on dotted-grid white

flat children's-book illustration carries the visual personality (replacing photography and isometric mockups) on a pure white page with a subtle dotted-grid texture.

single-blue coloured-word emphasis

one Tailwind blue #2563eb is the only accent, used on CTAs, links and to selectively colour 1-2 emphasis words in each H2 (Missing, Perform Better).

paired-card asymmetric radius with pill CTAs

vertically-paired card surfaces use asymmetric radii (16px 16px 0 0 and 0 0 16px 16px) and CTAs use a 9999px pill workhorse.