AI Web DesignPrompt Library

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.