One arm of a comparison · With Qloo

A record shop's website, for people who love Elden Ring and Berserk: With Qloo

Host: Kiro 2.24.0
Model: claude-opus-5.5
Moûsa: 0.6.0
Started: 23 October 2026
Time: 6.8 minutes
Qloo requests: 12
Pictures: none: imagery drawn in SVG or CSS

Play it

The design's own files as the session left them, running sandboxed on a separate origin.

With Qloo Open full screen

7 of 7

design devices rest on what the model did not predict

The audience, as the person named itElden RingBerserk

70works measured, 1 of them predicted

18shared qualities, 0 predicted

24pacing, surface and tone tags, 2 predicted

12Qloo requests

The result

The captures of round 2, the last the agent reviewed: 5 criteria met, 0 partly, 0 missed.

desktop, round 2 — desktop · round 2 · judged in the review

mobile, round 2 — mobile · round 2 · judged in the review

desktop · corner, round 2 — desktop · corner · round 2 · judged in the review

Before any data: the model's own prediction

Frozen before Qloo was asked, so what Qloo adds can be told apart from what the model already assumed. An entry a measured name matches is marked; the match is liberal, so it only lowers what counts as new.

The design the model would make from it alone

A near-black, candlelit page with tarnished-gold engraved serif type, a slowly rotating record drawn like an eclipse ring, and cryptic item-description copy for each section of the shop.

#0e0c0a#1c1814#b08d4a#8a1c14#d9cfbf

Type: Cormorant Garamond, EB Garamond and DM Mono

#hero#crates#listening-corner#thursday-session#hours#visit#newsletter

eclipse ring as a spinning record
item-description captions
weathered stone texture
grace-like gold glow

The audience it expected

Fans of grim, dark-fantasy worlds built on ruin, endurance and lonely struggle; they likely love doom and post-metal music, dark souls-like games, gothic and cosmic-horror fiction, and handmade, weathered material culture.

Pacing

slow and broodingmelancholic long takesviolent burstsepic scale

Surfaces

weathered stone and rustgothic architecture matched Gothicengraved, etched lineworkcandlelit gold on black

Tone

melancholicgrimdefiantsolitary

Shared qualities

dark fantasy matched Dark (tone)struggle against fateruin and decaymedieval brutalitycryptic lore

The works it expected them to love

Brands

FromSoftwareBandai NamcoDark Horse ComicsGames WorkshopRelapse RecordsBlackcraft Cult

Films

The Lord of the Rings: The Fellowship of the RingPrincess MononokeExcaliburThe Green KnightConan the BarbarianDune

Music

Susumu HirasawaSleepElectric WizardWardrunaBathoryKentaro Miura

Books

