# MUST OBEY — Mobile-first build requirements This app's PRIMARY surface is a mobile phone. Build it impeccably on mobile FIRST, then verify on tablet and desktop. Treat the rules below as non-negotiable hard constraints, not suggestions. ## Viewports to verify (every screen, every state) - 320 px, 360 px, 375 px, 390 px, 414 px, 480 px - 768 px, 834 px (iPad portrait / Pro 11) - 1024 px, 1280 px, 1440 px, 1920 px, 2560 px - Plus: 200% browser zoom, landscape orientation on every mobile width, iPhone with safe-area insets visible ## Hard layout rules - Mobile-first CSS. Default styles target mobile; `@media (min-width: ...)` for larger viewports. - Use `dvh` and `svh` instead of `vh` for full-height surfaces (iOS Safari URL-bar bug). - Use `clamp()` for fluid typography across all viewports. - Prefer container queries (`@container`) over media queries for component-level responsiveness. - Use `min(100%, ...)` widths so content never overflows. Zero horizontal overflow at any viewport. - Add `` to every page. - Apply `padding: max(safe-area-inset-X, fallback)` on every edge-bleeding container so notched iPhones in landscape never clip content. - Wide tables and code blocks scroll INSIDE their container (`overflow-x: auto`), never push the body. - Use `background-attachment: scroll` on mobile, not `fixed` (iOS Safari repaint bug). - Avoid `backdrop-filter` on animated elements. Use it sparingly on static surfaces only. - **Canvas Scaling**: Canvases must dynamically scale with window resize events and properly handle high-DPI screens (`window.devicePixelRatio`). Set physical dimensions (`canvas.width`/`canvas.height`) using pixel ratio and render relative to this grid, using CSS to control responsive viewport scaling. - **Robust Storage**: Every access to `localStorage`/`sessionStorage` (especially `JSON.parse` of loaded state or writes) MUST be wrapped in a `try-catch` block to handle disabled storage, private browsing mode, quota limits, or corrupted JSON gracefully. Fall back to a robust in-memory object store. ## Touch & accessibility - Tap targets ≥ 44 × 44 px on touch (Apple HIG). Increase to 48 px under `@media (hover: none) and (pointer: coarse)`. - All interactive controls reachable by keyboard with a visible focus ring; respect `:focus-visible`. - Color contrast ≥ 4.5:1 for body text, 3:1 for UI components. - All images have meaningful `alt`. Decorative images use `alt=""`. - Respect `prefers-reduced-motion: reduce` — zero animation durations under that query. - Forms validate inline; error messages are specific, not "Invalid input". - Modals: focus trap, `Esc` closes, `role="dialog"`, `aria-modal="true"`, focus restored on close. ## Performance bar (Lighthouse mobile, throttled 3G/4G) - LCP < 2.5 s · INP < 200 ms · CLS < 0.1 - JS bundle gzip < 200 KB mobile-first; lazy-load non-critical screens via `React.lazy` / dynamic imports. - No render-blocking resources above the fold. - Images: WebP/AVIF preferred, `loading="lazy"`, explicit `width`/`height` attributes (zero CLS), `srcset` for retina. - Videos: `preload="metadata"`, low-resolution poster, max 720p mobile fallback. Never autoplay with audio. - Fonts: `font-display: swap`; preload only the one used above the fold. - Smooth scroll honoured via CSS `scroll-behavior: smooth` with reduced-motion fallback. ## Pre-ship mobile checklist (the deployer MUST verify before declaring done) 1. Open at 375 px in DevTools — every screen scrolls vertically only; zero horizontal scroll. 2. Browser zoom 200% — layout reflows without overlap. 3. iPhone Safari with the URL bar visible AND landscape — no content under the home indicator; no notch clipping. 4. iPad portrait (768 px) and landscape (1024 px) — no awkward gaps; tablet-specific breakpoints land cleanly. 5. Tap every interactive element with a thumb at real-device size — every target is easy to hit. 6. `prefers-reduced-motion: reduce` — every transition / animation skips cleanly, scroll-behavior becomes instant. 7. Lighthouse mobile score ≥ 90 across all 4 categories. 8. Zero `console.error` and zero CLS shift in real-device testing on a mid-tier Android (e.g. Pixel 6a) and an iPhone SE. --- The original template starts below. All rules above apply on TOP of whatever this template specifies. --- # Build Prompt — Broadsheet News Site Paste this into Google AI Studio's **Build** function. It is self-contained — every section below is part of the instructions. _Source reference: https://lovable.dev/templates/websites/editorial/broadsheet-template_ --- ## 1. Project Build a **Editorial** named **Broadsheet News Site**. One-line description: _Classic newspaper editorial site_ **What it is:** This template gives you a classic newspaper and editorial website that looks professional—no design experience or coding skills required. The blackletter masthead, grayscale photography, and asymmetric column layouts create an authentic broadsheet feel from the moment someone lands on your site. The technical parts are already handled. Mobile responsiveness, lazy-loaded images, semantic page structure, newsletter signup forms—all done. You can focus on publishing articles and building readership instead of wrestling with layout grids and typography settings. With 18 pages, 6 dedicated category sections, 35 sample articles, and 8 component showcase pages for design elements like buttons, counters, icon boxes, and more, this isn't a blank canvas you have to figure out. It's a fully built editorial site you can reshape around your own voice, topics, and audience. ## 2. Target audience - Independent publishers launching a content-driven site without a developer - Journalists and columnists building a personal publication that stands apart from generic blog templates - Agency professionals delivering editorial sites to media clients on tight timelines - Small news organizations or local outlets that need a credible online presence from day one - Content creators covering multiple topics who need organized category sections and structured navigation - Brand storytellers using long-form editorial content to build authority in their industry ## 3. Core value propositions Surface these clearly through copy, visual emphasis, and section ordering — they are the reasons users pick this product. - **Newspaper-Quality Design Instantly** — Professional editorial aesthetics with blackletter masthead and asymmetric layouts—no designer required. - **18 Pages Ready to Publish** — Complete site structure with category sections, article pages, and component showcases already built. - **Six Organized Category Sections** — Dedicated pages for politics, technology, sports, fashion, food, and blog with distinct layouts. - **35 Sample Articles Included** — Full content library across 10 categories so you can see exactly how your site will work. - **Mobile-Responsive Navigation** — Hamburger menu, responsive grids, and optimized typography work seamlessly across all devices. ## 4. Features to build **Product features:** Production-ready features built with modern tech stack for exceptional performance and user experience - Blackletter Masthead Typography - Asymmetric Grid Layouts - Grayscale-to-Color Photography - Newsletter Signup Forms - Related Articles Sidebar - Component Showcase Pages - Warm Editorial Color Palette - Progressive Article Loading - Image Carousel Gallery - Lazy-Loaded Images - Semantic Page Structure - Social Footer Integration ## 4b. Required services & integrations List the back-end services this template needs to function. If a service is not needed, say so explicitly — silence is ambiguous. - **Auth — Required for paywalled content.** Email + magic link or password. Subscriber tiers. - **CMS — Required.** Headless CMS (Sanity / Strapi) or in-house. Articles, authors, sections, tags, issue archives, paywall metadata. - **Image CDN — Required.** Editorial-grade imagery, captioned, sized via srcset. - **Payments — Required for subscriptions.** Stripe Billing (monthly + annual + lifetime). Gift subscriptions. Receipt PDFs. - **Newsletter + transactional — Required.** Daily/weekly newsletters, paywall metering email, sub renewal email. - **External APIs / third-party services:** - Analytics (Plausible/Fathom) - Push notifications (web push) for breaking stories **Environment variables to expose in the build:** mark every secret (API key, DB URL, JWT secret, Stripe key, S3 credential) as a clearly named `.env` variable — never hard-code. Include a `.env.example` with the full list. **Auth + data privacy reminders:** never log secrets · never store passwords in plain text · use HTTPS everywhere · hash + salt with bcrypt or argon2 · refresh tokens with rotation · honor a 'delete my account' request inside the UI. ## 5. Use cases & content to include Build dedicated UI sections or pages for each of these — they tell you what content the page must support. - **Multi-Category News Publications** — Publish across politics, technology, sports, fashion, food, and more—each with its own dedicated section page and distinct layout. The template's six category pages with different grid patterns give each section a unique feel while keeping the overall site cohesive. Readers can browse by topic without everything looking the same. The blog page includes a "Load More" button for progressive article browsing, so visitors can explore your full archive without navigating away from the feed. - **Long-Form Editorial and Opinion Sites** — Feature in-depth articles with blockquote callouts, author attribution, related article sidebars, and tag-based discovery. The article detail pages pair Playfair Display headlines with comfortable body text and a sidebar that surfaces related content and recent headlines. Readers who come for one piece stay for three. - **Agency Client Deliverables** — Present a working editorial site to media clients instead of static mockups. The warm cream-and-burnt-orange color palette, asymmetric grid layouts, and grayscale-to-color image hover effects show a level of design intentionality that wins pitches. Swap in client branding and content, and the site is ready for review. The eight component showcase pages—covering buttons, icons, counters, dividers, embedded media, and more—double as a design system reference you can walk clients through. - **Personal Magazines and Brand Journals** — Build a curated online magazine that covers your niche from multiple angles. The homepage features a hero section, featured stories grid, daily feed sidebar, and newsletter signup—giving visitors multiple ways to engage with your content. A dedicated gallery page with an image carousel and hover-based thumbnail navigation lets you showcase photography and visual storytelling alongside your editorial work. The professional presentation helps establish you as someone worth reading in your space. ## 6. Recommended page structure Generate the following sections in this order. Adjust labels to fit the brand voice, but keep the structural intent. 1. Front-page masthead with publication name and date. 2. Lead story large; secondary stories in a grid below. 3. Section navigation (Politics / Culture / etc.). 4. Article detail with editorial-grade typography. 5. Newsletter signup. 6. Footer. ## 6b. First-visit onboarding Show a **first-visit onboarding** the first time a visitor lands on the site (detect via `localStorage` flag; do not show on return visits). Keep it short — three steps maximum — and respectful: visitors can dismiss at any time and revisit later from a `?` icon in the header. **Format:** a polished modal *or* a 3-step inline tour, designed to match the overall visual style of the template (don't bolt on a generic stepper UI). On mobile, full-screen sheet that slides up. **Required content — three slides:** 1. **What this is.** - One-line headline: "Welcome to *Broadsheet News Site* — a template for Classic newspaper editorial site." - One paragraph (max 60 words) explaining what the template demonstrates, who it's for, and what you'd typically use it for. - Visual: a small annotated screenshot of the page they're about to see, OR a 4-frame storyboard of key sections. 2. **What to try.** - 2–3 specific things the visitor should look at to understand the design (e.g. "Open a section to see the booking flow", "Hover the gallery for captions", "Resize the window — every layout is fluid"). - Reference real elements on the actual page so the visitor learns by doing, not by reading. 3. **How to remix this.** - A direct CTA: "Use this template" → links to Lovable / AI Studio Build remix entry point. - Below: 3 short bullets on how to make it yours — e.g. • "Swap the copy in `data/content.{ts,json}` for your own." • "Replace the imagery in `/public/images/` (we use AVIF + WebP)." • "Connect your services using the env-var list in section 4b above." - Plus a quieter secondary action: "Just looking — close" (closes modal, remembers preference in localStorage, never auto-shows again). **Persistent re-entry point:** A small "?" icon in the top-right header next to the primary nav. Click → reopens the onboarding from slide 1. Tooltip: "How this template works". **Accessibility:** - Trap focus inside the modal while open - `Esc` closes - All controls reachable by keyboard, visible focus ring - Heading hierarchy: modal title is `h1` inside the dialog - `role="dialog"` + `aria-modal="true"` + `aria-labelledby` - Restore focus to the trigger (or to `
`) on close - Respect `prefers-reduced-motion` — fade in/out only, no large transforms **Copy tone:** Warm and direct, not corporate. Avoid "Welcome to your dashboard" language. Avoid all caps. Use the same voice as the rest of the template's copy. **Don't:** - Don't gate content behind the modal. The page below must be fully scrollable. - Don't show the modal again on return visits. Use `localStorage['onboarding-seen']`. - Don't include marketing CTAs unrelated to remixing (no newsletter signup, no "follow us on X" — those live elsewhere). ## 7. Design language - **Mood:** Newspaper / magazine. Type-driven, rule lines, hierarchical headlines. - **Typography:** Editorial serif headline + sans body or vice-versa. Use a clear modular scale (e.g. 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px) and tight tracking on display sizes. - **Palette:** Paper + ink + 1 accent (often red, navy, or amber). - **Spacing:** consistent 4-px base. Generous whitespace — let the content breathe. - **Radius:** consistent token set (e.g. 6 / 12 / 20 px). Don't mix arbitrary values. - **Shadows:** subtle, layered. Avoid heavy drop-shadows. - **Imagery:** Editorial photography, illustration, archival textures. - **Motion:** purposeful — entrance fades, hover lifts, page transitions. Respect `prefers-reduced-motion`. No bouncing splash animations. ## 8. Content generation rules - Write **realistic, specific copy**. NO Lorem Ipsum. NO generic placeholders like 'Your tagline here'. - Invent plausible names, dates, locations, prices, quotes, testimonials and product details that fit the domain. - Tone should match the audience above — confident, specific, free of buzzwords. - Headlines: punchy and concrete. No 'Empower your business' filler. - Body copy: short paragraphs (2–4 sentences). Use lists where appropriate. - All numbers, stats, and metrics must look plausible for the domain. ## 8a. Seed content (use these specific examples) Anchor the generated copy in the concrete data below. Use these names, numbers, dates, and snippets verbatim where helpful, or generate close variants that sit in the same world. **Publication identity:** Daily · a daily-edition broadsheet · founded 2017 · 38 staff writers · digital-first with weekly print **Today's front page (top story):** "The Crisis at the FDIC No One in Washington Wants to Discuss" by Aanchal Gupta · published May 12, 2026 06:30 ET · 4,200 words **Below the fold:** - "The Quiet Coup at the Last Independent Bookstore Chain" — Mara Vellum — National - "The Algorithm Took My Job, Then Hired Me Back" — Maya R. — Business - "The 14 Words That Killed a Senate Bill" — Karim H. — Politics - "Inside the AI Safety Group Most People Haven't Heard Of" — Tomás G. — Tech - "What the Climate Tariffs Really Do" — Lucas B. — Climate **Section nav (Masthead):** Front Page · Politics · Business · Climate · Tech · Culture · Science · Books · Opinion · Sports · Obituaries · Crossword **Editorial board statement strip:** "We endorse no candidates. We disclose our editors' financial holdings. We correct mistakes within 24 hours." **Subscription:** "$96/year digital · $240/year digital + print weekly · $480/year all-access (incl. archive, app)" **Newsletter:** "The Morning Daily — 6:00 ET — free with email — 612k subscribers · The Weekend — Saturdays — subscribers" **Awards strip:** "Pulitzer Prize for Public Service finalist 2025 · George Polk Award 2024, 2025" ## 9. Media & assets Every ``, `background-image`, gallery tile, thumbnail, and decorative figure on the page must come from ONE of the three buckets below. Do NOT reference any image path that is not specified here. Do NOT ship stock-photo placeholders. ### Bucket 1 — Runtime-generated via Nano Banana Pro (`gemini-3-pro-image`) Generate at build time, cache to Firebase Storage at the path listed, serve via signed URL. Each call uses model `gemini-3-pro-image`, output format `image/webp`, dimensions as listed. The visual register matches section 7 (Design language) and the specific seed content in section 8a. - **Hero image** → `/public/generated/hero.webp` · 2400×1500 · prompt: "Editorial newspaper-style lead-story photograph illustrating the top story named in section 8a. Documentary aesthetic, real-photo look (or, where section 8a calls for it, a black-and-white archival photograph or an editorial illustration). No on-image text overlay, no readable signage that wasn't part of the scene. Subject framed for a broadsheet front page (room for headline at top)." - **Below-the-fold story thumbnails (one per story listed in section 8a)** → `/public/generated/stories/{story-slug}.webp` · 1200×800 · prompt: "per-story prompt built from each story title/section in section 8a, e.g. "The Algorithm Took My Job, Then Hired Me Back" → "newsroom-grade portrait of a worker at a kitchen table with a laptop, fluorescent overhead light, papers spread out, 35mm documentary look, no readable signage". One image per story." - **Author / byline portraits (one per named writer in section 8a)** → `/public/generated/authors/{author-slug}.webp` · 640×640 · prompt: "Newsroom-grade head-and-shoulders editorial portrait of the bylined writer named in section 8a, neutral background, natural light, slight smile or neutral expression, no on-image text." - **Section-page illustration banners (one per nav section in section 8a — Politics, Business, Climate, Tech, Culture, Science, Books, Opinion, Sports, Obituaries, Crossword)** → `/public/generated/sections/{section}.webp` · 2000×600 · prompt: "Wide horizontal editorial illustration banner representing the section's domain — e.g. Politics → marble columns at dusk in monochrome ink; Climate → wind turbines through fog. Print-illustration aesthetic, restrained palette, no on-image text." - **Wordmark / monogram** → `/public/generated/wordmark.svg` · prompt: "A simple wordmark for the publication named in section 8a, set in the display serif of section 7, broadsheet-masthead character, suitable for top of a front page." Favicon export to `/public/generated/favicon-256.webp` (256×256). ### Bucket 2 — Seed assets shipped with the deliverable Static files committed to `/public/samples/` as fallbacks when generation fails. Generated once via Nano Banana 2 (`gemini-3.1-flash-image`), 1024×1024 WebP unless noted. - `/public/samples/empty-state-archive.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty newspaper archive box, single-stroke outline, no colour fill." - `/public/samples/empty-state-search.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of a magnifying glass over a folded broadsheet, single-stroke outline, no colour fill." - `/public/samples/hero-fallback.webp` — 1600×1000 — same prompt as the Bucket-1 hero, encoded once at build and committed so the page renders identically if Gemini quota is exhausted. ### Bucket 3 — User-supplied (when the template is remixed) Onboarding modal surfaces a "Replace with your photos" hint. Uploads land via the file input → Firebase Storage path `publications/{publicationSlug}/uploads/`. The build ships with Bucket-1 + Bucket-2 only; no user-supplied images at first paint. ### Hard rules - Every `` tag MUST have a `src` that resolves to a path listed above. Any `` referencing a path not in this section is a build error. - No bare `image.jpg` / `hero.jpg` / `placeholder.png` references anywhere in the code. - Icons: `lucide-react` only; use sparingly and consistently — never decorative-only. - Optimisation: WebP or AVIF, `loading="lazy"` on everything below the fold, explicit `width`/`height` to prevent layout shift. ## 10. Interactivity & states - Every interactive element has a hover, focus, active, and disabled state. - Forms validate inline and show specific error messages. - Loading states (skeletons, not spinners where possible). - Empty states with helpful next-action guidance. - Smooth scroll for in-page anchors. ## 11. Tech & responsive requirements - **Stack:** React + TypeScript + Tailwind CSS. Use functional components and hooks. - **Mobile-first.** Verify layouts at 375 px (iPhone SE), 768 px (iPad), 1024 px, 1440 px+. - Use `clamp()` for fluid typography where appropriate. - Prefer container queries over media queries for component-level responsiveness. - Use `dvh` / `svh` units instead of `vh` to handle mobile viewport chrome. - Zero horizontal overflow at any width. Zero layout shift on load. - Respect safe-area insets on iOS. ## 12. Accessibility (WCAG 2.2 AA) - Semantic HTML — `header`, `nav`, `main`, `section`, `article`, `footer`. - All interactive controls reachable by keyboard with a visible focus ring. - Color contrast ≥ 4.5:1 for body, 3:1 for large text and UI components. - All images have meaningful `alt` text. Decorative images use `alt=""`. - Form fields have associated `