Editorial
杂志编辑风
Aliases:杂志编辑风杂志风编辑排版风报刊风格首字下沉那种排版衬线大标题风Magazine LayoutEditorial Design
What is it
A visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
Design spec
Typography
Italic serif headlines with serif body
Color
Warm paper #FBF9F4, ink text, brown accents
Border
Hairline rules instead of card boxes
Shadow
Soft shadow on photo cards only
Spacing
Multi-column layout, airy leading
Motion
150–200ms fades and underline transitions, restrained, no bounce
States
Hover reveals an underline and turns brown; focus shows a visible ink dotted frame; active sinks one pixel; disabled fades to light grey; error uses a brown accent with an italic note
Style in action
See the full page, then try the interactive sceneFull-page preview
Good Life
in Small Things
A little room for the everyday.
Stories of people, places and the rituals that make an ordinary day feel extraordinary.
Read the journal →
Life is here,
in the little things.
Slow down with the morning light
A fresh look at familiar streets
Finding your own rhythm
Interactive scene
Loading demo…
✓ When to use
- Content products — long-form, digital magazines, portfolios, brand journals
- Brands that want cultural gravitas and respect for the written word
- Narrative pages with a clear image-text hierarchy
✕ When not to use
- Task-oriented tools where efficiency beats reading experience
- Dashboards and lists meant for rapid scanning
- Teams without typographic skill — bad serif work exposes itself
Variants
Broadsheet
大报风
Newspaper columns, dense setting, B&W photography, hairline rules
Glossy Magazine
光面杂志
Big imagery, display type, generous whitespace — fashion monthly
Digital Editorial
数字编辑风
Web-adapted — serif display with modern body typography
Implementation
font-family: Georgiafont-variant-numeric: oldstyle-numscolumn-countborder-top: 1px solidtext-indentType carries it: high-contrast serif display (Playfair/Georgia), serif or humanist sans body at 60–75 characters per line; drop caps float over 3–4 lines; separate with 1px hairlines and whitespace plus small-caps eyebrows at 0.15em tracking; oldstyle numerals for numbering. Prefer black-and-white or duotone imagery; dark mode uses warm black to keep the paper feel.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement an Editorial long-form reading section in the current project. Inspect the existing font stacks and typography variables first; bring in serifs through the current font system. Requirements: - Serif display + eyebrow + body hierarchy, 60–75 character measure - Drop caps and section numerals in pure CSS - Separate with hairlines and whitespace only — no heavy shadows or gradients - Mobile type scale keeps rhythm; headings wrap gracefully - Dark mode with warm black for the paper feel - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language of objective grids and typography: strict mathematical grids, sans-serif faces, flush-left setting, black and white plus one accent (classically red). Order comes from whitespace and type scale. Decoration is noise; the goal is information read along the shortest path.
StylesSimilarA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA long-lived, reading-first content page: a collapsible docs tree on one side, the article column carrying heading hierarchy, paragraphs, code blocks and callouts, and on wide screens a page TOC marking the current position. Permanent links and prev/next links chain pages into a site; search is the primary entry; the structure is stable enough to memorize.
PagesUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsAffects