Sandbox

Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.

Contact Info

Moonshine St. 14/05
Light City, London
info@email.com
00 (123) 456 78 90

Follow Us

Blog Design of Synthesia

Synthesia is an AI video generation platform that enables individuals and teams to create professional videos using AI avatars and text-to-script tools, without cameras, studios, or production crews.

Visit Website

Design Specs

Synthesia's blog covers AI trends, video production tutorials, product announcements, L&D use cases, and customer success stories. The content targets L&D professionals, content marketers, and enterprise teams looking to scale video output.

Blog hub page

Synthesia's blog hub opens with a large editorial-style hero that gives the most recent post significantly more visual weight than the posts below it. A right-aligned thumbnail pairs with a left-side title and excerpt, creating an asymmetric layout that immediately differentiates the featured post from the card grid beneath it. From there, posts are organized by category into horizontal rows (AI, Case Studies, L&D & Training, Synthesia, Video Production), each with a "More posts" link to the right. The row-based category architecture functions as a built-in filter, letting readers navigate directly to their area of interest without interacting with any filter UI.

Post cards across all rows are compact and consistently structured, each showing:

  • A thumbnail image with a category tag overlay
  • Article title
  • Short excerpt

Author name and read time are not visible at the card level, keeping the grid clean and browsable. Category tags appear in a pale lavender against the card, creating a subtle colour signal that ties back to Synthesia's brand palette without competing with the thumbnail imagery.

Typeface

Synthesia's decision to use BasierSquare across both headings and body text creates a unified, cohesive typographic voice throughout the blog. The typeface's geometric construction and slightly condensed proportions give the content a modern, technical edge that sits well with an AI platform audience.

Because the same family handles both display and reading roles, differentiation between heading levels relies entirely on size and weight contrast rather than font pairing. The result is a clean, disciplined hierarchy that feels confident rather than limited.

Get BasierSquare fonts from atipo foundry →

Download fonts

Headings

Basiersquare Webfont

Paragraph

Basiersquare Webfont

Color

Synthesia uses a single text color #333B52 across both headings and body copy, a dark blue-grey that carries a subtle naval undertone without going full navy. Using the same value for both heading and paragraph text is an unusual choice: it removes the tonal hierarchy that most blogs rely on to distinguish structural elements from running text.

Instead, Synthesia leans on size and weight to create separation, which keeps the palette extremely restrained. The link hover color #0042d7 , a bright, saturated blue, provides the only chromatic contrast in the text environment and stands out sharply against the otherwise monochrome copy palette.

Heading

#333B52

Paragraph

#333B52

Link Hover

#0042d7

Article Hero

The article hero takes a content-first approach. The title "How AI process automation revolutionizes operations management" runs in large, bold BasierSquare against a plain white background, with no featured image. Below the title, a slim metadata row carries the author name, publish date, read time, and a LinkedIn share link in a compact line that doesn't compete with the headline.

What stands out is the placement of a sticky right-side product CTA panel within the hero zone itself. Before the reader reaches the first paragraph, a product card with a thumbnail and action button sits fixed to the right. The hero doesn't try to be decorative — it trusts the headline and generous surrounding whitespace to carry the first impression, while the CTA panel makes the conversion path visible from the very first scroll position.

Article Body

Synthesia's article body uses a three-column layout: a sticky table of contents on the left, a main reading column in the center (~680 pixels wide), and a persistent product CTA panel on the right. The TOC lists every H2 with anchor links and remains in place as the reader scrolls, making navigation through a long-form post genuinely useful. This three-column architecture gives the article page the feel of a documentation hub rather than a standard editorial layout.

The reading experience is comfortable throughout. Body text at ~16px with generous line spacing creates a clean rhythm, and the heavier-weight headings stand out sharply from body copy, producing a strong typographic hierarchy across a dense, multi-section article.

Inline imagery integrates smoothly with the text. Product screenshots are placed at natural break points where they illustrate a specific process, and Synthesia's own video thumbnails appear within the body as visual proof of platform capabilities.

The most commanding element is the mid-article "Discover Synthesia in 4 minutes" block: a full-width dark-background panel with a large bold heading and embedded video thumbnail that breaks the white reading environment entirely. It functions as an inline product demo, deliberately interrupting the reading flow to capture attention at a high-engagement point in the article.

The right-side product CTA panel that begins in the hero continues through the full article body. It occupies its own column, never overlapping the reading area, and keeps the "Get started for free" button in peripheral view throughout without disrupting the content column. The three-column layout makes this persistent CTA feel structural rather than intrusive.

The author bio appears at the bottom of the article, above the related posts section. It includes a headshot, name, and a short paragraph. No social links are visible. There are no social sharing buttons visible within the article body beyond the LinkedIn link in the hero metadata row.

The "You might also like" section surfaces three related posts as thumbnail cards in a three-column row, consistent with the hub page card grid.

Email subscription

There is no traditional email subscription form visible on the blog, either within the article body or on the hub page. The primary conversion element is the persistent product CTA panel in the right-side column, with a "Get started for free" button that follows the reader from the hero through to the end of the article, keeping the conversion path continuously visible without interrupting the content column.

Blog Imagery

Synthesia's visual identity across the blog is tech-forward and brand-consistent. The imagery draws from a deliberately narrow visual vocabulary: AI avatar screenshots, blue-toned gradient graphics, and enterprise brand logos, each style assigned to a specific content category.

The result is a grid that reads as organized and purposeful rather than editorially varied. At a glance, the hub communicates a clear product-first identity before a single headline is read.

Featured Image

Across the hub, Synthesia's featured images draw from three distinct visual styles: branded product screenshots featuring AI avatars, company and partner logos on clean backgrounds (used in case study cards), and blue-toned tech-adjacent graphics for AI category posts.

The case study logo treatment is the most visually distinctive, communicating enterprise credibility at thumbnail size without relying on editorial photography.

The AI category imagery follows a coherent visual template of gradient blues and abstract tech visuals, though it stops short of fully custom illustration.

In-content Images

Within the article, images are functional rather than decorative. Product screenshots are placed at points in the text where they directly support the surrounding explanation, and Synthesia's own video thumbnails appear as inline visual evidence of platform output.

The "Discover Synthesia in 4 minutes" video block, described in the article body section, is the most visually dominant in-content element on the page.

What We Like

Synthesia's blog design is confident, structured, and more architecturally ambitious than most SaaS blogs in the AI space. The layout treats the article page as a purpose-built reading environment rather than a default publishing template, and that intentionality shows at every scroll depth.

The three-column article layout is the most distinctive structural decision on the page. Holding a sticky TOC on the left, the reading column in the center, and a persistent product CTA on the right is a harder layout to execute cleanly than it appears. Synthesia pulls it off without the page feeling cluttered or the reading experience suffering for the presence of the flanking panels.

On the hub page, using brand logos as featured images in the case study row is a small visual decision that does significant positioning work. In a grid where every other card competes with thumbnails and photography, a Heineken or Zoom logo on a clean background reads immediately as enterprise-scale proof. It's the kind of category-level thinking that elevates an otherwise conventional post grid.

The "Discover Synthesia in 4 minutes" mid-article video block is probably the boldest single content design choice on the page: stopping the article cold to deliver an inline product demo is a high-confidence move, and the dark-background treatment makes it impossible to scroll past without noticing.