AI Web DesignPrompt Library

Build a one-page studio portfolio for [studio name], a photographer or small art direction studio. It is a real page a client would pay for, and it should feel like a bound portfolio book without imitating paper.

Layout:
- Ground: saturated cadmium yellow #F2C31B with hairline concentric circles radiating from the top right corner at 13 percent ink, like a light falloff diagram. Use a repeating radial gradient. No other pattern.
- Top: a plain nav, then a full-width headline in League Gothic, uppercase, about 11vw, line height .9. Under it a one-sentence inline byline. No boxed metadata cells.
- Below the headline, a three-photo proof set of one project in a grid of 2.4fr 3fr 5fr, all 4:5 crops, bottom aligned so the frames step up to the strongest shot. The short intro and a single ink button sit in the space above the two smaller frames. Give each photo a 1px ink keyline.
- Then one warm white sheet #FBF8EE that runs off the right side into a column of sticky thumb index tabs: ink tabs with yellow condensed labels stacked down the sheet's right edge with 10px gaps. The tab for the section in view takes the color of the surface it touches and merges with it, set by IntersectionObserver. On mobile the tabs become a sticky horizontal strip above the sheet.
- Each case on the sheet opens with a row of labelled credits (client, discipline, date) above a condensed uppercase heading, then a 680px reading column. Separate cases with a 1px rule.
- Two panels invert to deep ink blue #141C33 with yellow headings: the studio statement and one featured case.

Type: League Gothic for display only, Alegreya Sans for body, DM Mono for small labels. Palette: yellow #F2C31B, ink #1B1710, sheet #FBF8EE, night #141C33, one vermilion accent #D23A17 for rules and key numbers.

Dark mode: declare it on purpose. Put a color-scheme meta tag in the head. Pin the yellow brand surfaces with color-scheme: light only, and give each hero photo a dark alternative through a picture source with prefers-color-scheme. Export images with no baked-in page color and logos as SVG.

Guardrails: body at least 19px with line height at least 1.6, text at WCAG AA on its real surface, hover and focus states on every link and tab, a prefers-reduced-motion guard, no fake text inside images, no neon, no glow, no gradient text, no pill-shaped cards, no three identical feature cards.

Build a one-page event landing page for [event name], a talk, launch or meetup in [city]. Treat it as a real event page a client would pay for, with the visual treatment of a 1980s airbrushed tour poster.

Hero: a full-bleed airbrushed illustration as the ground (a dusk horizon with two soft beams of light splitting from one point, olive gold and plum violet), with a dark olive scrim on the left third strong enough to hold cream text at WCAG AA. Left: a small chartreuse label with the date, a large high-contrast serif headline (max 13 characters per line), a two-sentence deck, one violet button and one text link. Right: a lanyard pass hanging from the top edge (a striped violet strap, a clip, a cream card tilted -3 degrees) that holds the event name, number, date and duration as a small labelled list. On phones the pass sits flat above the headline.

Directly under the hero, overlapping it, a cream "program" strip: one row of linked blocks whose widths follow each session's length. Each block has a violet mono timestamp label, a small uppercase track name and the session title. The timestamps are the page's section markers: every section below opens with the same violet time label, a mono track name and a right-aligned source line, then a serif h2.

Sections sit on one cream sheet over a vivid olive ground woven with a fine ink basketweave pattern (alternating 12px squares of horizontal and vertical 1px lines at about 11 percent). Use two-column session rows (a 680px reading column and a 300px aside for a portrait image and a labelled facts list), one italic pullquote under a 2px violet rule, and a dark ink "design move" panel.

Add one regional notice slot directly under the hero, not a pop-up: one rule per country, an empty default, a plain "Shown to visitors in [country]" reason inside it, and times shown in the event's zone with the reader's local time beside it.

Palette: olive ground #93A033, cream sheet #F2F0DE, deep olive ink #1D2109, plum violet accent #6E2F94, chartreuse highlight #D9E36A. Type: Gloock for display, Figtree for body and controls, Sometype Mono for times, labels and code.

Guardrails: body text at least 18px with 1.65 line height and lines under 75 characters; small labels at WCAG AA against their real background; no fake readable text inside images; no neon glow, no purple-blue gradients, no gradient text; radius 8-12px on cards and 4px on labels, not pills; hover and focus states at about 150ms with a reduced-motion guard; one restrained motion only (the pass swinging once on load).

Build a one-page product landing page for [product], a localization or content-sync tool. Treat it as a dark data-table product: the page's main control is a live coverage table in the hero, and the rest of the page keeps the table's grammar.

Ground: flat deep indigo #1B1F3D with faint horizontal row ruling every 40px at about 5 percent bone, like the rows of a table. No gradients, no glow, no dot grid.

Above the fold, three columns. Far left, a narrow vertical spine set sideways with the release number, date and reading time, divided from the copy by a 1px rule. Then a copy column: a small mono kicker, a bold 13ch headline, a two-sentence deck, one coral #F0704F button with dark ink text, and a plain text link. The right seven twelfths hold the coverage panel on deeper indigo #121530 with a 12px radius and one tight shadow, the only elevated element on the page.

The coverage panel: a header row of locales with the source locale marked and locked; one row per content item with a square two-colour risograph thumbnail, the item name and its kind (page, collection, component); one three-state cell per locale reading Included, Untranslated or Hidden in words. Clicking a cell cycles its state. Row checkboxes reveal a coral bulk bar that sets a chosen locale for every selected row. A footer radio picks the default for new locales, and an Add locale button appends a column with that default.

Below the hero, a full-width contents table (row number, section, item, source, date). Its row numbers become the section markers: each section is a two-column row with a 220px key column (a large mono row number, a solid bone kind label, the date) beside a 720px reading column. One bone sheet inverts the page for the reusable pattern and a CSS snippet. The copyable prompt sits in a two-column block: a metadata column (key, archetype, works-in list, copy button) beside the prompt on a deeper indigo sheet with a 1px periwinkle border. Sources as a real table, a three-cell pager, a colophon.

Palette: indigo #1B1F3D ground, #121530 for the nav and panels, bone #EEEAE0 for headings and the inverted sheet, coral #F0704F as the only loud accent (buttons, focus rings, the bulk bar, row numbers), pale sage #BFD9B4 for Included, ochre #EDC16A for Untranslated, and Hidden as a periwinkle outline with a strike. Type: Red Hat Display 800 for headlines, Red Hat Text for body and controls, Red Hat Mono for row numbers, keys, labels and code. One superfamily, split by optical size.

Guardrails: body text 19px with 1.7 line height and a 68 character measure. Every state is written as a word, never color alone. Small labels meet WCAG AA against the indigo and against each fill. Hover and focus states on every real control at about 150ms, with a prefers-reduced-motion guard. No fake controls: every button does something or is removed. 6px radius on cells and labels, 12px on panels, no pills. No neon, no glow, no purple-blue gradients, no readable text inside images. On mobile the table rows become cards with each locale as a labelled line, the spine turns horizontal above the headline, and the key column sits inline above each heading.

Build a one-page integration launch page for [product], announcing that [tool A] now connects to [service B]. Treat it like a page from a cyanotype album: sun-printed specimens, Prussian blue ink, cream paper.

Layout
- Top nav (brand left, three links right), then a breadcrumb rail as the masthead: Home, Integrations, the integration name as the current page, and a read-time or launch date at the far right. Chevron separators drawn in CSS. No boxed meta cells.
- Centered hero: a solid ink label with the ship date, a slab-serif headline of at most 16 words, a two-sentence deck, one marigold primary button and one text link.
- Under the hero, a cream sheet with a 1px ink border holding the request path: three lettered stops in reading order (A your tool, B the connector, C the service), each a square ink letter tile, a bold name and one muted line. Between stops, dashed connectors ending in a marigold arrowhead, labelled above with what goes out and below with what comes back (a request, a model call, a file, credits). Below the path, one wide cyanotype photogram plate (16:7 crop) of the products as objects, with three HTML captions in a ruled row lined up under each object.
- Feature rows: each section opens with a 64px plate-number tile (a small italic Pl. above a slab Roman numeral, I, II, III) on a fine halftone dot fill, so the letters stay reserved for the path's stops, a mono kicker naming the source and date, and an h2. Then a two-column row: prose at most 640px wide beside one supporting element (a portrait plate in a cream frame, a dt/dd facts list, or a code block), alternating sides row by row.
- One full-width Prussian blue band for the overview section. A 2px ink-bordered cream card for the how-it-works rules, with a small live demo: three radio buttons that each light one hop of a mini A-B-C path and show what crosses it.
- A Prussian sheet for code or a copyable prompt with a copy button. A two-column close of a short note beside a numbered source list. A three-tile pager and a colophon.
- Mobile: the path turns vertical with the arrows pointing down, the plate goes to 3:2, every two-column row stacks.

Palette
- Ground: pale steel #E3EAEE with a halftone dot screen (Prussian dots at about 15 percent on a 9px grid with a larger 18px layer) behind the hero only, masked to fade out downward.
- Ink: Prussian blue #16324F. Sheets: cyanotype cream #F7F4EC. Labels: steel #4A6176. Rules: #C3CFD8.
- One accent, marigold #EA8A2A, for buttons, arrowheads and the pullquote rule only. Dark ink text on marigold.

Type
- Rokkitt 700 for headlines, letter tiles and plate numerals, Rokkitt italic 500 for the single pullquote and the Pl. labels.
- Cabin 400 for body, 600 for buttons. Fira Mono for kickers, labels, captions and code.

Images
- Cyanotype photograms: white silhouettes on Prussian blue, ragged brushed edges, a cream paper border, visible paper tooth. Objects stand in for the products (film strip for video, print for image, cable for the connector). No legible text, numbers or logos in any image.

Guardrails
- Body at least 19px, line-height 1.7, lines of 60 to 72 characters, never justified.
- WCAG AA for every label against its real background, including text on the marigold button.
- Card radius 12px or less, inputs 6px. One tight shadow on the path sheet only. No gradients except the halftone fade. No glow, no neon, no purple-blue gradients, no emoji, no logo bars, no three identical feature cards, no fake controls.
- Hover and focus states on every link, button and radio at about 150ms, plus a prefers-reduced-motion guard.

Works in: Claude Code, Beaver Builder AI, v0, Lovable, Figma Make, Framer AI, Webflow AI.

Build a single-page "run compare" product page in the style of an experiment tracker's compare view. Use it to launch any tool that produces several versions of one thing (AI image models, pricing plans, design variants).

Structure:
1. Sticky top app bar: product name left, three text links right.
2. Hero, two columns. Left: a ticket-stub tag (filled orange half with an ID, outlined half with date), a mono kicker, a heavy grotesque headline capped at 15ch, a two-sentence deck, one solid button and one text link. Right: a light "Shared input" panel that prints the single input once, with a small labelled list: Held constant, Varied, Picked.
3. Compare strip: three equal columns of square output images on dark cards. Under each image, a run ID, a filled model label in that column's series color, and three short labelled rows describing what differs.
4. A light "Trace" panel as the table of contents: one row per section with a run ID, section name, a horizontal span bar on a ten-step track, and a duration.
5. Content sections as light cards on the dark ground, each opened by a header strip with a mono run ID, a filled status label (Shipped, Recap, Changed) and a right-aligned source line, then a heavy h2.
6. One inverted dark card with a live "pick a run" radio group that dims the unpicked columns to 42 percent opacity and outlines the pick, using :has(), never removing them.
7. Sources, three pager tiles, footer.

Visual system: warm oxblood-black ground (#251214) with a faint two-scale plot grid (24px and 96px lines at 3 and 5.5 percent bone). Bone cards (#F2EADD) with near-black ink (#1E1112). Lantern orange (#E9893A) for buttons and run A; sage (#9DB8A2) and dusty rose (#D6A39C) for runs B and C. On light cards use darker siblings for text-weight color (#9E4316, #3F6650, #8A3F3A). Type: Pathway Extreme 800 for display, Petrona for body, IBM Plex Mono for IDs, labels and data.

Guardrails: body at least 19px with line height 1.65 to 1.75 and lines of 60 to 75 characters; WCAG AA for every label on its real background; cards 12px radius, labels 5px, no pills; one soft shadow on the shared-input panel only; hover and focus states at about 150ms with a prefers-reduced-motion guard; no neon, no glow, no purple-blue gradients, no gradient text; images with no legible text or logos; no fake search fields or toggles that do nothing.

Build a type foundry release page for a studio launching a new typeface, as one responsive page with real, readable copy.

Structure, top to bottom:
1. A slim nav: studio name left, three text links right.
2. A nameplate folded into the hero: the studio name set huge in an extended grotesque between a 3px rule above and a 1px rule below, with the release number, date and read time as a small right-aligned text block, not boxed cells.
3. Hero in two columns (5:6). Left: a solid ink label ("Typography release"), a 13ch headline, a two-sentence deck, one vermilion button and one text link. Right: a live tester card on paper with a 1px ink border and one hard 8px offset shadow, showing three or four huge glyphs, a pangram, and a four-option segmented radio control for the font's stylistic variants.
4. The tester control must set a CSS custom property on :root using :has() on the checked radio, so the whole page's body font changes, not just the card. Native radio inputs with visible labels, default checked, no JavaScript.
5. A work index table: number, entry title linked to its section, discipline, date. Row hover tint.
6. An art direction band on the patterned ground: name, one-line summary, short paragraph, tag list.
7. Case rows: a 200px left column with a 96px case number in the extended grotesque and a small ink discipline label, beside a 740px reading column. The first case number is vermilion. Include a spec row of four stats (big numbers, mono labels), an etched diagram plate with a caption, a code block and one pullquote under a 2px vermilion rule.
8. An inverted ink case for a reusable technique, with a dt/dd rules list and a code snippet.
9. Sources as a ruled list, three pager tiles, a colophon.

Palette: ground saturated jade #46A882 with a 135 degree hatch of 1px ink lines at 13 percent every 9px; paper #EEF1EA; ink #0E2219; vermilion #C2391F for buttons and one accent only; muted #4F6A5E; emphasis green #1F6B4F.
Type: Archivo at width 125 (500 and 800) for display, numbers and labels; the new serif (or Newsreader) at 19px, line height 1.7 for reading; Geist Mono for labels and code.

Guardrails: body at least 18px with line height 1.6 or more, 60 to 75 characters per line, WCAG AA contrast on every surface including labels on the green ground, no neon, glow, gradients or gradient text, radius 2 to 6px, one hard shadow only, hover and focus states at 150ms with a reduced-motion guard. Images are etched diagrams with no readable text. On mobile stack the hero with the tester below the copy, put case numbers inline above each entry and collapse the stats to two columns.

Build a workspace settings and admin console page for a SaaS product, as one responsive page with real, readable content.

Layout
1. A 60px dark app bar: product name left, a small mono page location, three plain nav links right.
2. Below it a two-column shell: a 232px sticky settings sidebar and a main column. The sidebar groups its links under small mono group headings (for example Workspace, Publishing, Reference). The link for the section in view gets a light filled background, set with IntersectionObserver.
3. The main column opens with a page header: a mono kicker, a heavy grotesque headline under 16 words, a two-sentence deck, one filled button and one text link. Beside it, an account summary card (a large bold name or number, then labelled rows: plan, owner, updated, status). No boxed grid of meta cells.
4. One wide contained illustration card under the header, with a slim title row above the image and a one-line caption below.
5. Every section is a settings card: a header row with a mono setting key (like workspace.publish) on the left and a solid status label on the right (Shipped, Preview, Reference), then a bold h2 and the content. Facts go in a dt/dd list with a mono term column.
6. One settings card holds a live form of three native controls (a select, a checkbox, a two-option segmented radio group). Changing a control tints that field and adds a row to a Staged changes list written in words ("Default view: Content to Design"). Apply and Discard act on the whole set. A fixed save bar slides up from the bottom only while the count is above zero, with the count, Review, Discard and Apply. Announce the count in a live region.
7. End with sources as a numbered list, a three-tile previous/index/next row and a short colophon.

Look
- Ground: dark muted slate #1F282C with a faint fractal noise grain. Cards: cool paper #ECEFEC with ink #162024. Rose pink #E0659A on dark and #A82A5E on paper is reserved for staged changes, focus rings and the primary button. Sage #BFD6C6 marks shipped status. Muted text #586A70.
- Type: Schibsted Grotesk for headlines and body (800 for headings, 400 body, italic only for one pull quote), Martian Mono for setting keys, labels and values.
- Illustrations: graphite pencil drawings on blue-grey toned paper with a single rose pink pencil line, no readable text.

Guardrails
- Body text at least 18px with line-height 1.6 or more; lines around 60 to 75 characters; never justify.
- Small labels must meet WCAG AA against the surface they sit on.
- Card radius 12px, inputs 8px, labels 4px. No pills, no accent stripe borders, one shadow only (on the save bar).
- No neon, no glow, no purple-blue gradients, no gradient text, no fake toggles that do nothing.
- Hover and focus states at about 150ms, and a prefers-reduced-motion guard.
- On phones the sidebar becomes a collapsible "Jump to a setting" block at the top, cards go full width and the save bar wraps its buttons under the count.

Build a single-page "X vs Y" comparison landing page for two competing products, styled as a county fair judging sheet. It must work as a real page a client would ship.

Structure, top to bottom:
1. Top nav on the page ground: brand wordmark left, three text links right.
2. Hero, two columns. Left: a round rubber-stamp masthead (128px circle, double navy ring, rotated -9deg) holding the page number, date and read time, beside a short kicker; then a condensed headline (max 14 characters per line, about 80px), a two-sentence deck, a solid navy button and an underlined text link. Right: a cream "exhibit board" card with three portrait images in a row as a step-by-step sequence, each with a "Step N" mono label and one plain caption line in HTML.
3. The scorecard, on a cream sheet: two entry tags (bordered cards with a small round pin, product name in condensed caps, a dt/dd list of status, date, notes), a segmented radio filter (All rows, Product A, Product B) with a live "Showing N of N" count, then a real table. Columns: Class, Product A, Product B, Ribbon. Each cell is a short plain sentence; missing features say "Not in this release" in muted italic, never a blank or a cross. The Ribbon column holds a rosette verdict badge (a CSS concentric circle with a notched tail, ribbon blue for a winner, white with navy for a tie) plus the winner's name or "Tie".
4. A navy art-direction band with the page's name, an italic one-liner, a short glossary paragraph and vocabulary tags.
5. Detail sections as cream cards stacked with 64px gaps so the ground shows between them. Each card has a pinned header tab hanging over its top edge (rosette plus a mono label), a mono meta line, a condensed h2, body text, a dark code block or a dt/dd facts table, and at most one italic pullquote under a 2px blue rule.
6. A design-move card with a 2px navy border, numbered rules and a code snippet; a prompt card with a copy button; sources list; three nav tiles; colophon.

Filtering: native radio inputs and :has() hide the other entry's rows with no script. On screens under 700px the table becomes stacked cards, each cell labelled with its column name from a data-label attribute.

Palette: tangerine #EE8A3C ground with a cream gingham check (two 50% stripe gradients at 20% opacity, 36px tile); cream #FBF3E2 sheets; navy #172452 ink; ribbon blue #1D47C2 kept for verdict badges, links and the pullquote rule; brown #6A5444 for muted labels.
Type: Mohave 500/700 for display and labels in caps (condensed wood-type gothic), Vollkorn 400/600 with italic for reading, Ubuntu Sans Mono 500 for small labels and code.

Guardrails: body text at least 18px with 1.65 line height and 60-75 character lines, never justified; every small label meets WCAG AA on the surface it sits on; no text on the gingham smaller than 18px; images carry no readable text, no logos, no watermarks; no neon, glow, gradient text or purple-blue gradients; radius 12-14px on sheets, 6-10px on controls, pill shapes nowhere; one shadow at most; hover and focus states on every link, button and filter label with 150ms easing and a prefers-reduced-motion guard.

Build a component documentation page for a design-system component called Slot, as a calm reference page a client's team would really use.

Structure: a plain top nav. A full-bleed hero band whose ground is a technical drawing (fine deep teal linework on dusty rose paper) filling the right two thirds; in the open left third, a breadcrumb rail as the masthead (site, section, page number on the left; updated date and read time on the right), a filled saffron kicker label, a large serif headline, a two-sentence deck, one saffron button with a hard 3px ink offset shadow, and one text link.

Under the hero, a sticky horizontal tab bar listing every section; the active tab gets a 3px saffron underline, set with IntersectionObserver. Then one centred 760px reading column. Each section opens with a filled saffron source label and a mono shipped date above a serif h2 with a hanging # anchor link in the left gutter.

Break out to 1120px for: an API table (Action, Who, What happens) on a pale sheet; a portrait drawing beside a dt/dd facts list; and a live playground inside a dark teal design-move panel. The playground: a native radio group choosing the slot default above three instance cards, each with a dashed slot outline tagged "slot: action", a state label in words (Default, Customized, Cleared) and real Swap, Reset and Clear buttons. Changing the default updates only instances still on it and says so in an aria-live line. A cleared slot shows a transparency checkerboard, never a collapsed gap.

Prompt block as a two-column panel: copy button and a checklist on the left, the prompt on a dark teal sheet on the right. References as a three-column table, a two-card previous/next pager, colophon.

Palette: ground #DCC7C2 dusty rose (flat, no pattern), ink #0E3B3E deep teal, sheet #F7EFEC, saffron #E2A42B only as fills under ink text, italic accent #7A4A12. Type: Source Serif 4 for headings, Source Sans 3 for body, Source Code Pro for labels and code.

Guardrails: body at least 18px with line height 1.6 or more, 60-75 character measure, WCAG AA for every label on its real surface, no fake readable text in images, no neon, glow, gradient text or purple-blue defaults, radius 6-12px, hover and focus states at about 150ms with a prefers-reduced-motion guard. On mobile the drawing drops below the headline as a cropped band, the tab bar scrolls sideways, and every wide stage stacks.

Build a SaaS feature launch page laid out as the product's own design editor: three panes, with the page's sections as frames on a canvas.

1. Layout: a 52px dark toolbar (brand, centred file name, three nav links). Below it a three-column grid: a 252px sticky asset tree on the left, a canvas in the middle, a 264px sticky inspector on the right. Both side panes are full-height, dark (#1C1427), scroll on their own and use a monospace face at 13-14px.
2. Canvas: a flat saturated grape violet field (#4B2A78) with faint topographic contour lines in pale lavender at about 17 percent opacity as an SVG background. No gradients, no glow. Each section is a frame: an off-white board (#F6F2EA, 4px radius, 48px by 56px padding, max 760px wide) with a small tab above its top-left corner holding a number, the frame name and a kind word. The hero frame runs wider (960px): a full-width headline, then two columns of deck, an inline byline sentence (issue number, weekday, date, read time) and two actions beside a 3:2 illustration.
3. Asset tree: native details/summary folders, one per section, open by default. Inside each folder, rows of mixed kinds link to anchors on the page. Every row is a grid of an 18px kind glyph, a name and a small kind word (Text, Color, Component, Code, Vector, Image). Glyphs: a rotated square outline for components, a filled circle in the real color for colors, "Aa" for text styles, braces for code, a short curve for vectors.
4. Inspector: a dl for the current frame (name, source link, date, kind) plus a kinds legend. A small IntersectionObserver marks the frame in view: its board gets a 2px chartreuse (#D4EC4A) outline offset 6px, its tab turns chartreuse with ink text, its tree folder highlights and the inspector updates.
5. Type: Chivo Mono 700 for the headline, 500 for section heads, 400 for labels and UI; Piazzolla for reading at 19px, line-height 1.7, about 66 characters per line. Italic Piazzolla in deep violet (#5B3594) for emphasis and one pullquote under a 2px violet rule.
6. One inverted dark frame holds the reusable pattern with a live By job / By kind segmented control (two radio inputs, switched with :has()) that re-sorts the same seven assets.
7. Below 1280px drop the inspector; below 1024px hide the tree and show a sticky horizontal strip of section links; below 760px stack every two-column block, with the hero image between headline and deck.
8. Guardrails: body text never under 18px, line-height at least 1.6, WCAG AA contrast for every label on its actual surface, no fake search fields or dead toggles, no pill-shaped everything, no neon or glow, no purple-blue gradients, no readable text inside images, hover and focus states at 150ms with a prefers-reduced-motion guard, and a print stylesheet that hides the panes.

Build a single landing page for a one-day event, conference or webinar, styled as a folded printed program (a gatefold).

Layout
1. Dark indigo top nav: brand left, three text links right.
2. Hero as a three-track grid, max 1320px: left leaf (cream sheet: small uppercase mono kicker, a large serif headline with one italic phrase in cobalt, a two-line deck, a cobalt button and an underlined text link), a 76px indigo spine in the middle carrying the masthead in vertical text (event name, issue or edition number, date, duration), right leaf holding one tall image cropped to fill, with a one-line caption under a hairline.
3. Under the hero, a full-width specimen plate image with a five-column caption row of short labels.
4. One cream program sheet on the page ground holding everything else: a two-column program notes block, an agenda index (rows of start time in large serif numerals, a filled session-type label, the session title, a room line; each row links to its session), then each section as a session slot: a 180px sticky time column (start, end, session label, room) beside a 720px content column.
5. A workshop slot as an inverted indigo card, a Prompt Lab handout card with a yellow header strip and a copy button, a numbered sources list, a three-tile indigo prev/index/next nav and a short colophon.
6. Progressive enhancement: inside @media (horizontal-viewport-segments: 2), set the hero columns to env(viewport-segment-width 0 0) and env(viewport-segment-width 1 0) and hide the spine. Below 980px stack the leaves and turn the spine into a horizontal band; the time column becomes an inline row.

Palette: chrome yellow ground #F2C832 with a fine basket-weave bookcloth texture in indigo at about 16 percent; indigo ink #1C2140; cream sheets #F6EEDD; cobalt #2B4FB0 for buttons and links; vermilion #B8432A only for small hinge marks and kickers.
Type: Alegreya for display and the one italic pullquote, Alegreya Sans for body and UI (sibling superfamily), DM Mono for times, kickers and code.

Guardrails: body at least 18px with line height 1.65 or more; line length 60 to 75 characters; WCAG AA contrast for every small label on its real surface; radius 4 to 12px, no pill shapes; one shadow on the hero only; no neon, glow or gradients; images contain no readable text; hover and focus states at 150ms with a reduced-motion guard; nothing important placed on the fold line.

Build a single landing page for a product that audits things (a design system linter, an accessibility scanner, a site health tool), styled as a check-run report.

Layout:
1. Top nav: wordmark left, three text links right.
2. Report header, two columns (content left, 460px right). Left: a run stamp block (a bordered box with a large run number on the left and three label/value rows on the right: date, read time, status), a mono kicker, a 15ch headline, a two-sentence deck, one filled button and one text link. Right: a bordered diagram plate, one two-colour linocut print showing input, rules and output as three stations joined by arrows, with three numbered HTML caption rows under it.
3. Under the header, a full-width "What it flags" panel: heading and a mono note on the left, then a two-by-two grid of rows, each a filled text label ("Flag") beside a bold check name and one muted line.
4. Body: a 232px sticky rail listing every section as a numbered check, beside a 760px main column. Each section opens with a mono rule ID, a filled category label and a source line, then the h2. Facts go in an "Evidence" table of term/definition rows.
5. A light inverted card for the key pattern: finding rows built on details/summary (severity label, rule, location, caret at the far end; the whole row toggles).
6. Field note, numbered sources, a three-cell prev/index/next nav, colophon.

Palette: ground #261D16 (dark tobacco), panels #31261D, cream text #EFE7D9, muted #BFB19B, leaf green accent #8DBF7A for buttons and pass states, brick #E58263 only for flags. Background: a halftone dot field in cream at 11 to 16 percent, fading out from the top right corner. No gradients on text, no glow, no neon.

Type: Geist 600 for headings and UI, Gelasio for body (19px, line-height 1.7), Geist Mono for IDs, paths and labels.

Guardrails: body text at least 18px with line-height at least 1.6; every label passes WCAG AA on its own background; status is never colour alone; radius 10px on panels and 4px on labels, no pills; one shadow at most; no readable fake text inside images; hover and focus states on every link and summary at about 150ms, with a reduced-motion guard. On mobile the header stacks, the rail becomes a scrolling row and evidence rows stack.

Build a responsive map search results page, the kind used for a store locator, rental listings or a venue finder. Treat it as a real client page, ready to ship.

Ground and palette: a cool pale blue-grey page ground (#DCE4EA) with a fine dot field (1px ink dots at about 17 percent opacity on a 22px grid). Results sit on near-white cards (#F8FAFB) with deep blue-black ink text (#15202B). One accent, a darker vermilion (#CC4520), for map pins, the main button and rules; slate (#4A5D70) for small labels; a pale blue tint (#EAF0F3) for one highlighted card and hover rows. No gradients, no glow, no neon.

Type: Barlow Condensed 600 for the headline and card headings (tall signage grotesk); B612 400/700 for body at 19px with 1.7 line height, B612 italic for one pullquote; B612 Mono for small uppercase labels only.

Structure:
1. A plain top nav: wordmark left, three links right.
2. A two-column grid, 7 parts to 5. Left: the hero, a nameplate folded into it (a small bordered plate: an ink block with the number, then two labelled fields), a 13ch condensed headline, a two-sentence deck, a vermilion button and a text link that jumps to the map.
3. Right: a sticky map panel that stays in view while the left column scrolls: a heading row with a result count, a contained map illustration with numbered HTML pins placed on it, a legend of four pin sizes in fixed columns, and a numbered results index whose row for the card in view inverts to ink.
4. Pins are sized in four named weight classes tied to one real attribute (48, 36, 27 and 20px circles, about 1.35 times per step, each with its number). Every pin is a link to its card, and each card opens with the same numbered marker, a mono label and a source line.
5. A results header (count, sort label) over a 2px ink rule, then one card per result. Use a dt/dd facts list, one italic pullquote under a 2px vermilion rule, and code blocks on ink where needed.
6. One highlighted card in the pale tint with a 2px ink border for the key pattern, ending in three ruled tips.
7. A small script: an IntersectionObserver marks the pin and index row of the card in view; hovering a card outlines its pin and hovering a pin outlines its card.
8. Footer navigation as three bordered tiles, then a colophon.

Readability and craft guardrails: body text at least 18px with line height at least 1.6 and 60 to 75 characters per line; WCAG AA contrast for every label on its real background, including white numbers on vermilion pins; cards 12px radius, buttons 8px, circles only for pins; one soft shadow, on the map panel only; hover and focus states on every link, pin and button with 150ms easing and a prefers-reduced-motion guard. The map image has no readable text; every label is HTML. No fake search fields or filter toggles, no logo walls, no three identical feature cards, no accent stripe on the left of cards. On mobile the map panel drops below the hero and stops being sticky, the index hides, a slim sticky strip of the seven numbered pins (still sized by class) rides under the top of the screen with the current section name, code blocks wrap, and every split goes to one column.

Build a responsive app download landing page for a product that connects other apps to a website builder. Treat it as a real client page, ready to ship.

Ground and palette: a saturated raspberry page ground (#A8174F) with a faint diagonal hatch (1px lines of #1E0E16 at about 17 percent opacity, every 12px, at 135 degrees). Reading happens on warm cream cards (#FBF1EA) with ink text (#1E0E16). Accent is marigold (#F2B632) for the stepper and button labels; deep plum (#5B1638) for small labels; a darker raspberry (#8E1243) for links on cream. No gradients, no glow, no neon.

Type: Bodoni Moda 700 for the headline and card headings (high contrast didone), Bodoni Moda italic 500 for one pullquote and a single italic phrase in the headline; Instrument Sans 400/600 for body at 19px with 1.65 line height; Fragment Mono for small uppercase labels only.

Structure, top to bottom:
1. A plain top nav: wordmark left, three links right.
2. Hero, two columns. Left: a ticket-stub masthead (a cream strip with half-circle notches cut from both ends and dashed perforations between three labelled fields: issue, date, reading time), then a 15ch Bodoni headline, a two-sentence deck, and a store-style button (ink rectangle, 12px radius, small mono label over a larger line naming the real destination) beside an underlined text link. Right: a transparent cut-paper illustration of a phone, tilted 4 degrees, overlapping the band below it.
3. A full-width ink compatibility band: a mono label "Works with", the supported apps as plain text chips with a thin cream outline, and one sentence on how other apps can connect.
4. The style or about block on the ground in cream: name, one italic line, two short paragraphs, small cream tags.
5. The main content as an install stepper: one centred 860px column, a 3px marigold rail down its left gutter, and a 56px marigold numbered node at the top left of each cream card. One card per step: what it does, how it works, workflow, a design pattern card inverted to ink, the prompt, a short note, sources.
6. Inside the first card: a short FAQ built from native details and summary elements with a plus mark that rotates to a cross.
7. In the ink card, a working demo: three status nodes (In project, Branch, Live) on a track, and buttons that advance the state; the Live step only changes when the Publish button is pressed.
8. Footer navigation as three translucent ink tiles, then a colophon.

Readability and craft guardrails: body text at least 18px with line height at least 1.6 and 60 to 75 characters per line; WCAG AA contrast for every small label on its real background; cards 12 to 14px radius, buttons 8 to 12px, circles only for stepper nodes; one soft drop shadow, on the hero illustration only; hover and focus states on every link and button with 150ms easing and a prefers-reduced-motion guard. Images contain no readable text. No fake search bars, no logo walls, no three identical feature cards, no accent stripe on the left of cards. On mobile the hero stacks with the phone below the text, the rail moves to a 16px gutter with 36px nodes, and every split goes to one column.

Build a single landing page in the form of a data table product page: the variants view of a campaign or pricing tool, where the content is a comparison of one base offer against several audience variants.

Structure, top to bottom:
1. A slim top nav (brand left, three text links right).
2. A sticky toolbar masthead instead of a hero title block: a record count ("No. 12 of 40" style, the number in a condensed display face in the accent), a sort label, the date and read time as label/value pairs. A 2px accent hairline at its bottom edge fills with page scroll using animation-timeline: scroll(root) inside @supports, hidden under prefers-reduced-motion.
3. A full-bleed hero band with one photographic or printmaking image as the ground, a left-to-right navy scrim so the headline (condensed display, 12ch max) and a two-sentence deck sit at WCAG AA contrast on the dark left third. One filled button and one text link.
4. A sortable index table of the page's sections (No., Item with a one-line summary, Source, Date, Status as a filled label). Header buttons really sort and update aria-sort. On mobile, rows stack as blocks.
5. Every following section is an expanded row: it opens with a header strip repeating the index columns (small uppercase mono labels over values), then an h2 and a 720px reading column aligned under the Item column.
6. The signature component: a variant matrix. Columns: thumbnail, variant name with type, URL, headline, proof point, offer, form, button. The base row is pinned first with a faint fill. In every other row, cells inherited from the base show a muted "= base" ditto (real value kept for screen readers), and cells that differ get a 24% accent tint at 24 percent and a 2px accent underline. A real switch toggles the dimming off to show the full grid. The table scrolls horizontally inside its own bordered region on small screens.
7. Prompt section, short closing note, a sources table (title, publisher, date), previous/index/next nav, colophon.

Palette: deep navy ground #0D1A30 with a 1px horizontal ruling every 44px at 4.5% opacity, raised surfaces #132643 and #1A3258, cream text #EEF0E8, secondary text #B7C2D6, labels #8E9CB6, cobalt filled labels #2F5C9A, one ochre accent #E0A83E for the button, highlight and progress line, a softer #EBC98A for the single italic pullquote.
Type: Antonio 600/700 for display and h2s, Radio Canada 400/600 with italic for body, Reddit Mono 400/500 for labels, URLs, table headers and code. Tabular numerals in tables.

Guardrails: body text 19px with 1.65+ line height, 60 to 75 character lines, never justified. Small labels must pass WCAG AA on their actual surface. Radius 4px on labels, 6px on buttons, 10px on panels, nothing pill-shaped except the switch track. No neon, no glow, no gradient text, no cyan on black, no left accent stripes, no fake search fields or decorative controls. Hover and focus states on every link and button at 150ms; one scroll-driven motion only. No readable text inside generated images.

Build a direct-to-consumer product page for a single handmade object, in the layout a Shopify theme would ship, with the variant picker doing real explanatory work.

Layout
- Dark ink top bar with the brand left and three text links right.
- A breadcrumb rail as the page's masthead: an ordered list with small chevron separators, the current page as a filled light label.
- Above the fold, a three-column product block: a 76px vertical thumbnail rail, a large gallery image (4:3, rounded 14px, sticky while the buy box scrolls), and a 440px buy box on a light sheet.
- Thumbnails are labels for hidden radio inputs; :has() swaps which gallery image is visible with a 180ms opacity fade. One thumbnail is a zoomed crop of the main photo.
- Buy box, top to bottom: a filled status label, a 15ch headline, a two-sentence deck, a small dt/dd list (issue, date, read time) between hairlines, a price line, a row of variant swatches, a spec line, then one filled button and one text link.
- Below the fold, one light sheet of product modules (Details, How to use, Pairs well with). Every module is a two-column row: a 260px sticky side column holding one indigo module label with a mono date and the h2, and a 700px reading column on the right. Pairs well with is a bordered product card with a square glyph tile; the closing note is a tinted quote card.
- A spec table as a two-column dt/dd grid with mono labels and hairline rows.
- A dark design-move panel with the same two-column split, and a Prompt Lab row with its copy button in the side column.

Signature component
- Variant swatches built as a radio group in a fieldset. Each swatch is a bordered mono label; checked swatches invert to ink. One swatch carries a small filled NEW tag.
- Under the swatches, a spec line containing one span per option. Only the span matching the checked radio is shown, using .buy:has(#id:checked) .note-id { display: inline }. Mark the line aria-live="polite".

Palette
- Ground #6F6C84, a cool slate violet one step lighter than the product photo backdrop, so the gallery reads as a window into the same room.
- Ink #1A1925, sheet #F1F0F6, tint #E3E1EE, indigo #3C3878 for filled status labels, one accent of kiln orange #B9501D for the button, the NEW tag and the pullquote rule.
- Background: a 48px SVG tile of two quarter arcs in pale lavender at about 6 percent opacity, over the ground only. Reading surfaces stay flat.

Type
- Familjen Grotesk for display (700, tight tracking) and body (400, 19px, line height 1.7).
- Martian Mono for everything machine-shaped: swatches, labels, spec keys, breadcrumb, code.

Imagery
- Matte clay product photographs on a seamless backdrop the same color as the ground, soft overcast light, visible tool marks. No text in the images.

Guardrails
- Body at least 18px with line height at least 1.6, lines around 65 characters, never justified.
- Small labels meet WCAG AA against their actual background; white text only on the indigo and the darker orange.
- No neon, no glow, no gradient text, no pill-shaped everything: 6 to 10px radii on controls, 14px on panels.
- Real hover and focus states with 150ms easing on every swatch, thumbnail and link, a visible focus ring on hidden inputs, and a prefers-reduced-motion guard.
- On mobile, the product block stacks: gallery, thumbnails as a horizontal row, buy box; every two-column row becomes one column and the side column stops being sticky.

Build a single-property real estate listing page for one home. Make it a page an agent could ship this week, with the listing's facts written once and shown both as designed content and as plain data.

Layout, top to bottom:
- A dark ink top bar with the brand and three text links.
- A hero on a deep terracotta field (#B04F35) with a faint paper-grain texture. Left: an olive enamel house-number plaque (#56631C, 14px radius, a cream inner border) holding the street number large, the street name, and the listed date and price as a small two-column list. Right: a large display-serif headline under 16 characters per line, a two-sentence description, one cream filled button and one cream outline button.
- A three-image gallery strip under the hero: three cream cards, each with a tall image, a small filled label, and an "N of 3" counter.
- A cream sheet (#FBF3E6) holding everything else. It opens with a facts bar of five label/value pairs (price, status, beds, baths, size), with labels in mono uppercase and values in the display serif.
- Sections inside the sheet in a 700px column, each opened by a small filled label (4px radius, mono uppercase) and a muted mono reference, then a serif h2.
- A full-width fact sheet table: Field, What a visitor sees, What the data says. A heavier rule separates the booking and payment rows.
- A fact sheet card with a two-button Person/Agent toggle (aria-pressed): Person shows the designed card with price, status, and a Book a viewing button; Agent shows the same fields as plain key: value lines in mono.
- Render the schema.org Product and Offer JSON-LD from the same record as the facts bar and the card.
- A numbered list of viewing steps, a contact block, and a footer.

Type: Young Serif for display and values; Red Hat Text for body at 19px with line-height 1.7; Red Hat Mono 500 for labels, prices, and table headers only.
Palette: terracotta field, cream sheet, ink #21180F, olive accent, ochre #86590C and clay #9A3820 only for step labels.

Guardrails: body text at least 18px, line-height at least 1.6, lines 60 to 75 characters. All small text meets WCAG AA against the surface it sits on; never put small text directly on the terracotta. No neon, no glow, no gradients, no gradient text, no fake readable text inside images. Use real hover and focus states (150ms ease) and a prefers-reduced-motion guard. Card radius 12 to 14px, buttons 7 to 8px, labels 4px. Never show a price, status, or option in the data that the page does not show.

Build a portfolio landing page for a small motion design studio. Treat it as a rig: one measured value drives many properties, and the layout shows that idea.

Structure:
- Top nav: studio name set in Archivo at font-stretch 125%, then Work, Studio, Contact.
- Masthead as one inline byline sentence (studio name, city, what they make). No boxed meta cells.
- Hero: a very wide Archivo headline (weight 850, about 15ch) on a dark spruce field with faint topographic contour lines in sage at about 15% opacity. Make the headline a container-query child and set font-stretch: clamp(75%, calc(100cqi / 1180px * 125%), 125%) so it widens with its container. Below it, a 7/5 row: a 22px deck left, a rust primary button and a sage outline button right.
- A full-width 16:9 hand-painted diagram (gouache style, no text in the image) with an HTML caption row naming the driver and three outputs.
- A reel index: a horizontal row of anchor links to each section, each showing a mono timecode and a title, with flex-grow set by the section's length so the row reads like clips on a timeline.
- Case study sections in a 760px column. Open each with a scrubber bar: mono timecode left, a 2px track whose filled part and 3px rust playhead sit at that section's position on the page, and an uppercase label right. Then a wide Archivo h2, body text, and a facts list in a two-column label/value grid.
- A design-move panel with a live demo: a range input sets the width of a resizable frame (container-type: inline-size); inside, a square's opacity, a dial's rotation, and a word's font-stretch all come from calc(100cqi / Npx), each wrapped in clamp(), with an @supports not (opacity: calc(2px / 1px)) fallback.
- Contact block, footer.

Palette: ground #0F1F1A, panels #16302A, text #EAE5D8, secondary text #C9C6B8, rust #D2582A for buttons and playheads (#E57B4E for small rust text), sage #8FA89B for labels and contours, pale rust #EDB896 for italics.
Type: Archivo (variable width axis, 600 to 900) for display, Hanken Grotesk 400/600 and its italic for body, JetBrains Mono 500 for timecodes and labels.

Guardrails: body at least 18px with line-height 1.65 or more and 60 to 75 character lines; WCAG AA contrast for every small label against its real background; no neon, glow, cyan on black, or purple-blue gradients; no gradient text; radius 6 to 14px, never pills on cards; one restrained motion (the playhead) with hover and focus states at 150ms and a prefers-reduced-motion guard; no fake controls, every control works; no readable text inside images.

Build a product launch page for a design-system feature, laid out as a component library documentation site (SaaS / product launch page, docs-site register).

Layout on desktop: three columns. (1) A 72px dark ink #23191A spine pinned to the left edge at full viewport height, holding the issue or release number set vertically in a heavy grotesk and, below it, the date and reading time in small uppercase mono, both rotated to read bottom to top. (2) A 248px sticky sidebar of anchor links grouped under small mono caps headings; each link is a bold grotesk label with a small filled status badge on the right (Open beta, Changelog, Reference, Pattern). The current section's link inverts to ink with a light badge. (3) One wide reading sheet in warm off-white #FBF4EF, with prose held to a 700px column. Under 900px the spine becomes a horizontal strip at the top and the sidebar becomes one horizontally scrolling row of link chips.

Hero: a filled green status badge and a plain source line, a heavy grotesk headline (Schibsted Grotesk 800, about 64px, tight tracking, max 16ch), a serif deck at 22px (Spectral). Below it a bordered specimen panel: on the left a 3:2 image of a letterpress specimen sheet showing one button in several states with one slot left empty, with an HTML caption row naming each slot (the last one, Missing, in brick red); on the right a 280px "System check" report with a definition list of two counts in large brick numerals and a short checklist of flags with empty square markers.

Sections: each opens with a filled status badge plus a small mono note, then a grotesk h2. Badge colours carry meaning: green #1E6B4A for open beta and patterns, brick #8A3B2A for changelog items, ink for reference, outlined ink for how-to. Use a Do and Don't pair (two white cards with 1.5px ink borders, green and brick header strips), one italic serif pullquote under a 2px green rule, a two-column dt/dd facts list, and a numbered how-to list with mono leading-zero numerals.

Design move block: an inverted ink panel holding a row of five live buttons, one per state (default, hover, focus, disabled), each forced into its state with a class that mirrors the pseudo-class, plus a fifth dashed empty slot labelled with the state not designed yet.

Ground: blush #F1DCD0 with a fine 24px drafting grid of 1px ink lines at 7 percent opacity, visible around the sheet and behind the sidebar. No gradients anywhere else.

Type: Schibsted Grotesk (700, 800) for headlines, links, and buttons; Spectral (400, 400 italic, 600) for reading text; IBM Plex Mono (500, 600) for badges, labels, and code.

Guardrails: body text at least 18px with line-height 1.65 or more and about 65 characters per line; WCAG AA contrast for every badge against its own fill; hover and focus states on every link and button with 150ms easing, visible focus rings, and a prefers-reduced-motion guard; radius 12px on panels, 8px on buttons, 4px on badges, no pills; no neon, glow, purple-blue gradients, emoji icons, logo bars, or fake readable text inside images; no fake search box in the sidebar.

Build a landing page for a one-afternoon workshop (course / education page).

Layout: a two-column page on desktop. Left column holds the content; a 340px right rail holds a sticky "buy-box" card (position: sticky, top 24px) that stays in view for the whole page. On screens under 1020px the rail becomes a normal block placed directly after the hero.

Buy-box card: cream #FFF7E6, 2px ink #1B1712 border, 10px radius. Top to bottom: a small red uppercase mono label ("Workshop, one afternoon"), a large heavy mono title, then a definition list of exactly four facts (date, length, number of lessons, price), labels in small umber #5A4A2E mono caps on the left, values right-aligned, hairline rules between rows. The price is in heavy mono red #C1271A. Then one solid ink button with cream text ("Start lesson 01"). Then an ordered syllabus list where each item is a link to its lesson anchor, numbered 01, 02, 03 in heavy red mono.

Hero (left column): a mono kicker with one filled ink label, a heavy mono headline (Azeret Mono 800, about 64px, tight negative tracking, max 15ch), a serif deck at 22px (Literata), a primary button and a mono text link. Below it, one contained photograph at 3:2: an overhead editorial still life on red linoleum, hard key light, no text in the image.

Lessons: each lesson is a row with a giant red mono numeral (about 112px) in a 150px left column and a cream sheet on the right with a 2px ink border. Inside: a red mono caps label, a mono h2, serif body paragraphs, and a closing "You leave with:" line above a 2px ink rule. Use one real table inside a lesson (role, where they work, what they change). The final lesson is the design move, inverted to an ink sheet with cream text.

Ground: one flat vivid marigold #F0B429 across the whole page, no texture, no gradient. Reading always happens on cream sheets, never directly on the yellow at body size.

Type: Azeret Mono (500, 700, 800) for headlines, labels, numerals, and buttons; Literata (400, 400 italic, 600) for all reading text. One italic serif pullquote only.

Guardrails: body text at least 18px with line-height 1.65 or more and about 65 characters per line; WCAG AA contrast for every label against its real background (red only at large sizes on yellow); hover and focus states on every link and button with 150ms easing and a prefers-reduced-motion guard; radius 10px on cards and 6px on buttons, no pills; no gradients, glows, neon, emoji icons, countdown timers, fake testimonials, or fake readable text inside images.

Build a one-day conference or event landing page, art directed as a two-ink risograph concertina programme.

Layout:
- Top nav with the event name left and three text links right.
- Hero in two columns: left holds a single rotated ticket stamp (double blue border, "Admit one", the event number in large slab red, date, length), a mono kicker, a slab headline under 14 words, a two-sentence deck, one solid blue button and one text link. Right holds a transparent cut-out image of a folded paper programme that bleeds off the right edge with no frame.
- A full-width "Today's programme" band on near-white between 3px ink rules: native details elements, one per session, sharing a name attribute so one opens at a time. Each summary row is a grid of time (slab, red), title, a filled blue session-type label, and a plus that rotates 45 degrees when open. Each panel holds a one-sentence abstract and an anchor link to the session.
- Every content section opens with a session slot: a 3px ink top rule, the time set at 54px in slab red with a 3px riso blue misregistration ghost (text-shadow), a filled blue type label beside it, and a small mono room label at the far right, then the h2. Body text sits in a 700px column beside a 280px sticky session card (speaker, release date, two facts as a dl) on desktop.
- A definition list spec table (mono term in blue, plain description) for facts.
- Prompt Lab as a ticket: a 200px stub behind a dashed perforation edge, its "Admit one", title, and copy button sticky as the long prompt scrolls past. On mobile the stub becomes a top strip.
- Print feel without images: a 3px riso red ghost under the headline, a faint white noise grain on every filled blue label and button, and code printed in blue ink on a pale blue tint instead of a dark slab.

Motion: set interpolate-size: allow-keywords on :root. Animate details::details-content from block-size 0 to auto with a 320ms ease plus content-visibility allow-discrete. Hover states on links, buttons, and summary rows at 150ms. Wrap all motion in a prefers-reduced-motion guard. Older browsers must simply open the panels instantly.

Palette: cool fog ground #E3E9EE with 1px ink pinstripes at 4.5 percent every 14px, near-white panels #F6F8F9, ink #172033, riso blue #1F55A3 for buttons and labels, riso red #C8381F for times and accents. No gradients, no glow, no neon.
Type: Rokkitt (slab) for display, times, and one italic pullquote; Funnel Sans for body; Fragment Mono for labels only.

Guardrails: body at least 19px with 1.7 line height and a 60 to 75 character measure; WCAG AA contrast for every label on its real background; radius 3 to 10px, never pills; one shadow at most, on the cut-out image; no fake readable text inside images; no emoji icons, no logo bars, no identical three-up cards.

Build a SaaS feature launch page for an image editing tool, laid out as the editor itself.

Ground: flat dark graphite (#141A1C) with a faint fractal noise texture at about 7 percent opacity, like a darkroom wall. Panels #1A2329 with 1px #33403F borders, 14px radius on the editor shell, 12px on cards, 6px on small labels. One accent, a marker yellow (#E8D84E) with near-black text on it, reserved for marks and pins a reviewer added. Prussian blue (#2C5C9E) from the print carries interface state: the active tool and the active file tab. Text is bone #ECEDE6, secondary text #A3B0AD, italics in a pale yellow #DCD3A0. No neon glow, no gradients, no purple.

Type: Sofia Sans Extra Condensed 800 uppercase for the hero and section titles; Alegreya Sans for body at 20px with line-height 1.7 and 60 to 72 character lines; IBM Plex Mono 500 for labels, tabs, and code only.

Above the fold: a small top nav. Then a two-column head: an issue nameplate label and a 17ch condensed headline on the left with one word underlined by a hand-drawn yellow marker stroke (an inline SVG background, same yellow as the canvas marks); a deck and a plain byline sentence on the right. Under it, a full-width editor shell: a file tab bar across the top that is a real two-option radio toggle (the edited copy, checked by default, and the untouched original; choosing the original hides the marks and pins with :has(), no script), a 76px left tool rail of icon-plus-label links (Draw, Pin, Erase, Cut out, Save as) that are anchor links to the page sections, a center canvas holding one 3:2 image, and a 300px right pin thread listing numbered comments that also link to the sections.

The canvas: put an absolutely positioned SVG over the image with viewBox set to the image's pixel size, and draw yellow marker strokes in it (a loose loop, an underline, an arrow, a dashed selection marquee). Strokes draw in once on load, guarded by prefers-reduced-motion. Numbered teardrop pins sit over the image as real links with aria-labels.

Below: an art direction block (title, italic one-liner, paragraph, mono vocabulary labels). Then sections in one 720px column, each opened by a small numbered yellow pin and a mono label above a condensed h2. Components: a Files list card with thumbnail rows and state labels (Original kept, New file); a dt/dd facts list; a single italic pullquote under a 2px yellow rule; a design move with a cropped figure beside prose and a short CSS snippet; the prompt in a panel with a copy button. End with numbered sources and previous and next links.

Mobile at 390px: the tool rail becomes a horizontal strip above the canvas, the pin thread drops below it, every two-column split stacks.

Guardrails: body never under 18px, WCAG AA contrast for every label on its real surface, no fake readable text inside the image, hover and focus states on every link and button at about 150ms, radius used with purpose instead of pills everywhere.

Build a "get started" onboarding landing page for a website builder or any product with a setup flow (also works for agency project-inquiry pages and quote builders).

Layout: a light top nav. Under it, a sticky progress bar that doubles as the masthead: the issue or product name on the left, a row of seven segmented step links (rounded 7px rectangles with a 1.5px ink border, step number centred in mono, step 1 filled ink), and the date and reading time on the right as two plain spans with no separators. Below, one centred column about 880px wide of question cards. Each card: warm white #FFF6EF, 1.5px ink border, 16px radius, 40-48px padding, and a top row with a mono "Question N of 7" label on the left and a mini progress of seven small bars on the right, filled violet up to N. Section headings are the question, set in a rounded display face.

Hero card: one hard offset shadow (14px straight down, solid ink, no blur) and no other shadows on the page. A filled ink label, the headline at about 60px and 17ch, a 21px deck, then a fieldset of three choice tiles: real radio inputs styled as white cards with a 3:2 image, a name, and a mono sub-label. The checked tile gets a 3px violet ring. A note below the tiles changes text through :has(input:checked).

Other cards: a setup summary with a style name, an italic one-liner, a paragraph, and filled ink vocabulary labels; news items as h3 plus short paragraphs; one italic pullquote under a 2px ink rule; a two-column dt/dd facts list with mono labels; a dark code snippet; a conditional form demo (a yes/no radio question whose "no" reveals a follow-up fieldset through :has(), no script); the prompt card with a copy button. End with sources, then Back and Next buttons as the issue navigation.

Palette: saturated apricot ground #F4A98C with a dot grid (1px ink dots at 20 percent every 24px), cards #FFF6EF and #FBE7DA, deep violet-black ink #1F1640, one blue-violet accent #4B2FD0 used only for state (current step, selected answer, primary button), plum #5B3A73 for italics. Type: Fredoka 500/600 for display, Instrument Sans for body, JetBrains Mono for labels.

Images: three loose marker renderings of website directions on layout paper (quiet editorial, loud and rounded, dark technical), abstract bars only, no legible text.

Guardrails: body at least 18px with 1.7 line height and 60-70 character lines; WCAG AA on every label against its real surface; radius 7-16px, never pills; hover and focus states at 150ms with a reduced-motion guard; no gradients, no glow, no fake toggles, no left-border accent stripes. On mobile the step bar wraps the meta under the segments, cards go to 20px padding, and two-column blocks stack.

Build a landing page for an overnight sleeper-train route along a coast (works for any rail tour, ferry line, or scenic travel product). Treatment: a night travel poster drawn in soft pastel on toned midnight-blue paper.

Structure, top to bottom:
1. Top nav: wordmark left, three text links right.
2. Breadcrumb rail as the masthead: a full-width strip between 1px hairlines with uppercase mono crumbs (Routes, the route name, the departure date, the trip length), chevron separators in the accent colour.
3. Hero: one full-bleed pastel night panorama (train with lit windows on a viaduct, empty sky upper left). Headline in a high-contrast serif, max 13ch, set in the empty sky over a left-to-right scrim; a 2-sentence deck; one solid accent button that jumps to the route.
4. A short "about this route" block: two columns, name and one-line italic summary left, two short paragraphs and solid filled vocabulary labels right.
5. The route strip: a 4:1 panorama of the whole journey inside a horizontal scroll container (overflow-x auto, scroll-snap-type x mandatory). Stops are absolutely positioned at left percentages: a 2px accent pin line with a small square head, and below the image an HTML label (mono "Stop 1", serif place name, one line of sans text) that is a real anchor link to a section. Desktop shows the whole strip; under 720px the track is a fixed 900px wide (so the next pin peeks in) and snaps stop to stop.
6. Content sections ("carriages"): a 96px left margin holding a filled accent plate ("Car 1") and the section name rotated vertically (writing-mode vertical-rl, rotated 180deg), sticky while the section scrolls; content column max 66ch. One section pairs prose with a sticky "departure board" facts panel (dt/dd rows). On mobile the plate turns horizontal above the heading.
7. A booking or fare section, a one-line closing note, a timetable-style sources or schedule list, a footer.

Palette: ground #0F1A33 ink blue; raised panels #16244A; text #ECE6D8; secondary text #C9D2E6; muted labels #A3B1CF; one accent #E8AA3A saffron (pins, plates, button, rules); quiet italic #EBC88A; pale paper labels #DCE3F0.
Type: Gloock for display (hero once, section heads, place names); Rethink Sans for body and italic; Fragment Mono for labels only.
Background motif: a halftone screen, an SVG tile of dots that grow from tiny to full, used where the hero dissolves into the ground and above the fare section. No grid, no grain, no gradients elsewhere.
Images: pastel and charcoal on toned blue paper, saffron lights, dusty rose dawn, horizon held at one height so the strip can crop. No legible text, logos, or watermarks in any image.

Guardrails: body 18-19px, line-height at least 1.65, line length 60-75 characters, never justified. All text meets WCAG AA on its real background, including text over the hero image. Radius 6px on buttons, 10-12px on panels, nothing pill-shaped. One shadow at most, on the facts panel. No neon, no glow, no purple-blue gradients, no gradient text, no accent left-border stripes. Hover and focus states at 150ms on every link and button, and a prefers-reduced-motion guard.

Build a calculator landing page for an image optimisation service that sells smaller page weight. The page proves its claim with ranges and measurements, never one promised number.

1. Ground: a vivid mid olive (#AAA82B) across the whole page, overlaid with a 96px SVG tile of nested squares (one 48px block split into 24px and 12px blocks) in ink at 8 percent opacity. Panels sit on top in cream (#F2EEDC) or ink (#1B1C10). One accent, crimson (#B3261E), used only for a measured tick and the winning format's weight bar.
2. Type: Saira Stencil One for the hero numeral, h1, and h2s; Figtree for body at 19px, line-height 1.68; Red Hat Mono for every number, unit, and label.
3. Hero: the masthead is a stencil issue numeral folded into the hero over a 2px ink rule, with a one-sentence byline right-aligned on the same baseline. Then a 15ch stencil headline, a deck, and a full-width proof print on a cream mat. Serve it through a picture element (JXL source, WebP or JPEG fallback) and print in the caption which format the browser actually drew.
4. Calculator: a full-width ink panel. Left, a labelled number input with a KB unit tag. Right, the result as a range in display type, then three rows of horizontal bars on one shared scale: today (full cream bar), the claim (an olive band from the floor to the ceiling), and your own measurement (a 2px crimson tick). Caption names the claim's source.
5. Sections open with a 2px ink rule and an uppercase mono kicker above the h2. Body text stays in a 700px column on the left; specimen sheets and the calculator break out to the full container.
6. Specimen sheet: a cream panel of four square tiles, one per format, each captioned with the format in stencil, its byte size in mono, a thin weight bar on a shared scale, and the encoder settings. Use real measurements only.
7. Guardrails: body at least 18px with line-height at least 1.6, AA contrast on every surface (no crimson text on olive), no fake text inside images, no neon, no glow, no gradients, radius 4 to 6px, one soft shadow on the hero proof only, hover and focus states at about 150ms, and a reduced-motion guard. On mobile the calculator stacks and the specimen tiles go two by two.

Build a before-and-after comparison landing page for a design system audit service. The page sells one change, so the change is the hero.

Structure:
1. Top nav: brand on the left, three text links on the right, a 1px hairline under it.
2. Hero on a cool mist ground (#EDEFF4): a two-column row of a mono kicker plus a large monospace headline (max 19 characters per line) on the left, and a serif deck plus a one-sentence inline byline on the right, bottom-aligned.
3. Under it, full width, a 3:2 before/after image compare. Stack both images in one grid cell, after underneath, before on top clipped with clip-path: inset(0 calc(100% - var(--pos)) 0 0). Draw a 2px ink seam and a 34px square handle at var(--pos). Lay a transparent native input type=range (0 to 100, default 50) over the frame with a visible label in the caption; one input listener sets --pos. Small filled corner labels: Before (ink) and After (plum).
4. Sections are full-width horizontal colour bands, alternating cool mist #EDEFF4, pale lilac #E3DEEA, and near-white #FBFBFD. One deep plum band (#3E1233) holds a single italic pullquote; a second holds the closing offer.
5. Each section opens with an outlined 52px square index letter (A, B, C, D) in plum, a small mono label, then the h2. Body text sits in a 66ch column indented to the letter's right edge.
6. The proof is a three-column comparison table on white: Job, Before, After. 2px ink header rule, hairline rows, the After column tinted a pale plum (#F6F1F5), each row header carrying a small outlined number. On mobile each row becomes a stacked block with Before and After labels.
7. A three-step how-it-works strip under a 2px ink rule, each step with a short heading, two sentences, and an optional code line.
8. Closing plum band: offer text and one solid button.

Palette: ink #1D1B29, plum accent #6B1F57, slate #4A5266 for secondary text, lilac #D9C4D3 for text on plum.
Type: Martian Mono for headline, labels, table headers, and buttons; Newsreader for body at 19px, line-height 1.7.
Imagery: two two-colour screenprints (plum and slate ink on white stock) of the same component sheet, scattered then ordered, from the identical overhead framing so the seam lines up. No legible text in the images.

Guardrails: body at least 18px; WCAG AA contrast for every label on its actual band; radius 3 to 6px, no pills; no gradients, glow, or neon; no accent left-border stripes; no fake controls; visible focus states; hover transitions around 150ms; a prefers-reduced-motion guard.

Build a portfolio case-study landing page for a still-life and set-design studio, drawn as a set designer's construction plan.

Ground: dark warm umber #1F1A16 with raised panels in #2A231E. Text cream #EFE7D8, secondary text #C9BFAE. Ultramarine #2E44D8 is the governing colour: the masthead spine, every category tag, buttons, and annotation boxes. One vermilion #E2552F reserved for a single highlighted object. Behind the hero, faint cream topographic contour lines at about 7 percent opacity; no grain, no glow, no gradients.

Type: a wide grotesk display (Archivo at width 125, weight 800) for the H1, section titles, and the studio name; a humanist sans body (Merriweather Sans 400, italic for one pullquote and emphasis only) at 19px with 1.7 line height and 60 to 70 character lines; DM Mono for labels and coordinates.

Structure: an 84px ultramarine vertical spine fixed on the left as the masthead, holding the issue number and the date set vertically. A plain top nav. The hero is a row of filled ultramarine category tags, a 17ch headline, a deck, then a pair: a cream drafting-film plate holding a technical drawing of the set (8 columns) beside a box schedule list (4 columns). Every object in the drawing gets a live overlay box positioned from four numbers on a 0 to 1000 grid (top, left, bottom, right) using custom properties and calc percentages; each schedule row is a button that outlines and tints its box on hover or focus via :has().

Sections each open with one filled ultramarine tag (Featured work, Services, Process, Studio method, Commission) above a wide grotesk h2. The featured case study is prose on the left with a sticky raised meta card on the right (Client, Medium, Shipped, Grid). Services sit in two columns under 2px ultramarine top rules. The method section pairs a square detail of the drawing with its own overlay box beside a short code snippet. Close with a cream brief sheet holding a copy button, a numbered sources list, and a colophon.

Image: one technical drawing in fine ultramarine ink on cream drafting film, orthographic elevation, each object in a dimensioned construction box, one object filled in vermilion; no legible text or numbers in the image. On mobile the spine becomes a horizontal strip at the top and every two-column block stacks.

Guardrails: body text never under 18px, WCAG AA contrast on every label against its real background, radii no larger than 6px, one tight shadow on the plate only, hover and focus states at 150 to 180ms with a prefers-reduced-motion guard, no fake inputs, no neon, no purple-blue gradients.

Build a public design system documentation site for a brand as a production landing page, dark petrol-teal, with a cut-paper cover.

Layout: a 64px site bar (brand left, three text links right), then a one-line folio masthead across the full width in small uppercase mono (issue or version number, date, reading time) between hairlines. The hero is full-bleed, 600 to 780px tall: an overhead photograph of a cut-paper collage (swatch chips, circles, and strips snapped to a strict grid) anchored right, with a left-to-right scrim of the ground color holding a 600px text column on the left: mono kicker, a 72px glyphic serif headline capped at 13ch, a two-sentence deck, one coral button, and one text link. Under the hero, a sticky row of docs tabs as anchor links (Overview, Foundations, Tokens, Components, Changelog, Prompt, Sources) on a panel band; the current section's tab gets a 2px coral underline and aria-current as you scroll, and on mobile the row scrolls sideways with a fade at the right edge.

Body: a two-column grid, a 200px margin column and a content column with 68ch paragraphs, over faint horizontal ruled lines every 32px. Every section carries a dated margin stamp that sticks while its section scrolls: a 2px coral top rule, the section role as a bold uppercase mono label, the date in soft coral at 16px, and the source in muted mono, beside a 40px serif h2. No section goes undated. On mobile the stamp becomes one line above the h2. Every block in the content column shares one right edge. The signature component is a token table generated from the page's own :root custom properties: specimen (color chip, "Aa" type sample, or a radius bar), token name, live value read with getComputedStyle, and what it is used for. Also include: a component state specimen (default, hover, focus of the real button, with the tokens it uses listed underneath), an example AGENTS.md block in mono, changelog entries with a date and a filled vendor label in the margin column, a pattern block of a square image crop beside three labelled rule rows, and a prompt block whose numbered usage steps and copy button stick beside the prompt.

Palette: ground #0B2B31, panel #10373E, bone ink #ECEFE8, pistachio #9DBFB6 for labels, coral #EE7451 for the button and rules, soft coral #F5A68C for italic and small coral text. Type: Marcellus for display, Schibsted Grotesk for body, Geist Mono for stamps, labels, and code.

Guardrails: body 19px with 1.7 line height and 60 to 75 character lines; small labels at WCAG AA against their real surface; radius 4 to 12px, no pill shapes; one tight shadow on the token table only; no gradients beyond the hero scrim, no glow, no neon; no readable text in images; hover and focus states on every link and button; a prefers-reduced-motion guard.

Build a product detail page for a software extension (a plugin, mod, or add-on) as a production landing page.

Layout: a 208px sticky sidebar of anchor links on the left (Overview, Details, Specs, Changelog, Design move, Install, Notes, Links), each section opened by a mono path label that repeats its anchor name that marks the current section with aria-current and an amber left rule as you scroll; on mobile it becomes a horizontal strip pinned to the top. To its right, a product area: a gallery column (one large photograph in a white light-table frame, square on desktop and 3:2 on mobile with a 1px cool border, three 3:2 thumbnail buttons below that swap or zoom the main image and caption and carry aria-pressed) beside a fixed 420px buy-box. The buy-box holds a small mono kicker, the product name as a 44px grotesk headline, a two-sentence deck, five spec rows as a definition list with hairlines (published, works in, plans, written in, ships through), and one amber button to the real announcement. Put a round rubber-stamp mark over the buy-box corner, tilted -7 degrees, double amber ring, carrying the version or issue number and the date in mono.

Below: sections opened by that mono anchor path label in dark amber above an h2 and a hairline, set on the mat with hairlines rather than boxed. The signature component is an exploded stack diagram: four translucent white layers offset on one diagonal (28px across, 104px down, 150px tall), the first-loaded layer in front, each labelled at its visible bottom edge with load position and role; a dashed navy rail on the left marks events in and results out, and two navy dimension callouts label the step. Hover lifts a layer 6px with a 160ms ease. Add a compatibility spec card with a navy header band, changelog rows with a 150px mono date column and a filled vendor label, a three-step pattern strip under a 2px ink rule, and an install panel with a file tab and a copy button.

Palette: a cool blue-grey ground #E2E9EE with a drafting grid (1px navy lines at 7 percent every 24px, 14 percent every 96px), white panels #FBFCFD, navy-black ink #12233A, print navy #1F4A92 for structure and links, amber #E09A10 for the one button and the stamp ring, dark amber #8A5B00 for small amber text. Type: Host Grotesk for display and body, Red Hat Mono for every label, spec, date, and the stamp.

Guardrails: body text 19px with 1.7 line height and 60 to 75 character lines; every small label at WCAG AA against its real surface; radius 3 to 8px, no pill shapes; one tight shadow on the buy-box only; no gradients, glow, or neon; no fake reviews, star ratings, or download counts; no readable text inside images; hover and focus states on every link and button; a prefers-reduced-motion guard that removes the lift and smooth scrolling.

Build an event landing page for a dance company's one-night performance, styled as a painted theatre bill. It must be a real page a venue could ship, not a poster.

Structure, top to bottom:
1. A slim top bar: wordmark left in a fat slab face, three text links right.
2. The bill: a two-column row. Left: a small uppercase mono kicker, a 19ch slab headline, a 21px deck. Right: a buy-box card in ivory with a 2px rule under its title and issue or event number, a definition list of four labelled rows (Date, Running time, Programme, Headliner), and one full-width green button that books or links to the main action.
3. A contained painted plate inside a proscenium arch: the top corners rounded into a shallow arch with an elliptical border-radius, a 3px amber border thickening to an 8px footlight edge at the bottom, a 21:9 crop on desktop and 4:3 on mobile.
4. An overture block on two columns: the show's name and one italic line left; a short paragraph and an eight-item credits list in two columns, hairlines between, small amber mono numerals.
5. The programme: a 200px sticky running order rail beside a 760px content column. The rail is an ordered list of anchor links, each a slab numeral matching its section's numeral (the interval gets a short amber bar instead) and a label; the link for the section in view gets a solid green fill with dark text and aria-current, set by a small IntersectionObserver. Each section opens with a numeral in a 56px outlined circle, an uppercase mono label, then a slab h2. Items inside a section are an h3 plus one or two paragraphs, separated by hairlines.
6. A cue list: three rounded cards on a slightly lighter ground, a mono label column (Cue one, Cue two, Cue three) beside a bold title and one sentence.
7. An interval: an ivory band (the house lights coming up) holding one large italic pullquote in dark ink whose words darken one by one as it scrolls into view, using CSS animation-timeline: view() inside @supports, fully visible without it.
8. A pattern section: a square painted detail beside a lede and three labelled rows.
9. An encore: a ticket card with a dashed perforation between a stub (title, one line, copy button) and the main body holding a monospace block.
10. A closing note, a numbered sources list, previous and next links, and a colophon.

Palette: house ground #25110F flat, raised panels #331816, ivory text and cards #F3E6D3, viridian button #3FA371 with dark text #1E0D0B, link and outline green #6CC596, amber labels #D9A441, dusty rose captions #C9A69A. Type: Alfa Slab One for display and numerals only, Alegreya Sans for body and italics, IBM Plex Mono for labels and code.

Imagery: gouache paintings on cold-press paper in the same five colors, a theatre from the back of the stalls for the plate and a stage manager's cue desk for the detail. No legible text in images, no logos.

Guardrails: body 19px with 1.7 line height and a 60-75 character measure, never justified; every label at WCAG AA against its real surface; radius 14px on cards, 8px on buttons and rail links, circles only for the act numerals; one shadow, on the buy-box; no neon, glow, or gradients; hover and focus states at 150ms; a prefers-reduced-motion rule that removes the word reveal and smooth scrolling; on mobile the rail becomes a horizontal strip pinned to the top and the buy-box stacks under the headline.

Build a product page for a motion style library, the kind a freelancer ships for a design-system or SaaS client. It is a real web page whose hero is a live data table of animation styles.

Layout: a slim top nav floating over a full-bleed hero illustration whose left half is calm empty ground. In that empty space: a nameplate (issue or product number large in Funnel Display 700, two short mono lines beside it, a 2px ink rule under both), a mono kicker, a Funnel Display headline (700, 42-70px, max 13 characters per line), a one-sentence deck in Piazzolla, and one solid button. A paper-coloured table sheet then rises over the bottom of the hero.

The table: columns Style (name plus a one-line use case), Token (mono), Curve (a 120x70 SVG of the cubic-bezier with its two handles dotted), Animates, Duration (right-aligned tabular mono), Preview (a track with a dot and a Play button). Each row's preview must run with that row's exact duration and timing function via CSS custom properties. Include one per-character text row. A Play all button sits in the sheet header.

Below: an art direction block; then content sections as grouped table rows, each opened by a deep umber group header row holding the h2, a mono count, and one filled magenta status label; items are rows with prose left and a 200px dl of mono metadata right. One italic pullquote in a tinted row. A borrow-this row with a square image crop and labelled rule rows. Sources as a real table.

Palette: airbrushed clay ground #C47A52 with fine SVG noise grain at low opacity; paper #F6EEE6 sheets; ink #24150F; umber #3B2219 headers; muted #6C4E3F; one magenta accent #A3164F for curves, dots, status labels, and buttons, with a quieter #7E2448 for italics. Type: Funnel Display for headings and labels, Piazzolla for reading, Azeret Mono for tokens, durations, and metadata.

Image: one airbrush illustration (1970s airbrush technique, soft sprayed gradients) of a single magenta sphere as a multiple exposure along an arc, spaced wide then bunched as it settles, on a matching clay field with the left half empty. No text in the image.

Guardrails: body at least 18px with 1.65 to 1.7 line height and 60-75 character lines, never justified; WCAG AA on every label against its real surface; radius 14px on sheets, 6-8px on buttons and labels, no pill shapes; one shadow, on the hero table only; no fake sort arrows or filters; hover and focus states at 150ms; a prefers-reduced-motion rule that makes every preview jump instead of animate; on mobile each table row becomes a two-line card with the curve and preview below the name.

Build a pricing calculator page for a usage-billed product, the kind a freelancer ships for a SaaS or agency client. It is a real pricing page, dressed as a two-ink risograph rate card.

Layout: a slim top nav; a full-width hero with a monospace headline (Chivo Mono 800, 56-76px, tight tracking), a one-sentence deck in Rethink Sans, and the byline written as one sentence instead of a box of metadata cells. Under it, a 5fr/4fr row pairs a risograph diagram print with a live calculator card: three or four labelled range inputs with their values in mono, one large result number, and one stacked bar split into three segments (reused or included, excluded, charged) with a legend of labelled rows. Below: a two-plan compare table whose shared features span both columns on a slightly darker cream; line items with a mono label column (release, date) beside a heading and two short paragraphs; one italic pullquote; a "borrow this" block of labelled rows; an FAQ built from native details elements; sources and a plain footer.

Palette: warm dark ground #1C1612 with a halftone dot ramp behind the hero only; cards in riso-paper cream #EFE4CF with warm dark ink #221B16; riso blue #2F6BC9 for fills, #2458AE for text on cream, #7EA2E6 for labels and italics on the dark ground; fluorescent orange-red #E4572E only for the excluded segment and held-back marks. Type: Chivo Mono for headings, figures, and labels; Rethink Sans for reading.

Section markers: open each section with a row of section links styled as filter segments, the current one filled blue with aria-current.

Images: two-colour risograph diagrams (blue and orange-red on cream stock, coarse halftone, slight misregistration) of simple page wireframes. No legible text in any image.

Guardrails: body at least 18px with 1.65 line height and 60-75 character lines, never justified; WCAG AA for every small label on its real surface; radius 12px on cards, 6px on inputs and segments, no pill shapes; one shadow, on the calculator only; the calculator must compute from its inputs and its segments must add up to the total; hover and focus states at 150ms with a prefers-reduced-motion guard; no gradient surfaces, neon, glow, or fake controls; on mobile stack every row and turn the compare table into labelled blocks.

Build a SaaS account settings page, the kind a freelancer ships for a client's web app: a real settings console, not a poster about one.

Structure: a 60px sticky app bar across the top (square vermilion product mark at the far left, product name, three text links at right). Below it a three-column frame: a 60px slate spine on the far left holding the workspace name, date, and plan as vertical mono text; a 232px sticky sidebar card titled "Settings" with an ordered list of section anchor links (counts in small mono at the right of each link); and a main column up to 1000px wide.

Main column: a page header (small mono uppercase kicker in vermilion, a 17ch grotesk H1, a 60ch serif deck), then one raised demo panel, then settings groups. Each settings group is a two-column grid (1fr label column, 2.35fr content): the label column holds the group h2 and a one-line description; the content column holds a white rows card with hairline-separated rows. Each row is a two-column settings row: on the left a grotesk title, a small mono source line, and one or two serif paragraphs; in a fixed 250px slot on the right a tiny uppercase key over a value well (mono, pale grey fill, 6px radius) showing the real setting value or CSS. Beside the page header, a small card of release rows (name left, date right in mono).

Tabs: build the demo panel as a horizontal scroll-snap strip of panels (each panel a 3fr/2fr grid of an image and text). Use scroll-marker-group: before tabs on the strip and ::scroll-marker with content: attr(data-label) on each panel, underlined in vermilion on :target-current. Write a fallback row of anchor links in HTML and hide it inside @supports selector(::scroll-marker).

Palette: flat cool grey ground #DCE3E7; the slate spine carries the only pattern, a 60x40px SVG tile of a toggle-switch outline in pale grey at 13 percent; panels #F7F8F7; value wells #EDF1F3; ink #1B2836; slate #22344A for the spine and one inverted "Borrow this pattern" group; muted text #4E5B68; one accent, vermilion #C73A22, used for the product mark, kicker, active tab underline, and the copy button. Italic accent #8E3322 only for one pullquote.

Type: Familjen Grotesk 500/700 for UI, titles, and the H1; Source Serif 4 for body text; IBM Plex Mono for labels, values, and code.

Images: two-colour linocut prints (vermilion and slate on off-white paper) as the tab panel images, one print per tab, one object centred per print, no readable text in any image.

Guardrails: body at least 18px with 1.65 line height and 60-75 character lines, never justified; WCAG AA contrast for every small label against its actual surface; radius 12px for cards, 6-8px for wells and buttons, no pill shapes; one soft shadow on the demo panel only; hover and focus states on every link and button at 150ms, and a prefers-reduced-motion guard; no fake toggles, fake search fields, gradients, neon, or glow; on mobile hide the sidebar, turn the spine into a horizontal strip, and stack every settings group.

Build a search results page for an online library of logos and identity marks (crests, monograms, emblems), the page a design studio or template marketplace would pay a freelancer to ship.

Ground and colour: a saturated heraldic azure ground #1C5F9E with a faint dot grid in #F5F1E6 at 17 percent opacity every 24px. Follow the heraldic rule of tincture as the colour system: on the blue ground, only the two metals carry type, argent #F5F1E6 for text and or #E2B23C for large display words and focus rings. Result cards, panels, and tabs are argent #F5F1E6 with sable #141B24 text; gules red #B8322A appears only on argent (buttons, hover states, one small label). Links inside cards are deep azure #16487A.

Type: Zilla Slab 600 for the headline, tab titles, and result titles; Hanken Grotesk at 19px with line height 1.68 for body; IBM Plex Mono for labels, dates, and source lines. The contrast logic: a sturdy slab for anything you scan, a neutral grotesque for anything you read.

Masthead: no boxed meta cells. A breadcrumb rail under the top nav, between two hairlines, with small gold CSS chevrons between the crumbs: site, section, issue number, date, reading time.

Layout: a two-column page, results column on the left and a sticky 336px knowledge panel on the right. Above the results, the query card: an argent card with one soft shadow that writes the active filters back as a single sentence in 30px Zilla Slab, each filter value bold with a gold highlighter underline, and a mono result count under a hairline. Under it, results grouped by type. Each group opens with a tab strip: its own tab is a raised argent tab holding the h2 and a count, attached to the argent results card below; the other tabs are real anchor links to the other groups. Each result card has a mono source line with the date right-aligned, a 27px slab title link, and one or two sentences of snippet. The first result carries an image pack: one overhead photograph shown whole plus two cropped details, each with a mono caption. The right panel holds the style name, an italic one-line summary, a short explanation, and small vocabulary chips, then two small SVG glyphs explaining the two grammars.

Also: one italic pullquote on the blue between groups; a "Borrow this pattern" card with a working demo of three native selects that rewrite the sentence in an output element; the prompt as a featured snippet card with a gold header band and a red copy button; field note, numbered sources, pagination, and a colophon on the blue.

Guardrails: body at least 18px and line height at least 1.6; WCAG AA contrast for every label against its real surface (gold never for small text on the blue); no fake search field, no fake filter pills, no decorative toggles; no readable text inside images; no neon, glow, or gradients; radius 12px on cards, 6 to 10px on small parts, no pill shapes; hover and focus states on every link, tab, select, and button with 150ms easing; a reduced-motion guard. On mobile, stack the knowledge panel under the query card and let the tabs wrap.

Build a landing page for a small natural wine bar, centered on its wine list, the page a bar owner would pay a freelancer to ship.

Hero: a full-bleed ink and watercolour painting of the bar's table from above at night (bottle-green cloth, one candle, glasses of orange wine, blank menu cards scattered at angles, a bottle with a blank tag). Keep the left 45 percent of the painting empty cloth and set the kicker, a 12ch Bodoni Moda headline, a two-sentence deck, and one apricot button there, over a left-to-right scrim from #0F1E1D at 94 percent to clear by 64 percent. The top nav floats on the painting. Under 900px, show the painting at 4:3 cropped on the still life and stack the text below on the ground.

Masthead: no boxed meta cells. One reservation line under the deck, separated by a hairline: a mono number, the date, and the reading time as a sentence.

Palette: bottle-green night ground #0F1E1D, raised panels #162927, cream text #EDE4D3, sage-grey #A9B7AF for labels, apricot #E8833A for buttons and link underlines only, a softer #F2B27C for italics.

Type: Bodoni Moda for display, Newsreader for body at 19px with line height 1.68, Martian Mono for labels, vintages, and code. The contrast logic: a high-contrast Didone against a calm reading serif, with a mono for the facts.

The list: each section is a producer header (a 72px Didone name on the left, a one-line section summary on the right, a 2px cream rule under both). Under it, pour rows that read like a real wine list: the linked item title in 30px Didone, a dotted leader running to a right-aligned vintage in tabular mono (17.09.26), a small mono label line under the title, then one or two short paragraphs set in two columns. Link underlines stay faint at rest and brighten on hover. Hairlines between rows. Put a faint SVG contour-line map in cream at 7 percent opacity behind the list, off to the right, never a repeating tile.

Also: one tasting-note row with a small CSS snippet in a dark pre, one centered italic pullquote between producers, a design-move block with a square painted detail and a two-card diagram, the prompt as a cream kitchen docket with scalloped top and bottom edges and a real copy button, a two-column sources list, and a colophon.

Guardrails: body at least 18px and line height at least 1.6, WCAG AA contrast for every label on its real background including text over the painting, no readable text inside the paintings, no neon or glow, no gradients except the hero scrim and its bottom fade, no pill shapes, no fake controls, hover and focus states on every link and button, and a reduced-motion guard.

Build a component states page: a one-page reference that documents a single collection component (a card grid) in each of its states, empty, one, a few, many, and error, as a landing page a design-system team would publish.

Hero: a full-bleed overhead studio photograph on saturated tangerine paper (#E85A09) showing one large empty tray beside small trays of 1, 3, and 7 tiles. Place the kicker and headline inside the photographed empty tray, centered like an empty-state message; put the deck and one dark button in the open paper to the right. The top nav floats on the photo. On screens under 1100px, crop the photo square on the trays and stack the text below it.

Ground and palette: sample the page ground from the photo's paper so the image bleeds into the page. Ink #1F130C for text on orange, cream #F2ECE3 panels shaped like ceramic trays (14px radius, a 3px lip at the bottom edge), a darker ceramic #DBD2C5 for inset tile trays, oxblood #711614 as the only accent and only on cream.

Type: Brygada 1918 for display and body (19px body, line height 1.68), Spline Sans Mono for counts, labels, dates, and code.

Masthead: a cream folder tab rising out of the first panel, holding issue, date, and reading time as labelled rows.

Sections: a 3fr/1fr grid. Left, a cream tray of entries separated by hairlines. Right, a sticky state rail: a 104px mono numeral for the number of entries, the state name in italic, and a small tray of tiles laid out with flex-basis calc((100% - (var(--per) - 1) * 8px) / var(--per)) where --per is min(sibling-count(), 4), inside @supports with a four-across fallback. Set entry type size from the count too, never below 19px. On mobile the rail becomes a row above the entries.

Include a live three-tray demo with its CSS in a dark pre, one italic pullquote, a five-state strip from empty to many, and a copy button on the prompt block.

Guardrails: body at least 18px, line height at least 1.6, WCAG AA contrast for every label on its real background, no text on the orange smaller than 14px, no neon, no glow, no gradients beyond one bottom fade on the hero, no fake UI controls, no readable text inside the photograph, hover and focus states on every link and button, and a reduced-motion guard.

Build a SaaS feature launch page for one new feature, treated as a two-ink screenprint poster.

Hero: a full-bleed image, edge to edge, 3:2. Commission it as a flat screenprint in navy #13223F and sky #559FD1 on grey paper #E4E4E4: cards stacking in columns, with the right 40% left as open paper and a thin navy rule near the bottom. Set the page background to the same #E4E4E4 so the print bleeds into the page. Place a bordered launch stamp (issue, date, read time as label rows), a mono kicker, the H1, a two-sentence deck, and one navy button directly on the open paper, anchored above the rule. No scrim, no gradient. Under 900px, stack the image above the text.

Sections: a how-it-works run of three steps. Each opens with a 96x58 rounded ink card holding the step number (navy, then sky, then pale sky #C4D8E4) beside a small mono label and the H2. Body in a 4fr/3fr grid: news items with hairline dividers on the left; a pale #F2F3F5 panel on the right holding a real demo, image, or spec list. Add a comparison table, one italic pullquote, and a dark navy get-started band.

Type: Kode Mono 700 for headings and labels, Fira Sans 400 for body at 19px, line-height 1.7, 60 to 70 characters per line. Links in #17386F with a sky underline.

Guardrails: WCAG AA contrast everywhere, including text over the image; no neon, glow, or gradients; radius 6 to 12px only; no fake UI or unreadable text in images; hover and focus states on links and buttons with a reduced-motion guard; a faint paper-grain overlay is the only texture.

Build a single-page landing page for a creator's email newsletter. It sells a free subscription by showing a sample issue inline. Register: expressive, a quiet evening edition on a dark cool ground. It must work as a real page a client could ship.

Palette: slate ground #161C2C; panels #1E2638 and #252F46; warm off-white text #ECE5DA; muted text #B9BDCB; one rose madder accent #E4577F for the button, labels, and link underlines; a softer rose #EDA9BD for italic text; pale ochre #D8B26C for small header keys only.

Type: Libre Caslon Display for the headline and every subject line; Literata for body text at 19px, line height 1.7, lines of 60 to 70 characters; Martian Mono at 12 to 13px uppercase for header keys only (From, Sent, To, Subject); other kickers are small Literata italic. No other faces.

Layout:
1. Top bar: newsletter name left, three text links right.
2. Hero on a 3fr/2fr grid. Left: a small italic kicker, a Caslon headline of about 15 characters per line, a two-sentence deck. Right: a subscribe card that doubles as the masthead: a round accent seal holding the issue number, the newsletter name and one-line promise, three label rows (Issue, Sent, Reading time), then one filled button to subscribe and one outlined link. Use real links (RSS, a signup URL); do not fake an email input.
3. A full-width illustration under the hero with a two-part caption.
4. An "about this letter" block on the same 3fr/2fr grid: a short explanation left, a hairline list of what each issue contains right, set in the display face.
5. Sample sections as letter panels, weighted like an inbox: the lead letter on a lighter panel with a larger subject, the last one a quiet outlined brief. Each panel opens with an email header: a row of label/value pairs (From, Sent, To) with a small filled category tag at the far right, then a Subject row where the subject line is the h2. The panel body is a 3fr/2fr grid: hairline-separated items (h3 plus one or two sentences with one inline link) on the left, and on the right a recessed margin list of short named facts.
6. One italic pullquote between panels, indented to the header-key column.
7. A "borrow this" or "why subscribe" block with two label rows and a square illustration.
8. A "plain-text version" panel with a header bar for any long copy block.
9. Footer: numbered sources, previous/next links, colophon.

Components: subscribe card, header rows, subject-line h2, letter panels, margin lists, category tags with solid fills.

Guardrails: body at least 18px; WCAG AA contrast on every label against its real surface; one shadow only (the subscribe card); radius 12 to 14px on panels, 8px on buttons, 4px on tags, no pill shapes; no neon, glow, or gradients on the dark ground; no cyan on black; no accent left-border stripes; no fake inbox chrome (unread counts, star icons, dead reply buttons); hover and focus states on real links with 150ms easing and a prefers-reduced-motion guard. Illustrations: flat overhead gouache diagrams on the same slate, no legible text inside images. On mobile, stack every grid to one column and let the header rows wrap into two columns.

Build a single-page ecommerce product page (PDP) for a direct-to-consumer workshop brand selling a six-piece tool set. Register: expressive, studio product photography on a warm light ground. It must work as a real product page a client could ship.

Layout: a top bar (brand left in condensed uppercase, three text links right) over a 2px ink rule. Then a 5fr/3fr hero grid. Left: a product gallery with one 3:2 main photo across the full width and two 3:2 frames below it. The three frames are a SEQUENCE, not three angles: 01 as shipped, 02 customised, 03 raw parts. Each caption starts with a mono red label (number plus verb) and one plain sentence. Right: a sticky buy-box. At its top, a hang tag: a dark ink label with a V-notched left edge (clip-path) and a punched hole, holding the product number in condensed display type and two lines of mono detail. Then a mono red kicker, a condensed display product title (about 56px, tight leading, balanced wrap), a two-sentence deck, a two-column spec list with hairline rows, three variant rows (64px thumbnail of each gallery frame, bold name, one-line verb) that link to the matching frame, one solid red button, and a small secondary text link. Under the gallery, one italic press quote in a lighter panel with a mono citation.

Below: a lighter full-width product-details panel (5fr/3fr: name, italic one-liner, short paragraph left; solid ink vocabulary labels right). Then the long content as native details/summary accordion rows, open by default: condensed uppercase title left, a mono count right, a plus/minus built from two CSS bars that rotates on open, a 2px ink rule above each row. Inside: a numbered contents list (big red condensed numerals, a 72x108 crop of that piece taken from the main photo via background-position, product name, maker in mono, one sentence), a 2x2 spec sheet of label-over-value cells, and numbered how-to steps beside a "Pairs well with" cross-sell card. Then an inverted ink panel for one callout with a small wireframe of the sequence gallery, and an instruction-insert card with a dashed perforation top edge holding the long copy.

Palette: peach ground #F2BD91 sampled from the photo backdrop so the photos sit on the page, faint horizontal ruling (1px ink at 7.5 percent every 32px) only in the outer gutters outside the content column, lighter panels #FBE6D3, insert card #FFF7EE, ink #2A1612, secondary text #4A2A20, muted labels #6A3D27, tool-box red #C8261E for the button, a deeper red #A8201A for small red labels, numerals, and link underlines, #8E2A1C for italics only. Feather the photo edges with a CSS mask instead of framing them. Type: Big Shoulders Display 700/800 for titles and numerals, Schibsted Grotesk 400/600 plus italic for body, IBM Plex Mono 500 uppercase for labels.

Photography: three overhead studio photographs on the same peach paper backdrop, one hard key light from the upper left, red enamel, ash wood, brushed steel, brown waxed canvas. Same light and ground in every frame so they read as one shoot.

Guardrails: body 19px, line-height 1.65 or more, measure under 70 characters; check red text and muted labels for WCAG AA against the peach and the panel. Panel radius 10px, inputs and rows 6-8px, no pill shapes. One shadow only (the insert). No fake readable text in photos, no neon, no glow, no gradient text, no emoji icons, no three identical feature cards. Real hover and focus states at 150ms, and a prefers-reduced-motion guard. On mobile, show the main photo first, then the buy-box, then the other two frames, so photo and title share the first screen.

Build a single-page product changelog (release notes) for a design tool. Register: web-native, dark warm ground. It must read as a real product surface, not a poster.

Ground and palette: deep warm olive #1F2318 for the page, panels one step lighter (#2B3121, #343B27), cream text #EEE9D6, secondary text #D5D2BC, labels #A9AE92, hairlines #454C36. One accent: chartreuse #C6DA46 for links, filled tags, and kickers, with dark olive text on any filled tag. A single ochre #D9A441 tag for one entry type. No gradients, no glow, no cyan, no purple.

Type: Gloock (display serif, weight 400) for the headline and entry titles only; Instrument Sans for body at 19px with line-height 1.7 on a 66ch measure; IBM Plex Mono at 12.5-15px for every label, marker, tag, and the date rail. Italics only in the deck's closing sentence and one pullquote.

Top bar: brand at left in the display serif, three mono uppercase links at right, one hairline under it.

Hero band ("latest release"): a full-bleed painted image as the ground (a dark stage with cut-paper cards hanging from a fly bar, olive and chartreuse), darkened by a left-to-right scrim so the right side reads as flat page colour, and screened into the page with a CSS halftone: a 7px radial-gradient dot pattern in the page colour, masked with a linear gradient so dots grow toward the right and bottom edges. Inside the band a two-column grid, 2fr 3fr. Left column is the masthead as a changelog date rail: a mono definition list with hairline rows for Release (issue number in the display serif), Date, Read time, and Tags (one filled chartreuse tag, two outlined). Right column: a mono chartreuse kicker naming the product and release date, the headline in the display serif at about 60px on a 17ch measure, a 21px deck, and one mono link with a hairline underline. On mobile the hero stacks and the rail moves below the headline.

Entries: each section is a release entry separated by a hairline, on the same 2fr 3fr grid with no header strip. The left column is sticky at top 24px and heads with a one-line mono version tag: version (cream, 15px), a filled tag (Added, Improved, Technique), and the date. Under it the entry title in the display serif (about 36px, 16ch), an 18px summary, and an optional "Try" list of example prompts as hairline-separated mono rows. Right column holds the items on a 66ch measure: a 22px semibold title, one or two sentences, one inline link per paragraph, hairline between items. Include one live demo panel in the first entry: two cards in a lighter panel, one with a hover lift (translateY(-4px), tighter shadow, 160ms) and one that rises into place once on load (700ms keyframe, 250ms delay), both guarded by prefers-reduced-motion.

Add one italic pullquote between entries at 28-32px in the quiet lime #CDD592 with a mono citation. Add a Design Move entry whose right column is a panel with a mono chartreuse label, two paragraphs, and a small mono definition list of the CSS. Add a Prompt Lab entry whose right column is a bordered panel with a mono header row (file name left, instruction right), a pre with wrapped 14.5px mono text capped at 620px tall, and a hairline footer. End with a Field Note on a second full-bleed painting (the stage floor from above) as a translucent olive box on the same 2fr 3fr grid (version tag and a short serif title left, one paragraph right), a numbered Sources list with hairline rows, a three-cell issue nav, and a mono colophon.

Guardrails: body never below 18px, line-height at least 1.6, no justified text, all small labels at WCAG AA against their real surface, no fake toggles or search fields, no pill radius except tags at 4px, panels at 10px, no accent left borders, no emoji, no readable text inside images, restrained motion only.

Build a single-page type foundry product page that sells one typeface. Register: expressive, light ground, cool palette with one warm paper element.

Ground and motif: powder blue #D6E2EA across the whole page. Tile a 96px repeating SVG registration cross (10px arms, 1px stroke) in navy at 9% opacity as the only background motif, and give every text column a solid powder-blue background so the crosses live only in the gutters. No grain, no gradients, no glow.

Palette: navy ink #16294A for all text and rules; cream proof sheet #F3EEE3 for panels and image frames; cerulean #1F6FB5 for links and the one button colour; slate #5B6C7E for labels; hairlines #8FA6BA. Italic prose in a quieter #2F4E78.

Type: Outfit 600/700 (Google Fonts) for the headline, masthead values, section titles, and the character set; Spectral 400/600 with its italic for all reading text at 19px and 1.7 line height, never justified; Geist Mono 400/500 for labels, dates, readouts, and the prompt block. Body measure 66ch.

Trim rule: add `text-box: trim-both cap alphabetic` to every single-line display element (headline, masthead values, section titles, the character set, and the demo button). Never apply it to paragraphs.

Masthead: not a boxed meta table. One ruled specimen line across the page: a 1px top and bottom hairline with three cells inside, each a small mono label (Issue, Date, Reading time) above an uppercase Outfit value at 28px that is trimmed, so the hairlines land on the cap line and baseline of the values.

Hero: the headline full width in Outfit 700 at clamp(40px, 6.6vw, 86px), max 16ch, letter-spacing -0.028em. Below it a two-column grid at equal halves: left, a 22px deck (34ch) with an italic closing sentence and a short 17px note; right, a photographed proof sheet in a cream frame with 12px padding, a 1px hairline border, and a mono caption. On mobile the photo moves above the deck.

Section markers: every section opens with a specimen strip: a 1px hairline above and below, the section title in Outfit at 52px trimmed so the hairlines sit on cap height and baseline, and at the right a mono readout in two labelled cells that differ per section (Over: cap, Under: alphabetic; Size: 52, Leading: 52; Trim: both, Fallback: none needed). No icons, no numbers, no coloured left borders.

Section bodies: an equal-halves grid. Left, a 66ch column of items: each a 25px Outfit title link (an underline that grows on hover over 180ms), a mono uppercase source-and-date line, and one or two Spectral paragraphs, separated by hairlines. Right, one cream specimen panel per section with 12px padding and a hairline border: a square photograph with a mono caption in the first section, the live trim demo in the second, and a short CSS rule in a pre block with a mono caption in the third.

Art direction panel: a cream two-column sheet (equal halves) with a mono kicker, a title, an italic one-line summary, a paragraph, then a vocabulary list of 8 small mono uppercase tags in powder-blue chips with hairline borders and 3px radius.

Live demo: inside the second specimen panel, a two-cell grid of powder-blue cells; each holds a cerulean button (one word, 28px Outfit, 18px 26px padding, 5px radius) and a mono readout of the button's measured height written by a tiny inline script; the second button carries the trim rule so the reader can compare. A mono note below explains that matching heights mean the browser has no support yet.

Pullquote: one italic Spectral line at 26px between hairlines.

Design move: a cream panel, equal halves, text left and a metrics diagram right: the glyph pair Hg in Outfit 700 at 150px with the trim rule, its top and bottom edges extended as 1px cerulean lines labelled Cap line and Baseline in mono, on a powder-blue field with a hairline border and a mono caption.

Prompt block: a navy #16294A panel. Its header is the full uppercase character set A to Z in Outfit at 30px with 0.14em tracking, trimmed, between two #4E6890 hairlines. Then the title and a right-aligned mono works-in line, an intro paragraph in #C9D6E4, and a pre block in Geist Mono 15px on #1E3560 with a thin scrollbar, capped at 620px height.

Footer: a hairline-ruled previous / index / next row in mono uppercase, then a short colophon at 15.5px naming the typefaces and the palette.

Guardrails: body text at least 18px with 1.6 line height; all small labels at least 12px and WCAG AA against their actual surface; no fake readable text inside images; no neon, no glow, no gradient text, no pill shapes larger than a tag; hover and focus states on every link and button at 150 to 180ms; include a prefers-reduced-motion guard.

Build a one-page website for a single tool sold or shared through a marketplace (a plugin, an app, a template, a workflow). Page archetype: a web-native app store listing, laid out the way a marketplace presents one product: header lockup, screenshot rail, information table, shelves of entries, developer notes, footer. Do not build a generic template; follow this structure exactly.

Ground: a saturated marigold, #F4A927, flat, with no texture except a fine diagonal hairline hatch (1px lines of the ink colour at 9 percent, repeating every 9px at 45 degrees) confined to the header band. Cards and panels are warm cream #FFF3DC with a 1px hairline border at 14 percent ink and 16px radius; a second cream #FBE9C8 for inset notes and tags. Ink is deep indigo #1B1A2F, secondary text #3A3850, small labels dark ochre #5A3C0E. The one cool colour is cobalt #1531A6, used only for the primary button, links, and link hover (#0E2382); italic prose uses a softer #3C4E8C. One coral dot #E4573D inside the app icon. No gradients, no glow, no white.

Type: Zilla Slab 700 for the headline (62px desktop, line-height 1.04, tracking -0.012em), section titles, and entry titles; Public Sans 400 for all body prose at 19px with line-height 1.7 in a 68ch measure; IBM Plex Mono 400 and 500 for the version tag, dates, labels, captions' small heads, and the notes block. The logic: a sturdy slab for the product name and shelf titles against a plain humanist sans for reading, the way a store sets its titles heavy and its descriptions quiet.

Top bar: brand left, three text links right with a 2px underline on hover. Hairline below.

Header band (full width, hatched): a three-column grid of a 128px app icon (ink rounded square, 28px radius, one drawn mark inside, the page's only shadow), a title block, and a primary button. Title block: a filled ink version tag in mono uppercase (for example No. 134) beside a one-line developer sentence in 15.5px, then the headline at 20ch max width, then a 21px deck at 62ch. The button is one real link in cobalt with white text, 9px radius, a small arrow icon. Nothing else in the header.

Screenshot rail: a heading row (24px slab title left, a short 15px instruction right), then a flex row of three to five figures at 560px wide (84vw on phones) in a horizontally scrolling container with scroll-snap-type x mandatory, scroll-snap-align start on each figure, scroll-padding-inline equal to the page margin, a thin visible scrollbar, a focus stop with a label, and the row bleeding past the container edge. Each figure: a cream frame with 10px padding and 14px radius around a 3:2 image with aspect-ratio set, and a caption below with a mono uppercase small head and one sentence of real content. Images must be real or generated art with no readable text.

Information table: a cream panel with a heading row (title left, mono label Information right), then a definition list in a 180px plus 1fr grid where each row is a mono uppercase label and a value separated by hairlines: the idiom name in 28px slab, an italic one-line summary, a short paragraph, and a row of mono tags on the second cream.

Shelves: each section opens with a shelf header: a mono kicker over a 32px slab title on the left, a small See sources link on the right, and a 2px ink rule under both. Below it a cream panel with no top border holding one or more entries separated by hairlines. Each entry: a 23px slab title, a mono date line, one to three paragraphs, and optionally a Why it matters note on the second cream with a mono head.

Design note: a cream panel in a 1fr plus 320px grid, text left with a mono kicker and 30px title, a square image right with a caption.

Developer notes (prompt or code block): a full-width ink panel with cream text, a heading row with the title and a mono label, an intro paragraph, the pre block at 14.5px mono on a slightly lighter ink #25243B, and a Works in line of links.

Footer: a three-cell previous, index, next row between hairlines, then a short colophon in 15.5px.

Guardrails: body text never below 18px; line-height at least 1.6; small labels at least 12.5px and WCAG AA against their actual surface; no justified text; radius 5 to 16px, nothing pill-shaped; one shadow only, on the icon; no accent left-border stripes; no fake toggles, ratings, search fields, or carousel dots; hover and focus states on every link at about 150ms; a prefers-reduced-motion guard; semantic landmarks and no skipped heading levels.

Build a one-page website for a browser-based developer tool that lets AI agents operate a sandboxed site. Page archetype: a web-native editor shell, laid out like the product's own workspace, with a hero, three feature sections, a design note, and a footer. Do not build a generic template; follow this structure exactly.

Ground: a deep warm umber, #221A16, with a faint dot grid across the whole page (1px dots of the text colour at 7 percent opacity on a 24px spacing). Panels sit one step lighter at #2C2320; recessed surfaces one step darker at #1C1512. Text is warm off-white #EFE6DC, secondary text #D6CBC0, labels #A8988C. The single accent is lavender #B9A6E6, used for the kicker, tool names, filled count labels, link hover, and one button; italic prose uses a paler lavender #C9BAEC. No cyan, no neon, no glow, no gradients.

Type: Familjen Grotesk 700 for the headline (72px desktop, line-height 1.0, tracking -0.02em), section titles, and item titles; Source Serif 4 for all body prose at 19px with line-height 1.7 in a 66ch measure; JetBrains Mono for the byline, tool names, labels, captions, and the prompt block. The logic: a tight grotesque for the product chrome against a book serif for the reading, the way a docs page sets its interface in sans and its prose in serif.

App bar: brand on the left, three text links, and an inline byline on the right in mono (issue or version number, date, read time) instead of a boxed metadata table. Hairline below.

Hero: a mono kicker in lavender, then a two-column row with the headline at 15ch max width on the left and a 420px deck at 19.5px in the secondary text colour aligned to the baseline on the right, then a full-width canvas figure: a recessed panel with a denser dot grid holding a screenshot of the product's window, with a two-part mono caption (figure description left, dimensions right). The screenshot must be real or rendered from real HTML; no fake blurred text.

Workspace: a two-column grid, main column flexible with a 66ch measure, plus a 400px sticky inspector on the right that also holds a field-note panel and a sources panel. On screens under 980px the inspector drops below the main column.

Section opener: a tool-call row, a three-column hairline-bounded line in 13.5px mono with a small triangle then a lavender machine-style name on the left (for example playground.site_tools), the plain section name in uppercase muted mono in the middle, and a filled panel-coloured label on the right stating the item count. Each section then has a 31px grotesque title and one or more items, each with a 22px item title, a mono date line, and one to three serif paragraphs. Items are separated by hairlines, never cards.

Inspector: one bordered panel titled with a mono label, a 24px name, an italic one-line summary, a short paragraph, then a definition list of property rows (Ground, Accent, Display, Body, Mono, Motif) and a row of small mono tags on recessed chips.

Design note: a two-column block, text left with its own tool-call row and a 31px title, and a 460px screenshot right with a mono caption.

Prompt or code block: a full-width bordered panel styled as the product's composer: a header row with the title and a mono label, an intro paragraph, the pre block in 14.5px mono, and a recessed footer row of attachment-style links.

Footer: a hairline-bounded previous/index/next row in mono, then a short colophon in 15.5px muted text.

Guardrails: body text never below 18px; line-height at least 1.6; small mono labels at least 12px and WCAG AA against their actual surface; no justified text; radius 4 to 12px, nothing pill-shaped; one shadow at most; no accent left-border stripes; no fake toggles, search fields, or spinners; hover and focus states on every link at about 150ms; a prefers-reduced-motion guard; semantic landmarks and no skipped heading levels.

Build a one-page website for a small design-systems studio. Page archetype: a portfolio/studio site with a hero, a selected-work list, one process section, a project brief, and a footer. Do not build a generic template; follow this structure exactly.

Ground and palette: a flat pale cool citron background #ECF0CE with no texture, gradient, or pattern. Panels are a lighter citron #F5F7E1 with a 1px Prussian blue hairline border at 30 percent opacity. All text is Prussian blue #163A5C. The single accent is vermilion #E2452A, used only for the count numbers, link hover, and the button hover. Small muted labels use #55645B. Never use pure black, neon, glow, or gradients.

Type: Bodoni Moda (Google Fonts) for the headline at 64 to 74px with tight line height (1.02), for section titles at 30px, for work-item titles at 26px, and italic 400 for one pullquote. Hanken Grotesk for all body copy at 19px with line height 1.7, maximum 68 characters per line, never justified. DM Mono at 13.5px, uppercase, letter spacing 0.06em, for labels, codes, dates, and the nav. Load real hosted fonts; do not fall back to system fonts.

Nav: a single row, studio name on the left in Bodoni, three text links on the right in DM Mono uppercase. One hairline below.

Hero: a one-line DM Mono kicker, then the headline in Bodoni spanning the full width (maximum 18 characters per line), then a 22px Hanken deck under it, maximum 58 characters per line. Below the deck, a two-column row (2fr / 1fr, 28px gap). Left: a framed image plate, a panel with 14px padding holding a cyanotype-style diagram image (white line drawing on deep Prussian blue) and a DM Mono caption. Right: the commission panel, a bordered panel holding a small uppercase label "Commission", a very large Bodoni number (the project or issue number, 78px), then a definition list of five label/value rows separated by hairlines (date, duration, studio, idiom, deliverables), and at the bottom one full-width button, Prussian blue fill with citron text in DM Mono uppercase, that turns vermilion on hover and links to the brief. This panel is the only call to action on the page.

Sections: three work sections. Each opens with a project-sheet row: a 2px Prussian blue top rule, then one line in DM Mono uppercase laid out as a four-column grid (120px code such as "ADD 132 / 01", 150px discipline such as "Tooling", the section title in Bodoni 30px, and a right-aligned count such as "2 deliverables" with the number in vermilion). Inside each section, items are a work list: each item is a two-column grid (1fr / 2fr) separated by hairlines, the item title in Bodoni 26px on the left with a DM Mono source-and-date line under it, and one or two paragraphs of Hanken body on the right with one inline link.

Between the first and second sections, one pullquote: Bodoni italic at 34px, maximum 30 characters per line, with hairlines above and below and a DM Mono attribution line.

Process section: a 2px top rule, a small label "Borrow this pattern", a Bodoni 30px title, two paragraphs, and a square framed image plate on the right (320px column) with a caption.

Brief section: a bordered citron panel with a letterhead row (three DM Mono label/value cells: studio, project, works in) separated by a hairline from the body, which holds a Bodoni title and a white monospace document block with a hairline border and 3px radius.

Footer: a hairline-bounded previous/index/next row in DM Mono, then a short colophon in 15.5px muted text.

Rules: hover states on every link and the button with 150ms easing and a prefers-reduced-motion guard; no card shadows anywhere; radius at most 4px; no accent left-border stripes; no icon chips or dot separators; no fake search fields or toggles; the counts in the project-sheet rows must equal the real number of items; images carry no legible text; all small text meets WCAG AA on its actual background.

Build a SaaS pricing and plan-compare landing page in an expressive register borrowed from security engraving and share certificates. Ground: deep desaturated petrol green #0F2D2A, flat, with faint cream-tinted contour lines (topographic curves, 1px, about 15 percent opacity) confined to the left and right gutters and never behind the text column. Panels one step lighter, #163C36, with 1px hairline borders in #2A5C52. No gradients, no glow, no neon, no purple.

Palette: cream text #ECE6D6, softer cream #C9C6B8 for decks, sea-glass muted #93B8B5 for labels, one amber accent #E9A23B for the lead plan column, the meter fills, tags, and link underlines, with a deeper amber #B87616 for borders on the featured card and a pale gold #D8BE86 reserved for italic prose.

Type: Jost (500 and 600) for the headline, plan names, section titles, and accordion questions; Newsreader (opsz, 400 and 500, plus italic) for all body prose at 19.5px with line-height 1.7 and a 68ch measure, never justified; IBM Plex Mono for the table cells, captions, tags, and small uppercase labels at 13 to 14px with 0.06em tracking. The contrast logic: a geometric sans title over a serif of terms, like a certificate.

Masthead: a circular seal stamp, 168px, drawn in SVG in amber: two concentric hairline rings, the publication name set on a textPath along the top arc, and in the centre a small "No.", the issue number large, then the date and reading time in two short mono lines. Set it left of the headline in a 168px + 1fr grid. No boxed metadata cells.

Hero: a mono kicker, a Jost headline at clamp(38px, 5.6vw, 64px) within 15ch, then a 23px serif deck within 52ch. Below the hero, the hero object: a full-width plan-by-plan table (border-collapse, hairlines, a mono caption on top) with the lead plan column tinted #1C4640 and its header in amber, feature names as serif row headers, and a footnote row explaining any blank cell. Every cell states a real availability state; never render checkmarks or ticks.

Under the table, one full-width engraved plate in a hairline frame with a mono figure caption: commission it as a copperplate line engraving in cream ink on petrol paper with one spot of amber, no legible text.

Sections (Tooling, Technique, Workflow) each open with a usage-meter row: a top hairline, the section name in Jost 28px, a six-segment bar with the segments filled in amber for the number of items in the section, and a mono count on the right. Items are stacked articles with a 22px Jost title and one or two serif sentences, separated by hairlines. No cards.

Art direction callout: a hairline panel on #163C36 with a mono label, the style name, one italic line in pale gold, a short paragraph, and small mono outline tags with 3px radius.

Design move: a real accordion of three native details elements (question in Jost 20px, a plus sign that becomes a dash when open, the first open by default) beside a 300px column holding a square engraved plate. Prompt Lab: the featured plan card, a panel with a deeper amber border and the page's only shadow (0 18px 40px -24px black at 70 percent), a mono header row, and the prompt in a pre at 15px mono.

Interaction: link underlines thicken from 1px to 2.5px over 140ms, nav links gain an amber underline, accordion summaries turn amber on hover, all focus states visible in amber. Include a prefers-reduced-motion guard that removes transitions. Radii: 0 on panels and tables, 3px on tags only, no pills. No accent left borders, no emoji, no three-up feature cards, no logo bar, no fake toggles or search fields. Body text never below 18px, small labels at WCAG AA against the panel they sit on. On phones the plan table scrolls horizontally with a 640px minimum width rather than collapsing.

Build a comparison landing page ("X vs Y") for two CSS techniques, media queries versus container queries, as a light expressive page. Ground: pale blush pink #F3DCD6 with a very fine print grain at about 9 percent opacity, panels one step lighter at #FAEDE9. Ink: warm oxblood near-black #2B1A1E. Accent: forest green #1E5A3D, used only for the winning side of each comparison, section-row values, buttons and links; a deeper green #17402E for the prompt panel. Muted: dusty rose-brown #7E5A5E. Type: Fraunces (optical size 144 for the headline, 40 for subheads, italic for one pullquote) over Archivo for body at 19px with 1.7 line height, Fragment Mono for labels, the spine, table headers, and code. Never justify text; hold 60 to 75 characters per line.

Layout: a hairline top bar with the brand and three links. A hero whose whole ground is a full-bleed two-colour woodblock print (forest green and blush inks on cream paper, wood grain in the flat ink, no readable text) under a left-to-right blush scrim from 97 percent opacity on the left to 30 percent on the right, so the print shows at the right edge only. Inside the hero a two-column grid: a 64px vertical spine on the left holding the issue number, date, and reading time as three ruled cells rotated to read bottom to top, and the copy on the right: a mono kicker, a 74px Fraunces headline at most 12 characters wide per line, a 22px deck, then a two-cell versus box with a hairline border: each cell holds a mono side label, the question that side asks in 24px Fraunces, and a one-line answer, with the winning side's label in green.

Below the hero a live demo section: a three-column grid of 300px, 300px, and the remainder. Each column is a bordered slot with a mono label row. Slot one holds a card styled with a 1024px media query so it goes horizontal on a wide screen even in the narrow slot. Slot two holds the same card inside a wrapper with container-type inline-size and a 28rem container query, so it stays stacked. Slot three is a resizable container (resize: horizontal, overflow: auto, dashed green border) holding the container card, with its title set in clamp(1.05rem, .6rem + 2.4cqi, 1.6rem). The card is a bordered cream panel with an image area that shows a crop of the woodblock print, a mono kicker, a Fraunces title, one line of muted body, and a mono link.

Every section opens with a spec-table row: a top rule in ink, a three-column baseline grid holding the section name in 30px Fraunces, then two mono value cells that summarise the section's two sides or its item count, then a soft rule. Sections are two equal columns. The technique section carries a verdict table: mono column headers, one row per concern, and the winning cell in each row tinted 9 percent green with a small mono "reach for this" label above its text. The art direction and design move sections are bordered lighter panels; the design move includes a small dark green code block. Between the design move and the prompt, a full-width 340px interlude figure showing a second woodblock print (a window frame full of boxes) with a soft blush fade at top and bottom and an ink caption tag in the bottom-left. The Prompt Lab is an inverted forest green panel with a two-cell mono header (Prompt, Works in) and the prompt in cream mono. End with a centred italic Fraunces pullquote, a field note, a numbered sources list, prev and next links, and a colophon.

Radii: 0 on panels and cards, 3px on tags, 4px on code blocks. Hover: link underlines thicken and nav links gain a green underline over 140ms; include a prefers-reduced-motion guard. No accent left borders, no pill shapes, no big shadows, no gradient text, no neon, no images with readable text, no fake search fields or toggles.

Build a design-system component reference page for a Select control as a dark docs site. Ground: flat deep ink violet #1E1B33 with hairline horizontal ruling every 32px at 4 percent opacity; no gradient, no glow. Text #EDEAF7, secondary text #A9A4C8, panels #27243F with 1px borders at 16 percent white. One accent, pistachio green #A8D08D, used only for filled status labels (dark text on green), the checked option, link underlines, and the square bullet before each section name. Type: Azeret Mono at 500 weight for the headline, section names, labels, tables, and code; Source Sans 3 for body at 19px with 1.7 line height; italics in lavender #C7BFE9 for one summary line only.

Layout: a top bar with the brand and three links. Below it a two-column grid, a 248px sticky sidebar on the left holding a docs tree of anchor links (each with a small secondary line) and three label-value metadata rows, and a main column no wider than 760px. Main column order: a one-line status strip (component name, a filled green Stable label, engines and versions), a breadcrumb line, the headline in mono at about 44px, a two-sentence deck, then a preview panel with a header strip that contains a real native select. Style the select with appearance: base-select on the select and its ::picker(select), a custom ::picker-icon, a checked option in green with a ::checkmark, all inside @supports (appearance: base-select) so unsupported browsers show the stock control. Add a native details element under the preview that reveals the CSS. Then a full-width figure: a risograph specimen sheet of dropdown states in violet and green ink on off-white paper, with a mono caption.

Sections open as property-table rows: a 1px rule above, the section name in mono with a small green square, its type and item count in muted mono on the right. Include one browser-support table and one selector reference table with 1px row rules and no zebra stripes. The design move is a bordered panel with a small green label and a floated square proof-sheet figure. The prompt block is a code sample with a filename strip and a pre block. Radii: panels 10px, select 8px, labels 3px. Hover: link underlines thicken, sidebar links brighten on a panel background, 140ms ease; include a prefers-reduced-motion guard. No fake tabs, no fake search field, no accent left borders, no big shadows on every surface, no neon, no gradient text, no images with readable text.

Build a direct-to-consumer product page for one product sold in two variants; call the style The Hang Tag. Semantic HTML and CSS only, no JavaScript beyond a font loader. The page is a lookbook spread, not a gallery-and-buy-box split: everything runs full width in one column on a warm apricot ground (#F5D3AE), colour-blocked by section with a paler peach (#FAE4CC), no texture, no gradient, no grain. Deep violet (#2A1541) is the ink for all text and rules; a brighter violet (#5A2DB4) is the accent for links, the one button, and a hover shadow; burnt umber (#7E4A25) is the tone for small labels, captions, and italic emphasis.

Type: Instrument Serif (a sharp, high-contrast display serif) at 5.4rem on desktop and 2.4rem on mobile for the product title, and for section titles and variant names; Schibsted Grotesk (a plain grotesque) for all body copy at 19px with line-height 1.7 and a measure of about 66 characters; Sometype Mono, uppercase with 0.06em tracking, for every label, caption, and spec key. Never italicize paragraphs.

Masthead: a hang tag, not a table. A 232px peach card with a 1.5px violet border, a punched hole drawn as a small ring near its top edge, and a thin string rising from the hole to the nav, rotated minus 4 degrees, carrying the brand in mono, a large serif issue number, the date, and the reading time. It rotates to level on hover over 220ms.

Above the fold, in order: a mono top nav (brand left, three links right); the hang tag; the product title full width in the display serif, max 18 characters per line; a one-paragraph deck at 1.28rem; a full-width framed plate (a 3:2 technical drawing with a 1.5px violet border and a mono caption); then the variant row: a serif heading, and two equal cards side by side (stacked on mobile), each with a serif variant name, a mono variant number, a square plate made by that variant from the same brief, and a definition list of spec rows (built for, speed, price, quality, this plate) separated by hairlines at 28% violet, the last row naming the measured time in bold. Under the cards, one real button in the bright violet linking to the source, with a plain sentence beside it.

Sections open with a care label: an inline box with a 1.5px violet border and an inner 1px dashed stitch line inset 5px, holding a mono index, the section title in the serif, and a mono item count. Items are separated by hairlines and carry a mono date line, a bold grotesque title, and one or two sentences. The design move section is a 7/5 grid: prose left, and on the right a framed receipt panel listing every plate on the page with its model, size, quality, seconds, and the first line of its prompt in umber italic. The prompt section is a deep violet garment bag with peach text and a bordered pre block. End with a prev/index/next rail between two violet rules and a short umber colophon.

Guardrails: body never under 18px, line-height never under 1.6, no justified text, small labels at WCAG AA against the surface they sit on, no fake screenshots with readable text, no pill radius, card radius 4 to 6px, hover states on links, the button, the tag, and the cards only (150 to 220ms), and a prefers-reduced-motion guard. Images: technical drawings in fine violet line on flat apricot paper with dimension lines, blank label tags, and one umber mark, no legible text in them.

Build a one-page product launch page for a single feature or fix; call the style The Launch Poster. Semantic HTML and CSS only, no JavaScript beyond a font loader. The whole page is one centered poster column on a deep vivid racing green ground (#0E4B31), with a deeper bottle green (#0A3623) for one panel, cream (#F4EAD5) for text and printed cards, hot magenta (#E8388F) for loud marks only (a nameplate shadow, stamp shadows, the halftone), and mint (#9BC7A8) for small labels and captions. No gradients, no glow, no purple.

Type: Unbounded (a wide extended grotesque) at weight 800 for the headline, stamps, and section titles, at 600 for item titles; Libre Caslon Text (old-style serif) for all body copy at 19px with line-height 1.7 and a measure of about 65 characters; DM Mono for tags, captions, and the nav, uppercase with 0.06em tracking. Never italicize paragraphs; italics only for inline emphasis in mint.

Above the fold, in order, all centered: a top nav in mono (brand left, three links right); a printed nameplate lockup, a cream card with a 4px hard magenta offset shadow, carrying the publisher line, a large number, and the date and reading time on one line; a large hard-edged circle (about 350px on desktop, 250px on mobile) of coarse magenta halftone dots (radial-gradient dots on a 9px grid, 55% opacity) centered behind the headline and tucked under the bottom edge of the nameplate; the headline at 3.6rem on desktop, 2rem on mobile, max 18 characters per line; a one-paragraph deck; then a proof strip: two cream frames side by side (stacked on mobile), each a drawn miniature of the same page, the left showing the broken state and the right the fixed state, with a mono state label and a one-sentence caption under each. Below the strip, a full-width printed plate (a 3:2 screenprint image with a mono caption under it).

Sections are release notes. Each opens with a cream stamp in Unbounded carrying a real version tag, the section title, and a note count in mono; items are separated by a 1px cream hairline at 28% opacity and carry a mono tag line, a title, and a caption. Put the callout for the style in the bottle-green panel. The design move section is the one wide section: a 7/5 grid with prose left and a square plate right, stacked on mobile. The prompt section is a cream sheet with dark green text, its stamp inverted to green. End with a prev/index/next rail and a centered colophon.

Guardrails: body never under 18px, line-height never under 1.6, no justified text, small labels at WCAG AA against the surface they sit on, no fake screenshots with readable text, no pill radius except none, card radius 4 to 8px, hover states on links only (underline color to magenta over 150ms), and a prefers-reduced-motion guard. Images: three-colour screenprint plates in the same green, cream, and magenta, with coarse halftone and slight misregistration, no legible text in them.

Build a one-page release-day event page (a launch programme) for a design tool release; call the style The Programme. Semantic HTML and CSS only, no JavaScript beyond a few lines if needed. Page archetype: event landing page.

Structure, top to bottom:
1. A full-width ticker strip masthead on an espresso band: 13px uppercase monospace in chalk, items separated by 1px vertical rules, duplicated once and scrolling slowly for the loop, stopped under prefers-reduced-motion. It carries only real facts (event or issue number, date, duration).
2. A plain top nav: brand left, three links right in small monospace caps with a 2px underline on hover.
3. A hero on a 7/5 grid. Left: a small monospace kicker in tobacco, then the headline in a heavy slab serif (Alfa Slab One) at 36 to 64px, line-height 1.06, over a 21px humanist sans deck (Fira Sans). Right: a programme card, a chalk panel with hairline rows of monospace label and sans value (release, date, venue, format) and one real call-to-action button in deep teal.
4. A full-width framed illustration plate with a monospace caption rail beneath it, the plate label in tobacco caps.
5. An "about the programme" panel on chalk with a 3px espresso top rule: style name in the slab and a one-line italic summary left, a short paragraph and outlined monospace tags right.
6. Sections as tracks. Each opens with a filled tobacco TRACK 01 badge (chalk 12px monospace, 4px radius), a slab title, and a session count on the right. Inside, sessions sit in a two-column grid with a vertical hairline between the columns and horizontal hairlines between rows, each with a teal monospace number, a 22px bold sans title, and 19px body; a lead session spans both columns with its 28px title in the left five columns and its body in the right seven.
7. A design-move track on a 7/5 grid with a square illustration on the right.
8. A programme-notes or prompt track on an espresso sheet with chalk monospace text.
9. A closing note, a sources list, previous/next navigation, and a colophon on espresso.

Palette: mist grey-green ground #E3E8E5, with a faint repeat tile of 5px hollow squares on a 48px diamond lattice at 8 percent espresso showing only in the page gutters, never behind body text; chalk panels #F6F8F6; espresso ink #2A1D15; tobacco #6E4B2F for badges, kickers, and plate labels; deep teal #0E6B66 for the button, session numbers, and link underlines; stone #5C6964 for captions.

Type: Alfa Slab One for the headline and track titles only; Fira Sans 400, 500, 700 for body and session titles; Fira Mono for the ticker, badges, captions, and code.

Illustrations: gouache diagrams on cool toned paper in espresso, tobacco, and one teal accent, matte with visible brush texture, no legible text, no logos.

Guardrails: body at least 19px with line-height 1.7 and 60 to 72 characters per line, left-aligned, never justified. Captions and labels meet WCAG AA against their actual background. Radius 4px on badges, 6px on the button, 8 to 10px on panels, nothing pill-shaped. No accent left-border stripes, no glows, no gradients, no neon, no fake search or filter controls. Hover states on links and the button at 140ms. Counts, dates, and every fact on the page must be real.

Build a one-page local service business site for a small metal fabrication workshop, called The Service Menu. Semantic HTML and CSS only, no JavaScript beyond a few lines if needed. The organising idea: the whole page is a menu of ruled rows, and every repeating thing (services, steps, FAQs, past jobs) is one row shape repeated from a list.

Ground and texture: a dark cool graphite page (#24282C) with a brushed-metal texture made in CSS: a repeating 1px horizontal line at 3 percent white every 3px, plus a faint SVG fractal-noise field at about 7 percent. Panels are zinc (#2F353A) with 1px rules in #3E464D. Text is bone (#E8E4DC), secondary text #C4BFB5, small labels steel blue (#9DB2C2). One accent, powder-coat orange (#F26A1B), used only for row numbers, link underlines, and the 2px rule under section heads. Italic prose uses a quieter warm tone (#D9B59A), never the orange. No gradients, no glow, no neon.

Type: Martian Mono (400, 500, 700) for the headline, section names, numbers, and labels; Literata (400, 600, italic) for body and captions. Body 19px, line-height 1.7, measure about 68 characters, never justified. Headline in the mono at 30 to 56px, tight leading, max 22 characters per line.

Masthead: not a boxed table. One inline byline sentence in 13.5px mono, steel blue, with the business name in orange: "Est. 2014, open Tuesday to Saturday, quotes in 48 hours."

Hero: full-width mono headline (the workshop's promise), then a two-column grid (7 to 5). Left: a 22px serif deck and a 17px note. Right: the "repeat card": a zinc panel with a 3:2 photograph, and a mono caption row reading "Row 1 of 3" in orange followed by one sentence. Under it, two dashed-outline ghost rows in steel, "Row 2 of 3" and "Row 3 of 3", each with a short line. On hover the ghosts nudge 6px and 12px to the right; wrap that in a prefers-reduced-motion guard.

Sections: Services, Process, Questions, Past jobs, Get a quote. Each opens with a row head: a 72px column holding a two-digit orange number, the section name in 24px mono, and a right-aligned mono stub showing the real item count ("4 items"). Under it, an ordered list where every item is the same row: a 72px column with the item number in 13px mono steel, then a 22px serif semibold title and one or two 19px sentences, with a 1px rule beneath. Rows may hold a small mono date or price tag on the title line. Rows get a 2.5 percent white background on hover, 160ms ease.

Photographs: editorial still-life photographs on a graphite bench, cool light from the left, film grain, every part raw steel except one in matte orange. One 3:2 in the hero card, one square beside the Process section with a mono caption below. No legible text in any image.

Get a quote: a light bone sheet (#E8E4DC) with graphite text, a 2px rule under a mono header row ("Quote sheet" left, "Reply within 48 hours" right), then a plain form with native inputs (name, email, what you need, a file field for drawings) at 6px radius, and one orange button. Cards and panels stay at 10 to 12px radius; nothing is a pill.

Footer: a mono issue nav row, then a 16.5px colophon paragraph naming the typefaces and the palette in plain words.

Guardrails: body never under 19px, small labels never under 12.5px and always steel or bone at WCAG AA on their actual background, no accent left-border stripes on any card, no fake search boxes or toggles, no identical three-up feature cards, no emoji, no gradient text, and no container taller than its content.

Build a course landing page for a design-school assessment course, called The Rubric. One page, semantic HTML and CSS only, no JavaScript.

Ground: the whole page is poster red (#A61D2B) with a drafting grid drawn in CSS, 32px squares, 1px lines of cream at 8 percent opacity. No gradients, no glow, no shadows except one soft shadow under the framed plate.

Masthead: a breadcrumb rail, a ruled single row across the top with small uppercase monospace crumbs separated by a thin chevron: Issues, Course library, then the course number in a filled cream chip, then the date and reading time pushed to the right edge. No boxed metadata cells.

Hero: the headline runs full width in an extended grotesque (Syne 800), 6vw, line height 0.98, cream. Below it a 12-column grid: a two-line mono unit label in the left five columns, the deck in EB Garamond 23px in the right six columns. Then a grade strip: an ordered list of three tiles inside one cream keyline, each with a small run label, a very large tabular number (Syne 800, 80px) with a small percent sign, a two-line mono note on the right, and a thin cream bar whose fill width equals the score. Then a framed plate: a cream frame with 14px padding holding a 3:2 image, with a mono caption in pale rose below.

Section markers: every section opens with a criterion bar, a three-column grid ruled with a 1px cream line above and a 34 percent cream line below: mono unit number on the left, the section name in Syne 800 at 30px in the middle, and on the right a meter of six 22px blocks with 1px cream borders, filled cream for the units already passed. Sections: Tooling, Technique, Workflow, Design move, Prompt Lab, Field note, then Sources.

Items: a Syne 700 subhead at 26px, a mono source line in pale rose, then one or two paragraphs of EB Garamond at 20px with line height 1.7 and a 66 character measure, cream on red, never justified. One pullquote only, EB Garamond italic at 34px between thin rules.

Course card: a cream (#F3E7CF) card in two columns with dark ink text, a cobalt (#1F3FBF) mono kicker, the course name in Syne 800 at 44px, an italic one-line summary in cobalt, one paragraph, a row of keyline chips with 3px corners, and on the right a definition list of course details with a cobalt rule above and thin cobalt rules between rows. Cobalt appears only on cream surfaces, never on the red ground.

Design move: two columns, text left and a square framed plate right, with a small demo of three criterion bars used as a five-block rating scale.

Prompt block: a cream answer sheet with a cobalt kicker, one line of instructions, and the prompt in a monospace pre at 15.5px that wraps.

Images: risograph prints, two-colour overprint of poster red and cobalt on cream uncoated paper, diagrams of web page blocks with visible misregistration and ink grain, no legible text.

Guardrails: body text at least 18px with line height 1.6 or more; small labels at least 13.5px and WCAG AA against their real surface; no accent left border stripes; no pill radii except none; hover and focus states on every link with a 150ms transition; a prefers-reduced-motion guard; no em dashes; no fake search fields, toggles, or filter pills; the meter is aria-hidden with its value written for screen readers.

Build a single-property real estate listing page called The Toned Print. One page, semantic HTML and CSS only, no JavaScript.

Ground: a flat deep warm plum (#2C1729) across the whole page, no gradient and no texture below the hero. Ink on the ground is warm cream (#F0E6D6); small labels are dusty mauve (#C9A9C0). Two inks only for accents: marigold (#E5A03A) for stamps and links, Prussian blue (#24305E) for tag chips. One cream sheet (#EFE4D2) for the sidebar card and one for the prompt block.

Type: Zilla Slab 700 for the headline, section titles, and item titles; Alegreya Sans 400/500 for body at 20px with line-height 1.7 and 62 to 66 characters per line; Courier Prime 700 for stamps, labels, captions, and code. Never justify text. Never italicize body paragraphs.

Hero: full-bleed photograph of the property, toned as a two-ink cyanotype (blue shadows, plum highlights), filling the first 80 percent of the viewport height. Over it a scrim: a vertical gradient from solid plum at the bottom through 62 percent plum at the middle to 22 percent plum near the top, strong enough that the cream headline meets WCAG AA over the busiest part of the photo at both desktop and 390px. Headline bottom-left in the slab at about 74px, a two-sentence deck beneath it. Top right of the hero: a circular postmark in marigold, rotated nine degrees, with the publication name and date on a text path around the ring, the issue number in the center, and two cancellation waves below it. This postmark is the masthead; do not add a boxed meta table.

Facts strip: along the bottom edge of the hero, a four-cell definition list ruled top and bottom (Listed, Installs, License, New owner), monospace labels above slab values, cells divided by hairlines. On mobile it stacks to one column.

Body: two columns, a 340px sticky sidebar on the right and the listing column on the left. Each section opens with a rubber-stamp marker: uppercase Courier Prime inside a double-ruled marigold box, rotated two degrees, with a few small gaps in the ink drawn with radial gradients. Stamp names come from the listing packet: Property details, Inspection report, Open house, Floor plan, Offer packet, Closing, Title search. Under each stamp a slab section title, then items separated by hairlines, each with a monospace source-and-date line, a slab title, and one or two paragraphs.

Sidebar: a cream agent card titled Listed by, holding the style name, an italic one-line summary, a short explanation, uppercase Prussian-blue tag chips, and a Schedule a tour list that links to the Atom feed, the RSS feed, and the prompts archive. Real links only; no fake form.

Design move section: a two-up of the same photograph, the original beside a CSS-retoned copy, with the three-rule recipe in a code block: container background in the shadow ink, image grayscaled and set to mix-blend-mode screen, a pseudo-element in the highlight ink set to multiply.

Guardrails: one pullquote in italic slab, no other italics. No accent left-border stripes, no pill radii beyond 4px, no drop shadows except one on the sticky card, no neon or glow, no fake search or filter chrome, no readable text inside images. Hover and focus states on every link with a 150ms ease, and a prefers-reduced-motion guard. Body text never below 19px.

Build a SaaS product feature launch page called The Paste-Up, styled as a print-production paste-up board with cut-paper sheets. One page, semantic HTML and CSS only.

Page archetype: single-feature launch page for a click-to-edit toolbar in an AI app builder. Above the fold, top to bottom: an inline top nav on the bare board; a masthead made of three small cut-paper index tabs standing up from the hero sheet (issue or version number on a raspberry tab, date on a cream tab, reading time on a cream tab, each rotated about one degree); a full-width white sheet holding a monospace kicker, an extended grotesque headline (Anybody at 125 percent width, 700, 48 to 57px, max 22 characters per line, balanced), and a 24px serif deck; then a wide illustration pasted below the sheet at a 0.6 degree tilt with a small cut-paper caption slip overlapping its bottom-left corner.

Sheets: every section is a sheet on the board. Put the paper on a ::before pseudo-element: an eight-point clip-path polygon with corners a few tenths of a percent off square, a rotation between -0.4 and 0.4 degrees, and a hard 1px drop-shadow filter for the cut edge. The content box itself never rotates. Alternate white and cream sheets, and vary the polygon and rotation per sheet.

Section markers: correction slips. Each section opens with a small cream slip overlapping the sheet's top edge, rotated about 1.4 degrees, carrying a 14px raspberry paper square, a monospace label (Change 01, Change 02) and the section name in the extended grotesque at 17px uppercase. Sections: art direction callout with a swatch strip (five cut-paper chips showing the page's own palette with names and hex values), Tooling, Technique, Workflow, Design Move with a code block and a second illustration, Prompt Lab on a sheet using details/summary, Field Note, Sources.

Palette: board #CFE3DF (pale cool teal), white sheet #FBFAF4, cream slip #F1ECDD, ink #10302E, raspberry accent #D6336C for tabs, squares, and links (deeper #B0285A for link text and #8E2E52 for italic prose), muted teal #4A6864 for monospace labels. Board texture: an inline SVG feTurbulence fractal noise tile at low opacity, multiply blend, fixed behind everything; sheets stay flat.

Type: Anybody (width axis at 125, weights 600 and 700) for the headline, section names, and item titles; Crimson Pro for body at 20px with line-height 1.66, italics for the one-line summary and one pullquote at 30px; IBM Plex Mono for tabs, slips, captions, and code. Body measure 66ch, never justified. Small text at least 12.5px, WCAG AA against its actual surface.

Images: two cut-paper collages in the manner of gouache cut-outs, photographed flat on the same teal board, no legible text: a wide tableau of a paper web page with a selection outline, a floating toolbar strip, a paper cursor, and three correction slips; and a square stack of slips under one paper clip. Each sits inside a figure with a caption slip; nothing full-bleed.

Guardrails: no gradients, no glow, no pill radius anywhere (edges are cut, not rounded), no accent left borders, no fake toolbars or inputs as decoration (the swatch strip is a labelled legend), hover and focus states on every link and on the details summary at 150ms, one restrained motion (the pasted plate settles a few tenths of a degree on hover), and a prefers-reduced-motion guard. On mobile the tabs wrap, sheets shrink their padding to 22px, the design move stacks, and captions stay inside the viewport.

Build a creator newsletter landing page called The Proof Sheet, styled as a printmaker's studio letter. One page, semantic HTML and CSS only.

Page archetype: creator newsletter signup page. Above the fold: a fixed vertical spine down the left edge (72px wide) carrying the issue number in a geometric sans, rotated with writing-mode vertical-rl, and the date and reading time in a small monospace. Right of the spine: an inline top nav, a small monospace kicker, a large geometric sans headline (Jost 600, 56 to 66px, max 19 characters per line, balanced), a serif deck (Newsreader, 22px), a subscribe row with one solid copper button and one ghost button linking to a real feed and a real profile, then a wide framed plate image with a monospace caption to its right.

Proof strip: directly under the hero, a three-column row of small CSS wireframes showing the same hero parts (headline bar, two text bars, a button, an image square with a circle) laid out three ways using grid-template-areas: stacked, split with image left, image first. Label them Proof A, B, C in monospace; mark which one the page uses.

Sections as shelves: each section opens with a cream drawer label (a small monospace tab, 12.5px uppercase, cream fill with a double inset hairline like a label holder on an archive drawer) followed by an uppercase copper section title. Items are a monospace source line, a serif-set title in the geometric sans at 25px, and one or two paragraphs. One italic pullquote in the serif at 30px. A Design Move section with a code block for the grid-areas trick and a second plate image. A Prompt Lab on a cream sheet (details/summary) with a monospace pre.

Palette: umber paper #2E221A ground, cream ink #EFE3CC for text, copper #D08A45 for buttons, rules, and section titles, deep copper #A8632E for wireframe fills, cream sheet #E9D8B6 for labels and the prompt sheet, muted tan #AE9679 for captions. Halftone: a CSS radial-gradient dot field in copper, 9px cell, masked as a gradient band under the hero (dense at the bottom, fading up) and at the foot; never behind paragraphs.

Type: Jost 500/600 for display, Newsreader (optical size on) for body at 19.5px with line-height 1.68, DM Mono for labels and code. Body measure 66ch, never justified. Small text at least 12.5px and WCAG AA against its surface.

Images: two woodblock relief prints in copper and cream ink on dark umber paper, no legible text: a wide proof sheet of three abstract hero layouts, and a close halftone proof. Keep each inside a frame with a caption; no full-bleed.

Guardrails: no neon, no glow, no gradients on text, no pill radius except none, cards and inputs at 3 to 6px radius, no accent left borders, no fake forms or toggles (the subscribe row uses real links), hover and focus states on every link and button with 150ms easing, and a prefers-reduced-motion guard. On mobile the spine becomes a horizontal strip under the nav, the proof strip stacks, and the plate spans full width.

Build a direct-to-consumer product page for one product that comes in a size run, styled as a small paper-goods brand. Page archetype: ecommerce product detail page, expressive brand register, vivid light ground.

Ground and palette: a flat vivid tangerine field (#FB7A25) carrying a faint repeat tile of nested rectangle outlines in a slightly deeper orange (#E4661A, 2px strokes, 96px tile) so the ground reads as branded wrapping paper, never as a gradient. A single continuous cream product sheet (#F7ECD5) holds everything below the hero, with warm sand (#ECD3A2) for tinted panels and tags. Ink is navy (#0D162B). One accent only, deep teal (#035E5E, deepened to #02494A for text links), used for the buy button, the hotspot pins, and italic display lines. Small text on the tangerine uses dark rust (#3A1604), never teal, because teal fails contrast on orange.

Type: a wide monospace with a heavy weight (Azeret Mono 800) for the product title, section heads, item titles, and the wordmark; the same mono at 500 for every label, caption, table cell, and spec; a serif with optical sizing (Source Serif 4) for body at 19px and line-height 1.7, with its italic for the one pullquote and the one-line art direction summary. Body never goes below 18px and is never justified. Measure stays between 60 and 70 characters.

Masthead is the buy box. The hero is a two column grid, 7 to 5. Left: a gallery figure holding one painted product image with a mono caption, and beneath it a size run legend built as a flex row of four bars with flex-grow values of 1440, 1024, 768, and 390 and heights stepping down from 34px to 16px, each labelled in mono, so the widths are true to each other. Right: a cream buy box with a wordmark and issue number line, the headline as the product title at 28 to 38px, the description as the deck, a four row size table in mono with a caption, a date and read-time line where the price would go, and one solid teal button with cream text linking down into the first section. No boxed grid of meta cells anywhere.

Under the hero, the cream sheet begins with a four column spec sheet: a definition list with a 2px navy top rule, hairline column dividers, mono uppercase terms, serif definitions. It reduces to two columns under 980px.

Section markers are hotspot pins from the product detail idiom: a 38px teal teardrop (border-radius 50% 50% 50% 0, rotated minus 45 degrees) with the section number in mono counter-rotated inside, sitting on the same line as the section heading. Sections: Tooling, Technique, Workflow, Design Move, Prompt Lab, Field Note, Sources. Items inside a section are a 4 to 8 grid, a title column with a mono source line and a serif body column capped at 66 characters, separated by hairlines; the grid stacks under 980px.

The Design Move is a care label: a sand panel with a bordered mono tag, a heading, two short paragraphs, and a second square painted plate on the right with a mono caption.

Images: gouache illustrations only, opaque matte paint with visible brush marks and paper grain, the product in deep teal with cream painted layout shapes, on the same tangerine as the page so the plate sits without a frame. One wide plate showing every size in one row at true relative scale, one square detail plate. No readable text inside any image.

Guardrails: body 19px and line-height at least 1.7; contrast at WCAG AA against the actual rendered surface; radii 3 to 8px on panels and 2 to 4px on bars and buttons, nothing pill shaped; one restrained motion only, links thicken their underline on hover and focus over 150ms and the buy button darkens and lifts one pixel, both wrapped in a prefers-reduced-motion guard; visible focus outlines in teal; no glow, no gradient text, no drop shadow on more than the gallery plate and the buy box, no left border stripe on callouts, no fake size selector or add-to-cart state, and no container taller than the content inside it.

Build a comparison landing page that sets two editions of one product side by side. Treat the page as a bookbinder's specimen catalogue. Page archetype: comparison or "X vs Y" landing page, expressive print register, dark cool ground.

Ground and palette: a deep indigo field (#151A2E) carrying a single fixed marbled-ink wash at about 13 percent opacity, covering the viewport so it never tiles or seams. Cream paper panels (#EFE7D5) with ink at #1B2036 for anything that must be read at length. One accent only, chrome yellow #E9B21F, used for filled labels, graphic marks, and italic display lines, never as small text on cream. Cool slate #9BA4C2 for secondary text on the indigo. Every ink mark drawn in CSS gets a hard 3px offset copy in the yellow behind it, no blur, so the page looks screenprinted slightly out of register.

Type: a decorative flared display serif (Yeseva One) for the nameplate, headline, section heads, and row titles; a plain grotesque (Instrument Sans) for body at 19px and line-height 1.72; a monospace (Space Mono) for labels, axis values, and metadata only. Body copy never goes below 18px and is never justified. Measure stays between 60 and 75 characters.

Masthead: fold the nameplate into the hero. A cream strip across the top of the hero holds the wordmark in the display face on the left and issue metadata in uppercase mono on the right, and directly beneath it runs a 26px band of the marbled image repeated on x at full height, like the marbled fore-edge of a closed book. No boxed grid of meta cells.

The comparison spine is the signature. One cream panel holds a stack of rows, each row a three column grid: a 230px label column tinted one step darker, then two equal content columns for the two editions. A single hairline separates rows and a second one runs between the two edition columns, so the whole block reads as one spine rather than two cards. The header row names each edition in the display face with an uppercase mono subtitle. Where a row compares a difference of degree, draw it instead of writing it: on one side a flex row of four solid vertical bars at 3, 6, 11 and 19px wide sitting on a shared baseline, on the other a single wedge clipped with polygon(0 45%, 100% 3%, 100% 97%, 0 55%), both in ink with the yellow offset behind. Caption each with one line of uppercase mono. Under 940px the label column spans the full width and the two editions sit side by side beneath it.

Section markers are shelf labels, not filters. Each section opens with a hairline rule across the content column and a solid chrome yellow tag with uppercase mono in near black, pulled up so it straddles the rule like a tag on a shelf edge. The tag is a label and nothing else: no hover state, no active variant, no fake filtering. Sections: Tooling, Technique, Workflow, Design Move, Prompt Lab, Field Note, Sources.

Items inside a section are a two column grid, a 220px title column holding the row title and a small uppercase mono source line, and a wide body column capped at 70 characters. Under 940px the two columns stack.

Images: contained plates only, one wide diagram and one square detail crop, both screenprinted on cream with indigo ink and a chrome yellow underprint. Give each a mono caption naming it as a plate. Never put readable text inside a generated image.

Guardrails: body 19px and line-height at least 1.7; contrast at WCAG AA against the actual rendered surface, which means yellow only on the indigo or as a filled block with dark text, never yellow type on cream; radii stay at 2 to 3px throughout because these are sheets of paper, with nothing pill shaped; one restrained motion only, links that increase their underline offset and thickness on hover and focus over about 160ms, wrapped in a prefers-reduced-motion guard; real focus-visible outlines in the accent; no glow, no gradient text, no neon on dark, no left border stripe on callouts, no fake toggles or search fields, and no container taller than the content inside it.

Build a SaaS product launch page for a service that builds a website, hosts it, and then inspects it by clicking through every feature. Treat the page as a security-printed certificate of inspection. Page archetype: SaaS launch landing page, expressive print register, dark warm ground.

Palette: oxblood ground #3A1B1F, ivory type #F3E9D6, ivory certificate sheet #EFE3CB with dark brown ink #2A1A16 on it, one green engraving-ink accent #6FB07C for labels, links, and the primary button, a quieter sage #A9C4AE for italic prose, and rose-ash #CFAEA8 for muted captions. No other saturated color. No gradients, no glow.

Type: Bodoni Moda (a high-contrast didone) for the headline, section titles, the lead item title, and one italic pullquote; Archivo for body and item titles; IBM Plex Mono only for stub numbers, dates, captions, and the prompt block. Body 19px, line height 1.7, measure 60 to 70 characters, never justified.

Ground: rule the whole page with a fixed repeating horizontal pinstripe, one hairline every 28px at about 11% ivory, like a ledger sheet. Nothing else on the ground.

Masthead: a single ivory ticket stub at the top of the hero, not a row of meta cells. Left cell: the issue or version number in the didone face with a small vertical "No." label; a dashed vertical tear line; right cell: date and reading time in mono. Notch the stub's left and right edges with round cutouts using a radial-gradient mask.

Hero: full-width didone headline up to 96px, then a two-column band: a wide engraved plate on the left (an image framed on an ivory sheet with 8px padding and a soft drop shadow), and on the right the deck at 22px, one green primary button plus one outlined secondary link, and a mono caption "Plate I."

Sections as perforated coupons: each section is a two-column grid, a 112px stub column and the content column, separated by a 2px dashed vertical rule with an 18px round notch punched at the top of the perforation. The stub holds a small green "Lot" label, the section number in the didone face at 44px, the section name set vertically (writing-mode vertical-rl, rotated 180 degrees), and a date in mono. Sections: Tooling, Technique, Workflow, Design Move, Prompt Lab, Field Note, Sources. Under 720px the stub becomes a horizontal row above the content with a dashed bottom border, and the notch and vertical text are removed.

Items: a mono date label in green, a 21px semibold Archivo title that is the link, and one or two short paragraphs. Hairline rules between items. The lead item's title is set in the didone face at 30px. Exactly one pullquote, italic didone at 28 to 42px, with a mono attribution line.

Plates: two supporting engravings sit beside the Workflow and Design Move text in a 300px right column with mono captions "Plate II." and "Plate III." on the ivory sheet. Generate all imagery as copperplate intaglio engravings in green-black ink on ivory rag paper with guilloche borders; no legible text, no logos, no photographs.

Design Move block: a slightly deeper oxblood panel with a hairline border, a green mono label "Borrow this pattern," a didone title, and two paragraphs. Prompt Lab: an ivory certificate sheet with an inset hairline frame and a mono header row, the prompt in a wrapping pre block.

Interaction: links underline in green on hover; buttons shift tone over 150ms; on hover the whole coupon nudges its stub 3px left as if tearing; wrap all of it in a prefers-reduced-motion guard. No fake toggles, search fields, or status chips. No accent left-border stripes on cards. Border radius only on the stub notches, never on panels. Keep contrast at WCAG AA for every mono caption against its actual surface.

Build a creator drop page for an independent designer releasing a pack of shader fills to a design-tool community. One product, one date, one list to join. Page archetype: creator drop and waitlist landing page, brand and lifestyle register, light cool ground.

Structure, top to bottom:
1. A plain top nav on the flat page ground: wordmark left, three text links right, in a monospace at 13px.
2. A full-bleed photographic hero about 85 percent of the viewport tall: a still-life photograph of pale dichroic iridescent film on glacier-blue paper with quiet negative space on the left. Over the quiet side, a two-layer scrim: a flat tint of the page ground at about 90 percent opacity sized to the text block, plus a gradient from that tint to transparent toward the busy side of the image. Inside the scrim: an inline byline sentence (drop number, date, read time), a headline in a semi-condensed monospace at 30 to 56px, a two-sentence deck in the serif, and two text-link calls to action, one filled cobalt. Check the headline's contrast against the busiest crop at desktop and at 390px; on mobile switch the scrim to a bottom-up gradient.
3. Along the hero's bottom edge, a launch-stage rail: eight numbered cells that anchor to the eight sections, on a translucent band with a hairline top. Below the hero, repeat those eight stages as a sticky spine in a narrow right column beside the reading column: small squares that fill ink once a stage is passed and cobalt for the current one, updated on scroll with a few lines of script. Hide the spine on narrow screens; the hero rail still works as the table of contents.
4. Sections as one reading column about 700px wide on a flat glacier-blue field, separated by hairlines, each opened by a monospace title with a small cobalt number. Items are drop rows: a solid uppercase status label on the left (Shipped with a date, or a pale Docs and Note label) and a serif title plus one or two sentences on the right. No cards, no icons, one vocabulary for the rail, the spine, and the section titles.
5. One contained overhead photograph of physical swatch chips as a plate at the top of the first item section, captioned beside it in the serif, and one strip of three square fills built only in CSS (a conic gradient, two layered radial gradients, SVG turbulence grain) whose hover and focus states shift the gradient angle, the highlight spot, or the grain opacity over 600ms. On mobile the fills scroll horizontally with snap points.
6. Long prompts or code sit behind a native disclosure element so the page never stalls on a wall of monospace.
7. End on a join block that links to a real feed or account rather than a fake form, with a small reprise of the swatch photograph.

Palette: glacier blue ground #E3EBF2, sheet white #F7FAFC for panels, navy ink #0F1B2B, cobalt #1B47C9 for the current stage, the primary button, and hover states only, steel blue #2C5C8F for italic text, hairlines #B7C7D6. Links are navy with a muted hairline underline. Spectral color appears only in the photographs and the three CSS fills, never in chrome.

Type: Martian Mono, semi-condensed, for the headline, section titles, byline, rail, labels, and code; Spectral for the deck, body, captions, and item titles, italic only for the one-line summary. Body 19px, line height 1.7, never justified.

Guardrails: no gradients on text, no glow, no dark mode, no purple-to-blue gradient chrome, radii 4 to 8px only, no left border stripes, no fake inputs or toggles, no readable text inside images, no photograph under body copy, hover and focus states on every link at about 150ms, and a prefers-reduced-motion guard that removes the fill transitions and smooth scrolling.

Build a one-page project landing page for an architecture and interiors studio, presenting a single project (an open-plan shared floor for a marketing team) the way a studio presents work to a client.

Ground: a flat sage matboard (#C9CFB9) with a faint dashed column grid running vertically behind the content. Content sits on white museum-board sheets (#F4F3EB) with a thin ink rule (1px, ink at 28% opacity), square corners, no drop shadows.

Type: Barlow Semi Condensed 600 to 700 for the headline, section titles, labels, and the view switch, set in caps with wide tracking for labels; Literata for all body text at 19px, line-height 1.7, never justified, 60 to 75 characters per line; Sometype Mono only for figure captions and the code sample.

Palette: ink #1F2622 for text, coral #B5482A, teal #22606F, violet #5F4BA8, and mustard #E3B341 as the four audience colors, white text on coral, teal, and violet, ink text on mustard. Links in a deep coral (#8F3418) with a 1px underline. Italic emphasis in a quiet brick tone (#8A4A34), never the loud coral.

Structure, top to bottom:
1. Top nav: studio name left, three text links right.
2. A breadcrumb masthead (Studio index, Projects, Shared floors, then the sheet number in a small bordered tag) instead of a boxed metadata table.
3. Hero in two columns: left, a caps kicker, a large condensed headline (max 13 characters wide), and a 22px deck; right, one photographed presentation model of the floor inside a 1px-ruled plate with a mono figure caption (Fig. 01).
4. A facts block: a six-cell definition list on a white sheet (sheet number, issue date, reading time, client, status, announced at), caps labels over serif values, cells divided by thin rules.
5. A sticky ink-black view switch: "View as" followed by five radio buttons styled as bordered caps tabs (Everyone, Marketer, Designer, Developer, Agency). The checked tab fills with that audience's color. Inputs are visually hidden but keyboard focusable, with a mustard focus ring.
6. Sections as white sheets, each keyed by a circled letter (A, B, C...) in a 46px grid bubble on a left rail with a dashed vertical gridline; on mobile the bubble sits inline above the sheet. Each sheet has a 34px section title and a small caps role line.
7. Inside sections, items separated by a 3px top rule in mid-gray, each opening with a row of solid audience tags (small caps, 3px radius), then a 26px condensed title and one or two serif paragraphs with at most two inline links.
8. The view switch logic in CSS only: body:has(#view-designer:checked) .item:not([data-for~="designer"]) sets opacity to .42; tagged items get their top rule recolored. Nothing is hidden or reordered.
9. A design-move sheet in two columns: prose plus a small mono code block on the left, a second photographed model detail with a Fig. 02 caption on the right.
10. A sources sheet as a numbered register (mono numbers in a narrow column), then a prev/index/next line and a small colophon.

Interaction: 140 to 160ms ease transitions on link underline weight, tab fills, and item opacity; hover on nav links shows a coral bottom rule; respect prefers-reduced-motion by removing transitions.

Guardrails: no gradients, no glow, no drop shadows, no pill buttons beyond the small tags, no accent left-border stripes, no fake search fields or toggles, no emoji, no readable text inside the photographs, all small labels at WCAG AA on their actual fill, images inside plates never taller than the text beside them.

Build a one-page brand-portal landing page styled as a 1970s corporate
identity standards manual, for a design studio delivering a brand system
to a client.

Ground: a near-black graphite studio table (#17191C) with faint
photographic grain. All content sits on light standard sheets: squared
warm-white paper panels (#EDEAE2), zero border radius, hairline #C9C4B6
edges, and a single tight offset shadow falling down-right, as if every
sheet were lit from the left.

Cover: dark, with a small uppercase mono kicker, an oversized grotesque
headline (Switzer 800 or a Helvetica-grade equivalent), a one-sentence
deck, and an inline edition line in mono. Beside the title, one
photographic plate framed by thin registration-mark corners. On wide
screens, a fixed contents rail on the right edge lists decimal-numbered
sections (1.0, 2.0, 3.0) as working anchor links in 11px mono.

Sections are standard sheets. Each opens with a small international-
orange tab (#E8481D) carrying its decimal number in mono, a bold title,
and a thin ruled role line. Component vocabulary: a gray chip ladder
with hex labels where exactly one chip is orange; paired DO and DON'T
verdict plates with squared label chips; mono spec captions under every
figure (Sheet 2.1, Fig. 0.1).

Type: Switzer everywhere, weights 400 to 800 doing all hierarchy work;
IBM Plex Mono 400 and 500 for tabs, captions, and labels. Body 19px
minimum, line height 1.7, 60 to 72 characters per line, never justified.

Color rule, enforced: the page is monochrome except the orange. Orange
appears only on section tabs, the reserved chip, DO labels, and link
underlines. Never tint a panel for decoration.

Guardrails: WCAG AA contrast on both the graphite ground and the paper
sheets; no purple gradients, no glow, no pill radii; hover states on
links and the rail at about 150ms ease; a prefers-reduced-motion guard;
no fake toggles or search fields; imagery is blank-label printed matter
with no readable text.

Build a one-page shop landing page for a capsule-toy (gachapon) brand
and its monthly toy series.

Ground: flat butter yellow (#F3CB4D) with coarse print grain. Content
sits on warm cream panels (#FBF4E2) with 2-3px warm-black keylines
(#2A2118). Give each major panel a second, misregistered border pass:
a red or blue outline (#D64426 / #2E6BB5) offset 4px diagonally, like
a two-color riso print slipping registration.

Type: a rounded display face (Fredoka) for the nameplate, headline,
and series titles; a plain grotesque (Hanken Grotesk) for body copy at
19px with 1.7 line height; a typewriter mono (Space Mono) for slot
labels and this insert sheet. Give the headline a solid red offset
shadow with no blur.

Masthead: an ink marquee bar carrying the brand and nav, then a coin
disc stamped with the issue or edition number in place of a metadata
table.

Hero: a centered headline and deck over a machine band, split between
an illustrated capsule-machine plate and a globe panel of CSS-drawn
two-tone capsules (a circle, straight color split at 52 percent, ink
keyline, one highlight dot). Tilt and nudge each capsule with
random(per-element, -10deg, 10deg, by 2deg) inside an @supports guard,
with hand-set nth-child tilts as the fallback.

Sections are series plates: a filled ink chip reading SERIES 01 beside
a rounded display title. Items are cream capsule cards with a mono
stock label in one corner; mark one card as the CHASE item with a
small red filled tag. Close with a prize card explaining one reusable
pattern and a collector's checklist of links with printed square
checkboxes.

Guardrails: body text at least 19px and never justified; capsule tilts
stay within 10 degrees and never touch text blocks; warm black on
cream for all small text; no neon, no glow shadows, no gradients
beyond the capsule split; any illustration shares one treatment (riso
grain, red and blue inks, the same yellow paper).

Build a one-page campaign landing page for a pledge drive, styled as a
printed union-hall broadside.

Layout: a top nav, then a masthead with a circular two-ring union stamp
(SVG text on a path around the rim, a red number in the center) beside a
three-line typewritten docket (number, date, reading time). Hero: an
all-caps woodtype slab headline at clamp(2.7rem, 7vw, 5rem) with one word
in red, a two-sentence deck, then a seven-cell week strip in a bordered
grid where exactly one cell is struck through with a hand-drawn red X and
a small label naming the exception. Below, a two-column row: lead copy
left, a framed poster image right with a hard 6px offset shadow.

Sections are numbered resolutions: a top border, "Res. 2" in the display
face in red, an uppercase letterspaced title, an adopted-date stamp
pushed right. Items are bold headlines with one or two plain sentences.
Add one cream pledge card with a label, a short vow, and a signature
rule; and a minutes panel holding this prompt in typewriter monospace.

Type: Bevan for display, Libre Franklin for body at 19px with 1.7 line
height, Courier Prime for all stamps, docket lines, and minutes. Palette:
washed chambray ground #CDD5E1, indigo ink #1F2A44, vermillion accent
#C63A22, unbleached cream #F2EAD8 for the pledge card, slate muted
#5C6A85. Add a faint print-grain noise texture and a doubled vertical
rule fixed at the left edge of the viewport, like selvage on fabric.

Guardrails: body text at least 18px, never justified; small labels meet
WCAG AA on their actual background; borders 2px solid ink, corners
square; no gradients, no glow, no pill shapes, no fake form fields; the
struck cell also states its meaning in text; hover states on links at
about 150ms; include a prefers-reduced-motion guard.

Build a product detail page for a cooperative tabletop board game, styled as tabletop packaging photographed on a game table rather than as a game UI.

Ground: deep billiard-green felt (#2C5743) with a soft top-lit vignette, fine noise grain, and a thin stitched border inset around the viewport (2px dashed cream at low opacity). All content panels are warm cream card stock (#F4EDDA to #F7F1E1) with 14px corners and hairline #E2D6B6 edges, sitting on the felt like printed components. Accents: cobalt #2E5CB8, kraft #A97C50, mustard #E0AC35, coral #C75B3D used sparingly.

Masthead: a cream box-lid band, not a meta table: brand name in a heavy slab serif, a rotated circular cobalt badge carrying the issue or edition number, and edition date set in monospace at the right.

Hero: left column holds an eyebrow label in mustard monospace, a display headline in a heavy slab (Alfa Slab One), and a two-line deck. Right column is a buy box card: product name, a 2x2 grid of spec chips (label in small caps monospace over a bold value: players, mode, sync, status), one cobalt call-to-action button, one line of fine print. Below, a full-width framed photograph band: overhead tabletop shot, one consistent commission across all images (same felt, same warm raking light, wooden meeple primaries).

Sections are rulebook steps: a cream circle chip with a large step number, a mustard monospace step label, a slab heading, and a rule that runs to the margin. Items are dealt as cream game cards in a two-column grid with a small monospace category tag, slab item title, and two sentences of body text. Include a what's-in-the-box manifest: rows pairing a monospace count (1 x) with a bold component name and one plain sentence. End with a scorepad block: monospace text on ruled cream lines (repeating linear gradient, one line per 26px).

Type: Alfa Slab One for display, Nunito Sans 400/600/800 for body at 19px with 1.7 line height, Space Mono for labels, counts, and the scorepad. Body text never sits directly on the felt below 18px cream; small labels on felt use light sage (#AECAB9) at 14px or larger.

Guardrails: body a minimum of 18px, line length 60 to 75 characters, WCAG AA contrast on every surface including sage on felt, no text baked into images, no neon or glow, no gradient text, no pill radii except genuinely circular badges, restrained hover lifts only (150ms) with a prefers-reduced-motion guard.

Build a class-booking landing page for a local ceramics studio. Archetype: local service and course hybrid with a hero, a process rail, session listings, and a short booking note. Ground the page in deep espresso brown (#251B15) with warm cream text (#F0E5D4), terracotta accents (#C9703F), and one quiet celadon (#ABBFA6) reserved for the glaze chart. Type: a soft high-contrast serif (Fraunces) for the studio name and headings, an even grotesque (Instrument Sans) for body, a mono (Chivo Mono) for stamps and labels. Masthead: no boxed metadata table; use a small square chop stamp rotated a couple of degrees beside a two-line inline byline. Hero: headline, one-sentence promise, then the signature move: one wide photograph of a single vessel shown four times as real making stages (wedged lump, centered mound, pulled cylinder, glazed vase) on one bench in one warm raking light; caption each stage under the image and link each caption to its matching page section. Mark sections as sessions with a mono kiln-card line (SESSION 01 · THE WEDGE) beside a serif subhead over a hairline rule. List classes as schedule rows: a small mono date stamp in a left column, linked title and two plain sentences right; no identical three-up card grids. Include a photographed glaze chart, a flat lay of glaze test tiles, doubling as the palette legend with a one-line caption. Guardrails: body text at least 19px with line height 1.65 and 60 to 75 character measure, WCAG AA contrast for small labels on the dark ground, no justified text, no purple gradients or glow, card radius 14px or less, no accent left borders, no fake search or filter chrome, no readable text inside generated images, hover transitions near 150ms with a prefers-reduced-motion guard.

Build a one-page museum exhibition landing page for a retrospective.

Archetype: an exhibition microsite a gallery would commission. Structure,
top to bottom: a thin top nav; a nameplate row with a large solid red
circle holding the exhibition number in a condensed display face, next to
two small monospace lines of date and visiting details; a two-column hero
with a huge uppercase condensed headline set like vinyl wall text on the
left and one framed artwork image on the right; a bordered curator's
statement panel; three content sections labeled ROOM 1, ROOM 2, ROOM 3,
each opened by a small red dot, a big room number, and a hairline rule;
one full-width image band between rooms; a dark inverted "borrow this
pattern" panel; and a visitor-information footer in small monospace type.

Wall labels: every image gets a caption block with a small red index
number, a one-line bold title, and one monospace metadata line (medium,
room, materials). No other caption styles anywhere.

Palette: warm gallery white #F5F2EA ground, ink #211D18 text, vermilion
red #C2201F reserved for dots, index numbers, and link underlines, one
pumpkin yellow #E0A310 note inside the dark panel. No gradients, no
glows, no neon.

Type: Anton for the headline and room numbers, uppercase, tight leading.
Newsreader for all body text at 19px with 1.7 line height, 60 to 75
characters per line. IBM Plex Mono only for labels and metadata.

Guardrails: body text never sits on an image; images are photographs of
physical artwork in real gallery light, never fake screenshots with
readable text; borders are 1px ink, corners square; hover states on
links only, 150ms; respect prefers-reduced-motion; meet WCAG AA
contrast for every label on its actual background.

Build a one-page mission-style landing page for a product launch,
in the visual register of a modern rocket company's website.

Page archetype: SaaS/product launch page with one download or
signup goal. Structure, in order: a minimal caps top nav; a thin
mission-clock strip (mono, uppercase, number/date/read-time
separated across the row, hairline rules above and below); a
full-bleed night-sky photographic hero with a dark gradient scrim,
bottom-left aligned content (small teal mono kicker, giant 900-
weight uppercase headline, two-sentence deck, one outlined
uppercase CTA button that inverts on hover); a four-cell telemetry
strip of giant stats with small mono labels and hairline dividers;
a dark panel holding an inline SVG star chart that draws the
product's initial as a constellation (stars as small circles,
thin steel-blue connecting lines, a faint coordinate grid); phase-
labeled content sections (mono PHASE 01 labels centered between
hairlines with small + crosshairs); one contained night photograph
plate; and a bordered prompt/spec card.

Art direction: near-black void (#0A0D12), slightly lifted panels
(#10151C), starlight text (#EAF2F8), dimmed body (#A8B6C2), and
exactly one muted nebula teal accent (#6FB4BD) for kickers, link
underlines, and chart marks. No other hue. No glow, no gradient
text, no neon: the only light is the photography and the type.
Photography is real night imagery (star fields, floodlit
structures), never 3D renders.

Type: one family doing both jobs, a humanist sans (Source Sans 3)
at 900 uppercase for display and 400 for body at 19px or larger,
with a monospace (JetBrains Mono) for clocks, labels, and stats.
Letter-spacing is wide on mono labels, tight on display caps.

Guardrails: verify WCAG AA for every text block against the
actual photo region beneath it (strengthen the scrim, not the
font); body line height at least 1.6; hover and focus states on
every real link; square corners throughout; no fake countdowns or
dead UI chrome; and a prefers-reduced-motion guard on any motion.

Build a one-page landing page for a telephone answering service,
art-directed as a 1960s Bell-era corporate brochure.

Canvas and palette: pale seafoam paper (#DEE7DE) with hairline
vertical pinstripes about 84px apart; deep petrol ink (#1B3242)
for text and panels; cream (#F4EBD3) for plates and cards; bell
blue (#2A6395) for links; persimmon (#CF512B) reserved for cords,
plugs, and NEW tags only.

Type: a heavy grotesque display in all caps with tight tracking
(Archivo 800/900) over a bookish serif body (PT Serif, 19 to 20px,
line-height 1.65 or better), with typewriter labels in Courier
Prime for every tag, caption, and form line.

Masthead: a letterhead, not a boxed grid. Bold wordmark on the
left, one typewriter meta line on the right, then a double rule
(4px bar over a 1px hairline).

Hero: two columns. Headline and serif deck on the left; on the
right, an illustration plate matted on cream inside a 1.5px ink
border with a typewriter caption underneath.

Signature component: a routing board on a petrol panel. One
labeled jack at top with a bullseye roundel, a vertical trunk
line, and rows fanning off it through quarter-circle cord
connectors that end in a plug dot. Each row: channel name in
display caps, one plain sentence on what works on that line, and
a filled status tag (NEW TODAY in deep persimmon, IN SERVICE as
an outlined label). Use this instead of an integrations logo wall.

Section markers: patch-bay labels. A small ink rectangle reading
LINE 01, LINE 02 in typewriter caps beside each section title,
with a hairline rule running to the margin.

Close with a teletype message form as the contact block: a cream
sheet with a ruled header, TO and RE fields in typewriter caps,
and the message body in Courier.

Guardrails: body text at least 19px, line-height at least 1.65,
small labels at WCAG AA contrast on their actual background, at
most one illustration style across all images (flat offset-litho
spot inks with slight misregistration and paper grain), no
readable text inside images, no gradients-on-dark, no glow.

Build a one-page landing page for a street-food truck.

Page archetype: restaurant/hospitality with two goals, find the
truck and book catering. Structure, in order: a thin top nav; a
centered now-serving ticket as the masthead (cream paper, zigzag
perforated top and bottom edges, a big script number, mono date
line); a centered hand-painted script headline with a two-sentence
deck; a full-width illustrated hero of the truck; the signature
parked-spots board, a cream panel with a charcoal header bar and
one row per location (script spot name, plain-text note, a corn-
yellow hours chip on the right, dashed rules between rows); route-
stop sections whose markers are two corn pennant triangles and a
mono STOP label on a dashed road line; a menu-board pattern card;
and a catering prompt ticket.

Art direction: a three-ink screenprint street poster. Vivid tomato
red ground (#CE2519) with a faint cream dot grid; cream menu boards
(#F4E9CE) carrying all body text in near-black charcoal (#221E1A);
corn yellow (#E8A619) for chips, pennants, and underlines; boards
get a 3px charcoal border, an 8px radius, and a hard offset shadow
in deeper red (#A81D13), never a soft glow. Illustrations are flat
three-ink screenprints whose background matches the page red so
they sit seamlessly. Cream display text on red gets a hard 2-3px
deep-red shadow offset, print style, not a blur.

Type: a juicy sign-painter script (Shrikhand) for the headline,
spot names, and board titles; a plainspoken geometric sans
(Epilogue) at 19px or larger for body; a workmanlike monospace
(Fira Mono) for tickets, labels, and hours chips.

Guardrails: body text always charcoal on cream, never cream on red;
line height at least 1.6; WCAG AA contrast for every chip and label
against its actual surface; no readable text inside illustrations;
no gradients, no glow, no fake order forms; hover and focus states
on every real link; and a prefers-reduced-motion guard on any
animation.

Build a one-page landing site for a bespoke service business (tailor, framer, joiner, or similar made-to-measure trade), art directed as a paper commission sheet pinned to wool flannel.

Ground and surfaces: page background is warm grey flannel (#CBC5B8) with a very subtle woven texture. Content sits on cream paper sheets (#F6EFDD) with thin navy borders, two small punched-hole dots at the top corners, and a soft drop shadow. Never pure white, never pure black.

Type: high-contrast fashion serif (Bodoni Moda or similar didone) for the display headline and section titles; a plain geometric sans (Albert Sans) at 19px/1.7 for body; a monospace only for small uppercase labels. Navy ink (#232E4A) for all text.

Color: one accent, measuring-tape gold (#C79A1C), used for small filled label chips, link underlines, and rules. Navy text on gold fills. No gradients, no glow.

Layout: centered woven-label masthead (brand name reversed on a navy block with an inner dashed border), a small tilted size tag under it holding the page number and date. Hero is one large cream sheet: headline and deck on the left, an illustrated plate pinned at a slight angle on the right, and a full-width strip along the sheet's foot that shows the first intake question in large italic serif with a small gold label chip. Below: a rail of four fabric-swatch cards with zigzag pinked top edges that link to page sections, then numbered sections labeled FITTING 01 through 04, each opened by a dashed basting-stitch rule.

Components: commission sheet, swatch cards, size tag, stitch rules, a cutting-ticket panel for fine print. Section markers come from the fitting sequence, not icons.

Imagery: gouache-and-chalk illustration plates of pattern pieces and workshop tools on wool, in the page palette. No legible text inside images.

Guardrails: body text at least 18px with 1.6 line height or better, WCAG AA contrast for all small text, no text baked into images, hover states on links and cards with 150ms easing, a prefers-reduced-motion guard, no neon, no dark mode, no pill-shaped buttons.

Build a one-page landing page for a diagnostic imaging clinic.

Page archetype: local medical service business with one booking
goal. Structure, in order: a thin top nav; a manila film-jacket tab
as the masthead, typed in monospace with a small red position-marker
square; a left-set slab headline with a two-sentence deck; the
signature two-plate lightbox, a luminous off-white panel holding two
films side by side under steel clips, plate 1 a soft-focus indigo
photograph, plate 2 a dark film rendering the same subject as a
labeled skeleton diagram; three content sections opened by numbered
film-series tabs (red marker square, manila SERIES tab, title on one
hairline rule); a findings-report card in manila with typed
TECHNIQUE, FINDINGS, and IMPRESSION rows; and a closing strip with
one booking button.

Art direction: a radiology reading room after hours. Charcoal room
ground (#22262B) with faint horizontal rail lines; luminous lightbox
panels (#F5F3EA); film plates in deep blue-black (#16222E) with film
blue linework (#9FC2DC); manila jackets (#D9C48F) with dark typed
labels; one radiographic red accent (#C24438) reserved for markers.
Photographs are dim tungsten still lifes with indigo film, never
bright product shots. The room stays dark so the lightboxes carry
all the light; no neon, no glow effects on UI surfaces.

Type: a rounded slab (Zilla Slab, 500 and 600) for clinic signage
headings, a plainspoken humanist sans (Karla) at 19px or larger for
body, and a typewriter monospace (Courier Prime) for jacket labels,
series tabs, and report rows.

Guardrails: body line height at least 1.6, WCAG AA contrast for
every label against its actual surface, no readable text inside
images, no fake form fields or dead toggles, hover and focus states
on every real link, small square corners (2 to 6px, no pills), and a
prefers-reduced-motion guard on the single lightbox switch-on fade.

Build a one-page app-download landing page for a mobile game app,
art directed like a claymation toy commercial.

Structure, top to bottom: a compact top nav; an app-store lockup
masthead (rounded-square app icon, app name, one-line developer
credit, one pill install link); a two-column hero with the pitch
headline and one install button on the left and a CSS phone frame
on the right holding a tall cropped illustration; a borderless
info strip of stacked value-plus-label columns; a horizontal
screenshot rail; feature sections tagged LEVEL 01, LEVEL 02,
LEVEL 03 in a pixel face; a version-notes block; a footer
information list.

The screenshot rail is the signature: one overflow-x container
with scroll-snap-type: x mandatory, cards at a fixed 3:2 aspect
ratio with scroll-snap-align: center, a caption label row above
each image, and the next card peeking in from the right edge.

Palette: deep bottle teal ground #0E3438, warm cream text and
panels #F5ECD9, bubblegum pink #F27EB2, butter yellow #F5C64F,
mint #7FD6B4. Candies carry labels, buttons, and marks; long text
stays cream on teal or dark ink on cream.

Type: a single-weight rounded display face (Lilita One) for
headlines, a plain grotesque (Rubik) at 19px with 1.7 line height
for body, a pixel face (Silkscreen) only for tiny caps labels,
and a mono (Space Mono) for the version notes.

Imagery: plasticine clay dioramas with visible fingerprints, soft
studio light, and the page palette only. No readable text inside
any image.

Guardrails: body text at least 18px with line height 1.6 or more,
WCAG AA contrast for every label against its actual background,
no neon glow, no purple-blue gradients, no dead UI controls,
hover and focus states on every real link, and a
prefers-reduced-motion guard on any animation.

Build a one-page volunteer sign-up site for a community barn-raising
build day, run by a small nonprofit.

Page archetype: nonprofit event page for a single day of volunteer
work. Sections: hero with date and place, an hour-by-hour schedule,
crew roles, what to bring, a sign-up form, footer.

Ground and palette: a pale slate-blue morning sky (#C7DAE6) that warms
to a cream haze (#EAE2CB) at the foot of the page. Ink is dark walnut
(#33261A). Cards are cream plank panels (#F5EBD3, #FBF4E3) with thin
walnut borders, 3px corner radius, and one hard offset shadow. The
single accent is spruce green (#2F6136), with harvest ochre (#C99A3B)
reserved for the schedule rail; darken ochre to #7A5716 for small text.

Type: a heavy Clarendon slab like Besley in weights 700 to 900 for the
nameplate and headings. A plainspoken sans like Public Sans at 19px,
line-height 1.7, for body. A typewriter mono like Courier Prime for
time chips, stencil labels, and the sign-up sheet.

Masthead: a slightly tilted cream plank sign with stenciled uppercase
lettering and two nail heads, never a boxed metadata table.

Structure the page as a day-of schedule spine: a fixed-width left rail
with a vertical ochre line, a square peg marker and a solid green time
chip at each stop (crew call, the raising, tool tent, finish work,
inspection, keys), and each section's content hanging off its stop.
Draw exactly one stop, the inspection, as a gated marker: double ochre
border, ochre chip. Collapse the rail to inline time chips on mobile.

Imagery: warm documentary photographs in cream plank frames with mono
captions: a timber frame being raised at sunrise, a crew passing
lumber, a flat lay of gloves and a clipboard. Same morning light and
film grain in every image. No readable text inside images, no stock
3D illustrations, no screenshots.

Guardrails: WCAG AA contrast for every label on its actual background,
body text at least 18px and never justified, square corners or 3px
radius everywhere, no pill buttons, hover states on real links at
around 150ms, respect prefers-reduced-motion, no emoji icons, and
every schedule stop must name a real hour and a real task.

Build a one-page booking site for a single-location escape room venue,
art directed as a late-1950s cut-paper film-title poster.

Page archetype: local service business booking page. Sections: marquee
header, poster hero with booking card, three room dossiers, a pricing
ladder, an FAQ or rules list, footer.

Ground and palette: one flat saturated marigold yellow ground (#F3A90D)
across the whole page. Ink black (#1C1A15) for the marquee, door plates,
and display type. Ticket cream (#F1E5C3 and #F8F0DC) for cards. One
ultramarine accent (#2B4BA6) for CTAs and highlights, darkened toward
#1D3A8F when used as small link text on the yellow. No gradients, no
neon, no drop shadows except hard 5px offset paper shadows on cards.

Type: a condensed poster face like Anton for the marquee, headline, and
room numbers, all caps. A plainspoken grotesque like Libre Franklin at
19px or larger, line-height at least 1.65, for everything readable. A
typewriter mono like Space Mono for tickets, labels, and stats.

Components: a black marquee bar with the venue name; a perforated
ticket stub (dashed rule between segments) holding date and session
info; a booking card with label-value rows and one solid CTA; room
dossier rows, each with a black door panel on the left (room number,
keyhole cutout) and a body holding one objective sentence plus labeled
stat pairs (duration, team size, price) with real units; a price ladder
table with filled-step meters mapped to a stated scale.

Imagery: flat cut-paper collage illustrations only, matte shapes with
visible cut edges on the same marigold ground: a keyhole, a row of
doors, a paper figure. No photographs, no readable text inside images,
no fake UI screenshots.

Guardrails: WCAG AA contrast for every label on its actual background,
body text never on the ink panels below 18px cream, square corners or
2px radius everywhere, hover states on every real link and button at
around 150ms, respect prefers-reduced-motion, no emoji icons, no fake
countdown timers, and every stat on the page must be a real number the
client supplied.

Build a one-page comparison landing page (X versus Y) art directed as a
vintage fight-night bill. Ground: deep warm ink (#1A1720) with a faint
CSS halftone dot screen; bill cream (#F2E8D5) for text, spotlight cream
(#FFF4DE) for display lines; corner crimson (#8E2434) and corner navy
(#22355C) as the two contenders' zone colors. Type: Ultra for the title
and bout names, Libre Caslon Text for body (19px minimum, 1.65 line
height), Oswald in caps for labels and stat rows, Courier Prime for
meta. Masthead is a centered promoter's line between double rules, not
a boxed metadata table. Hero: fat-face title, then a mirrored two-panel
split, navy incumbent left and crimson challenger right, each with a
role label, a big name, and two short spec lines, joined by a small
circular VS seal at the seam. Directly below, a tale-of-the-tape table:
attribute names down a quiet center spine, the contenders' values
facing each other, numbers with units only, winner cells in bold cream,
and a mono footer strip of overall stats. Remaining content files in as
numbered undercard bouts with double-rule dividers. Photographs are
high-contrast halftone duotones, one per zone color, in thin
double-bordered plates with mono captions. Square corners except the VS
seal, no gradients, no glow, no neon; hover states on links, one
punch-in animation on the seal, and a reduced-motion guard.

Build a one-page landing page for a moving company, art directed like a
mid-century van line as a household move for a codebase. Ground: kraft
cardboard tan (#DCC49B) with a faint vertical corrugation line pattern;
panels in warmer card (#E9D9B5) and cream manifest sheets (#F6EDD9); ink
is dark walnut (#2C1F14); accents: moving-blanket indigo (#2C3F66) and
tape red (#B03A28) used sparingly. Type: Archivo Black for display,
Archivo for body (19px minimum, 1.65 line height), Saira Stencil One for
box labels and section tags, IBM Plex Mono for meta. Masthead is a
translucent packing-tape band with stenciled box-label meta (number,
date, this-side-up). Sections open with numbered inventory lot tags on a
tape rule. Centerpiece: a two-column transfer manifest table (moves
automatically vs you carry this) on a cream sheet with ruled rows and a
mono sub-caption per row. One callout wears a rotated stenciled FRAGILE
stamp. Illustrations are flat three-ink screenprints on kraft (van,
cartons, open box), each in a bordered plate with a figure caption.
Square corners everywhere, no pills, no gradients, no glow; hover states
on links and a reduced-motion guard on the one tape-unroll animation.

Build a single-page product launch site for a developer tool, art-directed as a design-mode session laid over a paste-up mechanical.

Structure: a cool lavender pasteboard ground (#C8C2D1) with a slim ruler strip of tick marks across the top and a 13px monospace menu-bar nav. All content sits on one centered cream artboard (#F6F1E3, max width 1040px) carrying the only shadow on the page, with a small document tab on its top edge labeled with a filename.

Hero: a black grotesque headline (Archivo 900, up to 64px, ink navy #232D45) wrapped in selection chrome: a 1.5px magenta outline (#A81762), eight small white square handles, and a monospace readout tab above it showing one property change (font-size: 61 to 64). Below, a serif deck (Lora, 22px) and a full-width photographic plate with hairline magenta crop marks at its corners.

Sections are frames: each opens with a small monospace tab reading FRAME 01, FRAME 02, above a bold Archivo heading. News or feature items are cards on slightly lighter paper; hovering a card draws the magenta selection outline with two corner handles in about 150ms. Include one property-diff component: rows of three monospace cells, target, from, to, stating exact CSS deltas.

Type: Archivo 800 and 900 for display, Lora at 19px body with 1.7 line height, IBM Plex Mono for labels, readouts, and captions. Palette: pasteboard #C8C2D1, board cream #F6F1E3, ink navy #232D45, registration magenta #A81762, cool mauve #605A72 for muted labels.

Guardrails: body text at least 18px with line length 60 to 75 characters; WCAG AA contrast for every label against its rendered surface; semantic landmarks; hover and focus states on all interactive elements with 120 to 180ms easing and a prefers-reduced-motion guard; radii 2 to 4px only, no pills; one shadow total; no purple-blue gradients, no glow, no fake toolbars beyond the labeled chrome described, and no readable text inside images (abstract type bars only).

Build a landing page for a public power utility in a mid-century public-works register, in the spirit of WPA electrification posters.

Structure: a full-bleed painted night mural hero (transmission pylons marching toward a glowing powerhouse) under a deep cobalt scrim, with the headline and deck bottom-left; a perforated bill-stub masthead under the nav carrying account number, date, and read time as stacked typewriter lines; one merit-order dispatch chart (ascending labeled cost bands over a solid baseline, with an axis caption); content sections headed as rate schedules (Schedule A, B, C) with a large amber schedule letter; and a cream service-application panel for the closing form or code block.

Palette: prussian cobalt ground #1B2447, panel navy #22315E, cream text #F0E7CE, amber accent #E8A13C, vermilion #C6472E used at most twice, steel-blue muted #8D9AC4.

Type: League Spartan bold caps for display, Bitter for body text, Courier Prime for labels and stubs.

Guardrails: body text at least 19px with 1.7 line height and 60 to 75 characters per line; cream on cobalt and every label color must meet WCAG AA; squared corners (6px maximum radius); no neon glow, no gradient text, no fake toggles or search fields; murals and paintings only, with no readable text inside images; hover states around 150ms with a prefers-reduced-motion guard.

Build a one-page product landing page for an automotive wiring
harness kit, art directed as a printed workshop manual.

Structure: a thin top nav; a full-width signal-red cover band
holding a large edition number in tall condensed type, an edition
label, and a date line; a full-width headline in condensed gothic
caps, ink black with one phrase in red; a framed hero plate
containing an exploded isometric diagram of the product; directly
beneath it, a numbered figure key where every entry is a real
anchor link to a page section. Then sections labeled like manual
figures (Fig. 02, Fig. 03) with hairline rules and part-number
suffixes: product items with linked headlines, a fitment table
with runtime rows and adapter chips, a caution plate with a
labeled tab on a 2px border, and an order-ticket panel with a
dashed tear-off top border for the checkout or contact block.

Palette: cool paper white #F5F6F3, plate white #FFFFFF, ink black
#191C20, signal red #BE2A21, steel blue #34527A, gray #5B6570.
Type: League Gothic for display in caps, Source Sans 3 for body,
IBM Plex Mono for labels, captions, part numbers, and table
headers.

Illustration: two-color technical ink-line art with signal red
and steel blue spot fills and halftone shading on white, framed
in bordered plates with mono figure captions. No legible text
inside images.

Guardrails: body text at least 18px with 1.7 line height and a
line length near 70 characters; WCAG AA contrast for small
labels; square corners or radii under 8px; no glow shadows, no
gradient text, no fake search fields or toggles; hover and focus
states on links, key entries, and table rows with 150ms easing
and a prefers-reduced-motion guard.

Build a one-page landing page for a bot-verification SaaS, art directed as a mid-century port of entry.

Ground: pale rose security paper (#F0E2E2) with a faint guilloche made of two overlapping repeating radial line patterns in low-opacity mauve. Panels are warm form white (#FBF6EF) with 1.5px document-navy borders. Ink: document navy (#25304C). Accent: stamp indigo (#4F4A9F), with seal red (#A33B32) and customs green (#2F6B4E) reserved for status stamps only.

Type: Marcellus for the nameplate, headline, and section titles; Source Serif 4 for body at 19px with 1.7 line height and a 70ch measure; Share Tech Mono for labels and machine-readable strips. No italic body text.

Masthead: an inline nameplate on the left and one oval rubber-stamp badge on the right, double ring border, rotated about 5 degrees, holding the date and issue metadata. No boxed metadata table.

Hero: headline and a two-sentence deck on the left; on the right a framed illustration plate (thick navy border, form-white mat) with a monospace machine-readable strip beneath it, built from uppercase words separated by chevrons.

Centerpiece: an arrivals ledger. A form-white panel with a navy header band, hairline-divided rows, each row holding an identity in monospace, a plain-language class, a share figure, and a stamped verdict: an uppercase bordered label rotated 1 to 2 degrees, in green (VERIFIED), red (IMPERSONATED), or indigo (PENDING). Close the ledger with a monospace footer strip.

Sections open with a small bordered COUNTER 02 tab beside the section title and a hairline rule. Keep corner radii at or near zero except a 3 to 5px unevenness on stamps, no drop shadows, hover states on links and ledger rows at about 150ms, and a prefers-reduced-motion guard. Body text never sits on the guilloche without a panel behind it when contrast dips. No neon, no gradients, no readable text inside images.

Build a one-page term prospectus for a craft weaving school, art directed like a mid-century textile mill document. Ground: undyed linen #EDE2C6 with a woven texture made of two crossed hairline repeating-linear-gradients in indigo at 4 to 5 percent opacity; panels in lighter linen #F6EEDA with thin indigo rules. Palette: indigo ink #22385E for structure and body text, madder red #A2371D for emphasis and session numbers, marigold #B97F1D for small marks only. Type: Young Serif for the school name, headline, and course titles; Hanken Grotesk for body at 19px with 1.7 line height; Spline Sans Mono for uppercase labels. Components: a full-width selvedge strip under the nav built as a woven tape of indigo, madder, and marigold stripes; an inline lot-number byline instead of a boxed metadata table; a hero headline over a full-width framed woodblock-print plate; syllabus sections labeled STUDIO I, II, III with session rows separated by dashed stitch rules, each row carrying a mono session number, a serif course title, and two plain sentences; one pattern-draft card topped with a two-row checkerboard twill ornament; an enrollment panel holding the form. Guardrails: body text at least 18px at WCAG AA contrast against the textured ground, never justified; border radius 6px or less; no neon, no gradient fills as color, no glow shadows; no fake readable text inside images; hover states at about 150ms ease; include a prefers-reduced-motion guard.

Build a landing page in the style of a premium outdoor-gear product page
(direct-to-consumer PDP), selling one hero product.

Structure: top nav with a slab-serif wordmark and three mono uppercase
links. Split hero: left, a framed photographic product study with a thin
caption strip; right, a buy box card holding a small amber department
label, a big slab-serif product headline, a two-sentence pitch, a price
row (large price plus short terms), a status line with a single glowing
stock dot, and one solid amber CTA button. Clip a cream paper hang-tag
over the buy box corner, slightly rotated, with a punched hole; it holds
the issue number, date, and reading time in small mono caps.

Below: a "spec sheet" section pairing a straight-on studio product photo
with six spec rows (mono uppercase key, plain value); on desktop each row
extends a dotted amber leader line with a terminal dot toward the photo;
on mobile the leaders disappear and the list stacks. Then two-item
content sections under mono kickers ("Also in the pack", "Field manual",
"Trail reports"), a full-width framed nocturne photograph band, and a
quiet colophon.

Palette: deep spruce green ground #16211b, panel green #1c2a22, cream
ink #efe8d6, moss #a9bda6, lantern amber accent #e5a441 used only for
the CTA, kickers, leaders, and underlines. Background carries faint
cream topographic contour lines at about 4 percent opacity in one
corner. Type: Bevan for display, Familjen Grotesk for text, IBM Plex
Mono for labels. Body at least 19px, line-height 1.7, line length under
70 characters, WCAG AA contrast on every label against its rendered
surface.

Guardrails: no neon glow or purple gradients, no pill radius on cards
(6-8px max on buttons), no fake search or filter chrome, no emoji
icons, no text baked into images; hover states on links and the CTA at
about 150ms; include a prefers-reduced-motion guard.

Build a one-page landing site for a building's internal pneumatic-post
service. The archetype is a local service business page: hero, how it
works, service list, and a closing subscribe or request panel. Victorian
industrial register, gaslight rather than steampunk.

Canvas: deep oxblood brown ground #3B1D17, parchment text #F1E4CC, cream
card stock #F3E9D2 with espresso ink #2A1610, brass #C99E58 for engraved
labels, and verdigris #4CA48C as the single loud accent. Type: Rozha One
for display, Alegreya Sans for body, Courier Prime for slips and labels.
The pairing logic is a fat engraved didone against a warm humanist
grotesque, with typewriter mono reserved for metadata.

Masthead: an engraved brass nameplate with rivet corners and letterspaced
caps, plus a manila routing tag rotated about two degrees carrying the
issue number, date, and reading time as typewriter lines. No boxed
metadata grids.

Structure: one continuous verdigris route line runs down the left gutter
of the content column. Every section header docks onto it as a station:
a small brass ring, a mono station number, and a display-face name.
Content items are capsule cards on cream stock, each opened by a routing
slip of labeled rows reading FROM, TO, CONTENTS above a hairline rule.
Never use dot-separator chains for metadata. Include one darker
house-rules band with a wide photograph on top and a three-column list of
plain-language service rules beneath it.

Imagery: editorial still-life photographs of brass pneumatic hardware in
warm gaslight on oxblood walls, subtle film grain, generous negative
space, no legible text inside any image.

Guardrails: body text at least 19px with 1.7 line height and a 60 to 75
character measure, WCAG AA contrast for every label against its actual
background, visible hover and focus states on real links at around 150ms,
a prefers-reduced-motion guard, no neon, no gradient text, no glow, no
fake UI chrome, and no accent left-border stripes on cards.

Build a one-page landing site for an independent optician's practice,
art directed like a 19th century optical catalog set in modern web type.

Ground and ink: pale celadon paper (#D6DFC9), deep green-black ink
(#1C2A20), cream card stock (#F4F1E1) for panels, brass (#A9791C) as the
only accent. Reserve one red (#A93325) and one green (#2F6B4A) for a
single duochrome test strip and use them nowhere else.

Type: Fraunces for display and italic flourishes, Schibsted Grotesk for
body at 19px with 1.7 line height, Spline Sans Mono for small uppercase
labels. The contrast logic: a soft high-contrast serif over a plainspoken
grotesque, brass italics for quiet emphasis.

Layout: split hero with the headline, a short deck, and one booking
button on the left, and a framed etched-instrument illustration on the
right, matted inside a thin double border like a printed plate. Directly
under the hero, a full-width cream band holding a Snellen eye chart
built from live text: six centered rows in steeply decreasing type
sizes, mono acuity fractions (20/200 down to 20/30) on the rails, and a
half-red half-green duochrome strip at the bottom.

Sections read as exam steps: a mono step number (STEP 01, STEP 02), a
serif section title, and a small role note on the right, divided by
solid ink rules. Somewhere in the page, present the key specs as a
prescription card: a cream panel with a large Rx glyph, mono labels,
dotted ruled rows, and an italic signature line at the bottom right.

Guardrails: body text at least 18px, line height 1.6 or more, AA
contrast for every label on its actual background, no text baked into
images, no neon, no glow, no gradient text, radii at 12px or below.
Hover states on links and buttons with about 150ms ease, one blur-to-
sharp entrance on the chart letters, and a prefers-reduced-motion guard
that disables all of it.

Build a one-page landing site for an intermodal freight line, treated as a
booking page a working shipping client would actually use.

Structure: a slim navy operations bar with the brand left and three links
right. A stencil-marking masthead: three short lines set in a stencil face,
like the owner code painted on a container wall, never a boxed metadata
table. A split hero: a tall condensed uppercase headline on the left, a
framed documentary photo card with a small caption plate on the right. One
flagship bulletin card with an angled stamp label. Then a cargo manifest
that carries the real content: a navy header band, stencil bay plates as
section dividers, and one row per offer with a stencil lot number, a bold
linked name, and one plain sentence. Close with a dark navy stowage band
for long-form documents and a wide dusk photograph before the footer.

Palette: pale fog gray page (#DCE0E1), hull navy ink (#16232E), white deck
cards (#F6F7F6), harbor steel labels (#5E6E79), and one signal magenta
accent (#C22459) used the way one pink container sits in a navy stack: a
single stamp plate, lot numbers on hover, and link underlines. Nothing
else gets the magenta.

Type: a tall condensed poster face (Anton) for headlines, a stencil face
(Saira Stencil One) only for cargo codes and bay plates, an even grotesque
(Archivo) at 19px or larger with line-height 1.65 or more for body text,
and a mono face for captions and document blocks.

Imagery: documentary port photography under overcast light, cool and
muted, at most one magenta object per frame. Keep every image inside a
framed card with a caption plate. No legible text inside images.

Guardrails: line length 60 to 75 characters, WCAG AA contrast for every
label against its real background, corner radii under 10px, no glows, no
gradients, no fake search fields or toggles, hover states on every real
link at about 150ms, and a prefers-reduced-motion guard.

Build a one-page product launch site for a developer platform, styled as a
retro operating-system desktop. Page archetype: SaaS launch landing page
whose sections are desktop windows.

Ground: a full-bleed dark dithered wallpaper (deep graphite blue, #262B33)
with a coarse pixel-cloud texture; never set text directly on it. A fixed
menu bar runs across the top: platinum strip, 2px ink rule below, brand at
left in a pixel display face, real nav links as menu words, issue or version
metadata at the right end.

Every section is a platinum window (#EDE9DE) with a 2px ink border (#17181C),
a hard 6px offset shadow, and a title bar of thin horizontal pinstripes with
the section name centered in the pixel face on a platinum patch. Decorative
close and zoom boxes are aria-hidden. Stagger window widths and left/right
offsets down the page so the stack reads as a cascade, not a card list.

Add a row of desktop icons on the wallpaper near the top: small pixel-art
SVG glyphs on platinum tiles with mono labels, each a real anchor link to a
section. On hover, the label inverts to selection blue (#2E5BE0) like a
selected file.

Type: a pixel display face (Pixelify Sans) for the headline, window titles,
and menu bar; a plain humanist sans (Instrument Sans) at 19px with 1.7 line
height for all body text; a mono (Space Mono) for labels and metadata.
Selection blue (#2E5BE0) is the only loud accent: links, buttons, hovers.

Hero: the largest window, holding a two-line pixel headline, a two-sentence
deck, one bordered platinum button with a double keyline (the default-button
ring), and a dithered bitmap illustration in the manner of an old system
welcome splash.

Guardrails: body at least 18px at 1.6 line height or more; ink on platinum
for all small text; text never sits on the wallpaper outside a window or a
solid label; no neon, gradients, or glow; corner radius 0 to 8px; real hover
and focus states around 150ms with a prefers-reduced-motion guard; no fake
toggles, search fields, or dead widgets; no legible text inside generated
images.

Build a one-page landing site for a local service business, styled as a
mid-century electric-utility advertisement. Page archetype: service-provider
landing with a marquee hero, a three-step hook-up band, a service coverage
table, and one outage notice panel.

Ground the page in a flat turquoise field (#2F9C92), no texture.
All running text sits on warm cream panels (#F7EFD9)
in deep petrol ink (#0C302E). Accents: tangerine (#E4592A) for spark marks,
warning bands, and labels; mustard (#D9A62B) for small highlights.

Type: a heavy slab display face (Alfa Slab One) for the headline and section
titles, a plain grotesque (Work Sans) at 19px with 1.7 line height for body,
and a 1950s brush script (Yellowtail) for one short flourish line above the
headline. Never set body text in the script.

Hero: one large cream poster panel with a thick petrol keyline border and a
small solid offset shadow. Inside: the script flourish, a two-line slab
headline, a two-sentence deck, one solid petrol button with cream text, and
a flat screenprint-style illustration of a plug reaching a wall outlet.

Sections are service bulletins: a small reversed caps label (SERVICE
BULLETIN NO. 2) above a slab title. Include a numbered three-step hook-up
band (three cream cards, big slab numerals, one sentence each), a coverage
table listing each service area with a plain status word (included, preview,
trials) and one honest note per row, and one outage notice panel with a
diagonal-striped warning band across its top edge.

Guardrails: body text at least 18px with line height 1.6 or more; petrol on
cream for all small text; no text over illustrations; no neon, gradients, or
glow; corner radius 6 to 10px only; real hover states on links and buttons
at about 150ms with a prefers-reduced-motion guard; no fake search fields or
toggles; no legible text inside generated images.

Build a one-page landing page for a museum special exhibition, art directed as a salon-wall gallery for a show about forgeries.

Canvas: deep plum salon wall (#38222F) with faint tone-on-tone vertical silk stripes, warm ivory text (#F1E9D7), cream label stock (#F7F1E1) carrying near-black ink (#2A1B24), gilt brass accent (#C9973F, lightened to #D6A855 for small caps on the wall), dusty mauve support text (#B49AAB), bronze (#7A5B2A) for italic and links on cream.

Type: Marcellus for the exhibition title and room headings, caps with wide letterspacing; EB Garamond for body at 20px with 1.7 line height; Cutive Mono for catalogue numbers and typed plate captions. The contrast logic: inscriptional Roman capitals over a bookish Garamond.

Structure: a running head with the museum name and two nav links; a centered on-view line in brass small caps (exhibition number, dates, viewing time) between two hairline picture-rail rules; a hero with the exhibition title and a short introduction left, and one gilt-framed artwork right, hung from a visible brass cord, with a wall-label caption beneath it; an introduction wall-text panel on cream; numbered gallery rooms as sections, each opened by a small cream plaque (ROOM I, ROOM II) beside the room title over a hairline rule; exhibits as cream wall-label cards holding a mono catalogue number, a linked title, a one-line provenance (source, date) set small and muted, then a caption of at most two sentences; one dark examination moment, two photographic plates on charcoal mats with typed captions; a centered visitor-information colophon.

Rules: square corners, 4px radius maximum on cards. Brass is for rules, plaques, small caps, and underlines, never body text on cream. Body text stays at least 18px and WCAG AA against its actual surface. No gradients, no glow, no neon, no fake search or filter chrome, no dot-separator meta strips: provenance reads as a comma-separated line. Hovering a framed plate lifts it 2px with a deeper shadow at 150ms ease, guarded by prefers-reduced-motion. Images are photographs of framed paintings or conservation plates, never screenshots with readable text.

Build a one-page landing page for a local service business, art directed
as a mid-century classified telephone directory page.

Canvas: chrome-yellow paper (#F3C024), warm black ink (#201708), cream
card stock (#FBF2D7), one vermillion accent (#B23A20), dark olive small
print (#57430C). Type: Oswald in condensed uppercase for display, Libre
Franklin at 19px/1.7 for body, Courier Prime for coupon and fine print.

Structure: a black running-head bar with the business name left and nav
right; below it one thin justified line with page number and date; a hero
styled as a boxed display listing with a double ink border, headline and
deck left, a one-color ink illustration right; a stat or price table as
dot-leader rows, labels left and bold condensed figures right; sections
opened by reversed black category bars, each with a small red tab-letter
square at its end; supporting items as bordered cream listing cards in a
two-up grid; one offer inside a coupon block with a dashed clipping
border; a black business-card colophon.

Rules: square corners, radius 2px max. Red only for large labels, rules,
and tab squares, never body text. Illustrations are single-ink prints
blended onto the yellow with multiply, no photographs. Body text stays
near-black on yellow or cream at WCAG AA. No gradients, no glow, no drop
shadows except a hard 4px ink offset on card hover (150ms ease, with a
prefers-reduced-motion guard). No fake readable text in images. Include
a plain-HTML identity block near the top naming the business, trade,
city, and service area, backed by LocalBusiness JSON-LD.

Build a one-page restaurant landing page for a corner bistro, art
directed like a hand-run French chalkboard menu.

Canvas: a deep blackboard-green wall (#1B2B24) holding warm cream
menu cards (#F3ECD9) with green-black ink (#20291F), one bistro red
accent (#C03B2D), and butter-yellow chalk details (#E8C158). No
gradients, no glow, no neon, no purple.

Type: a fat-face didone for signage (Abril Fatface, hero and board
titles only), a warm grotesque for reading (Karla, 19px minimum,
1.65 line height, never justified), and a typewriter mono (Courier
Prime) for the kitchen paperwork: tickets, the recipe card, the
guest check.

Structure: a slim nav over a red and cream scalloped awning drawn
as an SVG stripe. Centered hero on the green wall: a framed chalk
emblem illustration, three stacked small-caps serving lines, a
painted cream headline, a two sentence deck. Below, cream menu
cards: a lead plat-du-jour card with a green 86-board inset listing
what the kitchen dropped, struck through in red; then a two column
course spread whose items are leader-dot rows, dish name left,
dotted filler, small red source tag right, description underneath.
Close with a recipe card holding a mono block, a narrow guest check
for the closing note, and a chalkboard colophon.

Details that sell it: course headers as centered small caps flanked
by tiny red diamonds and hairline rules, a single hairline frame
inside each menu card, chalk-style illustrations on green slate
with no readable text in them, dotted leaders in a muted olive,
hover states on real links only at 150ms, and a
prefers-reduced-motion guard. Keep body text at AA contrast on
cream, one inline link per paragraph, no red text on the green
wall, and no fake reservation forms.

Build a one-page product detail page (PDP) for a desktop hardware
controller, art directed like a boutique industrial brand.

Canvas: cool brushed-aluminum gray (#D8DAD9) with near-black ink
(#17181A), white spec panels (#F4F5F4), steel-gray labels (#5F656B),
and a single signal-yellow accent (#EFB40E). No gradients, no glow,
no neon, no purple.

Type: a compressed poster grotesque for display (Anton, uppercase),
an engineering sans for body (IBM Plex Sans, 19px minimum, 1.65 line
height, never justified), and a plain Helvetica-flavored mono
(Fragment Mono) for etched labels and spec rows in uppercase with
wide tracking.

Structure: a thin black faceplate band as the top nav. Hero grid:
left, a small etched nameplate of three stacked label rows, a large
condensed uppercase headline, a two-sentence deck; right, a white
"in the box" contents card listing six numbered sections. Below,
a full-width keyline product photograph on a seamless silver ground
with numbered circular markers overlaid on real features; each
marker is an anchor link to its matching section. Sections open
with a black channel-strip header: a yellow index square plus an
uppercase mono label. Close with a black colophon band in etched
mono text.

Details that sell it: hairline steel rules, one tight shadow under
the product stage only, 34px yellow circle markers with black mono
numerals, hover states that scale markers slightly at 150ms, and a
prefers-reduced-motion guard. Keep body text at AA contrast on the
silver ground, one inline link per paragraph, no fake toggles or
search fields, and no readable text inside the photograph.

Build a one-page membership landing page for a coworking space, art directed
as a mid-century modern brochure. The twist: the space is marketed to teams
whose newest workers are software agents, so the office is shown running at
night with no one in the chairs.

Canvas and palette: saturated cobalt blue page ground (#26429B), warm cream
content panels (#F5EEDB), dark navy ink text (#1C2340), persimmon orange
accents (#D95B2B), mustard yellow secondary accents (#DFA23C). No gradients,
no glow, no purple.

Structure, top to bottom: a cream top bar with the wordmark left and two nav
links right. A cobalt hero with a small cream door plaque (three stacked
monospace lines: number, date, reading time), a large uppercase geometric
display headline, a two-sentence serif deck, and a wide framed illustration
in a cream mat. Then the signature module: a keyed floor plan drawn as an
inline SVG on a cream panel. Eight rooms inside one heavy outline, each room
holding a small persimmon key square with a number and an uppercase room
name; every room anchor-links to a page section, with a monospace legend of
the same links underneath for small screens. Each following section is a
cream panel headed by its persimmon key number, an uppercase room name, and
a small monospace tag on the right. Close with a dark ink colophon panel.

Type: a Futura-style geometric sans (Jost) in caps for display, labels, and
room names; a warm text serif (Lora) at 19px or larger with 1.7 line height
for body; a monospace (IBM Plex Mono) for plaques, tags, and legends only.

Imagery: flat gouache illustrations of mid-century office interiors at
night, cobalt walls, cream furniture, mustard and persimmon accents, screens
showing only abstract color bars. No readable text inside images, no people.

Guardrails: body text never below 18px, line length 60 to 75 characters,
WCAG AA contrast on every label against its actual background, radii 12px or
less on panels, hover and focus states on all links at 150ms, a
prefers-reduced-motion guard, no fake UI controls, no emoji, no neon.

Build a landing page for an insurance company as one static page, desktop and mobile.

Art direction: a mid-century insurance policy. The entire page is one cream certificate sheet (#F1E7CB) centered on a deep oxblood ground (#421A1E) filled with a faint guilloche pattern of interlaced hairline circles at about 5 percent opacity. Give the sheet a thin dark edge and a 3px double-rule inner border, like an engraved certificate. Ink is green-black (#26332B), the accent is banknote green (#2E5B44), labels are old gold (#7A5B20), and one stamp red (#7E2A2C) is reserved for the single most important number on the page. Corners stay square everywhere.

Type: Playfair Display for the nameplate, headline, and item titles; Crimson Pro for body at 20px with line-height 1.7; Courier Prime for small uppercase labels, letterspaced.

Structure, top to bottom: a thin bar on the oxblood ground with the company name left and two nav links right. On the sheet, a centered certificate masthead: a small engraved flourish, the company name in wide-tracked Playfair capitals, and one mono line underneath carrying policy number and date. A centered hero headline with a two-sentence deck, then one engraved illustration in a hairline double frame with a mono caption; commission it as a banknote-style vignette (an umbrella, a shield, a lighthouse) in green-black ink on cream, no readable text in the image. Then a declarations block: a full-width two-column schedule table, mono field labels left, plain-set values right, hairline rules between rows, the key figure large in stamp red. Then coverage sections labeled Coverage A, B, C, each a mono kicker, a Playfair heading, and endorsement rows numbered End. no. 01 onward in a narrow left label column. Add one centered italic pullquote in green. Close with a fine-print field note beside a circular guilloche seal, a numbered schedule of forms as the source list, and a colophon in cream text on the oxblood ground.

Guardrails: body text at least 19px, never justified, line length near 70 characters; small gold and green labels must hold WCAG AA contrast on cream; no glow, gradients, or drop shadows beyond one flat sheet edge; no fake form fields or dead toggles; hover states on real links only, about 150ms, with a prefers-reduced-motion guard.

Build a single-property real estate listing page as one static page, desktop and mobile.

Structure, top to bottom: a thin top bar with the site name left and two nav links right. An inline MLS-style masthead line in small monospace caps: listing number, date, tour length, status. A photo gallery: one wide exterior hero at about two thirds width with two stacked supporting photos beside it (a sunlit interior, a detail still life); on mobile the hero goes full width above a two-up thumbnail row. Pin a small brick-red corner flag reading OPEN HOUSE to the hero's top left edge. Below the gallery, the address block: a large serif headline, a two-sentence deck, and a one-line price row in monospace caps. Then a four-cell home-facts strip on a warm white panel, each cell a large serif numeral over a small monospace label, hairline rules between cells. Then body sections, each opened by a small monospace kicker and a serif heading with a hairline rule: Property details, Inspection report, The neighborhood, Monthly cost, Schedule a tour. Items are a headline plus one or two plain sentences with one inline link. Monthly cost is a rent-versus-own comparison table on a panel: row labels left, two value columns, a one-line assumptions note underneath, and the column you are not selling keeps its genuine advantages. Close with a short fine-print disclosure, previous and next links, and a colophon on a dark spruce panel.

Palette: sage lawn ground #D9E2D1, warm white panels #FAF6EB, spruce ink #22382B, brick red #A93D28 reserved for the flag, links, and table emphasis, brass #8A672B for large numerals and small labels on dark only. Type: Fraunces for headlines and numerals, Instrument Sans for body at 19px with 1.7 line height, Space Mono for kickers, facts labels, and the price row. Line length 60 to 75 characters, never justified.

Guardrails: photography carries one consistent treatment (morning light, gentle film grain) with no readable text inside images. No purple gradients, no glow, no pill radius: 14px on panels, 10px on photos, 4px on tags. Hover states on links, photos, and the nav at about 150ms with a prefers-reduced-motion guard. Small labels must hold WCAG AA contrast on their actual background.

Build a race-day regatta event landing page, dark and print-flavored. Ground the page in deep harbor navy (#10233D) with sail cream text (#F1E7CF), a lighter navy panel tone (#1A3150), signal red (#D9432F), marigold (#E9A63B), and fog blue (#93B4CF). Set display type in a condensed grotesque like Big Shoulders Display (700/800), uppercase, and body in Public Sans at 19px with 1.7 line height; mono labels in JetBrains Mono, uppercase, letterspaced. Open with a hairline-ruled top nav, a decorative SVG bunting line of small geometric signal flags, then a one-line notice-of-race masthead between hairlines carrying the event number, date, and reading time as a plain sentence, never a boxed metadata grid. Hero: a two-line condensed headline, a two-sentence deck, one solid signal-red button, and a wide cream-framed illustration band styled as a screenprint program cover with a caption strip. Declare a visible course key: three small hand-drawn SVG signal flags (red swallowtail, marigold square, fog-blue square with navy center) each mapped to one section, and use only those declared colors for every accent, label, and marker on the page. Run the content as full-width division bands: each opens with its signal flag and a mono race label, followed by linked entries separated by hairlines, with the flag lifting a few pixels on band hover (about 170ms ease). Include one cream-framed course-chart diagram plate with a caption. Close with a three-cell previous/index/next footer and a ship's-log colophon. Keep small text at WCAG AA contrast on the navy ground, reserve the red for large type and graphic marks, no neon glow, no purple-blue gradients, no fake readable text inside images, no emoji icons, and include a prefers-reduced-motion guard.

Build a one-page landing site for a technical staffing agency called The Staffing Desk. Treat the service as matching specialist teams to one complex assignment. Use an expressive agency-poster treatment over a real landing-page structure: an above-fold open-role statement on the left and a contained recruitment-roster image on the right; a narrow candidate rail beside a wide assignment column; section markers styled as numbered role codes; assignment briefs, skills-match rows, an availability block, and a placement receipt.

Use saturated coral #E95C43 as the outer wall color, inky navy #17263A for rules and type, warm paper #F6EDDA for reading surfaces, sea green #277F70 for confirmed states, and mustard #F0BE3F for one strong secondary field. Pair Archivo Black display type with Source Sans 3 body, Fraunces italic for one editorial pull line, and IBM Plex Mono for role labels. Build one tactile cut-paper roster tableau with blank label bars and abstract profile geometry; never put fake readable text inside the image.

Keep body copy at 19px with at least 1.65 line height and a 60–75 character measure. Use square paper dossiers, hard rules, slight physical offsets, and only one deliberate shadow. Make real links respond on hover and focus, and respect reduced motion. No neon, gradients, glowing UI, pill collections, generic three-card feature rows, fake search, fake toggles, accent side stripes, or stretched empty panels. Maintain WCAG AA contrast at both desktop and 390px mobile widths.

Build a one page landing site for a freelance editorial studio called
The Line Edit, styled as a marked-up typescript manuscript on a cool
desk.

Layout: a typewritten title block masthead (studio name, date, one
service line), then a hero headline shown as a live correction: one
verbose line struck through in red pencil, a red caret, and the tight
replacement line set large in a high-contrast editorial serif. Below
it, bond-white sheet panels on a pale gray desk ground, each sheet
ruled with a single vertical non-photo blue margin line. The main
column is 66 characters wide with a 200 pixel annotation margin on
the right carrying red pass stamps (FIRST PASS, LINE EDIT, FACT
CHECK, PROOF) and one short italic working note per section. Include
an edit ledger of labeled rows (REMOVED, KEPT, ADDED, RESULT), a
services section, and a dark graphite rate-card footer.

Palette: bond white #FBFBF9 sheets on desk gray #E9EAE8, graphite ink
#26282B, vermilion red pencil #C6371F as the only loud accent,
non-photo blue #B5CEDE for rules and quiet washes, slate blue #46687F
for italic notes.

Type: Newsreader for display with true italics, Hanken Grotesk for
body text at 19px with 1.68 line height, Courier Prime for
typewritten labels, stamps, captions, and the ledger.

Guardrails: body text at least 18px, line length 60 to 75 characters,
WCAG AA contrast for small labels, no gradients, no glow, no fake
readable text in images, strikethrough used once as the hero device,
and the annotation margin folds above its section below 900px.

Build a one-page landing site for a motion production studio, art directed as a night screening room. Ground the page in warm near-black (#17100C) with cream text (#F4EAD9), tungsten amber (#E3A93E) for links and marks, curtain crimson (#A93327) reserved for thin rules, and warm tan (#A08D7B) for quiet labels. Pair a high-contrast didone display face (Bodoni Moda) with a plain grotesque body (Archivo) at 19px and 1.7 line height, plus a monospace (Space Mono) for timecodes and captions.

Hero: a full-bleed photographic still of a dark film set with warm practical lights, behind a centered title card: a letterspaced monospace kicker, an oversized didone film title, a two-sentence logline, and a stacked three-line credit block for version, date, and running time. Never a boxed metadata grid. Keep the type readable with a two-layer scrim: tint the photo with the ground color at about 35 percent, then run a vertical gradient from 85 percent opacity behind the text down to clear, and verify WCAG AA over the busiest part of the image at desktop and 390px widths.

Run sections as numbered reels. Each opens with a ruled header row: reel number left in amber monospace, section name centered in letterspaced caps, timecode right. List work as filmography rows: a didone title, one or two plain sentences, an inline amber link, thin rules between rows. Include one contained photographic plate with a monospace caption, one italic didone pullquote between crimson rules, and an end-credit colophon of centered lines on the bare ground.

No neon glow, no purple gradients, no glass cards, no pill radii, no fake player chrome, no readable text inside images. Hover states on links near 150ms with a prefers-reduced-motion guard.

Build a one page new hire orientation landing page styled as a
mid-century corporate employee handbook, in the register of a 1960s
annual report.

Structure. A full bleed cover hero on a deep pine green field: a small
typewriter kicker, an oversized geometric sans headline in cream with
one phrase in mustard, a two sentence serif deck, and a framed
illustration plate on the right tilted about one degree. Under the
headline, set the masthead as a rubber stamp: three stacked typewriter
lines inside a double border, rotated slightly. Below the hero, a
contents rail of cream folder tab chips that anchor link to sections.

Sections are cream paper panels that open with index tab dividers: the
section heading sits in a protruding folder tab whose fill rotates
mustard, vermillion, and ink green. Inside, run items as a day one
agenda: a monospace time label beside each item headline and one or two
sentences. Include one small access table (three rows, two subject
columns) with a mustard caption band, and close with a typed
interoffice memo block holding a signature rule.

Type. League Spartan 700 to 800 for the headline, tabs, and item heads.
Source Serif 4 for body at 19px, line height 1.7, measure about 66
characters. Courier Prime for stamps, time labels, captions, and the
memo. Palette: deep pine green #124A3E ground, cream #F2E6C4 panels,
dark green ink #16302A text, vermillion #DD4326 and mustard #E5A31D
reserved for tabs, underlines, and the table caption.

Guardrails. Never justify text. Keep body text at or above 18px and
WCAG AA contrast against its actual background. No gradients, glow, or
neon. No fake toggles or search fields. Corner radius 11px or less, and
only on folder tab tops. Illustrations are flat cut paper collage with
visible paper grain and no readable text. Hover states on links and tab
chips near 150ms, with a prefers-reduced-motion guard.

Build a one-page landing site for a 24-hour property maintenance company, art directed as a 1950s American trade catalog. Ground the page in flat chambray blue (#C7D6E3) with cream paper panels (#F4EEDE), deep navy ink (#22354E), and safety orange (#CE5B1F) reserved for one stripe, stamps, and hover states. Pair a Clarendon-class slab display face (Besley) with a Franklin Gothic body (Libre Franklin) at 19px and 1.7 line height minimum, plus a typewriter face (Courier Prime) for labels. The masthead is a tilted cream work-order slip with three typewritten labeled rows and dotted leaders, never a boxed metadata grid. Split the hero: slab headline left, right a cream-matted flat gouache illustration of a navy service van with an orange stripe (commission matte spot art, no photos, no legible text inside images). Mark each section with a navy job-ticket patch: a small typewritten order number over a slab title. Build a four-step how-a-call-out-works strip on a navy band and make step three, the customer approval, the visual hero: a cream slip rotated one degree with an orange circular APPROVED stamp, while the other steps stay flat navy with thin cream rules. List services as a job sheet with square navy bullets and dotted rules. Keep corner radii at 4px or less, at most one hard offset shadow per surface, real hover and focus states at 150ms, a prefers-reduced-motion guard, and WCAG AA contrast on every label including type over the navy band.

Build a one-page pricing page for a product called [NAME] with three plans: [LITE], [STANDARD], [ENTERPRISE].

Art direction: warm, premium, and calm, not a generic dev-tool table. Ground the page in warm peach-ivory (#FBF1E7) with white cards (#FFFFFF), deep plum ink (#2C2230), muted plum for secondary text (#6C5F68), one coral accent (#E0492F) for CTAs and the recommended badge, and a deep teal (#17706A) for the feature checkmarks. Hairline borders (#E7D8C8), square-ish corners (0 to 2px), one soft shadow only on card hover.

Type: Gambetta (600) for the headline, plan names, and big prices; Figtree for body at 19px and 1.65 line height; Space Mono for the eyebrow, prices-per-unit, badges, and the comparison table.

Layout, top to bottom:
1. Top bar: wordmark and two links.
2. Split hero: a mono eyebrow, a serif headline, a two-sentence deck, and a small non-interactive billing toggle on the left; a framed premium still-life photograph on the right (warm, abstract, no text).
3. Three plan cards in a row. Anchor the middle card: fill it with the dark plum, give it a coral "Recommended" badge and a touch more padding. Each card has a plan name, a one-line "who it's for," a large per-unit price with a mono unit label, a small secondary price line, a plus-marked feature list, and a full-width CTA (solid coral on the anchored card, outlined on the others). The third card can be a "Contact" tier with no numeric price.
4. A horizontally scrollable comparison matrix: row labels down the left, one column per plan, the recommended column tinted. Mono numerals.
5. A three-card "also shipping" row on a tinted band for supporting items.

Readability guardrails: body at least 18px, WCAG AA contrast for coral and teal on their actual surfaces and for light text on the dark anchored card, real hover and focus states on cards, links, and CTAs (150ms ease), a reduced-motion media query, and no fake interactive toggles that imply state they do not have. No gradients, no glow, no three identical feature icons, no stock 3D blobs.

Build a one-page security advisory / trust-center page for a product called [NAME] disclosing [N] findings.

Art direction: a dark security console. Ground near-black blue (#101418) with slightly raised panels (#161C22), off-white text (#E6ECF0), muted blue-grey for secondary text (#9FB0BC), 1px slate borders (#28323B). Severity is the ONLY color: warm red (#E8623A) critical, amber (#E0A73C) high, cool blue (#4CA5C4) informational, green (#5FB98C) for resolved. No gradients, no glow, square corners.

Type: Space Grotesk (600/700) for the headline and section titles; IBM Plex Sans for body at 19px, 1.65 line height; IBM Plex Mono for the advisory ID, metadata, severity chips, version strings, and table labels.

Layout, top to bottom:
1. Top bar: wordmark and two links.
2. Advisory header: a bordered status banner (colored dot plus a short status line), a mono metadata row (advisory ID, issue or version, published date, read time), a large headline, and a one-paragraph deck.
3. A single framed figure: one studio photograph the whole advisory is about, with a mono caption row.
4. Summary table: columns for finding (name plus a mono sub-line), vendor, a bordered severity chip, and a fixed-in status. Row hover only. Make it horizontally scrollable and stack to cards under 760px.
5. Two or more detail sections, alternating panel backgrounds: a mono sub-label, a title, two short paragraphs, and a bordered impact row (vector, impact, fix) in mono.
6. A numbered remediation list using leading-zero counters.

Readability guardrails: body at least 18px, WCAG AA contrast for every severity color and mono label on the dark ground, descriptive link text, hover states on rows and links (150ms ease), a reduced-motion media query. No fake terminal text in the image, no neon glow, no matrix-rain cliches; the palette stays disciplined and the severity key stays honest.

Build a one-page tasting-menu site for a restaurant called [NAME], serving a fixed menu that changes [WEEKLY/SEASONALLY].

Art direction: celadon and porcelain. Ground the page in pale celadon green (#DEE6DA), with porcelain white panels (#FBFAF3), deep green-charcoal ink (#1F2B24), muted sage for captions (#7E9284), and aged brass (#8C6A1D) reserved for course labels, ornament rules, and the price column. Matte and calm: no gradients, no shadows, 1px hairline borders, square corners.

Type: Cormorant Garamond (500/600 and italic) for the restaurant name, dish names, and headings; Alegreya Sans for descriptions at 18px or larger with 1.6 line height; Red Hat Mono for course labels, metadata, and every price. Centered, ceremonial hierarchy: the serif does the romance, the mono does the bookkeeping.

Layout, top to bottom, one centered column around 880px:
1. Porcelain top bar: restaurant wordmark and two links.
2. Menu cover: a small-caps mono service line (service name, date), one thin double rule, the restaurant name in large serif, a two-sentence introduction, and a bordered mono meta strip (menu type, course count, seating time).
3. A framed photograph plate: overhead still life of empty porcelain on linen, celadon palette, with a centered mono caption.
4. Signature dish panel on porcelain: centered course label, dish name in serif, two-sentence description, and a bordered three-cell figure row (one number per cell with a mono label).
5. Courses: each course opens with a centered mono label inside a ruled divider, then dishes as rows: dish name in serif, a one-or-two-sentence description capped near 56 characters per line, a small pairing line, and a right-set brass mono price. One number per dish, nothing else in that column.
6. Close with a second photograph plate and a centered field-note card.

Readability guardrails: descriptions at 18px minimum, WCAG AA contrast for sage and brass text on their actual surfaces, no fake readable text inside photographs, descriptive link text, hover states on rows and links (150ms ease), and a reduced-motion media query. No script fonts, no parchment textures, no clip-art cutlery.

Build a one-page museum exhibition site for a show called [EXHIBITION TITLE], running [DATES].

Art direction: a dim gallery after hours. Matte charcoal-plum ground (#18141F) with slightly lighter panels (#221C2B), alabaster text (#F1EAE0), warm stone grey for captions (#A79E92), and one flat cobalt accent (#4A5CD8) for the banner spine, rules, and annotations. Matte surfaces only: no gradients, no glow, no drop shadows. Corners square, borders 1px.

Type: Instrument Serif (regular and italic, single weight) for the poster title and all headings at generous sizes; Albert Sans for body at 19px with 1.65 line height; Courier Prime for accession numbers, wall-label captions, and metadata. Headings are never bold: scale and the serif do the work.

Layout, top to bottom:
1. Thin top bar: wordmark and two links, 1px rule below.
2. Poster hero: a solid cobalt vertical banner spine down the left edge carrying the issue or event metadata in vertical mono type; beside it, a mono kicker, the exhibition title in large serif, a two-line deck, and a dates row with a boxed "view the exhibition" button.
3. Full-width photographic installation plate in a thin border with padded matte, mono caption row beneath.
4. Didactic panel: one large annotated SVG or image chart in a bordered panel, key data points labeled in mono directly on the chart, followed by a wall-label caption card (figure number, source, one sentence of interpretation) with a 3px cobalt top rule.
5. The collection: works grouped under room headings (mono small caps), each an accession card with a mono accession number, a medium line, a serif title, two sentences, and a provenance link.
6. Plan-your-visit band: three cells (hours, admission, getting here) with cobalt top rules on a darker ground.

Readability guardrails: body no smaller than 18px, lines under 70 characters, WCAG AA contrast for every caption measured against its actual surface, descriptive link text, hover and focus states with 150ms easing, and a reduced-motion media query. Never set readable-looking text inside images; no emoji icons, no neon, no purple-blue gradients.

Build a one-page conference launch site for an event called [EVENT NAME], [DATE], streamed online.

Art direction: a two-ink screenprint poster system. Ground the whole page in saturated marigold (#FDC137) with deep indigo ink (#101C4A) for all text, 3px rules, and borders. Warm off-white (#FFF6E0) panels for cards, one vermilion accent (#BF3512) reserved for time chips and the register button. No gradients, no glow, no rounded pills; corners stay sharp (0 to 2px).

Type: Clash Display (700) for an all-caps hero lockup and section titles; Schibsted Grotesk for body at 19px with 1.65 line height; Spline Sans Mono for times, labels, and metadata. The hero headline is the poster: stack two lines, the second line rendered as outline type with a 2.5px stroke and no fill.

Layout, top to bottom:
1. Top bar with wordmark and two links, 3px bottom rule.
2. Full-width typographic hero: mono kicker naming the event, giant two-line lockup, one short deck paragraph, then a boxed date rail (date, format, venue as bordered mono cells) ending in a solid vermilion register button. Hang a rotated press-badge card from the top edge on two angled straps: white card, 3px border, hard offset shadow, event metadata as label and value pairs.
3. A framed 21:9 illustration or duotone photo of the venue or stage, indigo on marigold only, with a mono caption row.
4. Speaker lineup: three-column grid of white cards, 3px borders, oversized display-type initials as portraits, name, one-line role, and a solid-indigo stat chip.
5. Program: sessions grouped under mono track headings, each row a 150px mono time column beside a display-type session title and one sentence, separated by thin gold rules.
6. Pass tiers: inverted solid-indigo band, three bordered cards with mono tier labels and huge display-type figures; highlight one card by flipping it to marigold. Close the band with a mono fine-print line.

Readability guardrails: body text at least 18px, line length under 70 characters, WCAG AA contrast on every label including text over the indigo band, descriptive link text, hover states on every link and card (150ms ease), and a prefers-reduced-motion guard. No fake readable text inside images, no emoji icons, no stock 3D blobs.

Build a single-page product launch site for a fictional electrolyte
sports drink. Ground the whole page in near-black (#0C0F0A) with a soft
neon-green spotlight behind the hero athlete, and use charcoal (#13180E),
off-white (#EEF3E6), and one neon-green accent (#57FF33).

Hero: a heavy condensed uppercase headline (Anton or similar) in white
with one phrase in tangerine, a two-sentence benefit deck, three
outlined spec chips, and two buttons: solid neon-green with near-black
text, and a white outlined ghost button. Place a cutout photo of an athlete
mid-drink on the right, overlapping the hero's bottom edge into a navy
stat strip that carries three labeled stats (label in small mono caps,
value in the display face).

Then alternate full-width bands: an ice-white feature band with one
wide callout card and two half-width cards (2px navy borders, 14px
radius); a white band with a nutrition-facts panel styled after the
FDA label (thick top rule, bold uppercase title, hairline row rules,
right-aligned bold values, one heavier rule before the last row) next
to a cutout product bottle; a navy testimonial band with one large
italic display quote; a near-black closing band with a call to action.

Type: Anton for display, Barlow for body at 19px with 1.65 line
height, IBM Plex Mono for labels and stats. Keep long text dark on
light bands, meet WCAG AA contrast for every label, no gradients, no
glow, no drop shadows except under the cutouts, no fake UI controls,
and no readable text inside images.

Build a design studio landing page styled as a 1970s print-production
mechanical board, the paste-up room where machine-set type was finished
by hand. Canvas: warm cream art board #F1EBDC ruled with a few faint
non-photo blue vertical keylines #B7CDDC that run behind the content.
Ink text #211D16. Accents: process blue #3E6787 for labels and captions,
rubylith red #B5271D for small rotated proof stamps and one translucent
red film strip overlapping a photo, kraft tape tabs in muted gold.
Type: Ultra for the single display headline and section titles, Literata
for body text at 19px minimum with 1.7 line height, ragged right, never
justified, never rotated; Courier Prime in letterspaced caps for form
labels and captions. Layout: a ruled job-ticket masthead of form cells
(job number, date, client, time), then an asymmetric 12-column board
where content sits in mixed-width cream galley panels. Frame each panel
with four corner crop marks instead of borders; square corners
everywhere, no border radius, no drop shadows except a soft lift under
photo plates taped down with tape tabs and captioned FPO. Mark sections
with slug lines: a solid blue Courier tab like GALLEY A, the section
title, a hairline rule, and at most one red stamp. Keep contrast WCAG AA,
guides at low contrast behind text, no neon, no gradients, no glow, and
no fake readable text inside images.

Design a single-page "home energy statement" for a modern utility brand,
as a shippable web page.

Archetype: an account statement page. A thin top nav, then a statement
header: supplier name in a wide grotesque, a document label, and a 4-column
account grid (statement number, read date, service, estimated read) set in
a tabular monospace with small uppercase labels.

Layout: hero splits 1.35fr / 0.95fr. Left, a large display headline and a
two-sentence deck. Right, a "meter readout" panel: inverted header strip,
one oversized monospace figure in the accent color, a small uppercase unit
line, and a dashed-rule comparison row. Below it, a framed illustration
captioned as Fig. 1. After the hero, sections run as "meter readings": a
2px top rule, a small accent meter number, a bold section title, and a
right-aligned item count. The centerpiece is an itemized tariff table:
each row is label + tabular figure + an inline usage bar sized to the
value against the group maximum. Rates that do not fit the scale get a
rotated stamp chip instead of a bar.

Surface: warm off-white paper with wide pale sage green-bar stripes
(repeating background bands) and dotted tractor-feed perforation rails on
both page edges, hidden on mobile.

Palette: paper #F7F5EA, stripe #E4ECDD, ink #232B24, ledger green #3E5A45,
utility magenta #C2255F reserved for readings, bars, and key figures.

Type: Bricolage Grotesque (700/800) for the brand, headline, and section
titles; Public Sans for body text; Spline Sans Mono for every number,
label, and caption. Body at least 19px with 1.65 line height, max ~70
characters per line, never justified.

Guardrails: WCAG AA contrast for small text, including labels on green or
magenta; no gradients, no glow, no neon-on-dark; radius 0 to 3px, print
style; no fake toggles or dead search fields; hover states on real links
and rows at 120-180ms; respect prefers-reduced-motion; if the
illustration contains text it must be abstract or blank, never garbled
readable text.

Create a museum exhibition microsite styled as a 19th century chronophotography motion study. Ground: a very dark umber emulsion (#1B1914) covered by a two-scale calibration grid, faint hairlines every 38px and slightly stronger ones every 228px, drawn in translucent cream. Masthead: an exhibition wall label, a single bordered strip of four mono-caps fields (exhibit number, opening date, running time, gallery name). Hero: a huge poster-black grotesque headline in caps, a short two-line serif deck, then the signature piece: a mounted plate, a bordered panel holding a wide dark figure divided into six frames by thin vertical rules, showing the same subject advancing frame by frame with small dots marking equal time samples, plus a caption rail with a plate number. Sections run as numbered plates: a strip header with PLATE 01 in mono, a caps grotesque title, and a ruled tick band filling the rest of the line; entries sit inside a shared bordered grid as frames, each opened by a tiny mono frame counter, then a linked serif headline and two plain sentences. One accent panel uses a chartreuse border for the reusable pattern note. Palette: dark umber #1B1914, warm cream #EFE6CE, sepia #C4B896, chartreuse accent #B5C24E used only for kickers, flags, and the copy button. Type: Archivo Black for display caps, Source Serif 4 for body, Space Mono for labels and counters. Keep body text at 19px or larger with line height at least 1.65 and 60 to 75 characters per line, check small mono labels for WCAG AA contrast against the dark ground, use square corners throughout, no pill shapes, no accent left-border stripes, no gradients, no glow, no neon on black beyond the single chartreuse accent, real hover and focus states near 150ms with a reduced-motion guard, and no readable words inside any generated imagery.

Create a conservation and restoration studio case study page styled as a treatment report. Structure: a thin uppercase mono site nav; a masthead built as an accession label, a double-ruled bordered box holding four catalog fields (object number, date received, reading time, condition) in small mono caps; a hero with a large warm serif headline where one phrase is tinted verdigris, and a short two-line deck; then the signature piece, a before and after diptych: two equal portrait figures side by side with a thin dark border, mono state labels above each pane (received date on the left, returned date on the right), semi-transparent archival tape corners, and one shared caption rail beneath both panes, a full-width hairline-topped row holding a single caption and a figure number so the pair reads as one piece of evidence; below it a condition report as a two-column definition table (object, condition on intake, treatment, findings) with mono field labels and hairline row rules; the remaining stories run as a treatment ledger, each section opened by a lot number, a serif heading, and a small solid stamp chip (intake or treated), entries in a two-column grid with a tiny gilt topic tag, a linked serif headline, and two plain sentences; close with a dark spruce pattern-note panel, a bordered field note, a numbered source list, and a boxed colophon. Palette: porcelain #EDECE4, deep spruce ink #24312A, sage #5C7A6B, verdigris accent #1E6355 with #2F8A77 for graphic marks, gilt #C29B33 used sparingly for tags and stamps. Type: Fraunces for display, Hanken Grotesk for body, IBM Plex Mono for labels. Keep body text at 19px or larger with line height at least 1.65 and roughly 60 to 75 characters per line, small labels at WCAG AA contrast against the porcelain ground, radii at 3px or less, no pill shapes, no accent left-border stripes, no gradients, no glow, no fake UI chrome, real hover and focus states near 150ms with a reduced-motion guard, and no readable words inside the generated images.

Create a longform annotated reading page styled as a scholar's night study. Structure: a full-bleed hero built on a wide dark illustration of an open annotated manuscript under lamplight, with a dark gradient scrim and an oversized two-line serif headline set directly on the image, the first line in warm cream and the second in vermilion, a short cream deck beneath it, and a vermilion bookmark ribbon hanging from the top edge as the only call to action, linking down the page; below the hero a three-cell imprint strip of mono metadata (edition number, date, reading time) separated by hairline rules; then a cream bookplate card framed with a double rule, holding the style name and a short glossary note, floating on the deep ink-blue page ground; the main body is a single reading column with a right margin rail, each chapter opened by a small brass roman folio numeral and a hairline rule, and one short red-ink margin note per chapter sitting in the rail, tied to a dagger mark in the running text; one centered italic pullquote between chapters; close with a bordered pattern note, a field note, a numbered source list, and an imprint colophon. Palette: deep ink blue #131B29, warm cream #EDE2CA, vermilion ink #E0593C, brass #C9A35C, cool slate #8FA3BA. Type: Newsreader for display, Spectral for body, IBM Plex Mono for labels. Keep body text at 19px or larger with line height at least 1.65, cream on ink at WCAG AA contrast, margin notes never below 15px, no pill radii, no accent left-border stripes, no neon or glow, no gradient text, real hover and focus states near 150ms, and no readable words inside the illustration.

Create a one-page planetarium exhibition page styled as a nineteenth century celestial atlas plate. Structure: wrap the whole page in a double-rule engraved plate frame on aged cream paper; a running head with the venue name centered in letterspaced Didone capitals, the date on the left, and two small mono nav links on the right; below it a four-cell ephemeris strip of labeled metadata (edition, plate number, duration, entries) separated by hairline column rules; a centered hero with a small mono kicker, a large high-contrast Didone headline, and a two-line serif deck; then a full-width framed engraving-style illustration with a numbered figure caption beneath it; a bordered legend box explaining the exhibition in two short paragraphs; a data table styled like an astronomical elements table with a dark indigo header row and mono numerals; a diagram of three circles whose areas are proportional to real numbers from the table, each labeled beneath in small mono capitals, with a caption stating the scale rule; then an observing log of entries in a two-column grid, a mono entry number in a left rail with a hairline divider and a serif headline plus two sentences on the right; close with a centered italic field note, a numbered source list, and a colophon. Palette: aged cream #EFE8D5, indigo ink #2B3054, slate blue #46708A, solar ochre #C0761B, moonstone #8E8570. Type: Bodoni Moda for display, Lora for body, Fragment Mono for labels and numerals. Keep body text at 19px or larger with line height at least 1.65, ink on cream at WCAG AA contrast, no pill radii, no accent left-border stripes, no glow shadows, no gradient text, no neon, real hover and focus states with easing near 150ms, and no readable text inside the illustration.

Create a one-page show-day event page for a music venue, styled as a backstage run sheet under tungsten light. Structure: a full-width poster hero on a warm black ground with a small mono stage-door kicker, a giant expanded ultra-black uppercase headline, a one-line support-act deck, a wide photographic art band of blank backstage laminates on a road case, and a perforated ticket-stub meta strip with punched notches at each end; then a vertical run-of-show timeline where a thin rail connects mono time chips labeled DOORS, SUPPORT SET, CHANGEOVER, HEADLINE SET, and ENCORE, each stop holding one act with a heading and two sentences; inside the first stop, a row of three laminate credential cards, each with a colored header band, a punched hole, a short mono list of what the pass allows, and one dashed-rule line stating what it cannot do; close with a cream production memo taped at the corners, a setlist-style numbered link list, and a stage-crew colophon. Palette: warm black #161210, warm cream #F4EADA, tungsten amber #E8A33C as the only loud accent, follow-spot steel blue #7C93A8 and gaff rust #A0472B reserved for the laminates. Type: Anybody Expanded Black for display, Schibsted Grotesk for body, Martian Mono for times, scopes, and labels. Keep body text at 19px or larger with line height at least 1.65, cream on warm black at WCAG AA contrast, laminate corners at 10px and everything else nearly square, real hover and focus states with easing near 150ms, no glow shadows, no neon, no gradient text, and no readable text inside the photograph.

Create a responsive landing page for a neighborhood emergency leak detection and pipe repair service, styled as a vintage mid-century trade advertisement. Structure: a full width emergency strip at the very top with one promise and one anchor link; a two column signboard hero framed by a thick ink border, with a heavy slab headline and a badge cluster of small bordered permit chips on the left and a halftone lithograph illustration of copper pipes with one blue drip on the right; a featured work order panel for the lead service; stacked call-out ticket rows for the remaining services, each opening with a stamped work order label rotated one degree; a single rate card panel of labeled rows; a plain contact ledger. Include a horizontal pipe route diagram built from labeled station chips joined by a thick cobalt line with round copper valve joints, ending at a station with a small drip. Palette: cream paper #F6EFDC, deep indigo ink #1F2A50, cobalt #2449B4 for loud marks and the strip, water teal #3E7C96 for quiet emphasis, copper #B4713E for valves and stamps. Type: Alfa Slab One for the signboard display, Karla for body and paperwork, Space Mono for stamped uppercase labels. Keep body text at 19px or larger with line height at least 1.6, square corners with at most a 4px radius on chips, real hover and focus states, offset solid shadows instead of soft glows, no fake phone numbers or dead controls, no neon or gradient defaults, and keep the illustration free of readable text.

Create a responsive editorial web page using a Cut Edge Drafting Studio archetype for an AI web design briefing about CSS shape work and agent workflow surfaces. Build the first viewport as an image-backed cutting-table hero: a blue-gray drafting image sits behind the headline under a translucent graphite and oxblood color layer, with torn tracing-paper interface pieces, colored border paths, crop marks, ruler shadows, and pinned proof notes. Use mist blue paper (#E9EEF4), graphite ink (#263141), teal route blue (#2C6E7F), oxblood red (#B84632), ochre pin color (#C49A44), and quiet sage (#7F8B6D). Pair Instrument Serif for loose display type, Commissioner for readable body text, and IBM Plex Mono for proof labels. Mark story sections as cut-paper proof strips in a loose atelier field rather than identical cards. Include a Design Move section that teaches the proof-strip pattern: let edges, routes, or masks reveal permission, dependency, review state, and history before the user trusts a generated surface. Keep body text at 19px or larger with line-height above 1.6, keep real hover and focus states, avoid fake controls, avoid purple-blue neon or glass defaults, and keep all image text abstract or blank so the readable copy stays in HTML.

Create a responsive editorial web page using an Airport Night Operations Desk archetype for an AI web design briefing about agentic coding scale and review risk. Build the first viewport as a dark terminal control desk: a full-bleed generated operations-desk image sits behind the layout, the headline appears as oversized split-flap tile strips, and review-lane strips sit at the bottom of the hero. Use deep airport ink (#07101B), warm ticket paper (#F2E7D4), safety orange (#D85C2A), gate green (#5F7F52), muted sky blue (#6A94A8), and amber status light (#D6A23F). Pair Bebas Neue for display, Literata for readable body text and italic notes, and IBM Plex Mono for gate labels. Mark story sections as departure board rows with gate labels, linked primary-source headlines, verified dates, and one or two plain paragraphs. Include a Design Move section that teaches the risk runway pattern: classify AI work first, show the lane, owner, evidence, and stop condition prior to acceptance. Keep body text at 19px or larger with line-height above 1.6, use real hover and focus states, avoid fake controls, avoid neon or glow defaults, and keep all image text abstract or blank so it never relies on generated copy.

Create a responsive editorial web page using a Component Hardware Store archetype for an AI web design briefing about component library defaults and migration paths. Build the first viewport as a specialty hardware counter: left-side product spec panel with issue metadata and a large condensed headline, right-side editorial bitmap of tactile UI component parts, drawer bins, switches, sample trays, and brass task lighting. Use a dark aubergine and deep green ground (#1B151B, #13251F), warm bone text (#EFE1C2), brass accent (#C59A55), muted rose (#B46657), and smoke gray labels (#8F8779). Pair Archivo Black for display, Alegreya Sans for body and italic moments, and Spline Sans Mono for drawer labels. Mark news items as inventory bins with a bin number, linked headline, verified source date, and one or two readable paragraphs. Include a Design Move section that teaches the default chooser pattern: recommended path, compatible opt-out, current project pin, and review proof before migration. Keep body text at 19px or larger with line-height above 1.6, avoid fake readable text inside images, avoid neon or glow defaults, avoid fake controls, and include real hover and focus states with a reduced-motion guard.

Create a responsive editorial web page using a Civic Evidence Desk archetype for an AI web design briefing about workspace boundaries. Build the first viewport as a public-records inspection desk: a docket-strip masthead beside a generated or composed bitmap of separated project folders in clear quarantine trays, with red and blue boundary seals, blank evidence cards, rulers, pencils, and warm paper texture. Use warm record paper (#F4EADB), navy ink (#17213A), federal blue (#4F78A6), inspection red (#B83A2E), brass folder tabs (#C8AA6A), and manila surfaces (#DFCAA8). Pair Fraunces for display and italic moments with Libre Franklin for body copy and IBM Plex Mono for docket labels. Mark news items as case pockets with a case number, linked headline, source date, and one or two readable paragraphs. Include a Design Move section that teaches the boundary tray pattern: scope, allowed memory, proof, and handoff all live in the same visible component. Keep body text at 19px or larger with line-height above 1.6, avoid fake readable text inside images, avoid neon or glow defaults, avoid fake controls, and include real hover and focus states with a reduced-motion guard.

Create a responsive editorial web page using a Conservatory Route Map archetype for an AI web design briefing. Build the first viewport as a dark emerald glasshouse map: a wide generated or composed bitmap plate with brass route rails, coral and lapis transfer lines, blank interface panes, and botanical canopy crops, paired with a narrow itinerary rail that lists the issue number, date, and route stops. Use deep emerald (#081d17), warm ivory (#f2e6c8), fern green (#2c6e5d), coral (#ef6a52), brass (#c7a867), and lapis (#315fa8). Pair Cormorant Garamond for display and italic moments with Source Sans 3 for body copy and IBM Plex Mono for small route labels. Mark stories as plant-label cards attached to route nodes: each card needs a route code, linked headline, source label, and one or two readable paragraphs. Include a Design Move section that teaches the transfer-node pattern: every AI affordance needs an origin, destination, checkpoint, and return path. Keep body text at 19px or larger with line-height above 1.6, avoid fake readable text inside images, avoid neon/glow defaults, avoid fake controls, and include real hover and focus states with a reduced-motion guard.

Create a responsive editorial web page using an Interface Fit Table archetype. The above-fold layout has a narrow left inventory rail with issue or product metadata, then a deep indigo product tray hero holding four abstract interface samples: chat card, canvas tile, command strip, and voice token. Use a cool light-gray page ground (#e9edf2), dark indigo tray (#111a2d), ivory specimen cards (#fff5df), cobalt (#284fd6), tomato red (#d8442f), and brushed brass (#bd9652). Pair DM Serif Display for the hero and section heads with IBM Plex Sans for body copy and JetBrains Mono for specimen labels. Add a four-part fit matrix immediately under the hero, then a compact decision table that compares intent, input shape, review state, and route. Fill every table row with real, specific content (a concrete job, a real input shape, a named checkpoint), never placeholder labels, and end the table with one worked example. Mark content sections as specimen cards with a colored marker block, large sample number, source label, linked headline, and one or two readable paragraphs. Keep body text at 19px or larger with line-height above 1.6, avoid fake readable text inside images, avoid neon/glow defaults, avoid dead UI controls, and include real hover/focus states plus a reduced-motion guard.

Design a single editorial web page as a 1970s concert ticket box office for agentic web design news. The visual lesson is how to turn checkout, permission, and review states into playful but legible ticket components.

Palette: deep plum stage wall (#2F1F40) as the page ground, aged ticket ivory (#FFF4CD) for reading surfaces, saturated teal (#1B9A91), tomato red (#DA4636), sunflower yellow (#F1B737), and dusty purple accents. Avoid beige minimalism, generic dashboards, purple-blue gradients, glass, glow, stock people, and fake readable text inside images.

Type: use a hand-painted or carnival display face such as Barrio for the hero and box-office labels; Atkinson Hyperlegible or a similarly readable sans for 19px body text at 1.68 line-height; Libre Baskerville Italic for one editorial note; and Roboto Mono for ticket numbers, source stamps, and the prompt block.

Layout: above the fold is a ticket booth, not a split SaaS hero. Use a dark stage background, one large irregular headline, a stack of overlapping vintage ticket stubs for the issue metadata, and a large bitmap illustration of a human box-office clerk handing an oversized blank ticket to a browser-shaped agent. Below, make Today's Art Direction a wide perforated stub. Run Tooling, Workflow, and Technique as stacked concert tickets with torn edges, source stamps, and one short caption each. Do not use a wide left margin with giant numbered section markers.

Imagery: create one integral bitmap in the first viewport. It should feel hand-inked and cartoony: a ticket booth, a human handoff, a friendly computer or browser agent, stacked old concert tickets, abstract band-name bars, admission stamps, and payment tokens. No readable text, logos, or watermarks. It must still compose well in a 1200x630 crop and a 600x800 cover crop.

Components and guardrails: box-office nav, metadata ticket stack, perforated stubs, source stamps, gig-bill labels, a real copy button, numbered source ledger, visible focus and hover states, and a prefers-reduced-motion guard. No dot-chip legends, fake toggles, fake search boxes, emoji, pill-shaped everything, accent left-border stripes, 3D blobs, or identical feature cards.

Design a single web page as an Italian Futurist poster translated into a product release landing page. The page should teach type-as-shape over a hero product plate, with a structure that avoids the generic startup landing pattern.

Palette: warm bone paper (#EDE8DC) as the dominant ground, near-black ink (#121210) for body text, vermilion (#CF3123) as the loud graphic accent, and electric blue (#144EB2) used sparingly for rules and one accent plane. Use flat planes only. No gradients, neon, glow, glass, or violet defaults. Keep all running text on bone or warm cream at WCAG AA.

Type: a mechanical extended geometric display face such as Syncopate for the hero headline and art-direction name; a clean grotesque such as Barlow for 19px body text at about 1.68 line-height; Barlow Condensed for big program numbers; a monospace such as Roboto Mono for issue metadata, source labels, and the prompt block. Tilt only the display headline and large slot numbers. Keep paragraphs, links, and metadata level and easy to read.

Layout: create an event or release landing page. Top: a compact nav and a ticket-style metadata strip with issue number, date, archetype, and reading time. Above the fold: one giant diagonal headline spanning the page, a narrow left ticket column with the day's thesis, and a large hero plate on the right showing an abstract product surface or phone with force lines and flat color planes. The headline may overlap the plate slightly. Below: a Today's Art Direction panel with a large decorative Futurismo mark and vocabulary tags. Then program slots for Tooling, Technique, Workflow, and Prompt Lab. Each slot uses a huge diagonal number as the marker, a level section label, a headline link, source credit, and one or two readable paragraphs.

Imagery: create one integral bitmap or SVG hero plate in the first viewport. It should be a flat poster-style product surface, like a tilted phone or web canvas, with blank bars and blocks instead of readable text. Use force lines and flat red, black, and blue planes to show velocity. The image must work in a 1200x630 crop and a 600x800 cover crop.

Components and guardrails: ticket metadata strip, product hero plate, art-direction vocabulary tags, program slot rows, one bold pull line, numbered sources, and a real copy button for the prompt. No fake countdown timers, fake search fields, toggles, dot-chip legends, emoji, 3D blobs, stock people, accent left-border stripes, or identical feature cards. Provide hover and focus states for real links and buttons with 120 to 180ms easing, plus a prefers-reduced-motion guard.

Design a single web page as a Scandinavian folk textile, a homeware lookbook or ecommerce collection page in the Marimekko register: oversized folk flowers cut into flat unbroken color, printed on warm cloth. Not a dashboard, blog, or ranked list.

Ground: warm off-white (#F6F0E4) everywhere, with near-black ink body text (#21201C) at 19px and line-height about 1.68. Build from a small set of flat folk colors: poppy red (#D33A2C), cobalt (#2D54A6), marigold (#E8A21C), leaf green (#3E7A4F). Use large unbroken color fields, never gradients or neon. Links and the one italic line are cobalt; poppy is the loud accent for marks and one panel. Every word holds WCAG AA: white text only on the darker fields (cobalt, deep poppy, deep leaf), ink text on marigold and off-white.

Type: a warm geometric sans (Quicksand, 600 to 700) for the collection headline, the art-direction name, and entry titles; a humanist sans (Work Sans) for body and the single italic line; a monospace (Spline Sans Mono) for the edition cells, catalog numbers, source credits, and this recipe. One display size for the headline; never italicize body paragraphs.

Layout: build a homeware lookbook. A row of edition cells runs across the top (issue number in poppy, date, collection, reading time, mono uppercase). A full-width printed-cloth banner shows the folk-floral repeat (flat oversized flowers, half-drop tiled, no readable text). Below it, a collection intro: an oversized headline, a short deck, and a row of color swatches. Then The Collection: each story is a catalog entry, a two-column row pairing a solid color swatch panel (family name in white, a catalog number, a small folk-flower motif) with a copy column holding the title, a mono source credit, and one or two short paragraphs at about a 62ch measure. Color-zone the families: cobalt, deep poppy, deep leaf. Alternate which side the swatch panel sits on, like a lookbook spread. Set one centered sampler pullquote on a marigold field. Close with a numbered source index.

Components: edition cell row, printed-cloth banner, color swatch row, color-zoned catalog entries with solid swatch panels, small folk-flower motifs, centered sampler on a color field, mono source credits, a poppy copy button on the recipe. Borders are heavy 3px rules, square corners, no pills and no accent left-border stripes; shadows are absent. One restrained micro-interaction: entry-title links grow a poppy underline on hover at about 150ms, behind a prefers-reduced-motion guard. No fake search fields, toggles, or filters; no dot-separator metadata chains; no emoji; no readable text inside the textile image. Keep the pattern in banners and panels so all running text stays ink on off-white at WCAG AA.

Design a single web page as a mid-century jazz record sleeve, an album or release landing page in the Blue Note / Reid Miles register: a cropped duotone cover, tightly tracked condensed type, and the content pressed as a track listing. Not a dashboard, blog, or card grid.

Ground: warm charcoal (#17140E) everywhere, with cream body text (#ECE3CE) at 19 to 20px and line-height about 1.7. Build the palette from one duotone color, teal (#37A496), plus cream and a single hot accent, rust-orange (#D9542B), used only for the catalog number, side labels, and one mark. Lean on negative space, not extra color. Links are cream with a teal underline; never set body text in rust or teal. Every word holds WCAG AA on charcoal. No gradients behind text, no glow, no neon.

Type: a tightly tracked condensed gothic (Oswald, uppercase) for the cover headline, the art-direction name, track titles, and one liner-note highlight; a clean grotesque (Inter) for body and the italic one-liner; a monospace (JetBrains Mono) for the catalog strip, side labels, track durations, source credits, and this recipe. One display size for the cover; never italicize body paragraphs.

Layout: build an album cover. A catalog meta strip runs across the top (label name, issue number in rust, date, RPM, running time, mono uppercase). The cover is a two-column lockup: an oversized condensed headline and short deck on the left, a hard-cropped duotone plate on the right (abstract still life in two inks, cream on charcoal, heavy film grain, no readable text). Below the cover, a liner-notes panel holds today's art direction. Then the stories are a track listing split into Side A and Side B, each side introduced by a side label and a thin rule. Each track is a row with a big condensed track number (A1, A2, B1) on the left, a mono duration on the right, and in the middle a mono kick label, a condensed title that links out, a mono source credit, and one or two short paragraphs at about a 66ch measure. Add a centered liner-note highlight between two rules. Close with a credits-style source list.

Components: catalog meta strip, two-column cover lockup, cropped duotone plate, liner-notes panel, side labels with rules, track rows with condensed numerals and mono durations, centered liner highlight, mono source credits, a rust copy button on the recipe. Borders are thin 1 to 2px rules, square corners, no pills and no accent left-border stripes; shadows are absent or minimal, never a diffuse glow. One restrained micro-interaction: track-title links grow a 2px teal underline on hover at about 160ms, behind a prefers-reduced-motion guard. No fake search fields, toggles, or filters; no dot-separator metadata chains; no emoji. Keep all body text cream on charcoal at WCAG AA.

Design a single web page as a one-night psychedelic concert poster, an event or release landing page in the idiom of a late-1960s dance-hall bill: vibrating complementary color, concentric ornament, and a liquid display lockup. Not a dashboard, blog, or card grid.

Ground: deep saturated grape (#1B0E24) everywhere, with warm cream (#F4E7D4) body text at 19 to 20px and line-height about 1.7. Keep the loud color penned inside the masthead, the frame, and the act markers so the reading column stays a calm dark field. Accents are vibrating complementaries used as marks only: magenta (#FF3D9A), teal (#34E0CE), orange (#FF7A1A), gold-lime (#E8D44D). Links use the teal; never put body text in magenta or orange. Every word must hold WCAG AA on grape. No gradients behind text, no glow, no neon haze.

Type: a liquid retro display (Shrikhand) for the headliner, the art-direction name, act titles, and one marquee pullquote; a clean grotesque (Hanken Grotesk) for body and the italic one-liner; a monospace (Space Mono) for the promoter line, ticket-stub meta, set-time labels, source venues, and this recipe. One display size for the hero; never italicize body paragraphs.

Layout: center the whole page as a poster inside a concentric ornamental frame built from stacked colored outlines (magenta, teal, orange, lime), with a small ornament dot in each corner. A mono promoter line ("...presents") sits above a dashed ticket-stub strip carrying edition number, date, and running time. The headliner hero is centered: a mono kicker, a big two-line liquid headline with a hard offset shadow in magenta and teal, a short deck, and a framed psychedelic plate (concentric rings, a central disc, a warped marquee band of blank type blocks, an abstract animation timeline with keyframe diamonds and a playhead, no readable text). Today's art direction is a credits panel with a name, an italic one-line summary, a glossary paragraph, and bordered vocabulary chips. The stories are a running order, not cards: each act is a two-column row with a big outlined order number and a set-time label on the left, and on the right a mono stage label (Headliner, Main support, Closer), a liquid act title that links out, a mono venue credit, and one or two short paragraphs at about a 64ch measure. A single liquid marquee line sits on a faint complementary band. Close with a credits-style source list.

Components: concentric poster frame, promoter line, dashed ticket stub, offset-shadow headliner lockup, framed psychedelic plate, credits panel, bordered vocab chips, running-order act rows with outlined numerals and rotated-square set-time dots, marquee pullquote, mono venue credits, a magenta copy button on the recipe. Card and panel radii 11 to 12px, chips 7px, no pill-shaping and no accent left-border stripes. One restrained micro-interaction: act-title links grow a 2px teal underline on hover at about 160ms, behind a prefers-reduced-motion guard. No fake search fields, toggles, or filters; no dot-separator metadata chains; no emoji. Keep all body text on grape at WCAG AA.

Design a single web page as a design studio's portfolio of case studies, built in the idiom of Matisse cut-paper collage: flat organic shapes, bold unmixed color, layered paper with a soft offset shadow. Page archetype is a portfolio or case-study page, not a dashboard, blog, or card grid.

Ground: warm cream paper (#F3E8D2) everywhere, with warm near-black ink (#211E1A) for body text at 20px and line-height about 1.66. Color lives in cut-paper shapes and labels, not behind the reading text. Three zone colors carry the three cases: coral (#E5533B), cobalt (#2E5AAB), leaf green (#4F7A3A), with marigold (#E5A52E) for the hero shadow and one pull-quote shape. Links and any colored text use darkened versions (coral #A8331A, cobalt #234887, leaf #3C5E2C) so every word holds WCAG AA on cream. No gradients, no glow, no neon.

Type: a warm characterful grotesque (Bricolage Grotesque) for the nameplate, hero, case headlines, and one pull-quote; a clean humanist sans (Instrument Sans) for body and the italic art-direction one-liner; an informal hand face (Shantell Sans) only for kickers, section labels, and small studio captions; a monospace (Spline Sans Mono) only for edition meta, source domains, and this recipe block. Keep one display size for the hero, never italicize body paragraphs.

Layout: a studio header pairs a large nameplate on one side with a selected-work index on the other, a short numbered list that links to each case, plus an edition meta row in mono cells separated by rules, not dots. The hero is two columns: a hand kicker, headline, and deck on one side, a framed cut-paper collage plate on the other (organic fronds, a layered stack of pages standing in for screens, abstract blocks and bars instead of readable text, paper scissors), the frame a cream card with a 2px ink keyline and a flat marigold offset shadow. Today's art direction is a spec card on a marigold-tinted panel with a style name, an italic one-line summary, a glossary paragraph, and bordered vocabulary chips. The three stories are numbered cases: each opens with an organic cut-paper shape in its zone color holding the case number, then a cream case card with a 2px ink keyline, a hand kicker, a linked headline, a mono maker credit and source domain, and one or two paragraphs at a 66ch measure; the first opens with a coral drop cap. One Bricolage pull-quote sits on a cut-paper marigold shape. A numbered reference list closes the issue.

Components: studio nameplate, selected-work index, framed collage plate, marigold spec card, organic shape section markers, cream case cards, drop cap, shape-backed pull-quote, mono maker credits, bordered vocabulary chips, a coral copy button on the recipe. Card and panel radii 14 to 18px, chips 7px, no pill-shaping. One restrained micro-interaction: headline links grow a 2px underline on hover at about 160ms and the hero plate shifts a few pixels, both behind a prefers-reduced-motion guard. No accent left-border stripes, no fake search fields or toggles, no dot-separator metadata chains, no emoji. Keep all body text on cream at WCAG AA.

Design a single web page as a vintage apothecary and seed-packet label that opens into a product-detail shelf: a briefing of three linked stories. Page archetype is an apothecary product-detail page, not a dashboard, blog, or card grid.

Ground: deep botanical bottle green (#15291E) as the surrounding glass, with a warm parchment label field (#EFE5CC) for every reading surface and dark sepia ink (#241E15) for body text on it. Antique brass (#C79A3E) for keylines and ornament, deep rust (#9A3E22) for links and marks on parchment, a sage (#4E5C3C) and a darker brass as the two other zone colors. No gradients, no glow, no neon.

Type: a characterful high-contrast old-style serif (Fraunces) for the house name, hero, headlines, and one italic banner pull-quote; a readable book serif (Newsreader) for body at 20px with line-height about 1.7; a monospace (Spline Sans Mono) only for lot numbers, the facts labels, kickers, and this formula block. Keep one display size for the hero, never italicize body.

Layout: a double-keyline brass cartouche masthead on the green carries the house name and a lot line of edition, date, and net contents in mono cells separated by rules, not dots. The hero is two columns: an engraved apothecary plate on one side (bottles, mortar and pestle, seed packet, botanical sprigs, cream line work, no readable text), a kicker, headline, and deck on the other, set in cream on the green. Today's art direction is a facts panel dressed as the back of a label: a parchment card with a header row, a style name, an italic one-line summary, a glossary paragraph, and an active-ingredients list of bordered vocab chips. The three stories are numbered preparations: each opens with a filled label band carrying a botanical mark, a number, a section name, and a lot tag, then a parchment label field with a linked headline, a maker credit with the source domain, and one or two paragraphs at a 66ch measure; the first opens with a rust drop cap. One italic pull-quote sits between two brass rules as an engraved banner. A numbered provenance list closes the issue.

Components: brass cartouche, lot line, engraved plate, facts panel, filled section bands with botanical marks, parchment label fields, drop cap, banner pull-quote, mono maker credits, bordered vocab chips, a brass copy tag on the formula. Rectangular labels at 3 to 5px radius, chips at 3px, no pill-shaping. One restrained micro-interaction: headline links grow a rust underline on hover at about 160ms and the plate lifts a few pixels, both behind a prefers-reduced-motion guard. No accent left-border stripes, no fake search fields or toggles, no dot-separator metadata chains, no emoji. Keep body text on the parchment fields at WCAG AA, never sepia ink on the green.

Design a single web page as a high-fashion magazine cover that opens into a short feature spread: a briefing of three linked stories. Page archetype is a fashion cover plus editorial spread, not a dashboard, blog, or card grid.

Ground: stark warm white (#F8F6F2), near-black ink (#15110E) for text, one couture accent in hot magenta (#D8126B) for marks, with a deep magenta (#A8124F) for links so they hold WCAG AA, and a quiet blush field (#F4E7EC) to color-zone one panel. No gradients, no glow, no neon.

Type: a Didone display (Bodoni Moda) for the nameplate, hero line, cover blurbs, and one large italic pull-quote; a tight modern grotesque (Hanken Grotesk) for body at 19px with line-height about 1.65; a monospace (Space Mono) only for the dateline cells, kickers, and this prompt block. Keep one display size for the hero, never italicize body.

Layout: a giant uppercase Didone nameplate spans the top, with a dateline rule below carrying edition, date, reading time, and an issue tag in mono cells separated by space, not dots. The cover is two columns: an oversized hero headline and deck on the left over a list of cover lines, each cover line a tracked-caps label plus a Didone teaser that links to its section; and one framed editorial image on the right, set as art, no readable text inside it. Stories run as feature openers: a mono kicker, a Didone headline link, a credit line in tracked caps with the source domain, then one or two plain paragraphs at a 66ch measure; the first opens with a magenta drop cap. One huge italic pull-quote sits on the white as art. A numbered Sources list closes the issue.

Components: nameplate, dateline rule, cover lines that double as navigation, framed image plate, drop cap, pull-quote as art, tracked-caps credits, bordered vocab chips. Cards and panels at 12 to 14px radius, chips at 6px, the image frame near-square, full circles only for genuine dots. One restrained micro-interaction: cover lines and headline links grow an underline on hover with about 160ms easing, behind a prefers-reduced-motion guard. No pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no dot-separator metadata chains, no emoji.

Design a single web page as a museum print room hanging an aizuri-e (indigo woodblock) exhibition: a short briefing of linked stories shown as framed prints on a gallery wall. Page archetype is an exhibition microsite, not a dashboard, blog, or card grid.

Ground: a deep indigo gallery wall (#14274F) is the page. Each story is a cream washi print panel (#F0E7D0) matted and hung on the wall, with sumi ink text (#211D16) at 20px, line-height 1.7, measure 66 to 68 characters, never justified. Accents: a low vermilion (#CF4A2C) for plate numbers and seals, a sky indigo (#6F9BC4) for labels on the dark wall, a quiet ochre (#BD8420) used sparingly. Links on cream use a deep indigo ink (#1F4A82) so they stay WCAG AA; never set body text in vermilion or on the dark wall.

Layout: a wall placard masthead reads like a museum object label (edition number, weekday and date, collection, reading time) in mono small caps. The hero hangs one large framed woodblock plate beside the title. Stories run as numbered plates (Plate II, III, IV): a plaque with a vermilion roman numeral and a mono section kicker, a serif headline link, one or two plain paragraphs, and a museum caption line (source, kind, date). One large display pull-quote sits directly on the indigo wall. An exhibition-checklist Sources list closes the show.

Type: Shippori Mincho B1 for the display headline, plate headlines, and section heads; Source Serif 4 for body and the single italic art-direction summary; Geist Mono for labels, the wall placard, captions, and the prompt block.

Components: framed and matted print panels with a tight drop shadow on the dark wall, mono wall labels, a vermilion seal mark, scalloped key-line wave motifs confined to one generated plate. Generate one woodblock image only: flat indigo tonal bands, a vermilion sun, scalloped foam wave crests outlined in cream, a few abstract sails, corner registration marks, and a seal, with no readable text inside the image. Add one restrained micro-interaction, a hung print that lifts slightly on hover with a tight shadow, behind a prefers-reduced-motion guard. No gradients, no glow, no neon, no pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no emoji.

Design a single web page as a Pop Art screenprint product feature page presenting a short briefing of linked stories. Page archetype: a comic-panel landing page that showcases one hero plate and then lists the news as product features, not a dashboard, blog, or card grid.

Ground: a bright warm screenprint cream (#F5ECCF) with a lifted panel (#FBF5E2). Text is ink (#1A1714) at 19px, line-height 1.68, measure near 64 characters, never justified. Use flat pop primaries: pop red (#E0301F) for marks and the Tooling zone, cobalt (#1E5AC8) for the Technique zone, pop yellow (#FFC20E) for the Workflow zone, hot pink (#E11C7C) used once as accent. Inline links use a deeper red (#B5180B) so they stay WCAG AA on cream; never set body text in yellow or bright red. Keep all color in marks, fills, and dot fields, not under the words.

Layout: a product showcase. A hero splits into a Bungee headline, deck, and a spec strip of metadata cells with thick keylines on the left, and a framed hero plate on the right backed by a red Ben-Day halftone field. The news runs as three numbered feature blocks (01, 02, 03), each opened by a zone-colored top bar, a halftone number bubble, a solid-filled speech-bubble kicker, a linked Bungee headline, one or two plain paragraphs, and a dashed source stamp. One giant display pull-quote sits on a yellow halftone field. A product-info card carries the art-direction note.

Type: Bungee for the hero headline, feature headlines, numbers, and the one pull-quote; Mulish for body and the single italic art-direction summary; DM Mono for labels, the spec strip, stamps, and the prompt block.

Components: speech bubbles and stamps as real labels (not dead chrome), Ben-Day dot fields for texture, thick 2.5 to 3.5px black keylines, flat color zoning by section. Include one generated plate: a comic magnifying glass over a fanned stack of file cards marked with abstract red and blue diff bars, a yellow starburst behind it, and a halftone field, all flat fills with heavy outlines and no readable text inside the image. Add one restrained micro-interaction, a link underline that flips from yellow to red on hover, behind a prefers-reduced-motion guard. No gradients, no glow, no neon, no pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no emoji.

Design a single web page as an illustrated Art Nouveau editorial feature presenting a short briefing of linked stories. Page archetype: a long-form magazine feature with a decorated margin, not a dashboard, blog, or card grid.

Ground: deep aubergine jewel (#271629) with a lifted plum surface (#32203A). Text is warm parchment (#F2E7D2) at 20px, line-height 1.72, measure near 64 characters, never justified. Use a Mucha-register palette: antique gold (#C8A24C) for links, rules, drop cap, and all ornament; olive-sage (#9FA977) and muted mauve (#C2A6BD) to color-zone the chapters. Keep every text color WCAG AA on aubergine; let color live in the ornament, not under the words.

Layout: an asymmetric two-part page. A decorated left rail (sticky on desktop, stacked on mobile) holds an ornamental nameplate, edition metadata as label-value rows, and a contents index. The story runs as one framed reading column: a thin gold keyline border with whiplash corner flourishes, a Yeseva One headline, a deck, a single illustrated plate, then a lead paragraph opened by one gold drop-cap. Sections are numbered chapter heads (I, II, III) with a spaced-caps label and a whiplash hairline divider in the chapter's zone color; each story is a kicker, a linked headline, one or two plain paragraphs, and the source domain. Exactly one italic display pull-quote.

Type: Yeseva One for the display headline, chapter numerals, and drop cap; Lora for body; Cormorant Garamond italic for the one pull-quote and the art-direction summary; IBM Plex Mono for labels, metadata, and the prompt block.

Include one generated plate: a symmetrical Art Nouveau panel with a gold sunburst halo, a stylized iris, mirrored whiplash scrollwork, sage leaves, and small gold-keyline cartouches of abstract page layouts, all flat color fields with gold keylines and no readable text inside the image. Add one restrained micro-interaction, a link underline that warms to gold on hover, behind a prefers-reduced-motion guard. No gradients, no glow, no neon, no pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no emoji.

Design a single web page as a mid-century-modern lifestyle brand's product catalog presenting a short briefing of linked stories. Page archetype: an ecommerce category or lookbook page, not a dashboard, blog, or card-grid template.

Ground: warm cream (#F4E9D4) with a lighter card paper (#FBF4E6). Body ink is warm near-black (#2B2622). Use a warm multi-hue mid-century palette in the Alexander Girard register: burnt orange (#C8501E, links and brand marks), teal (#2C7A6B), marigold (#D9A328), and avocado (#6B7D3A). Links in a darker rust (#A8410F) so small text stays WCAG AA on cream.

Layout: a catalog masthead with a brand wordmark and a row of issue metadata cells; a campaign hero with one large headline and a deck; then one full-width flat still-life plate; then a product grid color-zoned by department. Do not use three identical feature cards. Color-zone the structure instead: each department (Tooling, Technique, Workflow) is a panel tinted in its hue with a solid filled department band on top, carrying a small atomic motif mark (starburst, boomerang, or concentric circle) in the zone color, a slab-or-sans department name in spaced caps, and a department number.

Each story is a product card: a mono kicker, a product-name headline that links out, one or two plain caption sentences, and the source domain named like a maker. Type: a warm humanist or geometric sans for display and product names (Familjen Grotesk), a friendly sans for body (Figtree) at 19px with line-height 1.7 and a measure near 66 characters, and a mono (DM Mono) only for tiny labels, metadata, and swatch hex codes. Exactly one italic display pullquote.

Include one generated plate: a flat, mid-century still life (a starburst clock, a tripod sputnik lamp, a boomerang table with a ceramic vase and a spiky plant, a low lounge chair) in flat color fields with a clean keyline and no readable text inside the image. Add one restrained micro-interaction, an underline that shifts to orange on link hover, behind a prefers-reduced-motion guard. Keep WCAG AA on every text color against its real background. No gradients, no glow, no neon, no pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no emoji.

Design a single web page as an Art Deco travel poster presenting a short briefing of linked stories. Page archetype: a grand-voyage destination poster, symmetrical and centered, not a card grid or dashboard.

Ground: deep teal (#0C2B2E) with slightly lighter teal panels (#0F373A). Text is warm cream (#F3E8CE). Gold (#D6B25E) is the only metallic and is reserved for hairline rules, frame corners, section numerals, and link underlines. Emerald (#2C8C70) is a decorative field and mark color only, never a surface behind small text.

Layout: one centered reading column about 680px wide, no left-right split. Open with a small mono crest line, a thin gold rule with a tiny diamond, then the headline inside a stepped cartouche, a rectangular frame with an inset gold hairline and small bracket corners. Under the deck, place a ticket-stub metadata strip: three perforated cells (departure date, issue number, reading time) divided by dashed gold rules. Mark each section as a numbered port of call: a gold square holding a Roman numeral, flanked by thin gold wings, with the section name in spaced small caps.

Type: display in a monumental engraved serif (Cinzel) for the headline, section numerals, and item titles; body in a transitional serif (Spectral) at 19px, line-height 1.7, measure near 68 characters, cream on teal, never colored body text; tiny labels in a mono (Space Mono) in uppercase with wide tracking. Use exactly one italic display pullquote.

Include one generated plate as the poster image: a streamlined Deco scene (an ocean liner or stepped gateway under a radiating sunburst) in emerald, gold, and cream on teal, with no readable text inside the image. Add one restrained micro-interaction, a gold underline that brightens on link hover, behind a prefers-reduced-motion guard. Keep WCAG AA on every text color against its real background. No gradients, no glow, no neon, no pill-shaped everything, no fake search fields or toggles.

Design a single web page as a Bauhaus exhibition poster presenting a short briefing of four linked stories. Ground: warm bone (#F2EBDB). Use three primary colors as structural zones rather than decoration: Bauhaus red (#D1321F), cobalt (#1C46A6), and a warm yellow (#F2B705), with near-black ink (#16130F) for text.

Build an asymmetric modular grid: a large bone hero cell carries the headline; a cobalt metadata tile holds the issue number, date, and reading time as small mono rows; hard-edged primitives float in the grid, a yellow circle, a red triangle, a cobalt square. Cut one black diagonal rule across the upper grid for tension.

Code the sections by shape, not icons: a filled circle marks Tooling, a triangle marks Technique, a square marks Workflow, each drawn in its zone color, with a small real legend mapping shape to section. Each item is a grid cell with a mono source line, a linked headline, and one or two short paragraphs.

Type: display in a geometric sans (Jost, or a Futura-like face), body in a clean grotesque (Archivo), tiny labels in a mono (DM Mono). Keep body at 19px, line-height 1.7, measure near 68 characters, ink on bone, never colored body text. Reserve white text for the cobalt and red blocks and verify WCAG AA on every block. Square corners everywhere except the genuine circle. No gradients, no glow, no neon, and no fake screenshots or garbled text inside any generated image.

Design a single dark web page styled as a version-control review tool, used to present a short briefing of four linked stories as commits on a branch.

Layout: a monospace top bar showing a repo path, nav, a branch pill, and an edition number. A two-column shell: a left branch-graph rail and a wider review column. The rail is a list of commits on a vertical line with small round nodes, each linking to a section, with a short hash under each label; a steel main line runs through them and a coral side branch diverges for the agent commits and merges back at a green node near the end. The review column opens with a status row of monospace cells (edition, date, section, reading time, an Open status), a short kicker, one large headline, and a one or two sentence deck. Then a lead well: a framed diff plate image on the left, and a change-request box of label-and-value rows on the right. Then an art-direction note. Then the commits, each opened by a file-path kicker (like tooling/ or technique/), a short hash, the source domain on the right, a headline that links out, and one or two body paragraphs. The lead commit also shows a real diff hunk with removed lines in red and added lines in green. Close with a field note styled as a merge, a prompt block, and a numbered sources list.

Palette: deep ink ground #15171C, panels #1B1E25, parchment text #E7E5DE, secondary #9AA0AB, a steel-blue main branch and link color #6FA0C0, a coral agent branch #D9774A, and green #74B083 with red #C75B4E reserved only for the diff and the merge. No gradients, no glow, no neon.

Type: Bricolage Grotesque for the headline and section headlines; IBM Plex Sans for body at 19px with line height 1.68; JetBrains Mono for branch names, hashes, file-path kickers, the diff, the meta cells, and the prompt block; IBM Plex Serif italic for one pullquote.

Components: branch-graph rail with nodes, status row, diff hunk with a line-number gutter, change-request box, commit cards with file-path kickers, merge node, numbered sources. Card radius 12px, code blocks 10px, nodes are the only full circles. Keep the reading measure near 67 characters.

Guardrails: every text color meets WCAG AA on its real dark surface, small mono labels included. Hover and focus states with 140ms easing and a prefers-reduced-motion guard. No fake search field, no dead toggles, no active filter pills; the branch pill and status row carry real metadata only. Any plate stays abstract, with no garbled text baked into the image.

Design a single web page styled as the front page of a broadsheet newspaper, used to present a short briefing of three linked stories.

Layout: a small monospace top bar with the publication name and nav. Below it a dateline strip, a thick top rule with a row of monospace cells (edition number, weekday and date, section, reading time). Then a masthead: a short red kicker, one large serif headline (this is the only display-size element), and a one or two sentence deck. Then a lead well: a two-column row with a framed halftone plate and its caption on the left, and a bordered fact box of label-and-value rows on the right. Then an art-direction note. Then the stories, each opened by a kicker line (a small red square, a role label like Tooling, and the source domain on the right), a serif headline that links out, and one or two body paragraphs. Close with a field note carrying one italic pull line, a prompt block, and a numbered references list.

Palette: cool newsprint ground #EDEEE9, deeper panel #E5E7E0, near-black ink #16181A, secondary #494C50, and one editorial red #C32A20 for rules, kickers, and links. Spot color only, near-monochrome otherwise. No gradients, no glow, no second accent.

Type: Libre Caslon Display for the headline and section headlines; Libre Caslon Text italic for the one pull line; Libre Franklin for body at 19px with line height 1.65; Spline Sans Mono for the dateline, kickers, labels, and the prompt block.

Components: dateline strip, halftone lead plate with caption, label-value fact box, kicker-led stories, hairline column rules between items, numbered references. Square corners; rely on rules and weight, not boxes, to separate. Keep the reading measure near 66 characters.

Guardrails: every text color meets WCAG AA on its real surface, small mono labels included. Hover and focus states with 140ms easing and a prefers-reduced-motion guard. No fake search field, toggles, or active filter pills. Any plate stays abstract, with no garbled text baked into the image.

Design a single web page styled as a design-system reference, the spec sheet for a small visual identity.

Layout: a monospace top bar with the project name, nav, and a spec tag. A masthead title block: an eyebrow, a serif headline, one deck sentence, and a row of spec metadata (issue, date, read time, section) as labeled mono cells. Below it, a framed figure showing the design system as a file. Then a tokens-and-type panel: a color token table (swatch, role name, hex) beside three type specimens (display, body, mono). Then numbered spec sections, each opened by a section number, a serif title, and a quiet role label; inside each, one guideline entry with a small clay marker, a linked headline, two sentences of context, and a source domain. Close with a field note, a prompt block, and a numbered sources list.

Palette: warm espresso ground #1B1714, panel #241F1B, warm bone text #F3ECE1, one clay accent #D9764C for links and markers, a sage #8FA86B reserved for genuine approval marks, and a brick #C25A47 reserved for refusal marks. Dark, but warm and deliberate. No neon, no glow, no gradient.

Type: Fraunces for the headline, section titles, and one italic pullquote; Hanken Grotesk for body at 19px with line height 1.65; Space Mono for tokens, labels, metadata, and the prompt block.

Components: token tables with swatch chips, type specimens, numbered spec sections, guideline entries, a do-and-do-not list, a sources table. Card radius 14 to 16px, chip radius 5 to 6px; vary radius and padding with intent.

Guardrails: every text color meets WCAG AA on its real surface, small mono labels included. Hover and focus states with 140ms easing and a prefers-reduced-motion guard. No fake search fields, toggles, or active filter pills. Any embedded specimen uses short honest text, never garbled labels.

# Vector Design-Tool Workspace - editorial layout
Design a single web page that looks like a vector design app (Figma,
Sketch) holding a long read. Three columns on desktop, stacking on mobile:

LEFT: a sticky "Layers" panel. A monospace tree of the page's sections,
some indented, each row a real anchor link to that section. One row shows
a filled "selected" state. This is the table of contents.

CENTER: a canvas with a faint dot-grid background. Each content section is
a white "frame" (artboard): 12px radius, 1px hairline border, and a small
name tab in the top-left corner reading its label (Hero, 01 Tooling,
Field Note). The active/first frame carries a 1.5px selection outline just
outside its edge with four small square corner handles. On hover, other
frames show the same outline. Guard it behind prefers-reduced-motion.

RIGHT: a sticky "Properties" inspector, monospace label/value rows holding
REAL metadata only (issue number, date, reading time, color tokens as
swatches, typeface names). No fake toggles, sliders, or search fields.

Palette: canvas #E9E9EC, frames #FFFFFF, ink #1A1A1F, one violet selection
accent #4A2BD9 (used only for selection, links, the active tab), and a
reserved red #D8413F for dimension/measure marks. No gradients, no glow.
Type: Space Grotesk for the display headline, section titles, and name
tabs; a readable serif (Newsreader) for body at 19px and line-height 1.7;
Spline Sans Mono for the panels, tabs, and metadata. Body stays serif and
left-aligned, never justified, 60-75 characters per line. Keep all small
labels at WCAG AA on their actual surface. No fake readable UI text inside
any generated image; use plain bars and blank labels instead.

Build a software marketplace listing page for a product that is currently unavailable, in the style of a model hub or extension marketplace.

Layout: a slim dark top bar with a wordmark on the left and small mono nav links on the right. Below it a dark header band holding a breadcrumb, a large product title, a one paragraph description, a right aligned metadata column, and a withdrawn status note. Under the band, a product top row: a media gallery card on the left and a sticky spec and install panel on the right with label and value rows, a status pill, and a short list of available alternatives. Below that, a single reading column about 760px wide for the long form sections.

Components: category kicker labels in monospace above each section title, section titles with a bottom hairline, a bordered idiom card with no colored edge stripe, solid filled status pills for withdrawn, available, and new, a spec register of mono labels and plain values, and one serif italic pullquote.

Palette: page #DCDFE2, listing cards #F4F5F6, dark band #21262B, ink #1A1E22, hairlines #C7CCD1, green accent #2F7A55 for marks and available state, clay #B23A2E for withdrawn. No gradients, no glow, no neon.

Type: Geist for the title and section heads, Onest for body at 19px with 1.7 line height and a 72 character measure, Geist Mono only for labels and metadata, Spectral italic for the single pullquote.

Guardrails: WCAG AA contrast on every text and surface pair, underline on link hover, visible focus rings, card radius 12 to 14px and pill radius 6px rather than uniform pills everywhere, no card shadows, no fake search or filter chrome, real hover states under 180ms, and honor prefers-reduced-motion.

Build a long form article page styled like an encyclopedia entry in dark reading mode.

Layout: a slim top site bar with a wordmark on the left and two tab style links on the right. Below it, a single reading column about 720px wide with a sticky contents rail on the left listing the numbered sections. At the top right of the article, place a 320px infobox: cover image first, then label and value rows for the page metadata, then a row of five color swatches.

Components: an italic hatnote under the H1, hairline rules above each numbered H2, a bordered notice box for editorial asides with no colored edge stripe, one large serif italic pullquote, superscript reference numbers in the prose, a numbered references list with small backlinks, and a category strip of tag links across the footer.

Palette: page #101418, panels #1B2126, hairlines #3A434D, body text #E6E9EC, secondary text #A8B0B9, links #87A6F8. No gradients, no glow, no neon.

Type: a text serif such as Source Serif 4 for the H1, section heads, and the pullquote. A neutral sans such as Arimo for body at 19px with 1.7 line height and a 72 character measure. Monospace only inside code blocks.

Guardrails: WCAG AA contrast on every text and background pair, underlines on link hover, visible focus outlines, square corners except 8px on the infobox and notice box, no card shadows, no fake search or toggle chrome, and honor prefers-reduced-motion.

Design a single self-contained HTML page styled as a security advisory or
CERT daily bulletin, the kind a national vulnerability database or a
distro security team publishes.

Structure: a near-black agency band across the top with the site name and
nav; directly under it a thin classification strip in the accent color
with small uppercase monospace text; then a bulletin header holding a
monospace advisory ID line, the headline as the advisory title, a short
deck, a four-cell field register (label over value, hairline-divided),
and a row of numbered section links. Body sections open with a thick
3px ink rule, a monospace section number, and a title. News entries are
numbered notes: a monospace note ID in a narrow left column, then a
linked title, one or two sentences of prose, and a source-domain line.
Give the lead story an affected-versions table with status labels, and a
disclosure timeline of dated rows. Close with a boxed analyst note and a
numbered reference list.

Type: Inter Tight bold for the headline and section titles, Source Sans 3
for prose, IBM Plex Mono for IDs, field labels, tables, and timestamps.
At most one serif italic line (Crimson Pro italic) as a pullquote.

Color: warm paper #FAFAF7, field-register gray #F1F1EC, near-black ink
#1C1E20, and one safety-orange accent #BC4A07 for the classification
strip, IDs, and links. Status green #256D38 and the orange appear in
table status labels only, as honest states, never as decoration.

Guardrails: body text at least 19px with line height 1.65 or more, never
monospace for prose; square corners throughout, no border radius; all
text meets WCAG AA on its actual background; no gradients, no glow, no
neon, no fake search fields or buttons; hover states only on real links;
the bureaucratic grammar must organize real content, not decorate it.

Design a dark market-data terminal page for a daily design-news briefing.
Archetype: a financial trading console rendered as a web page. Ground: warm
near-black (#131009), panels in #1B1710 with 1px #3A3220 borders and sharp
2-3px corners. One signal color: amber #FFB000, reserved for live numbers,
panel codes, prices, and link underlines; body prose is warm parchment
(#F2E9D8) and secondary text is #B5A78D. Type: a condensed engineering
display face (Saira Condensed 700, uppercase) for the headline and panel
titles, a neutral sans (Public Sans, 19px minimum, line-height 1.65 or more)
for prose, and a monospace (Fragment Mono) only for tickers, timestamps,
stat readouts, and source domains. Build: a top status bar holding the brand
and session metadata as bordered mono cells; a thin ticker strip of real
data points from the page itself; a two-column quote board with the lead
story on the left and an instrument tile on the right showing genuine
numbers as label-value rows; below, a grid of panels titled like terminal
functions (WIRE, TECH, FLOW), each news item a wire row with a mono date
cell, a linked headline, and one or two sentences of context. Add one
abstract phosphor depth-chart plate with no readable text in it. Guardrails:
WCAG AA contrast for every label on its actual surface, no neon glow, no
gradients, no cyan-on-black, no fake buttons or fake search fields, hover
states with about 150ms easing, and a prefers-reduced-motion fallback that
stops the ticker animation.

Design a single self-contained HTML page styled as a system settings or
account preferences page, the kind macOS System Settings or a SaaS
account screen uses.

PAGE ARCHETYPE: a settings console. Top app bar with a wordmark and two
nav links. Below it a thin settings bar: a small monospace breadcrumb
and a quiet saved indicator. Then a two-pane layout: a sticky left
section rail and a wide main column.

COMPONENTS: the rail is a vertical list of section links, one marked as
the current section with a filled background, bold weight, and a short
inset edge marker. The main column opens with a settings header: a small
kicker chip, a large headline, a one-line description, and a four-cell
meta strip (issue, date, reading time, section). Under quiet uppercase
group labels, each item is a preference ROW on a card: a bold row title
and one line of description on the left, and a right control column that
is a bordered Open link plus the source domain beneath it. A couple of
rows carry small honest state badges. Include one framed figure, then
full-width panels for a prompt block, a field note, and a numbered
sources list. Panes stack to one column under about 900px.

PALETTE: warm porcelain ground #EFEDE7, sunken panel #EAE7DF, card
surface #FBFAF6, ink #1C1B19, secondary #5F5A51, one flat teal accent
#117C6F for links, the active section, and on-states. No purple-blue
gradient, no neon, no glow, no green-on-black.

TYPE: Schibsted Grotesk for the headline and row titles; Hanken Grotesk
for body and UI; Spline Sans Mono for labels, meta, and source domains;
Newsreader italic for the art-direction line and one pullquote only.

GUARDRAILS: body text at least 18px with about 1.6 line height and WCAG
AA contrast. Cap card radius near 16px, controls near 9px; do not
pill-shape every element. Toggles and the saved indicator are
informational state, marked aria-hidden, never fake buttons, and there
is no fake search field. Use no colored left-border stripe on cards;
distinguish the active rail item with background and weight. Real hover
and focus on links and the rail with ~150ms easing, and disable
transforms under prefers-reduced-motion. No readable text in the figure.

Type: Schibsted Grotesk for the headline, Hanken Grotesk for rows and body, Spline Sans Mono for labels and source domains, Newsreader italic for one editorial line.
Color: warm porcelain ground #EFEDE7, ink #1C1B19, one flat teal accent #117C6F on hairline-divided cream surfaces. No gradients, no glow.

Design a single self-contained HTML page styled as a Kanban project
board, the kind Linear, Trello, or Jira uses to track work.

PAGE ARCHETYPE: a project tracker. Top app bar with a wordmark and two
nav links. Below it a board header: a small monospace breadcrumb line
(number, date, read time), a large board-title headline, a one-line
description, and a label legend of small color dots. Under the header,
the board itself: three equal vertical lanes side by side.

COMPONENTS: each lane has a header (an uppercase monospace title and a
count badge with a colored dot) over a stack of cards. A card is a tight
unit: a row of small label chips (each a colored dot plus a monospace
word), a linked headline, one or two lines of context, and a meta footer
with a source domain, a date, and a right-aligned arrow. One lead card
carries a flat-color cover image at the top. Below the board, full-width
panels for a prompt block, a short field note, and a numbered sources
list. Lanes stack to one column under about 920px.

PALETTE: cool slate board #E9ECF2, faint lane panels #E2E7F0, white cards
#FFFFFF, ink #171A21, secondary #565E6E, one flat cobalt accent #2B49E6
for links and the lead label, with teal #0E7C66 and clay #B4541E only as
label dots. No purple-blue gradient, no neon, no glow, no green-on-black.

TYPE: Bricolage Grotesque for the board title and card headings; Hanken
Grotesk for body and UI; DM Mono for labels, counts, dates, and source
domains; Literata italic for one editorial line only.

GUARDRAILS: body text at least 18px with about 1.6 line height and WCAG
AA contrast. Cap card radius near 13px, lane radius near 18px, chips near
7px, and vary radius with purpose. Label dots are the only circles; do
not pill-shape chips or buttons. The count badge and legend are
informational, not buttons, and there is no fake search field. Use one
tight card shadow on hover, not a shadow on every surface, and no colored
left-border stripe. Give cards and links honest hover and focus states
with ~160ms easing, and disable transforms under prefers-reduced-motion.
No readable text inside the generated cover image.

Type: Bricolage Grotesque for the board title and card headings, Hanken Grotesk for body and UI, DM Mono for labels, counts, dates, and source domains, Literata italic for one editorial line.
Color: cool slate ground #E9ECF2, ink #171A21, one flat cobalt accent #2B49E6, with teal, clay, and slate label chips as honest category colors. No gradients, no glow.

Design a single self-contained HTML page styled as a community Q&A
discussion thread, the kind Stack Overflow or a developer forum uses.

PAGE ARCHETYPE: a question-and-answers thread. At the top, a question
block: a small monospace meta line (number, asked date, read time), a
large question headline, a one-paragraph question body, a left gutter
showing a score and an answer count, and a row of tag chips. Below it, a
short pinned info card, then a "3 Answers" heading and a stack of answer
cards.

COMPONENTS: each answer is a two-column row, a narrow left vote gutter
(an up caret, a score, a down caret) beside the answer content. The
strongest answer is marked Accepted with a filled raspberry check and a
full raspberry border, never a colored left stripe. Each answer ends with
an author byline: a small rounded avatar, a handle, and a reputation
figure. A sticky right sidebar holds one image card, an asked/viewed/
active stat row, a tag list, and a short Linked list of primary sources.

PALETTE: warm paper #F2EFE6, card surface #FBFAF5, ink #1A1C22, secondary
#5C5F66, one raspberry accent #A8244E for links, the accepted state, and
marks. No purple-blue gradient, no neon, no glow, no green-on-black.

TYPE: Space Grotesk for the question and answer headings; IBM Plex Sans
for body prose; JetBrains Mono for scores, tags, meta, and source
domains; Newsreader italic for one editorial line only.

GUARDRAILS: body text at least 18px with about 1.65 line height and WCAG
AA contrast; answer prose capped near 62 to 66 characters per line. Cap
card radius around 14px and chips around 8px; vary radius with purpose.
The vote gutter is informational, not a button: mark it aria-hidden and
do not style it as tappable. Give links and the issue nav honest hover
and focus states with ~160ms easing, and disable transforms under
prefers-reduced-motion. No fake search field, no readable text inside
the generated image.

Design a single self-contained HTML page styled as a SaaS pricing and
packaging page, the kind a product site ships to compare plans.

PAGE ARCHETYPE: a tiered pricing page. Above the fold, a dark slate plan
band holds the top nav, a small masthead line, a large headline, a short
deck, and an abstract plan-stack image on the right. Three pricing-tier
columns sit centered and overlap the seam where the dark band meets the
lighter page below.

COMPONENTS: three tier cards, the middle one "recommended" and set apart
by a darker surface, heavier type, and a small ribbon, never a colored
left stripe. Each card has a small-caps plan label, a tier name, a
monospace price chip, one short sentence, and a text link styled as the
plan's call to action. Below, build the article sections with a
comparison matrix table (real text cells, not check marks), numbered
workflow steps, one pullquote, and a numbered sources list.

PALETTE: ivory paper #FBF8F1, deep slate band #1B2435, amber accent
#C07E1E for prices, ribbon, and marks, slate #5A6377 for secondary text,
hairline #E4DECF. No purple-blue gradient, no neon, no glow.

TYPE: Fraunces for the headline, tier names, and section headings;
Instrument Sans for body prose; Spline Sans Mono for price chips, labels,
and metadata.

GUARDRAILS: body text at least 18px with 1.6 line height and WCAG AA
contrast. Never set long prose on the dark band. Cap card radius around
14px and chips around 7px; vary radius with purpose. Give cards and links
honest hover and focus states with ~160ms easing, and disable transforms
under prefers-reduced-motion. No fake toggles or dead search fields, and
no readable text inside the generated image.

Design a single self-contained HTML page styled as a late-1990s software
help viewer, the kind that shipped as a compiled manual with Windows 98
software.

PAGE ARCHETYPE: a help-viewer docs topic page. The entire page lives
inside one beveled application window centered on a dithered teal
desktop. Window chrome, top to bottom: a navy-to-blue gradient title
bar with the site name, a menu bar of plain text links, then a two-pane
body: a left Contents tree and a right topic pane.

COMPONENTS: build the Contents tree from real anchor links with
closed-book and page icons drawn in CSS, plus/minus expander squares,
and a navy selection bar on the hovered row. In the topic pane use
breadcrumbs (Contents > Topic), bold headings over a thin gray rule,
figures with sunken borders and numbered captions, a pale yellow Note
box with a 1px tan border, a Courier-style code block, prev and next
topic links, and a sunken status bar at the window's foot.

PALETTE: dithered teal desktop #0F7268, warm chrome gray #C8C4BA with
#FFFFFF and #7A766A bevel edges, white content panes, navy #1A2E8C
title bar and headings, hyperlink blue #0B3FBF, note yellow #FFF7CC.

TYPE: Istok Web bold for chrome, headings, and labels (hosted Verdana
stand-in); Gelasio for body prose (hosted Georgia stand-in); Cousine
for code (hosted Courier stand-in).

GUARDRAILS: body text at least 19px with 1.7 line height and WCAG AA
contrast on white. Never set body prose on the teal desktop or gray
chrome. Bevels come from two inset box-shadow colors, not drop
shadows. No readable text inside generated images, no pill radii, no
glow, no gradient text. Give links and tree rows honest hover and
focus states, and disable transitions under prefers-reduced-motion.

Design a product changelog page for [project]. Archetype: a release-notes
feed like Linear's, not a blog. Structure: a slim top nav; a release header
band with a version chip, date, and build metadata set in a monospace face;
one bold display headline; then a single vertical timeline rail down the
left with a node per entry. Each entry gets a date column, a small uppercase
tag chip (MAJOR, SECURITY, POLICY, PROMPT, NOTE), a section heading, and
short change rows that lead with Keep-a-Changelog badges: Added, Changed,
Security, Removed. Palette: near-black ink ground #15171B, warm paper-white
text #F2F0E9, slate #9AA3B2 metadata, and one flat chartreuse accent #C3E940
for nodes, tags, and links. No gradients, no glow, no neon-on-black, no
purple. Type: Archivo 900 for display, Schibsted Grotesk at 19px/1.7 for
body, Spline Sans Mono for tags and metadata. Guardrails: body text at least
18px with AA contrast on the dark ground; 6px chip radius instead of pills;
no colored left-border stripes; no fake search fields or toggles; real hover
and focus states on rows and links; respect prefers-reduced-motion.

Design a real-estate style search results page, the list-and-map
layout behind Zillow and Airbnb, not a marketing landing page.

Layout:
- A top wayfinding bar: left wordmark, a rounded faux search field
  with a location pin reading "search the market", and a small nav.
- A row of filter chips below it, one chip active.
- A market-report header: an eyebrow label, a large headline, a
  one or two sentence deck, and a results summary line.
- The body is a two-column split: a scrollable LISTINGS RAIL on the
  left and a STICKY MAP PANEL on the right. On narrow screens the
  map moves above the rail and stops being sticky.
- The map panel holds a printed-map image, a small legend of pin
  colors, and three readout stats. No big photo hero.
- Content sections are listing groups with a pin-number marker.
  Each item is a listing card: a left marker column, a linked title,
  one or two sentences, a mono "spec strip" of small chips, and a
  footer with a "view listing" link and the source domain. One
  featured listing carries an accent left border and a "just listed"
  flag.

Palette: warm map vellum (#E9E4D2), card paper (#F5F1E5), deep ink
(#20251F), sage land and pale-teal water, one brick-red accent
(#C8482E) for pins, rules, and the active chip; a deeper red
(#A2381F) for small accent text. No gradients on type, no glow,
no neon.

Type: a highway-signage grotesque (Overpass) for headings and pins,
a humanist sans (Mulish) for body and UI, a reading serif italic
(Source Serif 4) for one editorial line, and a monospace (Overpass
Mono) for chips, labels, and the legend.

Readability: body at least 18px, line height 1.6 or more, no
justified text, WCAG AA contrast, text never sitting on a border.
In the map image use shapes, contours, roads, and colored pins only;
no fake readable text.

Design a browser feature-support board, in the spirit of caniuse and
the web.dev Baseline widget, not a marketing landing page.

Layout:
- A top toolbar: left wordmark, a faux search field reading
  "search features", and a small right nav.
- A row of filter chips under the toolbar, with one active chip.
- A full-width feature-header band: an eyebrow label, a large
  headline, a one or two sentence deck, and a status row of pills
  (Baseline, Newly available) plus a horizontal usage-share bar.
- A full-width support-matrix card as the hero: a grid of status
  cells (supported, partial, missing) under neutral browser column
  headers, with a legend. No big photo hero.
- Content sections as table rows, not stacked hero cards: each row is
  a left status column (a pill plus a "since" tag), a middle column
  with a short heading and one or two sentences, and a right support
  strip of five small status squares, a usage bar, and a source
  domain.

Palette: cool spec paper (#EEF2F0), deep green-slate ink (#16211C),
one green accent (#1F8A5B) for links and the supported state, amber
(#B7791A) for partial, red (#BE3A34) for missing. Status colors are
functional only; no gradients on type, no glow, no neon.

Type: a clean grotesk (Sora) for headings, a highly readable
humanist sans (Public Sans) for body and UI, a reading italic (Lora)
for one editorial line, and a monospace (IBM Plex Mono) for labels,
status pills, and the legend.

Readability: body at least 18px, line height 1.6 or more, no
justified text, WCAG AA contrast, text never on a border. In the
matrix image use colored cells, checks, and bars only; no fake
readable text.

Design a premium ecommerce product detail page (PDP) for a single
catalog item, not a marketing landing page.

Layout:
- Above the fold, a two-column split: a left product gallery with a
  vertical thumbnail rail and one large product photo on a warm
  seamless studio backdrop, and a right sticky buy box.
- The buy box holds: an "in stock" status line, a serif product
  title, a one-line subtitle, a price-and-SKU strip, variant chips,
  a primary add-to-cart button, and a small assurance row.
- Below the fold, stack product sections: Specifications as
  label/value spec rows, a "Pairs well with" shelf of three cards,
  a "Recreate this look" panel, and an Editor's review with stars.
- Section markers come from the store, not symbols: numbered section
  headers with an eyebrow tab on the right.

Palette: warm oat paper (#F1EADD), espresso ink (#221C18), one
garnet accent (#8E2A39) for the buy button, links, and price, and a
muted olive (#4C5740) for one italic editorial line. No gradients on
type, no glow, no neon.

Type: an elegant high-contrast serif (Instrument Serif) for the
product title and section heads, a clean humanist sans (Figtree) for
body and UI, a reading italic (Newsreader) for one editorial line,
and a monospace (Spline Sans Mono) for SKU codes, price labels, and
spec metadata.

Readability: body at least 18px, line height 1.6 or more, no
justified text, WCAG AA contrast, text never sitting on a border.
Do not render fake readable text inside the product photo; use blank
labels and soft shapes only.

Design a web page using a Command Palette art direction.

Lay it out as a single light "launcher" window floating over a softly
blurred application screenshot. No big hero image inside the window.

Translate the references into real web components:
- A search bar header: a magnifier, a typed query with a blinking caret,
  and right-aligned kbd chips for issue and date metadata.
- Content as grouped command rows: a small-caps group header with a count,
  then rows of leading icon + title + one-line subtitle + a return key.
- One highlighted active row in a pale blue tint for the pinned item.
- An expandable command that opens a dark code panel for a prompt.
- A fixed action bar at the foot with kbd hints (Open, Actions, Close).

Palette: a cool lavender-gray field, white window, near-black ink, slate
gray secondary text, one electric blue for selection and links, and a warm
amber only for the return key. Avoid purple-blue gradients and any glow.

Type: a characterful grotesque for command titles, a humanist sans for
body, a serif italic for one editorial line, and a monospace for keys,
shortcuts, and source domains.

Keep it readable: body at least 18px, line height 1.6 or more, no justified
text, strong contrast, no text sitting on borders. Do not render fake
readable UI text inside the blurred backdrop image; use soft shapes only.

Type: Bricolage Grotesque for command titles, Hanken Grotesk for body, Newsreader italic for one editorial line, a monospace for shortcuts and metadata.
Color: lavender-gray field #E9EAF2, ink #15161D, action blue #3355FF, one amber #E8870B highlight as an honest active state.

Design a web page using a Pull Request Review art direction.

Lay it out like a code-review "files changed" view: a full-width PR header, then a sticky left "files changed" index rail beside a right-hand feed of entries. Do not use a big hero image.

Translate the references into real web components:
- A masthead styled as a PR header, with an Open status pill and a branch ref (canvas to main).
- A left rail listing each section as a file row with a monospace path and a +N stat, anchored to the feed.
- Each feed section as a changed-file card: a file path, a kind tag, and a +N -N diff stat.
- News items shown as green addition rows: a linked headline, one sentence, a source link.
- A green merge box for the closing takeaway, with a visible Merge button.

Use a cool light review-paper background, near-black ink, merge green, deletion red, and a quiet plum for the merged state. Pair a clean product sans for display with a readable serif for body, and a monospace for paths, line numbers, and labels.

Keep it readable: body text at least 18px, generous line height, no justified prose, strong contrast, no text against borders. Avoid fake readable code in images (use abstract bars), AI-glow, neon gradients, and decorative marks that hurt scanning.

Type: Geist for display and UI, Spectral for body and italic synthesis, Geist Mono for diffs, counts, and metadata.
Color: cool review gray #F4F6F8, ink #11181C, diff green #1F883D and alert red #CF222E as honest review states only, merge violet #6639A6 for the merge moment.

Design a web page using an Editorial Proof Desk art direction.

The page should feel like generated work has been placed on a print proofing table for human review. Use galley-proof sheets, crop marks, correction flags, revision slips, markup rails, signoff stamps, and stacked paper as the core visual language.

Translate those references into real web components:
- A hero that behaves like a proof sheet with metadata cells and a signoff row.
- Section headers styled as proof labels or revision slips, with enough padding around large type.
- Content cards that feel like marked-up galleys, not generic dashboard panels.
- A restrained palette of warm ivory paper, aubergine ink, proof red, teal correction tabs, muted mustard, and graphite desk tones.
- Typography that pairs a high-character editorial serif for display with a precise sans or mono for labels.

Keep the page readable first: body text at least 18px, generous line height, no justified prose, strong contrast, and no text pressed against borders.

Avoid fake readable text in images, AI-glow aesthetics, neon gradients, robots, code walls, and decorative proofing marks that make the content harder to scan.

Type: Fraunces for display, Inter for body, Literata italic for synthesis, Azeret Mono for proof labels and revision slips.
Color: warm proof paper #EAE1D2, aubergine ink #24172F, teal correction #147D78, red-clay proof marks #C95B43.

Design a single self-contained HTML page as a connector catalog and MCP switchboard, integration documentation as product grammar. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cream documentation ground #F6F3EC; a dark graphite issue sheet #17212B anchoring the hero; items as modular endpoint cards with small socket-port motifs along one edge; section markers named like catalog routes (Route, Socket, Return, Recipe, Trust, Index); muted teal #0B7D76 route labels and signal-orange #E75D2A trust marks as honest states; sources arranged like a switchboard index.

Type: Space Grotesk for product-doc display, IBM Plex Sans for body, IBM Plex Serif italic for emphasis, Space Mono for endpoint labels.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Socket motifs are small flat geometry on card edges, never a background pattern.

Design a single self-contained HTML page as an agent operations console, a supervised run queue with attention states. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: a flat graphite-green ground #101816; content on mineral-white #E8EFE8 review surfaces; split-pane rhythm pairing prose with console chrome; cyan #2EA7B8 and amber #F3B23C used only as honest state marks (rings, status lights, lane labels); sections arranged like a run queue with status rows; ink #E8EFE8 on dark, #101816 on light.

Type: DM Sans for display and body, Fraunces italic for one editorial synthesis line, JetBrains Mono for terminal labels and states.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Dark ground without dark-mode cliches: no neon, no glow, no cyan-on-black prose; body text sits on the light surfaces.

Design a single self-contained HTML page as a metro transfer map and ticket kiosk, transit signage for a daily briefing. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: mint fare-ticket stock #E6FFF5 with punched-edge perforations on cards; section numbers as transfer stops connected by a blunt route line running down the page; a kiosk-style nav; a three-cell route metadata strip in the masthead; the art-direction note as a yellow fare card; transit teal #006B5F lines and signal orange #FF5A1F transfer dots; ink #14201C.

Type: Archivo Black caps for display, Atkinson Hyperlegible for body, Fraunces italic for one editorial signal, IBM Plex Mono for route labels.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). The route line is structural, drawn once, connecting real sections.

Design a single self-contained HTML page as a service-banner textile system, memorial modernism in cloth and ribbon. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: a deep service-navy cloth ground #101C32; content on aged ivory #E9E0CA panels with sewn-edge stitched borders; oxblood #76302E ribbon bars marking sections; muted marigold #C4972E status markers; gray-green #687467 stitched rules; sections arranged like procession markers down the page. The register is solemn and restrained.

Type: Barlow Condensed for procession-signage display, Source Serif 4 for body, Literata italic for one quiet line, IBM Plex Mono for stitched labels.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Ivory text on navy meets WCAG AA; no glow, no gradients, cloth implied by flat color and stitch rules only.

Design a single self-contained HTML page as a victory-garden risograph poster crossed with a civic seed packet. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: sun-gold paper #F4E2B8 with a faint crop-row line pattern in the ground; overprinted riso inks in navy #132A4A, garden green #236E44, and tomato red #E34B2D with visible print grain; the art-direction note as a seed packet with a labeled front panel; blue stamped section labels; tomato-red offset shadows on cards; one poster-style hero plate above the fold.

Type: Bagel Fat One for chunky seed-packet display lettering, Newsreader for body, Work Sans for poster labels, a monospace for registration captions.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Overprint texture stays under display and panels, never under body text.

Design a single self-contained HTML page as a memorial archive ledger, a civic record table handled quietly. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cool gray record-table ground #DDE1DE; cream service-paper panels carrying the content; typed ledger metadata rows; one red #B94A36 inspection stamp used once; a double-rule frame on the pullquote; sections filed like conservation notes with small accession marks; slate #5D7279 secondary, ink #1B2022. The register is solemn and restrained throughout.

Type: Cormorant Garamond for display, Source Serif 4 for body, a condensed sans for small labels, a monospace for accession marks.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). No bright color beyond the single stamp; quiet is the idiom.

Design a single self-contained HTML page as an exploded technical office manual, a 1980s drafting-table workbench. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cool drafting paper #EAF3F4 over a faint blue grid; one exploded-view diagram with thin leader lines and numbered yellow figure tags above the fold; section headers as technical manual plates with figure numbers; oxide-red #C43B2F inspection marks as the single accent; engineering blue #1D56A5 secondary; ink #111820.

Type: Barlow Condensed for plate display, Source Sans 3 for body, a monospace for part numbers, figure tags, and metadata.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Leader lines connect labels to real content, never decorate empty space.

Design a single self-contained HTML page as a white-cube gallery installation, museum wall labels for a daily briefing. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: pure gallery white #F8FAF7 walls over a pale mint floor plane; the hero pairs a large serif exhibition title with one framed plate image; section numbers set like accession labels; items as graphite wall-label cards #42494F on white with generous margins; strips of cobalt #0B63CE painter's tape as the only marking accent; ink #121416.

Type: Instrument Serif for exhibition display, Libre Franklin for body, IBM Plex Mono for accession-style metadata.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Whitespace is the medium: wide margins, few rules, tape used at most four times.

Design a single self-contained HTML page as a race-control pit wall, motorsport telemetry as an operations surface. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cool gray paper #E9ECE7 with carbon panels #111417 and #2A3238; the hero as a pit-wall control board; sections as sector reports with curb-stripe edge marks; takeaways styled as radio calls; lap-board tiles for metadata; telemetry lime #C9FF2E reserved for timing data, traces, and live marks, never prose; thin timing rules between rows.

Type: Bebas Neue for condensed display, IBM Plex Sans for body, Fraunces italic for one editorial aside, IBM Plex Mono for timing labels and sector numbers.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Lime on carbon only, never lime on light gray.

Design a single self-contained HTML page as a public-library card catalog, a reference-desk drawer rendered as a webpage. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cool celadon card stock #DCE4D8 deepening to #CBD6C8, with brighter filing cards #EEF2E7; the hero as one oversized library card with a top filing tab; the art-direction note as a stamped reference slip; section markers as drawer labels with small brass #AE8D48 pulls; due-date-style stamps on metadata; the issue nav as a stack of catalog drawers in deep green #526156 and #39463C; oxblood #7B3033 as the single marking accent.

Type: DM Serif Display for headings and its italic for quiet accents, Source Serif 4 for body, IBM Plex Mono for filing marks and source records.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Stamps tilt no more than two degrees and never touch prose.

Design a single self-contained HTML page as an airport terminal operations board, public wayfinding infrastructure. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: warm concourse paper #F7F1E3; a black enamel #151915 departure-board hero with high-contrast signal-yellow #F5C400 route accents and arrows; gate-number tiles as section headers; a three-stop route board for the lead story; public-signage arrows guiding flow between sections; sources styled as terminal records; wayfinding blue #0057B8, service green #008C72, and alert red #D3381C used only as honest signage states.

Type: Archivo Black for terminal signage display, Atkinson Hyperlegible for body, Literata italic for one editorial card, IBM Plex Mono for gates, routes, and metadata.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Yellow stays on dark enamel for contrast, never as small text on light paper.

Design a single self-contained HTML page as a vaporwave VHS broadcast, a lapsed cable channel rendered as a webpage. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: a deep-navy field from #0D0732 to #1E0D5B; the masthead as a VHS chrome bar with a blinking REC dot, channel number, and timecode; a full-width hero of a sunset-to-magenta gradient over a perspective cyan wireframe horizon with polygon palm silhouettes and a sun cut by three navy bands; magenta #FF2EC8 plus cyan #5BFCFC color-bleed text shadows on the display headline only; sections badged TRACK 01 through 06 with transport-control glyphs; the pullquote as a burnt-in TV subtitle with closed-caption corner marks; takeaways as on-screen alerts with a magenta side bar; pearl #ECE6FF prose, coral #FF7AB3 and sunset #FFE873 accents; a faint scanline overlay.

Type: Monoton for monumental display, Space Grotesk for body, VT323 for all chrome, timecodes, and the sources list.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Gradients belong to the hero sky and chrome only; body prose is flat pearl on flat navy at 19px or larger.

Design a single self-contained HTML page as a mid-century cinema poster program, Saul Bass cut-paper modernism. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: program paper #EFE7D1 with deeper #E2D8BC panels; a cut-paper composition anchored to one hero corner built from simple geometry (a cobalt lozenge, a tomato circle, an ink bar); a vertical monospace strip in the margin carrying the issue number; section markers as spelled-out numerals ONE, TWO, THREE in Spartan caps, each prefixed by a tomato bar; the pullquote framed by thick black bookend bars above and below; takeaway cards reversed out in ink #171615 with a tomato pin; tomato #D8401C punctuation accents and cobalt #26456E secondary.

Type: League Spartan caps for display with a tomato period on the headline, PT Serif for body, Fraunces italic for asides, DM Mono for credit-block captions.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Cut-paper shapes are flat fills, no gradients or bevels.

Design a single self-contained HTML page as a sumi-e manga spread, ink-wash editorial on washi paper. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: washi #F4EFE3 with deeper #DCD0B4 panels; a soft bokashi ink-wash gradient across the top of the hero; a vertical tategaki kanji column beside the headline; a vermillion #C72A1E hanko seal rotated about -7 degrees in the hero corner; a brushstroke panel-cut divider before every section; a small kanji numeral prefixing each section marker; indigo #234763 for italic asides; sakura #D89BAE petals drifting in the hero top corner; ink #1A1816.

Type: Shippori Mincho B1 for display, EB Garamond for body and italic, Noto Serif JP for kanji, JetBrains Mono for marks and tags.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Ink wash stays in the hero and dividers; prose sits on clean washi.

Design a single self-contained HTML page as a naval code book, maritime signal flags over chart paper. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: chart cream #F1E7CB with deeper #DACB9D panels and a navy double-rule chart border around the page; a banner of international-code signal flags running across the header; the art-direction note framed as a code-book leaf with two small pennants hanging from its top edge; a stenciled mono masthead with ship's-log lines; a signal-yellow #E8A60E rope-banner pullquote with vermilion end caps; a compass-rose ornament between sections; chart navy #082042 ink, sea blue #1F4D78 secondary, signal red #C8102E accents.

Type: Oswald for compressed signage display, Source Serif 4 for body and its italic for asides, JetBrains Mono for callsigns and tags.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Flags are flat geometric color, no skeuomorphic cloth.

Design a single self-contained HTML page as a pressed-specimen herbarium folio, a botanical archive plate. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: aged manila card #EDE3D0 with deeper #D7C9AE panels and a double-rule folio frame around the whole page; a copperplate-engraved title plate as the masthead with a small pressed-leaf ornament between two hairline rules; an italic Latin-style binomial line under the art-direction heading; rose-madder #893B30 ink stamps reading FILED and OBSERVED, rotated about 1.5 degrees, on the takeaway boxes; a mono accession tag on the hero; faint foxing spots; pressed-leaf olive #4F5A2A hairlines and tags; ink #1F1A12.

Type: Cormorant Garamond for display and italic binomials, Lora for body, IBM Plex Mono for accession numbers and field tags.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Stamps and foxing are sparse, never over prose.

Design a single self-contained HTML page as an architectural drafting plate, blueprint discipline on warm vellum. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: vellum #ECE3CB with deeper #D6C9A4 panels and a faint hairline drafting grid; a drafting title block as the masthead, labelled like Sheet A-005 with issue metadata in its cells; numbered drafting bubbles with thin leader lines as section markers; surveyor corner brackets framing the art-direction note, captioned Detail A; a faint cyan double-rule sheet border around the page; drafting-pencil red #A8240F reserved for rev marks, dimension callouts, and the period of the hero headline; navy ink #112E5A with secondary #1B5E8C.

Type: Big Shoulders Display for the plate display face, Inter for body, Source Serif 4 italic for asides, JetBrains Mono for dimension annotations.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). The grid stays faint enough to read over.

Design a single self-contained HTML page in a Memphis Milano idiom, postmodern Sottsass exuberance disciplined for reading. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: warm paper #FAF6E8 scattered with confetti-terrazzo dots; chunky geometric blocks; hot-pink #FF3E8A and cobalt #2E5BFF offset drop shadows on cards and callouts; accents in electric teal #00BFB3, sunshine yellow #FFD23F, and terracotta #E96A4A; a yellow half-circle bookend on the art-direction card and one small triangle pin in its corner; ink #1A1A1A for all prose.

Type: Bungee for chunky display headlines with a layered pink-plus-cobalt text shadow, Sora for body, Fraunces italic for one editorial flourish, Space Mono for captions and labels.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Shapes and shadows decorate cards and margins; body paragraphs sit on plain paper with no pattern behind them.

Design a single self-contained HTML page as an editorial-brutalism spec sheet, stamped block-caps over engineering paper. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cream spec paper #F2EEE6 with deeper cream #E8E2D2 panels, ink #111111, secondary ink #3A3A3A, vermilion #FF3A1F reserved for section flags, oversize section numerals, and small markers; hairline horizontal rules dividing every section; the art-direction note framed as a labelled title block with a vermilion bookend; mono caption ticks on metadata.

Type: Anton for stamped block-cap headlines, Newsreader for body and its italic for asides, IBM Plex Mono for spec captions and section numbers.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Vermilion is a marking ink, never a background field.

Design a single self-contained HTML page in a Frutiger Aero idiom, the glossy aqua-era web of 2004-2008. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: a sky ground from #DCEEFF down to #B7DEF5 with drifting cumulus clouds and exactly one lens flare; glossy aqua panels with white inner highlights and soft bevels; beveled tabs for the nav; capsule buttons; a peach horizon glow with one sunset-orange accent #FF6B00; royal-blue links #0066CC and teal secondary accents #00A99D.

Type: Tahoma or Verdana ultra-bold for display with a chrome gradient fill on the hero headline only, Verdana or Tahoma body, Times-style italic kickers, Courier-style monospace captions.

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Gloss and gradients live on panels, chrome, and the hero sky, never under body text, which sits on a plain light surface.

Design a single self-contained HTML page in a risograph print idiom, the look of a two-color indie-studio zine. The content is a daily design-news briefing: a top nav, an issue masthead with number, date, and read time, a hero headline with a one-line deck, a boxed art-direction note, numbered sections of linked news items with one or two sentences of context each, one pullquote, a monospace prompt block, a sources list, and a colophon.

Treatment: cream paper #F4EBD3 with deeper cream #E9DCB8 panels; fluorescent pink #FF3E9C and riso blue #1F35C4 as the two ink passes, overprinting to violet #4A1170 where they overlap; halftone dot fields behind display moments; deliberate 2-3px misregistration offsets on headlines, rules, and section numbers, as if the pink and blue passes slipped; visible paper grain.

Type: an ultra-bold condensed grotesque for display (Anton or Archivo Black), a Times-style italic serif for editorial asides, Courier-style monospace for captions and section numbers (set as "Section 01" markers).

Guardrails: body text at least 18px with line height 1.6 or more, prose in the body face and never in monospace, line length 60-75 characters, WCAG AA contrast on every surface, hover and focus states on real links, decoration in the margins and panels rather than under running prose, no fake readable text in images, and no default AI styling (no purple-blue gradients, no glow, no pill-shaped everything). Misregistration belongs to display elements only, never body text.