⏱ Capsule Public Vibe Design
Nova & Ink — Landing Page + Design System
Ezarwebmaster· Jul 21, 2026
Brief
## Rationale
This capsule follows directly from the Terra & Kiln series finding: giving models abstract creative freedom ("invent your own design system") converges toward a shared, consensus-safe aesthetic rather than genuine diversity — measured directly across 7 models on that capsule (near-identical terracotta/cream/sage palettes, quantified via HSL analysis). Two structural changes address this:
* **Naming concrete design movements and demanding full commitment** replaces an open-ended creative prompt (which collapses to the safest answer) with a forced choice among (or beyond) named, established visual languages. Which movement each model gravitates to — or invents — becomes a trend signal in itself.
* **A color-neutral product brief** (an SF/fantasy bookshop, rather than ceramics/clay) removes the strong lexical color-priming that likely drove convergence last time.
A first exploratory pair of runs (v5) validated this: two models produced genuinely distinct, fully-committed outputs (self-named "Terminal-Brutalism / Cyber-Y2K" vs. "Maximalist Editorial — Cosmic Cut-Up"), both scoring 15/16, with no dilution back into generic modern-minimalism. Both runs shared one recurring minor defect — CSS custom properties declared and used but omitted from the visible documentation — which v6 addresses directly.
## Expected spread
* **Frontier models:** full, confident commitment to a distinctive movement (from the list or self-named), complete and accurate token documentation, possibly additional documented components beyond the four required categories.
* **Mid-tier models:** may pick a movement but water it down with safe modern-minimalist defaults halfway through, or document tokens incompletely.
* **Weaker models:** declared movement not visually recognizable in execution, broken responsive behavior, or real book/author leakage.
## Known cheats / risks
* Declaring a movement in the documentation that doesn't actually match the executed design (label says "Brutalism," renders as generic soft-shadow modern UI).
* Incomplete token documentation — a CSS custom property declared and visibly used somewhere on the page but missing from the swatch/type/spacing inventory (recurring pattern across the last 4 runs tested: Gemini, Grok, and both v5 Nova & Ink runs).
* Dead tokens — a custom property declared in `:root` but never actually used anywhere (seen once so far: `--color-black` in the Cosmic Cut-Up run).
* Using the JS/animation freedom as a loophole to import an external library via CDN.
* Real book title/author leakage despite the explicit instruction — direct fail, IP risk regardless of other scores.
* Hardcoded hex/spacing values outside the token system, especially in hover/focus states.
## Grading Truth (GT)
| Criterion | Pass | Partial | Fail |
| :--- | :--- | :--- | :--- |
| **GT1:** Renders with no console errors, zero external network requests | ok | minor non-blocking errors | blocking error or external request |
| **GT2:** Native `<details>` present, closed by default, positioned before footer, opens without JS | compliant | position/label slightly off | doc outside `<details>` or requires JS |
| **GT3a:** Token documentation completeness — every used token is documented, no dead tokens | complete inventory, no dead tokens | 1–2 used tokens undocumented, or 1 dead token left in | several undocumented tokens, or documentation is decorative only |
| **GT3b:** Token fidelity — no hardcoded values betraying the declared system, including hover/focus | zero hardcodes outside the system | 1 isolated hardcode | repeated hardcodes, system ignored in practice |
| **GT4:** A named design movement is explicitly stated in the documentation | clearly named | vaguely implied, not explicitly labeled | no movement named at all |
| **GT5:** Movement commitment — the page's actual execution genuinely and consistently reflects the named movement's visual vocabulary | strong, consistent execution | partial execution, waters down into generic modern style | movement named but not visually recognizable at all |
| **GT6:** Required sections present, in order, no real book/author/franchise names used | all present, fully fictional | 1 section weak/incomplete | 2+ missing, or real IP referenced (automatic fail regardless of other criteria) |
| **GT7:** Responsive at 375/768/1440 with no overflow or broken elements | clean at all 3 sizes | 1 size degraded | broken at 2+ sizes, or content visibly lost/truncated (treat as hard Fail regardless of formula, per the Minimax precedent) |
| **GT8:** Copy consistent with brand values (wonder, discovery, community) | clearly integrated | vaguely evoked | generic copy |
## Scoring
18 points max (9 criteria × 2, GT3 now split into 3a/3b). Same proportional tiers, rescaled:
* **S: 17–18** — flawless commitment and documentation, zero cheats
* **A: 14–16** — solid, 1 minor weakness
* **B: 10–13** — functional but noticeable gaps in documentation or execution
* **C: 5–9** — missing sections or detected cheat
* **F: 0–4** — unrenderable, major constraint violation, or real IP leak
## New analytical angle for this capsule
Beyond the tier score, tag each run with which movement it chose (from the list, or "invented: [name]"). Across enough runs, this becomes genuinely interesting trend data — does each model have a consistent aesthetic "personality," and does that personality drift over time on the Timeline. This is arguably closer to the series' original "trend observatory" goal than color-palette tracking alone, since movement choice is a much stronger creative signal than which shade of terracotta a model picks.
Locked Reference Prompt
IMMUTABLEScientific timeline lock active
You are designing a landing page for a fictional independent bookshop called "Nova & Ink," specializing in science fiction and fantasy — new and used copies, run by two former genre-fiction editors.
Brand facts (fixed — use exactly as given):
- Name: Nova & Ink
- One-line description: An independent bookshop for science fiction and fantasy, curated by former genre editors who read everything before it hits the shelf.
- Values to convey somewhere in the copy: sense of wonder, discovery, a place where readers who love imaginative worlds feel truly understood, community over algorithm-driven recommendations.
- Do NOT reference any real book titles, authors, series, or franchises anywhere on the page. All book titles and descriptions must be entirely invented/fictional.
Before writing any code, commit fully to ONE named design movement or visual language for this entire page. You may pick from this list, or invent/name your own if you have a stronger idea:
- Brutalism / neo-brutalism
- Maximalist editorial (collage, layering, deliberate visual density)
- Y2K / cyber-retrofuturism
- Memphis / postmodern
- Art Deco
- Swiss / International Style, pushed to an extreme
- Vaporwave / glitch art
- (or a movement of your own naming)
Whatever you pick, commit to it completely — do not blend it back into safe, generic modern-minimalist design "just in case." The point of this exercise is full creative commitment to a distinct visual language, not a tasteful compromise.
Build a single, fully self-contained HTML file (inline CSS, inline/vanilla JS only — zero external requests of any kind: no external fonts, no CDNs, no images, no icon libraries) containing a complete landing page with the following sections, in this exact order:
1. Hero — shop name, a short tagline, one clear call-to-action button
2. Shop story — a short "about" section conveying the brand values above
3. Curated collection — at least 3 "staff pick" book cards, each with an invented title, invented author name, and a short blurb. Represent each book visually using pure CSS/SVG (e.g. a stylized book cover/spine built from shapes, gradients, or typography) — no photographs, no external images.
4. Newsletter / reading-circle signup — an email input and submit button (non-functional is fine, but must be visually complete)
5. A collapsed, native HTML `<details>` element (with a `<summary>` labeled something like "View Design System"), placed just before the footer, closed by default, containing your invented design system documentation:
- **Design Movement**: name the movement/visual language you committed to, in one clearly labeled line
- Color palette: EVERY color custom property you declare and actually use anywhere on the page — not just the highlights — shown as a swatch with its name/role and its exact hex or rgb value printed as visible text. If a color token isn't used anywhere, remove it rather than leaving it dead in `:root`.
- Typographic scale: a sample line for each type size you use, labeled with font size and weight as visible text
- Spacing scale: a visual representation of your spacing units, labeled with pixel/rem values
- Button/component states: your primary and secondary button styles shown side by side, labeled
- Optionally, document any additional components your design system defines beyond the ones above (e.g. cards, form fields, badges, dividers, icons, dividers, decorative motifs) if they're a meaningful part of your system — the four categories above are a minimum, not a ceiling
The documentation must be a complete, accurate inventory of your design system as actually built — not a curated highlight reel. Every custom property declared in your CSS must either be documented here or not exist.
6. Footer — basic links and copyright line
Design requirements:
- Invent your own complete design system (colors, type scale, spacing) that expresses your chosen movement. Declare it as CSS custom properties and apply it consistently across the ENTIRE page, including the design system documentation section itself and all hover/focus states — no one-off hardcoded values anywhere, and no unused/dead tokens.
- The `<details>` element must open/close using only native browser behavior (no JavaScript required for it).
- Bold color choices, saturated palettes, unconventional layouts, and expressive typography are explicitly encouraged if they serve your chosen movement — do not default to a muted, "safe" palette out of caution.
- Subtle CSS transitions/animations and small amounts of vanilla JS (e.g. IntersectionObserver-based reveals, cursor-following effects, hover-triggered transforms) are allowed and encouraged if they reinforce your chosen movement, as long as there are zero external network requests and no console errors.
- The page must be fully responsive and look intentional at mobile (~375px), tablet (~768px), and desktop (~1440px) widths.
Output only the complete HTML file, nothing else.
Add a Benchmark Run
Sign in to run this prompt against hundreds of models with your own OpenRouter key and archive the results.
Timeline (13 runs)
Run Activity
13 runs in the last 6 months
Jan
Feb
Mar
Apr
May
Jun
Jul
LessMore
Cost vs Speed
size = output tokens · top-left is best
size = tokens
value frontier — no model is faster & cheaper Capsule Stats
Runs
13
Total cost
$2.9543
Tokens
258k
Avg latency
5m 40s
Models
13
Web Searches
0
Fastest
nvidia/nemotron-3-ultra-550b-a55b1m 0s
nvidia/nemotron-3-ultra-550b-a55b1m 0s Cheapest
deepseek/deepseek-v4-flash$0.0018
deepseek/deepseek-v4-flash$0.0018 Top provider
Google DeepMind×2
Google DeepMind×2 84k reasoning last today
Tip: Select 2 or more runs via their "Compare" buttons — or filter by company below and compare them all at once — then open the Compare Studio: verdicts, benchmark bars, charts, side-by-side reading and response diff.
⏱
Benchmark Run — Jul 21, 2026 Latest

