---
id: "2115613323257336106"
source: https://x.com/HamzaInstantly/status/2115613323257336106
author: "Hamza A. (@HamzaInstantly)"
media: "photo, 2880x2940"
model: claude-opus-5-5
generated: 2026-10-31
---
# Serif Crypto Wallet Feature Bento

## Summary
A landing page section for a simple crypto wallet: a large serif headline with a short intro on the right, then a four-card bento showing buy, swap, cross-chain transfer and an all-in-one wallet, each with a crisp product mockup. Worth studying for its pairing of a soft editorial serif with precise fintech UI, the faint dot-grid textures behind inputs and the single deep navy card that anchors the grid.

## Style
- Theme: light (one deep navy card)
- Mood: calm, trustworthy, refined, approachable, premium
- Tags: bento-grid, fintech, crypto-wallet, serif-headline, product-mockup, feature-cards, dot-grid
- Category: Features, Landing page

## Palette
| Role | Hex |
|---|---|
| Page | #F9F8FE |
| Card | #FEFEFF |
| Navy ink | #172052 |
| Midnight card | #0A0E29 |
| Border | #CDCFE2 |
| Muted text | #78798D |
| Periwinkle glow | #96A7DE |
| Link blue | #3A4FD8 |

## Typography
- Headlines (section title and card titles): soft transitional serif, regular, sentence case, very tight tracking (-0.04em) and leading (0.9), navy ink. Section title about 4.5% of canvas height; card titles about 2.4%. Closest free font: Instrument Serif or Newsreader 400.
- Big amount in the buy mockup: the same serif at display size.
- Body and UI: neo-grotesk sans, regular, about 1% of canvas height, muted gray. Closest free font: Inter 400.
- Card eyebrow labels: Inter 500 in link blue with a small pale ribbon icon.
- Small wordmark top left: lowercase serif (shown as a placeholder wordmark).

## Layout
- Near-square canvas (2880x2940) with a centered 1140px content column; outside margins filled with fine diagonal hatching and 1px vertical guide lines.
- Intro row: headline left (about 45% wide), two-line paragraph right aligned to the headline's baseline; 1px divider below.
- Bento: row one is a wide card (about 2/3) plus a narrow card (1/3); row two is a narrow card (2/5) plus a wide dark card (3/5). Gaps 12px.
- Cards: radius about 16px, 1px #CDCFE2 border, no heavy shadows; 40px padding.
- Mockups bleed off the card edges (bottom and right) to suggest larger screens.

## Elements
- Buy card: browser-window mockup with traffic lights and a URL pill, a sidebar (Home, Buy and sell, Swap, Activity), a Buy and Sell toggle, an amount field with a dotted texture, three preset pills (the selected one outlined in blue) and a dark navy gradient pill button with an arrow. A blurred blue and violet glow sits bottom left.
- Swap card: two stacked fields (You pay, You get) with token pills and a round dark swap arrow between them; rate line and a small countdown label in blue.
- Transfer card: a recent contacts row of three circular avatars (first one selected with a blue outline), a small saved-status chip with a green dot, and a recipient row with a green Verified pill.
- Wallet card: deep navy gradient with a white serif title, a desktop mockup with colored round token icons, and a phone mockup showing a balance, holdings and activity, with a blue tab bar pill.

## Motion
Static image. Idea: count the buy amount up from 0 and slide the swap fields together with a 400ms spring as each card enters the viewport.

## Rebuild it
1. Section `max-w-[1140px] mx-auto` on `bg-[#F9F8FE]`; side gutters use `repeating-linear-gradient(45deg, #ECEBF5 0 1px, transparent 1px 8px)`.
2. Headline `font-serif text-[64px] leading-[0.9] tracking-[-0.04em] text-[#172052]`.
3. Bento with CSS grid: `grid grid-cols-15 gap-3`, cards spanning 10 and 5 columns on row one, 6 and 9 on row two.
4. Card: `rounded-2xl border border-[#CDCFE2] bg-white p-10 overflow-hidden relative`; mockups absolutely positioned to bleed off the edge.
5. Dot texture: `background-image: radial-gradient(#CDCFE2 1px, transparent 1px); background-size: 8px 8px` masked with a radial fade.
6. Motion: `whileInView` fade and rise (y 24 to 0, 500ms, 80ms stagger per card); animate the amount with `animate(0, 600)` into a motion value.

## Generation prompt
A refined light landing page section for a simple crypto wallet app: a large elegant serif headline on the left with a short sans paragraph on the right, below it a bento grid of rounded white cards with thin borders showing a buy screen with a big serif dollar amount and a dark navy button, a token swap widget with a round arrow, a contacts transfer card with avatars and a verified badge, and one deep navy card with desktop and phone wallet mockups; soft periwinkle glows, faint dot textures, calm and premium, no real brand names.