A long, tall, SINGLE-COLUMN SCROLLING web page — the rendered web page itself, as if you are scrolling straight down it from top to bottom — for a real, live, full-width responsive website for Northwind CRM, a B2B sales-software company, in the visual world of a 1960s psychedelic concert poster with bold linocut with carved texture imagery and ornament. Show ONLY the web page content, edge-to-edge: NO browser window, NO browser chrome, NO address bar, NO tabs, NO URL bar, NO window frame, NO device or mockup frame. The page is FULL-BLEED: edge-to-edge across the full width with NO outer margins, NO borders, NO rounded corners, NO canvas colour around or between the content — a real website, not a design comp, not floating cards. Do NOT label, number, or badge the sections; there are no visible section numbers.
STRUCTURE — read the page as one long vertical SCROLL with 7 parts in this order from top to bottom: a thin navigation bar pinned flush to the very top, then a hero area, then a features, then a pricing, then a testimonials, then a contact area, and a thin footer pinned to the very bottom. EVERY part fills the ENTIRE width of the page, and the parts are arranged strictly one above another straight down the page — only one part at each level. They are NEVER placed two-across, NEVER in side-by-side columns, NEVER in a grid of sections. The hero is wide and SHORT (much WIDER than it is tall — NOT tall); no single area dominates. (This describes PLACEMENT only — how the parts blend together or divide visually is set entirely by the AESTHETIC line below; columns WITHIN one part, like text beside an image or an item grid, are fine.) EXACTLY ONCE — every part, and every line of text in it, appears ONE TIME ONLY. Do NOT repeat, echo, mirror or re-draw a navigation bar, logo, headline, button or any other element a second time, and do NOT restate a section further down. If the content does not fill the canvas, let the remaining space be background, imagery or generous whitespace — NEVER a second copy of what you have already drawn.
AESTHETIC — give each section its OWN distinct background tone so it reads as a clearly bounded block, set off from the next by a crisp full-width horizontal rule; let the section backgrounds alternate between a few palette tones so every section is visibly its own panel down the page.
RENDER-FIDELITY CONSTRAINTS — this exact page will be rebuilt as real, reflowing, responsive HTML by a deterministic renderer, so it MUST stay inside what that renderer reproduces faithfully. (1) BANDS, NOT A SCENE: every section is its own clearly-bounded horizontal band on a FLAT solid (or at most one subtle single-texture) background; sections do NOT share a continuous illustrated scene, mural, or gradient washing across them. (2) DISCRETE IMAGERY: all pictures are separate rectangular panels — a hero illustration, one supporting illustration beside a text column, a photo row — never a single full-page artwork with the text and layout embedded inside it. (3) RESTRAINED ORNAMENT: decoration is limited to repeatable motifs a CSS border can carry — thin rules, matching corner flourishes, small standalone spot illustrations — never dense layered ornament, texture or pattern fused into the backgrounds. (4) REAL TYPE: every headline, label and price is set in the clean Lobster / DM Sans web-font typefaces exactly — never hand-lettered, warped, outlined, 3-D, or word-art lettering baked into the illustration. (5) RECTANGULAR LAYOUT: sections are upright rectangular bands stacked straight down — no diagonal, tilted, overlapping, torn or collaged panels. (6) FLAT PALETTE: keep to #E84A5F, #FFB400, #5B2A86, #0B1026 as a small set of flat tones, not a photographic wash of many colours. (7) TEXT ON FLAT FILL: EVERY line of text — headline, subhead, nav, menu name/details/price, labels, body, footer — sits on a FLAT SOLID area of the palette with strong contrast. Text is NEVER placed over a photograph, gradient, busy scene, patterned texture or detailed illustration, and NO text is baked inside an image panel. Where a section has both text and a picture, they occupy SEPARATE areas (text on a solid field, the picture in its own bounded panel beside or below it), never overlapping. (8) LEGIBLE & SPACED: keep text comfortably large — the SMALLEST text anywhere on the page (fact labels, captions, fine print, footer) is at least 1/70th of the page width tall, and no text is ever shrunk into small cramped chips to make it fit — with generous letter- and line-spacing so glyphs never touch, and align related text (menu prices, form fields) in clean rows/columns. If text does not fit at that size, give it more room, never smaller type.
Across the very top, a thin navigation bar: a logo in Lobster reading exactly "Northwind"; a nav-link in DM Sans reading exactly "Features"; a nav-link in DM Sans reading exactly "Pricing"; a nav-link in DM Sans reading exactly "Customers"; a cta in DM Sans reading exactly "Start free trial".
Directly below it, the hero area (compact 16:9, wider than tall): the headline, subhead and buttons sit on a FLAT SOLID area of the palette (a plain colour field or solid band), and any hero illustration is a bounded panel to ONE SIDE of that text — the hero text is NEVER laid over a photograph, busy scene or detailed image, so the words always sit on a clean solid background: a eyebrow in DM Sans reading exactly "B2B sales, simplified"; a headline in Lobster reading exactly "Close deals faster"; a subhead in DM Sans reading exactly "One pipeline, every deal, zero busywork — so your team can sell."; a cta in DM Sans reading exactly "Start free trial"; a cta in DM Sans reading exactly "Book a demo"; a bold linocut with carved texture hero-illustration of a clean abstract sales dashboard with an upward pipeline and a city skyline.
Then the features: Lay the features out as ONE full-width section spanning the entire page width — a centered eyebrow and headline across the top, then the cards below as an even grid, each card pairing a title with a short line of body text. a eyebrow in DM Sans reading exactly "Features"; a headline in Lobster reading exactly "Everything your team needs"; a card-title in Lobster reading exactly "Pipeline"; a card-body in DM Sans reading exactly "See every deal stage at a glance."; a card-title in Lobster reading exactly "Forecasting"; a card-body in DM Sans reading exactly "Predict revenue with confidence."; a card-title in Lobster reading exactly "Automation"; a card-body in DM Sans reading exactly "Kill the busywork, keep the selling.".
Then the pricing: Lay the pricing as ONE full-width section spanning the entire page width — a centered eyebrow, headline and any legend across the top, then the items below as an even grid of SEPARATE cells with clear gaps between them, arranged in rows of AT MOST FOUR cells — with more items, WRAP to additional rows rather than narrowing the cells, so every cell stays wide enough for its text at the same comfortable size as the body text; inside each cell the name is on its OWN line, the details stack on the line(s) directly below the name, and the price sits on its own line or aligned in the cell — the name, details and price of an item are NEVER packed inline on a single running row. a eyebrow in DM Sans reading exactly "Pricing"; a headline in Lobster reading exactly "Simple, transparent pricing"; a legend in DM Sans reading exactly "Billed monthly · cancel anytime"; a menu of these items set in DM Sans, laid out as an even GRID (rows of at most FOUR cells — wrap, never narrow) of separate item cells with clear gaps between cells; inside EACH cell the item name is on its OWN line, the details stack on the line(s) directly BELOW the name, and the price is on its own line or aligned within the cell — the name, details and price are NEVER run together inline on a single row, and each cell sits on the section's flat fill: "Starter" (up to 5 seats, core CRM) $29 / mo; "Team" (up to 25 seats, automation) $79 / mo; "Enterprise" (unlimited seats, SSO, SLA) Contact us.
Then the testimonials: Lay the testimonials out as ONE full-width section spanning the entire page width — a short eyebrow and headline, then the customer quotes as a row of testimonial cards, each with the quote and the person's name. a eyebrow in DM Sans reading exactly "Customers"; a headline in Lobster reading exactly "Loved by sales teams"; a quote in DM Sans reading exactly "We cut our sales cycle by 30% in a quarter."; a author in DM Sans reading exactly "Dana Lee, VP Sales at Lumen"; a quote in DM Sans reading exactly "Finally a CRM the reps actually use."; a author in DM Sans reading exactly "Marco Diaz, RevOps at Bolt".
Then the contact section: Lay the contact area as ONE full-width section spanning the entire page width — on the LEFT the eyebrow, the headline, then the fact labels EACH ON ITS OWN LINE at the same comfortable size as body text (address, phone and hours are never squeezed onto one cramped line or shrunk to fit), then a short contact form; on the RIGHT the map; together the two halves fill the one full-width section. a eyebrow in DM Sans reading exactly "Contact"; a headline in Lobster reading exactly "Get in touch"; a row of all 2 fact labels in DM Sans: "hello@northwind.com", "1-800-NORTHWIND"; a form-label in DM Sans reading exactly "Name"; a form-label in DM Sans reading exactly "Work email"; a form-label in DM Sans reading exactly "Message"; a cta in DM Sans reading exactly "Talk to sales".
At the very bottom, a footer band TALL ENOUGH that every footer string sits on its own clear line or slot at the SAME comfortable size as body text — footer text is never miniaturized to make the band thin: a logo in Lobster reading exactly "Northwind"; a tagline in DM Sans reading exactly "Sell more, sweat less."; a fact in DM Sans reading exactly "SOC 2 Type II · GDPR-ready"; a legal in DM Sans reading exactly "© 2026 Northwind, Inc.".
Only the imagery, backgrounds, ornament and styling are in the style of a 1960s psychedelic concert poster, bold linocut with carved texture — never the text. ALL TEXT is clean, reproducible web-font type — every string is a real web font, letterforms as if set in CSS, matching the authentic Lobster (logo + headlines) and DM Sans (everything else) typefaces exactly, not word art. Spell every word exactly as written. Palette: #E84A5F, #FFB400, #5B2A86, #0B1026.