Every issue of Art Direction Daily is rebuilt in a different visual system, and every issue ships one reusable prompt that recreates it. This is the full archive: paste any of them into an AI design or build tool to get the archetype, components, palette, type pairing, and readability guardrails.
36 prompts · updated 2026-06-12
NO. 036 · 2026-06-12
Encyclopedia Article, Dark Reading Mode
A wiki article read at night: infobox masthead, contents rail, numbered references.
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.
NO. 035 · 2026-06-11
Security Advisory / CERT Daily Bulletin
The issue filed as a security advisory: field registers, one orange classification strip, an affected-versions table.
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.
NO. 034 · 2026-06-10
Market Data Terminal / Phosphor Quote Board
A market data terminal: amber phosphor quotes on warm black, news as wire rows, one spread chart.
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.
NO. 033 · 2026-06-09
Settings / Preferences Console
A system settings page: a sticky section rail beside grouped preference rows, each a label, a description, and a control on the right.
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.
NO. 032 · 2026-06-08
Kanban Board / Project Tracker
A project-tracker board: three labeled lanes of stacked cards, color-coded label chips, and count badges on a cool slate ground.
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.
NO. 031 · 2026-06-07
Q&A / Community Discussion Thread
The whole issue filed as a Stack-Overflow-style question with voted answers and one accepted reply.
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.
NO. 030 · 2026-06-06
Pricing & Packaging Page / Tiered Plan Comparison
A SaaS pricing page: a dark plan band, three tier columns bridging into ivory, one plan recommended.
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.
NO. 029 · 2026-06-05
Help Viewer / Three-Pane Manual Docs
A 1998 help viewer on a teal desktop: chrome bevels outside, book typography inside.
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.
NO. 028 · 2026-06-04
Release Notes / Semver Ledger
A dark product changelog: one dated timeline rail, tagged entries, and Keep-a-Changelog badges on a near-black ink ground.
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.
NO. 027 · 2026-06-03
Real-Estate Search / Listings & Market Map
A list-and-map property search: a scrollable listings rail beside a sticky cartographic market map, with filter chips, pins, a legend, and spec strips.
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.
NO. 026 · 2026-06-02
Feature Support Matrix / Baseline Status Board
A caniuse-style Baseline board: status cells, browser columns, usage-share bars, filter chips, and feature rows.
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.
NO. 025 · 2026-06-01
Boutique Product Page / Ecommerce PDP
A premium ecommerce product detail layout: left gallery with a thumbnail rail, a sticky buy box, variant chips, and scannable spec rows on warm catalog paper.
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.
NO. 024 · 2026-05-31
Command Palette / ⌘K Launcher
The whole page as a light command launcher floating over a dimmed app.
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.
NO. 023 · 2026-05-30
Pull Request Review / Diff Merge System
A GitHub-style files-changed view — a sticky left files-changed index rail beside a right feed of changed-file cards, with green addition rows, diff stats, status checks, and a merge box.
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.
NO. 022 · 2026-05-29
Editorial Proof Desk / Agent Galley System
Galley proofs, crop marks, correction flags, revision slips, and signoff stamps turn long-running agent work into reviewable publishing material.
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.
NO. 021 · 2026-05-28
Connector Catalog / MCP Switchboard
Light documentation-catalog surfaces, endpoint cards, socket ports, route tags, and trust labels turn MCP connectors into inspectable product grammar.
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.
NO. 020 · 2026-05-27
Agent Ops Console / Attention State System
Graphite-green command-console chrome, split browser and terminal panes, attention rings, permission lanes, alert rows, and status lights.
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.
NO. 019 · 2026-05-26
Metro Transfer Map / Ticket Kiosk System
Mint fare-ticket stock, blunt route lines, transfer dots, kiosk cards, and punched edges turn agent handoffs into visible transit signage.
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.
NO. 018 · 2026-05-25
Service Banner Modernism / Memorial Textile System
Deep service navy cloth, aged ivory panels, oxblood ribbon bars, muted gold markers, and sewn-edge permission labels.
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.
NO. 017 · 2026-05-24
Victory Garden Risograph / Civic Seed Packet
Overprinted crop rows, seed packets, tomato-red app panels, blue browser frames, and one remembrance flower.
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.
NO. 016 · 2026-05-23
Memorial Archive Ledger / Civic Record Table
Folded service paper, stone rubbing, vellum workflow, and quiet filing marks.
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.
NO. 015 · 2026-05-22
Exploded Office Manual / Technical Workbench
A cool drafting-table page built from leader lines, spot colors, and exploded-view context diagrams.
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.
NO. 014 · 2026-05-21
White Cube Installation / Gallery Wall Label
White gallery walls, mint floor plane, graphite wall labels, cobalt review tape, and a generated installation plate turn the agent canvas into an inspectable exhibition.
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.
NO. 013 · 2026-05-20
Race Control / Pit Wall Telemetry
Carbon panels, sector timing blocks, curb stripes, lap boards, and telemetry traces turn agent speed into an operations surface.
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.
NO. 012 · 2026-05-19
Public Library Card Catalog / Reference Desk Drawer
Celadon filing cards, brass label pulls, due-date stamps, serif reference headings, and tabbed dividers turn today’s issue into a pre-digital search system for browser-agent memory.
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.
NO. 011 · 2026-05-18
Airport Wayfinding / Terminal Operations Board
Black enamel terminal boards, high-contrast yellow arrows, gate codes, route logic, and public-infrastructure typography applied to the problem of making website actions visible to agents.
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.
NO. 010 · 2026-05-17
Vaporwave / VHS Broadcast
Sunset-magenta gradient over a cyan wireframe horizon, lined-CRT display type, burnt-in subtitle pullquotes, scanline overlay, and lower-third broadcast chrome — the lapsed-1990s cable-channel aesthetic applied to a story about design systems learning a new audience.
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.
NO. 008 · 2026-05-15
Sumi-e Manga Spread
Ink-wash editorial with vertical tategaki kanji, hanko seals, and manga panel cuts on washi paper.
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.
NO. 005 · 2026-05-12
Architectural Blueprint / Drafting Plate
Trace paper, drafting hairlines, dimension callouts, and a single drafting-pencil red on warm vellum.
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.
NO. 004 · 2026-05-11
Memphis Milano / Postmodern Sottsass
Confetti terrazzo, squiggles, geometric blocks and offset drop shadows in salon pink, electric teal, sunshine yellow, and cobalt.
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.