Amir Mushich uses Claude to reconstruct Revolut’s brand guide

• Revolut’s website became an unofficial brand guide: Amir Mushich showed Claude Opus reconstructing its visual system in his demo.
• The outputs extend beyond HTML: his output list includes CSS and JSON tokens, 12 social images and a 60fps presentation video.
• The result still needs human checking, as Mushich acknowledged in a reply.

The shared prompt asks for local font-installation checks and per-image generation costs. It even specifies video encoding down to H.264 CRF 14.

Mushich asks Claude to build a reusable reverse-brand <url> command-line tool in the published prompt. The setup requires shell, browser and file access.

The requested Playwright capture covers the homepage plus three to five key pages at 1440×900, with a 390×844 homepage pass for responsive typography. Cookie and consent interfaces are excluded from the measurements.

The analysis covers six layers:

• Typography: computed fonts, sizes, weights, line heights and tracking, clustered into roles with responsive clamp() values.
• Colour: functional roles, usage share, gradients and contrast ratios, weighted by text length or painted area.
• Layout: spacing units, containers, columns, gutters, radii, breakpoints and alternating light/dark sections.
• Components: button, card and navigation variants, plus form controls where available.
• Imagery: crops, formats, media coverage and alt-text themes.
• Voice: short quotations, copy statistics and three derived rules.

Mushich’s token-only rebuild test is the clever part: a button and two cards must work on light and dark backgrounds using only the exported variables.

The requested verify.js compares those components’ computed styles against the token values and checks that the JSON parses. Every brand sample in the guide must use the exported variables.

Mushich lists four output formats; the prompt gives them concrete sizes and rendering requirements:

• HTML: brand-guide.html, an image-free offline edition capped at 150 KB; and brand-guide-hero.html, with embedded WebP images and a 4 MB budget.
• Tokens: CSS custom properties plus W3C design-tokens JSON, with colours in hex and OKLCH.
• Social: eight 1080×1350 Instagram slides and four 1600×900 X images.
• Video: a roughly 45-second, 1920×1080 presentation with 11 scenes at 60fps.

The video specification advances paused CSS animations to i/fps and pipes frame captures into ffmpeg. Verification also requires the guide to open offline with zero network requests and no horizontal scrolling at 390px.

Optional imagery follows three modes in the prompt:

• none: CSS-gradient fallbacks fill the image slots.
• api: a provider adapter generates images, reading its key from .env.
• manual: the tool prints prompts, then imports images generated by the user.

Brand logos, font files and photographs must not be copied. A bot challenge stops capture until the user completes a headed-browser check or supplies a DevTools-generated snapshot.

The extraction explicitly allows an inferred input control when no forms are found. Voice rules also involve interpretation, derived from headline length, pronoun use and CTA verbs, supported by five source-linked quotations of no more than 15 words each.

Mushich calls the main website a “trustworthy” source for tone, while acknowledging that details still need fixing and clarifying.

Revolut separately publishes official Open Banking brand resources, including guidance on logos, colour and typography.

Mushich also posted an ocean animation he described as a 58.5 KB file, available as a Claude artifact.

His Anatomy gallery was built with Codex and Ryan’s Anatomy skill. The live page lists 12 explorable objects, from a click pen to a hard disk drive, and requires WebGL 2.