Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Claude Billing
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Claude
- **Category:** Billing
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/69971c475ab21a831eb1ac2a_gPrBqsrw6oYZXZMMW4Uh5_XThM02cruJeg3s-vlw7G4.avif
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.
First thing you notice is that credit card graphic with the big $4.95 balance. It's got this soft beige gradient that feels almost physical, like a real card sitting on your desk. The whole page leans into warm off-whites and creams instead of the typical cold SaaS gray. It feels expensive without trying too hard.
Everything Has a Place
The layout is dead simple. Credit balance up top, payment method and auto-reload settings in the middle, invoice history at the bottom. Left sidebar uses clear section groupings: Build, Analytics, Claude Code, Manage. You always know where you are. The "Buy credits" button in solid black pulls your eye exactly where Anthropic wants it.
Typography That Stays Out of the Way
Small caps for column headers in the invoice table. Clean hierarchy throughout. Nothing is fighting for attention. The bold treatment on "disabled" in the auto-reload notice is a smart little detail that communicates status without needing a colored badge. The whole page breathes. Generous spacing everywhere makes a billing page feel surprisingly calm.