Mood-board · v0.1 · 2026-05-25

References for
artem.plus³.org

Twelve curated references for the personal site of a CEO / CMO / board-level growth operator who positions himself as AI-Native. Filter: bold typography, glitch, optical illusion — all in business context, not festival/cyberpunk.

Owner: Artem Polansky
Role: CEO WAM Agents · CMO/CEO consultant · Effie jury
Vibe target: Bold · Glitch · Optical · Executive
Refs: 12

The references

01 — 12
BASIC/DEPT®Easy to understand, impossible to ignore
01 / 12

BASIC/DEPT®

basicagency.com
Global creative-and-tech agency (Google, Patagonia, Nike). The benchmark of "executive but not boring".
What to borrow
  • Restrained palette + oversized sans-serif headlines as the hero device.
  • "DragDragDrag" micro-interactions — kinetic without being loud.
  • Tagline as a typographic statement, not a marketing line.
PENTAGRAMDesign is about making choices
02 / 12

Pentagram

pentagram.com
World's largest independent design consultancy. The gold standard of "high-status restraint".
What to borrow
  • Typographic hierarchy via weight, not via colour.
  • Red accent used surgically (1 element per fold).
  • Editorial credibility — partner quotes treated like print pull-quotes.
LOCODigital-first agency · Montreal
03 / 12

Locomotive

locomotive.ca/en
Award-loaded Montreal agency, makers of locomotive-scroll. Professional + irreverent.
What to borrow
  • Smooth-scroll as a personality trait — content drifts, type rebalances on scroll.
  • Emoji/symbol accents inside otherwise serious type.
  • Neutral palette + single warm accent (orange/gold).
ACTIVE THEORYElegant motion · Venice, CA
04 / 12

Active Theory

activetheory.net
Venice-based digital studio behind Google, Adidas, Nike interactive launches. WebGL but never tacky.
What to borrow
  • 3D / WebGL hero used as one accent, not as the whole site.
  • Type pinned over animated geometry — easy way to feel "AI/tech" without literal AI icons.
  • Honourable mention pattern: tight intro, big case, contact. No fluff.
SNØHETTATransdisciplinary practice
05 / 12

Snøhetta

snohetta.com
Global architecture firm. Reference for "intellectual rigor", not for graphic tricks.
What to borrow
  • Photography-first hero, type overlaid in single colour.
  • Generous whitespace as a status signal (board-level audience reads slowly).
  • Bilingual-ready structure — language switch should feel deliberate, not bolted on.
REFORM
06 / 12

REFORM (Framer template)

awwwards.com/market — REFORM
Brutalist agency template (Awwwards Market, Apr 2025). Reference for raw layout system, not for content.
What to borrow
  • Ultra-wide marquee headlines that overflow the viewport on purpose.
  • Mono-typeface sub-labels next to display sans — credibility + edge.
  • Black/yellow/red restraint — only one accent per section.
TIM GROVER
07 / 12

Tim Grover's portfolio

awwwards.com/inspiration · Tim Grover
Award-honoured personal portfolio. Brutalist + typographic, one-person site — direct structural analogue.
What to borrow
  • Single-name H1 the size of the viewport — fearless personal branding.
  • Switchable typeface as an interactive easter egg.
  • Manifest-style "what I do / what I don't" sections.
CHRISSIE ABBOTT
08 / 12

Chrissie Abbott Portfolio

awwwards.com/inspiration · Chrissie Abbott
Brutalist personal portfolio (Awwwards collection). Heavy on optical/moire-ish patterning behind type.
What to borrow
  • Moire / repeating-line backdrop behind a single bold word.
  • Section dividers that are full-bleed type, not subtle hairlines.
  • Hard-cut transitions instead of fades.
RESN
09 / 12

Resn

resn.co.nz
Auckland creative studio, two-decade Awwwards favourite. Big-brand work but never beige.
What to borrow
  • Splitting a single word across two colours / two typefaces.
  • Loud hero, then immediate calm — the contrast is the personality.
  • Custom cursor used to "reveal" content under a mask.
JUAN MORAfreelance · GSAP + Lottie
10 / 12

Juan Mora

juanmora.co
Awwwards-listed personal site. Geometric kinetic elements as the recurring visual hook.
What to borrow
  • Geometric primitive (circle / pill / hex) repeated as a section signature.
  • GSAP-driven scroll-pin storytelling for the "what I do" section.
  • Premium personal brand built without showing any "designer flex" type.
olivierlarose.comportfolio · 2024–25
11 / 12

Olivier Larose

olivierlarose.com
Solo developer-designer portfolio. Reference for technical-credibility-as-aesthetic.
What to borrow
  • Mono typeface for nav + meta, display sans for hero — same combo we should use.
  • Symbol/glyph as a visual signature instead of a logo mark.
  • Project grid sized like a feed, not like a portfolio CMS.
STUDIO THOMSONLondon · since 2003
12 / 12

Studio Thomson

studiothomson.com
London design studio (Burberry, Mr Porter). Reference for "luxury restraint" inside a bold-type framework.
What to borrow
  • All-caps sans display set tight — feels editorial / serious.
  • Whitespace as the second typeface.
  • Client-logo strip handled in mono, not as a marquee.

5 building blocks
for artem.plusplusplus.org

B1 · Hero

Viewport-size H1, single word

"ARTEM" or "OPERATOR" set in a variable display sans at clamp(96px,16vw,260px). Caps, tight tracking. One subtitle line in mono. Tim Grover + Studio Thomson combo.

B2 · Glitch

RGB-split hover on hero word

Resting state is clean executive. On hover (or every 6s) the H1 fires a 200ms RGB-split + scanline. Signals "AI-native" without a single AI icon. CSS-only, no JS.

B3 · Optical

Moire divider between sections

Full-bleed section break is a moire pattern (two overlapping line grids) that appears to move on scroll. Pure CSS background. Chrissie Abbott reference.

B4 · Kinetic

Scroll-pinned manifest

"What I do / what I don't" set as huge type that rewrites itself on scroll (one word swaps in/out). GSAP scroll-trigger. Locomotive + Active Theory pattern.

B5 · System

Mono + display sans, two-colour

JetBrains Mono for nav/meta/captions, Space Grotesk (or Inter Display) for everything else. Black + off-white + one accent (suggest #FF3B1F). No more.