Moonshot AI (Kimi)kimi-k3
Extended
stop
Latency
21m 3s
client → response
Input Tokens
1,121
prompt tokens
Output
40,594
generated
Total Tokens
41,715
in + out
Billed Cost
$0.6123
OR Credits
Reasoning
24,621
thinking tokens
Model Output
kimi-k3 — Canvas
⏱
Benchmark Run — Jul 21, 2026

NVIDIAnemotron-3-ultra-550b-a55b
Extended
stop
Latency
1m 0s
client → response
Input Tokens
1,086
prompt tokens
Output
24,862
generated
Total Tokens
25,948
in + out
Billed Cost
$0.0603
OR Credits
Reasoning
666
thinking tokens
Model Output
nemotron-3-ultra-550b-a55b — Canvas
⏱
Benchmark Run — Jul 21, 2026

Xiaomi (MiMo)mimo-v2.5
Extended Excluded from Winners
error
Latency
19m 46s
client → response
Input Tokens
1,269
prompt tokens
Output
18,344
generated
Total Tokens
19,613
in + out
Billed Cost
$0.000000
OR Credits
Reasoning
18,344
thinking tokens
Model Output
(No text response)
⏱
Benchmark Run — Jul 21, 2026

Qwen (Alibaba)qwen3.7-max
Extended
stop
Latency
4m 28s
client → response
Input Tokens
1,071
prompt tokens
Output
12,981
generated
Total Tokens
14,052
in + out
Billed Cost
$0.0590
OR Credits
Reasoning
531
thinking tokens
Model Output
qwen3.7-max — Canvas
⏱
Benchmark Run — Jul 21, 2026