A Song of Ice and FireThe Name of the Wind matched The Name of the Wind (The Kingkiller Chronicle, #1)Malazan Book of the FallenThe Black CompanyThe Dark TowerElric of Melniboné

Game of ThronesVinland SagaCastlevaniaAttack on TitanClaymoreArcane

Sealed at the freeze: SHA-256 c4e823a96cb9d2d559dcec9cc85e15f92886d733b4f73eac52bcdfc1afd67951. The prediction shown here still matches it.

What Qloo measured

What this audience loves, the qualities those works share and the tags ranked for it. New means the prediction did not contain it.

Look qualities

Energetic newin JoJo's Bizarre Adventure, Mastodon and Mick Gordon
Atmospheric newin Nine Inch Nails, A Perfect Circle and The Ash Lad: In Search of the Golden Castle
Kinetic newin Samurai Champloo, 212 Warrior and Code Geass: Lelouch of the Rebellion II - Transgression
Dynamic newin Tool, Deftones and Opeth
Cinematic newin Cowboy Bebop and The Irregular at Magic High School: The Girl Who Calls the Stars

Mood qualities

Intense newin Berserk: The Golden Age Arc - Memorial Edition, Deftones and Street Sects
Complex newin Berserk: The Golden Age Arc - Memorial Edition, A Perfect Circle and Code Geass: Lelouch of the Rebellion - Emperor
Resourceful newin Berserk: The Golden Age Arc - Memorial Edition, The Irregular at Magic High School: The Girl Who Calls the Stars and Ajin Part 3: Shougeki
Action packed newin Berserk, Asura and Star Wars: The Force Unleashed
Brave newin Berserk: The Golden Age Arc - Memorial Edition and The Witcher: Nightmare of the Wolf

Meaning qualities

Genre savvy newin Berserk, Asura and Code Geass: Lelouch of the Rebellion II - Transgression
Action oriented newin Hellsing Ultimate, Zack Snyder's Justice League and Mortal Kombat
Drama loving newin Mob Psycho 100, Inuyashiki and Asura
Loyal newin Tool, Deftones and Ghost
Sacrifice newin Berserk: The Golden Age Arc - Memorial Edition and Godzilla: King of the Monsters

Pacing

Empathetic newJazz Infused newMultilayered newVisually Haunting newTechnical newIntricately Detailed new

Surfaces

High Quality Leather newUrban Inspired newNeutral Color Palette newGothic predictedHandcrafted Details newContemporary Style new

Tone

Avant-Garde newCreativity newHopeful newDark predictedArtisanal newArtistic Expression new

Brands

Razer newAmerican companies established in 1998 · Consumer electronics brands · Payment service providers
Playstation newFuturistic · Minimalist · Sleek
Sony newMinimalist Industrial Design · Sleek Metallic Finishes · Functional Geometry
Xbox newComputer-related introductions in 2001 · Microsoft franchises · Vague or ambiguous time from August 2016

Brands, lesser known

World Series of Poker Game newHigh-Contrast Graphics · Casino-Inspired Visuals · Dynamic Animations
Cheetos Flamin' Hot newNeon Orange · High-Contrast Graphics · Playful Mascot Imagery

Films

The Witcher: Nightmare of the Wolf newGore heavy choreography · World weary · Brave
Zack Snyder's Justice League newApotheosis · Action oriented · Heroism
Godzilla: King of the Monsters newPainterly · Operatic · Sacrifice
Mortal Kombat newVideo game aesthetic · Charismatic · Action oriented

Films, lesser known

The Irregular at Magic High School: The Girl Who Calls the Stars newEnergetic · Explosive set pieces · Cinematic
Asura newSpectacular · Ornate · Mythic

Music

Tool newDynamic · Immersive · Atmospheric Metal
Deftones newExperimental Rock · Intense · Nu Metal
Ghost newMysterious · Satanic Progressive Rock · Melodic Hard Rock
Street Sects newExperimental · Confrontational · Intense

Books

The Name of the Wind (The Kingkiller Chronicle, #1) predictedAudiobook · Adventure · Epic
The Blade Itself (The First Law, #1) newScience Fiction Fantasy · Magic · Dark Fantasy
The Wise Man's Fear (The Kingkiller Chronicle, #2) newFantasy · Epic Fantasy · Science Fiction Fantasy
The Republic of Thieves (Gentleman Bastard, #3) newHigh Fantasy · Fiction · Epic Fantasy

JoJo's Bizarre Adventure newPop art color blocking · Energetic · Adventurous
Devilman: Crybaby newExpressionistic · Bleak · Social critique
Berserk: The Golden Age Arc - Memorial Edition from the briefCgi infused hand drawn look · Ambitious · Resourceful
Berserk from the briefAction packed · Genre savvy · Magic

How the agent read it

Before deciding anything, the agent grouped what belongs together. Each cluster rests on a quality; the works are its evidence.

c1 · carries palette, layout and motion

Kinetic, high-contrast panels

InterpretationWhat this audience shares beyond grimness is speed and graphic punch: pop-art colour blocks, noir lighting and cut-on-the-beat action. The page should hit like a panel turn, not glow like a candle.

Energetic look quality · newKinetic look quality · newJoJo's Bizarre Adventure TV · newCode Geass: Lelouch of the Rebellion - Emperor film · newCowboy Bebop TV · newSamurai Champloo TV · new

c2 · carries typography and voice

Intense, complex heavy sound

InterpretationThe music they love is heavy but technical and layered, with dynamic swings from quiet to loud. Type and voice should be loud, compressed and precise rather than ornamental.

Intense mood quality · newComplex mood quality · newDynamic look quality · newDeftones music · newTool music · newOpeth music · newBerserk: The Golden Age Arc - Memorial Edition TV · from the brief

c3 · carries imagery, palette and motion

Neutral, handcrafted, jazz-swung surfaces

InterpretationThe surfaces are restrained: neutral grounds, stitched leather, urban grit and handmade detail, paced with a jazz swing. This keeps the loud colour in blocks against a quiet bone-and-ink base.

Neutral Color Palette surface · newHigh Quality Leather surface · newHandcrafted Details surface · newUrban Inspired surface · newJazz Infused pacing · newVisually Haunting pacing · new

c4 · carries structure and voice

Genre-savvy loyalists

InterpretationThey know their genres and stay loyal to their bands and series, numbered volume by volume, and the darkness carries a hopeful core. The page can be organised like a collected volume they return to.

Genre savvy meaning quality · newLoyal meaning quality · newBerserk TV · from the briefAction oriented meaning quality · newHopeful tone · new

How the medium carries itA one-page static site on a bone-white neutral ground with ink-black panels and two hard colour blocks, laid out as slanted manga-style panels and numbered like volumes. Heavy condensed type does the shouting, a technical mono does the facts, a drawn pair of stitched-leather turntables carries the imagery, and motion swings in on an off-beat stagger with one record spinning at 33⅓ that can be paused.

Set aside as noise

Razer brand · new Its tags are corporate catalogue metadata (founding year, payment services), not a look or mood the audience shares.
Cheetos Flamin' Hot brand · new A snack brand whose neon-orange packaging describes its product trade dress, not the audience's eye; using it would copy packaging.

The Design DNA

7 binding devices with literal tokens the check looks for in the files. 7 rest on what the prediction did not contain.

palette · dna1In the files

Bone-and-ink ground with vermilion and cobalt colour blocks

Anchored to

Energetic look quality · newNeutral Color Palette surface · new

Translates: Energetic · Neutral Color Palette

InterpretationEnergetic becomes two saturated, flat colour blocks used as whole panel fills, never as glow; Neutral Color Palette keeps everything else to bone, ink and concrete grey so the blocks hit hard.

#efece4#0f0f12#ff3b1d#1f3cff#8d8f8c

Made with css-palette for “Kinetic, high-contrast panels”: Flat colour fills in custom properties are exactly what colour blocking needs.

Away from the sketch: 3 colours

typography · dna2In the files

Compressed heavy capitals over a technical grotesque and mono

Anchored to

Intense mood quality · newBerserk: The Golden Age Arc - Memorial Edition TV · from the briefComplex mood quality · new

Translates: Intense · Ambitious · Complex

InterpretationIntense becomes tall, black-weight condensed capitals packed at a tight line-height; Complex becomes a technical grotesque for reading and a mono for facts like hours and times.

Records that hit back.

Big Shoulders Display

Records that hit back.

Space Grotesk

Records that hit back.

Space Mono

line-height: .82text-transform: uppercase

Made with library-font for “Intense, complex heavy sound”: The three families are loaded from files and set through custom properties.

Away from the sketch: 3 type families

imagery · dna5In the files

Two stitched-leather turntables drawn in hard noir light

Anchored to

High Quality Leather surface · newHandcrafted Details surface · newCowboy Bebop TV · new

Translates: High Quality Leather · Handcrafted Details · Film noir lighting

InterpretationHigh Quality Leather and Handcrafted Details become a drawn pair of decks on a leather plinth with dashed saddle-stitching, lit by a single hard diagonal shadow; plus a hero record with a speed-line burst.

svg#deck-pairsvg#speed-burst

Made with inline-svg for “Neutral, handcrafted, jazz-swung surfaces”: No pictures on this server; inline SVG draws the decks, stitching and burst.

motion · dna4In the files

Off-beat panel slam and a 33⅓ spin

Anchored to

Jazz Infused pacing · newKinetic look quality · new

Translates: Jazz Infused · Kinetic

InterpretationJazz Infused becomes a swung stagger: panels slam in with a small overshoot on uneven delays; the record in the hero spins at one turn per 1.8 s, with a pause control.

@keyframes panel-slam@keyframes groove-spinanimation: groove-spin 1.8s linear infinite

Made with css-motion for “Neutral, handcrafted, jazz-swung surfaces”: Keyframes on transform and opacity carry the swung stagger and the spin, with a reduced-motion fallback.

voice · dna6In the files

Short, loud lines with a hopeful turn

Anchored to

Deftones music · newHopeful tone · new

Translates: Intense · Hopeful

InterpretationIntense becomes short declarative shouts; Hopeful turns each one toward coming back, listening together. Only the shop's stated facts are said.

Records that hit back.

Thursday, 19:30. Bring your ears.

The needle drops. The room goes quiet.

Made with copy for “Intense, complex heavy sound”: The lines are written directly into the page.

layout · dna3In the files

Slanted panel grid with hard ink gutters

Anchored to

Kinetic look quality · newCode Geass: Lelouch of the Rebellion - Emperor film · new

Translates: Kinetic · Determined

InterpretationKinetic becomes panels cut on a diagonal with thick black gutters on a six-column grid, so the eye moves across the page like a fight sequence.

#panel-gridgrid-template-columns: repeat(6, 1fr)border: 4px solid var(--ink)

Made with css-layout for “Kinetic, high-contrast panels”: CSS grid and clip-path make the slanted panels without images.

Away from the sketch: 1 new part

structure · dna7In the files

Numbered volume index

Anchored to

Genre savvy meaning quality · newLoyal meaning quality · new

Translates: Genre savvy · Loyal

InterpretationGenre savvy and Loyal become the page organised as numbered volumes, Vol. 01 to Vol. 05, with a sticky index readers jump through as they would a shelf of collected editions.

#volume-index

Made with css-layout for “Genre-savvy loyalists”: A sticky nav of numbered links over section ids is pure markup and CSS.

Away from the sketch: 1 new part

Away from the sketch

The design's palette, type and parts against the sketch frozen with the prediction. A colour counts as moved at a CIE76 difference of 20 or more from every sketch colour.

Sketch palette

#0e0c0a#1c1814#b08d4a#8a1c14#d9cfbf

Design palette: 3 of 5 moved

#efece4ΔE 11 from #d9cfbf#0f0f12ΔE 3 from #0e0c0a#ff3b1dΔE 46 from #8a1c14#1f3cffΔE 120 from #0e0c0a#8d8f8cΔE 26 from #d9cfbf

Type

Sketch: Cormorant Garamond, EB Garamond and DM Mono. Design: Big Shoulders Display (new), Space Grotesk (new), Space Mono (new).

Parts

Sketch sections: #hero #crates #listening-corner #thursday-session #hours #visit #newsletter

New in the design

#panel-grid#volume-index

The review

The agent judged each criterion of its plan on the captures it took, then repaired what fell short. The verdicts are its own.

With the headline repair, every criterion is met on round-2 captures: colour-blocked bone-and-ink panels, slanted grid, compressed heavy type, stitched decks drawing and a visible volume index on both views.

met

The hero headline 'WAX & WANE' sets in tall condensed black capitals filling most of the first screen's width, with body text in a grotesque and the hours in mono.

Observed in r2-desktopThe headline now sets on two lines, 'WAX &' and 'WANE', in tall black condensed capitals spanning most of the vermilion cover's text column; the tagline 'Records that hit back.' and the 'Find the shop' button sit on the first screen, and the hours/labels read in mono.

met

The first screen shows a bone-white ground, ink-black panels and at least one full vermilion block and one cobalt block, with no gold.

Observed in r2-desktopBone ground and black gutters with a full vermilion cover panel and a full cobalt Vol. 01 panel side by side on the first screen; no gold appears.

met

The panels of the panel grid have visibly diagonal edges and thick black borders, and stack to one column without horizontal scroll at 390 pixels.

Observed in r2-mobileAt 390 px the panels stack in one column with diagonal lower edges and thick black gutters; the content fits the width with no horizontal overflow.

met

The listening-corner panel shows a drawing of two turntables on a stitched plinth with dashed stitching visible.

Observed in r2-desktop-cornerThe listening-corner panel shows two turntables on a black plinth ringed by dashed stitching, with a hard vermilion offset shadow and pale diagonal light bands.

met

A numbered index Vol. 01 to Vol. 05 is visible on the first screen and the headline fits on screen at 390 pixels.

Observed in r2-mobileThe index Vol. 01 Vinyl to 05 Newsletter shows under the wordmark at the top, and 'WAX &' / 'WANE' fits within the screen with the tagline and button visible.

What earlier rounds found short, and the repairs

Round 1: 4 met, 1 partly, 0 missed. Palette, slanted panel grid, decks drawing and volume index all show as specified. The one shortfall is the cover headline breaking onto three lines on desktop, which makes it read tall rather than wide; the repair sets it on two lines.

partly

The hero headline 'WAX & WANE' sets in tall condensed black capitals filling most of the first screen's width, with body text in a grotesque and the hours in mono.

Observed in r1-desktopThe headline sets in tall black condensed capitals, but stacked on three lines (WAX / & / WANE) it fills the height of the vermilion panel rather than its width, and pushes the tagline and button toward the fold; the mono vol labels and index read correctly.

RepairSet the headline on two lines, 'WAX &' and 'WANE', so it spreads across the panel and the tagline and call to action stay on the first screen.

The check

Whether each device's declared tokens are in the project's files, through its own design system, and how much of the look models default to the page kept.

1.00 conformance · 7 of 7 devices in the files · design system: css-vars

dna1 presentdna2 presentdna3 presentdna4 presentdna5 presentdna6 presentdna7 present

Styling at the start: 0 hand-written declarations and 0 classes; now 293 and 64.

The look models default to: 1 of its 12 signatures on the page (zero-padded section or card numbers (01, 02, 03)); at most 2 may stay.

Limits

Qloo measured the entities, tags and shared qualities named here and how they relate to this audience. Every colour, font, layout, motion and line drawn from them is the agent's interpretation, marked as such.
A name marked new was not in the prediction the agent froze before any data. Only names are published here: Qloo's ids, affinity scores, popularity and descriptions stay in the project.
The check shows that the declared tokens are in the files, not that the design is good. The review is the agent's own reading of its captures.
One session is one sample. It shows where this design's choices came from, not that people prefer it.

Back to the comparison