Take the issue with you.

Build me a complete, responsive business website in the EDITORIAL style — a century of magazine art direction set for the screen: oversized high-contrast serif display type, photography treated as the story, and the full apparatus of print (hairline rules, kickers, bylines, drop caps, folios, captions) arranged on a strict column grid that is deliberately broken exactly once per section. App-chrome recedes — no cards, no button fields, no shadows; ink-on-paper typography does the interface work, and motion is nearly still. Combine this style seed with my brief below. If I don't give you details, invent a plausible business the page suits — an architecture practice, a fashion label, a publisher, a restaurant with a story, a cultural venue — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template. Choose one of each — PAPER, INK ACCENT, DISPLAY SERIF, LAYOUT ARCHETYPE — that fits my brand, and COMMIT to it across the whole site. ── INVARIANTS (never break these — they define the style) ── • The page reads as a printed spread: oversized high-contrast serif display for headlines (often 60–120px), print apparatus everywhere — hairline rules structuring space, kickers above headlines, bylines, drop caps on lead paragraphs, folio lines. • A strict column grid (6 or 12), violated EXACTLY once per section — one planned break (an image crossing the gutter, a headline crossing a photo's quiet edge, a vertical byline up the margin). Body text columns and captions are never covered. • Paper ground: flat cream or white (one inverted black section is allowed as a contrast spread); no textures, no gradients, no cards, no drop shadows, radius ~0–2px. • Photography with a point of view: art-directed single images at spread scale — architecture, portraits, still lifes, documentary; black-and-white is first-class. EVERY image carries a written caption and/or credit — an uncaptioned image is off-style. • Motion is near-still: fade-settle entrances in reading order (0.5–0.8s ease-out), sliding ink underlines on link hover, subtle image dims (1 → 0.85); at most ONE slow ticker page-wide. No parallax, springs, glitch, or ambient loops. Honor prefers-reduced-motion. • CONTRAST (WCAG 2.2 AA, non-negotiable): ≥4.5:1 body, ≥3:1 large text, per actual background; text over photography only in genuinely quiet zones or over a scrim. ── VARIABLES (choose one of each, then commit) ── • PAPER — warm cream (#F4EFE6 class) · gallery white · either with one inverted black spread; or my brand tone pushed to a paper-plausible neutral (examples, not requirements). • INK ACCENT (one) — oxblood #7A2E2E class · ochre · ink blue · my brand hue deepened to a print-plausible depth; used for kickers, drop caps, links, one rule. • DISPLAY SERIF — Playfair Display · Fraunces · GT Sectra class · a sharp Didone — paired with a quiet utility face (Work Sans class) for apparatus and a readable text face for passages. • LAYOUT ARCHETYPE — cover-led issue flow · feature-spread stack · contents-page-led · photo-essay-led · type-specimen-led. Pick what serves the purpose and commit. ── MEDIA MODEL (image-heavy) ── Plan photography in the hero AND at least two more sections — single strong art-directed images of MY actual subjects (never stock-smiling-people, never icon sets), captioned and credited, sometimes bleeding to an edge. Use real placeholder <img> elements for planned photos. Pure-type "specimen" sections are the sanctioned alternate where imagery doesn't serve. WHAT THIS SITE MUST ACHIEVE (business goal): Authority through editing — present the business as a well-edited feature story: who they are (the standfirst), what they do (the features), why to trust them (real evidence set as pull quotes, captioned work, named clients), and one clear next step set as a quiet text-link action. Let the business and its brief decide the sections; include exactly those, in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal, real navigation (a masthead rail) and a footer (a colophon). • Don't be lazy with any section: real content depth (never a title plus one thin line), proper hierarchy, and the full editorial treatment — grid, apparatus, one break — applied to EVERY section. • Real, tailored copy for MY business written like edited magazine copy — kickers, standfirsts, captions, pull quotes; never lorem, never generic marketing filler. • Fully responsive and accessible: semantic landmarks, alt text, visible focus, reduced-motion support, and the CONTRAST invariant enforced everywhere.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing website into the EDITORIAL style — keep ALL of my current content, structure, pages, and copy exactly as they are; change only how it looks, moves, and feels. Apply this style system to the code/site I provide alongside this prompt. THE STYLE SYSTEM to apply: • Ground: flatten every background to paper — warm cream (#F4EFE6 class) or gallery white (pick one and commit); optionally invert ONE existing section to a black "contrast spread." Remove all cards, shadows, gradients, and rounded chrome (radius ~0–2px). • Type: map my headings to an oversized high-contrast display serif (Playfair Display, Fraunces, GT Sectra class) at spread scale; body to a readable text face; labels/captions to a quiet utility sans (Work Sans class). Keep my copy verbatim, but SET it like print: add kickers above existing headings (derived from my real section names), a drop cap on each section's lead paragraph, hairline rules between sections, and folio lines. • Grid: place each section on a strict 6/12-column grid with asymmetric margins, and give each section exactly ONE planned break — an existing image crossing the gutter, a heading crossing a photo's quiet edge, or a vertical byline in the margin. Never cover body text. • Imagery: keep my existing images but treat them as plates — placed at spread scale, and give EVERY image a caption/credit line (derive from its alt text or context). B/W conversion is allowed where it strengthens a spread. • Accent: demote my palette to ink + ONE print-plausible accent (my brand hue deepened, or oxblood/ochre/ink-blue) for kickers, drop caps, links, and one rule. • Motion: replace existing animation with the editorial system — reading-order fade-settle entrances, sliding ink underlines on hover, subtle image dims; delete parallax, carousels-as-heroes, and ambient loops (one slow ticker may stay). Honor prefers-reduced-motion. • CONTRAST (WCAG 2.2 AA, non-negotiable): after recoloring, verify every text/background pair — ≥4.5:1 body, ≥3:1 large; text over photos only in quiet zones or over a scrim. RULES: • Do not add, remove, merge, or reorder sections or pages; do not rewrite copy. • Apply the treatment to every page and section consistently, including nav (a masthead rail) and footer (a colophon between double rules). • Keep the site fully responsive and accessible — semantic landmarks, visible focus, alt text preserved.

Paste alongside your existing site/code

Build ONE complete section of a website in the EDITORIAL style. I'll name the section and its job below — if I don't, build a magazine-cover hero for a plausible story-worthy business (an architecture practice, a fashion label, a publisher) as a full working demo. THE STYLE, in brief: a printed magazine spread on screen. Flat paper ground (warm cream #F4EFE6 class or white — pick one; no texture, cards, or shadows, radius ~0–2px); oversized high-contrast display serif (Playfair/Fraunces/GT Sectra class) with a quiet utility sans for apparatus; hairline rules, a kicker above the headline, a byline or folio line, a drop cap if there's a lead paragraph; one ink accent (oxblood/ochre/ink-blue class or my brand hue deepened). Set everything on a strict column grid and commit exactly ONE planned break — an image crossing the gutter, the headline crossing a photo's quiet edge, or a vertical byline up the margin. Photography is art-directed and ALWAYS captioned/credited. Motion: one reading-order fade-settle entrance plus sliding ink underlines on hover — nothing else. Honor prefers-reduced-motion. REQUIREMENTS: • The section must be complete and shippable on its own: real tailored copy written like edited magazine copy (kicker, standfirst, caption — never lorem), real hierarchy, responsive mobile to desktop. • If the section wants imagery, use one strong art-directed photo of my actual subject with a written caption and credit (placeholder <img> if the file doesn't exist yet); a pure type-specimen treatment is the sanctioned alternate. • CONTRAST is non-negotiable: every text/background pair meets WCAG 2.2 AA — ≥4.5:1 body, ≥3:1 large; text over the photo only in a quiet zone or over a scrim. My section and its job:

Good for a focused first pass / chat assistant