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.

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.
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.
Bold asymmetric columns with strong vertical rhythm. Weight contrast and tight margins create visual tension that keeps readers anchored in dense material.
A long-form storytelling layout designed for immersive reading flow. Wider content areas with pull quotes and section breaks pace the narrative.
Dark-canvas layout with cinematic proportions. Negative space as a first-class element, paired with high-contrast type treatments.
Vintage-inspired grid with structured columns and ruled dividers. Broadsheet newspaper conventions adapted for modern screens.
Image-forward layout emphasising visual hierarchy. Large hero images balanced with tight supporting text blocks.
An unconventional layout that breaks grid expectations. Off-axis placements and unexpected whitespace challenge traditional reading flow.
Magazine-style layout with modular content blocks. Flexible grid that adapts from feature stories to compact listings.
Wireframe-inspired layout for rapid prototyping concepts. Visible grid lines, placeholder conventions, and deliberate roughness.
Balanced horizontal layout with measured proportions. Finnish-inspired minimalism with careful attention to typographic weight distribution.
An experimental layout with a distinctive visual identity. Non-repeating section patterns and custom component shapes.