AI Web DesignPrompt Library

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.