Moonshot AI (Kimi)kimi-k2.7-code
Extended
stop
Latency
2m 5s
client → response
Input Tokens
1,043
prompt tokens
Output
29,077
generated
Total Tokens
30,120
in + out
Billed Cost
$0.2346
OR Credits
Reasoning
19,198
thinking tokens
Model Output
kimi-k2.7-code — Canvas
⏱
Benchmark Run — Jul 21, 2026
Z Aiglm-5.2
Extended
stop
Latency
2m 26s
client → response
Input Tokens
1,051
prompt tokens
Output
15,034
generated
Total Tokens
16,085
in + out
Billed Cost
$0.0676
OR Credits
Reasoning
263
thinking tokens
Model Output
glm-5.2 — Canvas
⏱
Benchmark Run — Jul 21, 2026

Anthropicclaude-fable-5
Extended
stop
Latency
3m 1s
client → response
Input Tokens
1,620
prompt tokens
Output
16,974
generated
Total Tokens
18,594
in + out
Billed Cost
$0.8649
OR Credits
Reasoning
549
thinking tokens
Model Output
claude-fable-5 — Canvas
⏱
Benchmark Run — Jul 21, 2026

DeepSeekdeepseek-v4-flash
Extended
stop
Latency
6m 22s
client → response
Input Tokens
1,057
prompt tokens
Output
6,072
generated
Total Tokens
7,129
in + out
Billed Cost
$0.0018
OR Credits
Reasoning
—
thinking tokens
Model Output
deepseek-v4-flash — Canvas
⏱
Benchmark Run — Jul 21, 2026

