AIFusionX (WP theme — analyzed via live demo)
Едиторіально-монохромна AI-агенційна тема: єдиний шрифт Instrument Sans, велетенський H1 з мінусовим трекінгом, фотореалістичний герой, пігулкові кнопки, каруселі Swiper.
Враження
Враження — AIFusionX (WP-тема)
AIFusionX читається як обкладинка журналу, яка випадково продає послуги AI-інтеграції. Це чистий едиторіальний монохром — один шрифт (Instrument Sans), одна шкала тонів (чорний на білому, з одним фіолетовим акцентом, що ховається в дизайн-токенах), велетенська героїчна типографіка з мінусовим міжлітерним інтервалом, повсюдні пігулкові кнопки та фотографічний герой із реальними людьми замість обов'язкової 3D-AI-кулі. Секції стоять одна впритул до одної без жодного вертикального відступу — ритм творять внутрішні падінги контейнерів, і це дає сторінці безперервність друкованого розвороту замість відчуття "стопки слайдів", типового для більшості SaaS-маркетингових сайтів. Каруселі (Swiper 8) — єдиний кінетичний елемент; решта — довге статичне полотно, що довіряє типографіці нести вагу.
Цільова аудиторія — агенції AI-інтеграцій, консультанти з автоматизації та засновники micro-SaaS, які хочуть виглядати "премʼяльно й по-дорослому" без типових AI-шаблонних кліше (градієнтне сяйво, орбітальні частинки, ціан-на-чорному, рукодільні SVG "нейромережі"). Тема постачається з трьома варіантами головної — /, /ai-micro-saas/, /ai-trainers/ — що поділяють одну дизайн-граматику, але міняють копірайтинг і слоти компонентів; це наочно демонструє, як одна система може звертатися до кількох персон-покупців без розгалуження сайту. Тема найкраще підходить там, де текст лаконічний, фотографія справжня, а бренд прагне редакторської впевненості, а не футуризму. Вона НЕ підійде для барвистого споживчого продукту, фітнес-бренду, медіа-важкого галерейного сайту чи будь-чого, де читач очікує, що повідомлення нестиме рух.
Виробничі застереження: це платна комерційна WordPress-тема, що залежить від Elementor Pro і фреймворку Vamtam, плюс важкий стек супутніх плагінів (WooCommerce, LayerSlider, Ajax-фільтри, Smart Wishlist, The Events Calendar, Instagram Feed) — більшість сплять на демо, але перелічені у samples/bundled-versions.json. Сайт неможливо задеплоїти як статичний HTML; перенесення візуалу в інший стек означає перенести CSS-значення (radius пігулки 60px, паддінг 17/25, Instrument Sans 400/500, палітра нижче) і перестворити каруселі Swiper руками. Оскільки в каталозі словник language не має значень wordpress / php, цей запис використовує language: "other" — це підстановка через словник, а не помилкова класифікація. Канонічна палітра Elementor (samples/elementor-styles-fallback.css) розкриває фіолетовий акцент (#6904F2 / #9F6DF3), якого живе демо майже не показує — тримайте це на увазі, якщо форкатимете тему: у бренда більше тону, ніж демонструє домашня сторінка.
Палітра
Типографіка
Бібліотеки
Сторінки
Ключові фішки
Single-typeface system: every heading, body, button, label uses Instrument Sans with weight/size variation only
- Де знайти
- https://aifusionx.vamtam.com/, samples/elementor-styles-fallback.css
- Чому цікаво
- Rare in agency templates — most reach for a display + body pair. Forces typographic discipline and gives the site a magazine-cover unity that no amount of Figma Auto Layout tricks can fake.
- Коли використовувати
- Brand wants editorial 'magazine confidence' rather than 'AI futurism'; client trusts type to do the work and you don't need iconography to carry hierarchy.
- Техніка
- Instrument Sans (Google Fonts) loaded with weights 400 and 500; size ladder 14 / 20 / 60–74; CSS only, no JS.
Negative letter-spacing on display H1 (-3px at 74px) for editorial print feel
- Де знайти
- https://aifusionx.vamtam.com/ section.hero h1
- Чому цікаво
- Print convention rarely seen on web AI-themes. Combined with a low-contrast 500 weight it reads like a New York Times Magazine cover instead of a SaaS headline.
- Коли використовувати
- Hero copy is short (3–6 words) and you want the headline to read as art, not as a value prop bullet.
- Техніка
- CSS letter-spacing: -3px on H1 at 74px / line-height 1.1 / weight 500.
Sticky header that auto-hides on scroll-down and slides in on scroll-up
- Де знайти
- https://aifusionx.vamtam.com/ header.vamtam-sticky-header
- Чому цікаво
- Gives the mega-menu real estate without a forever-pinned chrome bar. The default state is 'gone'; the user only sees it when they actively want to navigate.
- Коли використовувати
- Long-scroll editorial pages where the navbar is rarely needed mid-read but should be one gesture away.
- Техніка
- Vamtam framework adds vamtam-sticky-header--fixed-hidden / --fixed-shown classes on scroll direction; CSS handles the transform: translateY transition.
Loop carousel reused across two completely different content types (Industries CPT and Blog posts)
- Де знайти
- https://aifusionx.vamtam.com/ section.industries [data-id="9e4a070"], https://aifusionx.vamtam.com/ section.blog [data-id="3cdf3c7"]
- Чому цікаво
- Same Swiper init, same slide chrome, two source taxonomies — one widget reused instead of two custom builds. A small thing in code, a big saving in design system upkeep.
- Коли використовувати
- You have multiple content collections (industries, case studies, posts, products) and want them to feel like siblings without writing each carousel from scratch.
- Техніка
- Elementor Pro Loop Carousel widget + Swiper 8.4.5; loop template per CPT.
Sections without gutters — adjacent sections butt against each other with 0 vertical padding
- Де знайти
- https://aifusionx.vamtam.com/
- Чому цікаво
- Reduces visual noise compared to typical 80–120px section spacing. Rhythm comes from internal container padding only, which keeps the page feeling like one continuous editorial spread instead of stacked slides.
- Коли використовувати
- Long-form storytelling pages where you want the eye to flow without 'breath-pause' bands; works only when section interiors carry strong padding of their own.
- Техніка
- Pure CSS discipline — Elementor section padding-top/padding-bottom: 0, internal containers handle their own padding.
Three home variants for the same theme address three buyer personas
- Де знайти
- https://aifusionx.vamtam.com/, https://aifusionx.vamtam.com/ai-micro-saas/, https://aifusionx.vamtam.com/ai-trainers/
- Чому цікаво
- Same layout grammar, swapped copy and one or two component slots. Demonstrates how a single design system can speak to integration agencies, micro-SaaS founders, and AI trainers without forking the design.
- Коли використовувати
- Selling a service to multiple ICPs and you want a per-persona landing page without owning N separate sites.
- Техніка
- WordPress Page templates + Elementor saved templates / Elementor Pro Theme Builder.
Photographic hero with real human subjects rather than 3D AI orbs or gradient meshes
- Де знайти
- https://aifusionx.vamtam.com/ section.hero
- Чому цікаво
- Counter to ~95% of AI-agency templates. Signals 'we deliver, we don't dream', and skips the visual cliché ladder of glow / cube / particle.
- Коли використовувати
- Client wants to be seen as operator, not visionary — e.g. integration agencies, automation consultants, B2B services.
- Техніка
- Large hero image (Getty-style stock or commissioned shoot) at full bleed; optional subtle CSS dim overlay if text contrast fails.
Компоненти
Auto-hiding sticky header with logo, multi-column mega menu (Services / Industries / About), and pill CTA — slides in only on scroll-up.
Editorial hero with full-bleed photographic background, oversized 74px H1 (-3px tracking), small icon-list above title, two pill buttons.
Trust strip 'Teams choose us for reliable delivery' with 6 horizontal client logos in a single row, no animation.
'What we do' Elementor nested-carousel of services — each slide is icon + heading + paragraph + arrow link, swipe-driven.
'Automation examples' anchored grid (Sales / Ops / Finance) with split typographic headings and bullet copy, no decoration.
'How we work' numbered steps separated by hairline dividers — emphasis purely typographic, zero icons or illustrations.
'Industries' Elementor Pro Loop Carousel pulling from a CPT — eight horizontally scrolling slides with image and label.
'Proof & credibility' three case studies stacked (01 / 02 / 03), each with screenshot, headline, and metric callouts.
Nested Swiper carousel of customer quotes — avatar, name, company, multi-line quote, dot pagination underneath.
'Our stack' second logos strip listing tools (OpenAI, Make, Zapier, etc.) — visually identical pattern to the trust strip.
'Get started' split CTA — copy + icon-list on the left, embedded Elementor contact form on the right inside a soft surface.
Elementor nested-accordion FAQ — sober black-on-white, plus/minus toggle, hairline divider between rows.
'From our blog' Elementor Pro Loop Carousel pulling latest posts: image, post-info row, title, excerpt, button.
Multi-column site footer with logo, three nav columns, contact info column, and a centered copyright row.