# Editorial Grid / Magazine > A printed magazine on screen: big serif headlines, drop caps, pull quotes, captions, column rules and asymmetric lead-story grids. - Nickname: Magazine spread - Also called: Magazine Layout, Editorial Design, Print-inspired Web - Category: Editorial & Typographic - Moods: Serious, Luxury, Trustworthy, Calm - Industries: Media & Entertainment, Creative & Portfolio, Luxury & Premium, Travel & Hospitality, Corporate & B2B - Style page: https://uilingo.dev/styles/editorial-grid-magazine/ Editorial Grid borrows the toolkit of a printed magazine spread. A masthead sits over a thick-and-thin double rule, headlines are set in a high-contrast display serif (often italic), body copy is a bookish serif, and every story opens with a drop cap. Content is arranged on an asymmetric column grid — one lead story twice as wide as the briefs beside it — separated by vertical hairline column rules instead of boxes. Kickers in small red caps, numbered captions and oversized pull quotes do the decorating. ## Best for - News, magazines and longform publishers - Brand journals and content-led marketing sites - Culture, fashion and travel guides - Annual reports that tell a story ## Avoid for - Dense data tools where serif body text slows scanning - Playful kids or gaming products - Short transactional flows (checkout, sign-up only) ## Do - Open every Latin story with a 3-line drop cap (Thai: bold first line) - Use a 2fr / 1fr / 1fr lead-story grid with 1px column rules between columns - Kick each headline with an 11–12px uppercase red kicker and a short rule - Caption every image: small, muted, starting with a bold label ## Don't - Don’t box content in rounded cards with shadows - Don’t set headlines in a sans-serif or centre long paragraphs - Don’t box stories in bordered cards; use a 3px top rule only ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Editorial Grid / Magazine" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A printed magazine on screen: big serif headlines, drop caps, pull quotes, captions, column rules and asymmetric lead-story grids. Design keywords: big serif headlines, drop caps, pull quotes, column rules, asymmetric lead story, masthead double rule, red kicker caps, photo captions, warm paper white. ## Visual language A printed magazine spread rebuilt for the screen, selling a reader subscription for a news or magazine brand: warm paper-white ground, black ink, and one terracotta-red used only for kickers, drop caps and the active state. Hierarchy comes from a high-contrast display serif (heavy roman for the cover line, italic for section heads) over a bookish text serif, and structure comes from printed rules — a thick-and-thin masthead rule, heavy rules on top of every story and thin vertical column rules — never from boxes, shadows or rounded corners. Layouts are asymmetric: one lead story twice as wide as the briefs beside it. Every font stack falls back to serifs, e.g. heading "Playfair Display", "Taviraj", Georgia, serif and body "Source Serif 4", "Maitree", Georgia, serif — never system-ui or sans-serif. ## Signature details (must be visible) - Masthead double rule under the nav and above the footer: a 3px ink line, 2px gap, then a 1px ink line - Every story/card starts with a 3px solid ink rule on top (6px for the lead story), no side or bottom border, transparent background, 0 radius, no shadow - Drop cap (Playfair Display 900, 3.6em, float:left, #B3401C, 3 lines deep) only when a paragraph starts with a Latin letter. A Thai-first paragraph instead gets its first line in Maitree 700 plus a 36px × 3px terracotta rule above the paragraph - Asymmetric lead-story grid: grid-template-columns 2fr 1fr 1fr, the first story spans two rows and carries a halftone duotone photo plus an italic 2.8rem headline (Thai: Taviraj 900 roman) - Column rules: each grid item after the first in a row gets border-left: 1px solid rgb(22 20 18 / .55) and padding-left: calc(gap/2), with the column gap halved so the gutter splits evenly around the rule. Do not draw rules with absolute calc() positioning - Kickers over every story headline: Latin 11–12px uppercase Source Serif 4 700, 0.18em tracking, terracotta, followed by a 36px hairline. Thai kickers: Maitree 700, 0.85rem, no tracking, no uppercase, same terracotta and 36px hairline — and no Latin echo next to a Thai kicker - Halftone photo = background: radial-gradient(circle, #161412 0 1.1px, transparent 1.4px) 0 0/6px 6px over linear-gradient(135deg, #C6A15B, #5E574F), with mask-image: linear-gradient(to bottom, #000 60%, transparent) for the duotone fade - Pull quote spanning wider than the text column, framed by 3px rules top and bottom, centred italic 2.2rem serif (Thai: Taviraj 900 roman) with a huge terracotta opening quote mark - Thai never goes italic: where Latin uses Playfair italic (section heads, lead-story headline, pull quotes, nav brand), Thai uses Taviraj 900 roman at the same size; Latin numerals (stats, KPIs) stay italic in both languages - Captions and metadata in a small monospace (IBM Plex Mono 0.78rem) with a hairline above ## Design tokens — use these exact values Colours (light mode): - background #F7F4EE - surface #FBF9F5 - surface-2 #EFEAE0 - text #161412 - text-muted #5E574F - primary #161412 (text on it #F7F4EE) - secondary #B3401C (text on it #FFFFFF) - accent #B3401C - border #161412 - success #2E6B3F · warning #9A6200 · danger #B3261E - chart series #161412, #B3401C, #7C8C6E, #C6A15B, #8C847A Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 200ms cubic-bezier(.3,0,.2,1) ## Typography (Latin + Thai) - Headings: Playfair Display 700/900 with Thai fallback Taviraj 700/900 - Body: Source Serif 4 400/600/700 with Thai fallback Maitree 400/600/700 - Mono: IBM Plex Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=Taviraj:wght@700;900&family=Maitree:wght@400;600;700&display=swap - CSS stacks: heading `"Playfair Display", "Taviraj", system-ui, sans-serif`; body `"Source Serif 4", "Maitree", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Maitree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Maitree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 6.8vw, 6rem), heading weight 700, heading tracking -0.015em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Taviraj has the same razor-thin hairlines and fat stems as Playfair Display; Maitree is a sturdy looped book serif that reads like Source Serif 4 in long Thai paragraphs. ## Components - Buttons: square; Latin labels uppercase 0.8rem Source Serif 4 600 (the body face) with 0.06em tracking; Thai labels Maitree 600 0.92rem, no tracking, no uppercase. Primary is solid ink with paper text and turns terracotta on hover; secondary is a 1px ink outline that inverts on hover; ghost is an underlined text link - Cards: transparent, 3px top rule only, padding-top 16px, a terracotta kicker above the headline; hover underlines the headline instead of lifting the card - Inputs: underline-only (1px ink bottom border, transparent fill), focus thickens to a 2px terracotta underline; labels are tiny uppercase tracked caps (Thai: Maitree 700 0.92rem, plain); textareas get a full 1px frame - Nav: brand set as an italic 900 serif masthead (1.7rem) with the logo glyph in terracotta; links are tiny tracked caps, the current one in terracotta - Logo strip: the outlets that cited the publication, set as italic Playfair 700 wordmarks between a 1px rule above and below, no logos or icons - Showcase: the reading app shown as a ruled article page (masthead rule, kicker, headline, two text columns with a column rule, mono caption) — not a phone or browser device mockup - Badges: unfilled tracked caps in the tone colour with a 6px square bullet; the solid badge is a terracotta block - Tabs and dashboard nav: tracked caps with a 3px terracotta underline on the active item - Charts and tables: ink line for the main series, solid terracotta for the comparison, faint solid gridlines, square bar ends; tables have a 3px ink rule under the header row and hairline row dividers - Dashboard (only when building one): a newsroom desk — topnav masthead with the double rule, ruled KPI columns with italic numerals, no boxed widgets - Mobile tab bar: paper background with the double rule on top, tiny caps labels, active item terracotta ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: split style. Sections in order: hero → logos → features → showcase → testimonials → stats → faq → cta. Feature section as grid. The landing sells a reader subscription for a news or magazine brand. Open with a split masthead (brand left, centred caps links, actions right) sitting on the double rule. The hero is a 1.6fr / 1fr spread: a huge heavy serif cover line, a lead paragraph with a drop cap (Thai: bold first line under a terracotta rule) and square buttons on the left, a vertical column rule, then a halftone photo and a ruled chart of readership with a small 'N° 01' folio on the right. Then the logo strip of outlets that cited it, set as italic serif wordmarks between rules. Section heads are left-aligned under a hairline: kicker, italic serif headline, one-line dek. Features are a lead story + briefs grid with column rules and a kicker on every story; if the briefs leave an empty cell, fill it with a small ruled pull quote rather than stretching a brief. The showcase presents the reading app as a ruled article page; testimonials read as italic pull quotes; stats are big italic terracotta numerals under heavy rules; the CTA is an ink-black subscribe band with a terracotta top rule. ## Content Use realistic product copy (fictional brand) suited to: News, magazines and longform publishers. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Open every Latin story with a 3-line drop cap (Thai: bold first line) - Use a 2fr / 1fr / 1fr lead-story grid with 1px column rules between columns - Kick each headline with an 11–12px uppercase red kicker and a short rule - Caption every image: small, muted, starting with a bold label ## Don't - Don’t box content in rounded cards with shadows - Don’t set headlines in a sans-serif or centre long paragraphs - Don’t box stories in bordered cards; use a 3px top rule only - Rounded corners, drop shadows, card boxes or tinted card backgrounds - Sans-serif headlines, sans-serif fallbacks in the font stacks, or a strictly symmetric equal-column grid (that becomes Swiss minimalism) - More than one accent colour, gradients or glossy imagery — photos are duotone/halftone - Italic or uppercase applied to Thai text, and drop caps on Thai paragraphs - Centred long paragraphs; only pull quotes are centred - Icon-heavy feature tiles or icon list rows — magazines use headlines and kickers, not icons ## Stack notes One self-contained HTML file with a