Editorial Grid / Magazine

Stylegeneral

Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired. Best for News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing.

Magazine layout asymmetric grid editorial typography pull quotes drop caps column layout print-inspired

#000000

#FFFFFF

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Editorial Grid / Magazine

Keywords: Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired
Primary colours: High contrast: Black #000000, White #FFFFFF, accent brand color
Secondary colours: Muted supporting, pull quote highlights, byline colors, section dividers
Effects & animation: Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions
Best for: News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing
Do not use for: Dashboards, apps, e-commerce catalogs, real-time data, short-form content

## Prompt keywords
Design an editorial magazine layout. Use: asymmetric grid, pull quotes, drop caps, multi-column text, large imagery, bylines, section dividers, print-inspired typography, article hierarchy, white space balance.

## CSS / technical
display: grid with named areas, column-count for text, ::first-letter for drop caps, blockquote styling, figure/figcaption, gap variations, font: serif for body, variable widths

## Implementation checklist
☐ Grid asymmetric, ☐ Typography editorial, ☐ Pull quotes styled, ☐ Drop caps present, ☐ Images large/impactful, ☐ Mobile reflows well

## Design system variables
--grid-cols: asymmetric, --body-font: Georgia/Merriweather, --heading-font: bold sans, --drop-cap-size: 4em, --pull-quote-size: 1.5em, --column-gap: 2rem

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source