Hermes Agent — Dithered Classical

One electric ink colour, classical engravings run through a halftone dither, and a Didone display face — an AI product page that looks like a 19th-century broadsheet printed on a failing monitor.

Source capture · 2026-09-05Open full image ↗

AI interfaces

Design notes

Mood

Scholarly and slightly occult. An AI agent framed as a classical deity rather than a productivity tool. Serious, unhurried, and completely uninterested in looking friendly.

Colors

One saturated ultramarine ink and paper white. That is the entire palette — there is no grey, no accent, no second hue anywhere. Sections invert (blue-on-white, white-on-blue) to create rhythm, which is the only 'colour' move on the page.

Type

A high-contrast Didone serif in ALL CAPS for display, set enormous and letter-spaced tight, against ~10px uppercase monospace with wide tracking for every label, caption and body line. Two faces, maximum contrast between them, nothing in between.

Layout

A centred wordmark with nav split left and right of it. Below, an asymmetric hero — copy block left, dithered artwork bleeding off the right edge. Then a three-up feature grid where each cell is numbered (#1, #2…), captioned in mono, and illustrated with its own dithered plate. Closes with the product name set as a full-bleed word that overflows the viewport on both sides.

Motion

Almost none, and that is the point. No scroll animation, no hover states worth mentioning. The only movement is a video panel embedded in a dithered frame. Stillness is what makes the type read as printed.

Texture

Ordered dithering everywhere — the images are visibly screened, with the dot pattern coarse enough to read as a texture rather than as compression. A subtle scanline treatment sits over the video panel.

Imagery

This is the whole style, so budget for it. Take public-domain classical engravings and mythological sculpture, convert to 1-bit or duotone with an ordered dither (Bayer or Atkinson), and force everything to the single ink colour plus paper. Generate new imagery in the same register — winged figures, radiating burst lines, orbital diagrams, armoured busts — then dither it identically so commissioned and found imagery become indistinguishable. Tool: kie-ai or nanobanana for the source art, then a real dither pass (not a CSS filter) so the pattern survives at 1x.

Don't

Don't add a second colour, and don't use a soft greyscale halftone. The severity comes from exactly one ink and a hard 1-bit threshold; introduce a mid-tone and it collapses into an ordinary duotone photo treatment.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withAny AI toolCodexClaudeCursorChatGPTGeminiv0 / LovableI want toBuild a screenAudit my UIWrite a design brief

Tech stackUse the existing project stackReact / Next.jsAstroVue / NuxtSvelte / SvelteKitHTML / CSS / JavaScriptSwiftUIFlutter

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text# My project [Describe the product, audience, and screen you want to improve] Stack: Use the existing project stack Task: Implement the interface and verify the result in the existing project. ## Tool guidance (Any AI tool) Use available project tools to inspect, implement, and test. State any unavailable capabilities. # Design reference: Hermes Agent — Dithered Classical Source: https://hermes-agent.nousresearch.com/ Swipefile reference: https://swipefile.design/ref/hermes-nous-agent/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: one viewport. Do not infer unseen page sections or a complete user flow. ## Objective Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets. ## Reference notes - mood: Scholarly and slightly occult. An AI agent framed as a classical deity rather than a productivity tool. Serious, unhurried, and completely uninterested in looking friendly. - colors: One saturated ultramarine ink and paper white. That is the entire palette — there is no grey, no accent, no second hue anywhere. Sections invert (blue-on-white, white-on-blue) to create rhythm, which is the only 'colour' move on the page. - typography: A high-contrast Didone serif in ALL CAPS for display, set enormous and letter-spaced tight, against ~10px uppercase monospace with wide tracking for every label, caption and body line. Two faces, maximum contrast between them, nothing in between. - layout: A centred wordmark with nav split left and right of it. Below, an asymmetric hero — copy block left, dithered artwork bleeding off the right edge. Then a three-up feature grid where each cell is numbered (#1, #2…), captioned in mono, and illustrated with its own dithered plate. Closes with the product name set as a full-bleed word that overflows the viewport on both sides. - motion: Almost none, and that is the point. No scroll animation, no hover states worth mentioning. The only movement is a video panel embedded in a dithered frame. Stillness is what makes the type read as printed. - texture: Ordered dithering everywhere — the images are visibly screened, with the dot pattern coarse enough to read as a texture rather than as compression. A subtle scanline treatment sits over the video panel. - dont: Don't add a second colour, and don't use a soft greyscale halftone. The severity comes from exactly one ink and a hard 1-bit threshold; introduce a mid-tone and it collapses into an ordinary duotone photo treatment. ## Acceptance criteria - Existing project conventions, design tokens, working functionality, and unrelated changes are preserved. - Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product. - Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap. - Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled. - Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported. - Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service. ## Quality bar Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Copy promptDownload .md

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.