Google DeepMindgemini-3.5-flash
Extended
stop
Latency
1m 34s
client → response
Input Tokens
1,075
prompt tokens
Output
18,633
generated
Total Tokens
19,708
in + out
Billed Cost
$0.1693
OR Credits
Reasoning
7,572
thinking tokens
Model Output
gemini-3.5-flash — Canvas
⏱
Benchmark Run — Jul 21, 2026

DeepSeekdeepseek-v4-pro
Extended
stop
Latency
5m 40s
client → response
Input Tokens
1,057
prompt tokens
Output
19,879
generated
Total Tokens
20,936
in + out
Billed Cost
$0.0304
OR Credits
Reasoning
4,401
thinking tokens
Model Output
deepseek-v4-pro — Canvas
⏱
Benchmark Run — Jul 21, 2026

Anthropicclaude-opus-4.8
Extended
stop
Latency
2m 7s
client → response
Input Tokens
1,620
prompt tokens
Output
13,068
generated
Total Tokens
14,688
in + out
Billed Cost
$0.3348
OR Credits
Reasoning
—
thinking tokens
Model Output
claude-opus-4.8 — Canvas
⏱
Benchmark Run — Jul 21, 2026

Google DeepMindgemini-3.1-pro-preview
Extended
stop
Latency
2m 7s
client → response
Input Tokens
1,075
prompt tokens
Output
16,619
generated
Total Tokens
17,694
in + out
Billed Cost
$0.2016
OR Credits
Reasoning
7,074
thinking tokens
Model Output
gemini-3.1-pro-preview — Canvas
⏱
Benchmark Run — Jul 21, 2026

OpenAIgpt-5.6-sol
Extended
stop
Latency
1m 57s
client → response
Input Tokens
1,040
prompt tokens
Output
10,370
generated
Total Tokens
11,410
in + out
Billed Cost
$0.3176
OR Credits
Reasoning
1,248
thinking tokens
Model Output
gpt-5.6-sol — Canvas