Collection of layout wireframes and grid sketches pinned to a cork board

Demo Layouts

Every layout here started as a real experiment — a response to a specific design problem we encountered while building themes for content-heavy sites. These are not hypothetical wireframes. Each demo was tested with actual articles, real images at various aspect ratios, and the kind of edge cases that only surface after launch: titles that wrap to three lines, author bios that overflow their containers, sidebars that collapse on tablets but not phones.

What you will find in each demo: a breakdown of the grid logic and spacing system, typography choices and why they work (or where they struggle), component patterns used in the layout, and common implementation pitfalls we discovered during testing. Whether you are evaluating layout options for a new project or debugging a specific column behavior, these notes are designed to save you iteration time.

The demos span editorial grids, magazine layouts, image-forward designs, and unconventional experiments. They are ordered roughly by how often they appear in real-world theme development, but each one addresses a distinct layout challenge.

Layout Demo

Ravel

A flowing editorial grid with generous whitespace and deliberate rhythm. Serif headings, airy line heights, and modular spacing guide the eye through long-form content.

Grid analysis · Spacing notes · Typography
Layout Demo

Chun

Bold asymmetric columns with strong vertical rhythm. Weight contrast and tight margins create visual tension that keeps readers anchored in dense material.

Grid analysis · Spacing notes · Typography
Layout Demo

Saga

A long-form storytelling layout designed for immersive reading flow. Wider content areas with pull quotes and section breaks pace the narrative.

Grid analysis · Spacing notes · Typography
Layout Demo

Stargazer

Dark-canvas layout with cinematic proportions. Negative space as a first-class element, paired with high-contrast type treatments.

Grid analysis · Spacing notes · Typography
Layout Demo

Retro Fitted

Vintage-inspired grid with structured columns and ruled dividers. Broadsheet newspaper conventions adapted for modern screens.

Grid analysis · Spacing notes · Typography
Layout Demo

Picturesque

Image-forward layout emphasising visual hierarchy. Large hero images balanced with tight supporting text blocks.

Grid analysis · Spacing notes · Typography
Layout Demo

Socially Awkward

An unconventional layout that breaks grid expectations. Off-axis placements and unexpected whitespace challenge traditional reading flow.

Grid analysis · Spacing notes · Typography
Layout Demo

Trending

Magazine-style layout with modular content blocks. Flexible grid that adapts from feature stories to compact listings.

Grid analysis · Spacing notes · Typography
Layout Demo

Prototype

Wireframe-inspired layout for rapid prototyping concepts. Visible grid lines, placeholder conventions, and deliberate roughness.

Grid analysis · Spacing notes · Typography
Layout Demo

Vaaka

Balanced horizontal layout with measured proportions. Finnish-inspired minimalism with careful attention to typographic weight distribution.

Grid analysis · Spacing notes · Typography
Layout Demo

Unique

An experimental layout with a distinctive visual identity. Non-repeating section patterns and custom component shapes.

Grid analysis · Spacing notes · Typography