Fintech · Dark

Titanium

A brushed-metal card floats over a giant graphite wordmark, responds to the cursor like a physical object and, on scroll, flips, shows the engraved back and docks into the app screen — all in black, bone gray and tabular numbers.

Palette

--bg#131315
main background (near-black graphite)
--bg-2#1B1B1E
bottom gradient, app surfaces
--osso#D6D4CF
wordmark, giant numbers, titles
--texto#ECEBE7
main text
--texto-2#8A8985
captions, secondary mono, background wordmark (5.3:1 on --bg)
--texto-3#6E6D69
only large text ≥ 24px in gray (last line of phrases, phone number)
--acento#E0583A
single marker (dot on the ruler, progress bar)
--botao#F2F1EE
rectangular light button

Typography

Display: wide (extended) grotesque in semibold weight, uppercase for the wordmark, tracking -0.02em, spanning the full screen width — clamp(6rem, 17vw, 18rem); giant numbers in the same style in mixed case — suggestions: Archivo 600 with the width axis at 125% (Expanded) / Space Grotesk 600 (less wide alternative)
Body: neutral neo grotesque 400, 18–22px for section phrases on 2 lines, tracking -0.01em — suggestions: Inter / Geist
Support/labels: monospace 10–11px, lowercase, for specifications, statement and section indexes ("01 — account") — suggestions: JetBrains Mono / IBM Plex Mono
Treatments: wordmark behind the card (card covers the central letters); numbers with tabular-nums; millimeter ruler with a 0–6% scale; list text in mono aligned right; enormous numbers cropped by the top edge.

Sections

Nav — 15px grotesque logo on the left, 4 links at 10px center-left, small rectangular light button with an arrow on the right.
Hero — wordmark spanning the width in the middle third; tilted 3D card overlapping the center; 2-line phrase in the bottom-left corner; list of 3 mono specifications with dividers in the bottom-right corner.
Back of the card — the card rotates to face front showing the engraved number and name; wordmark fades to gray; 2-line phrase + mono index on the left; specifications on the right.
Card → app — a phone rises and the card shrinks and docks into the app screen (list of cards, balance, limit).
Account / statement — 2-line title and large balance on the left; mono statement on the right (time, description, ± amount); a new entry enters at the top (with an accent dot) pushing the list, and the balance updates.
Exchange — phrase on the left, mini table of rates on the right, giant percentage that, tied to the scroll, drops from traditional banks' spread to the brand's while the accent marker slides along the 0–6% ruler ("traditional banks" bracket in the high band); the number exits cropped by the top.
Investments — 3-line phrase (the last in gray) and a thin line chart that draws itself over a mono time axis (today · 30 days · 6 months · 1 year).
Testimonial / manager — name and phone number large in grotesque, in progressive gray, over an empty background.
Plans — 3 columns (name, large price, mono list with dividers), entering in sequence.
CTA + footer — 2-line phrase + light button; mono legal line; giant wordmark cropped at the bottom.

Motion and interaction

Magnetic card tilt: cursor → rotateX/Y up to ±18°, specular reflection slides, damped; Three.js (R3F) with a metallic MeshPhysicalMaterial + envMap.
Flip on scroll: scroll scrub → card rotates 180° on Y and ends front-facing; wordmark loses opacity; GSAP ScrollTrigger pin.
Docking into the app: scrub → the phone rises from below and the card turns to the front again, shrinks and translates to the screen's slot (scale and position measured at runtime).
Live statement: on enter → rows enter with a 120ms stagger and the balance counts up to the value (1.2s); then a new entry slides to the top and the balance adds up.
Falling spread + ruler: sticky section, scrub → number counts from a high percentage to the low one and the marker slides along; bracket draws with scaleX.
Yield chart: scrub → the line draws itself (stroke-dashoffset).
Reading-gradient text: scrub → words go from gray to light as you scroll.
Lenis across the whole page.

Components

Rectangular button: 28px, 2px radius, --botao background, 11px black text + "→" arrow.
Specification list: 3 mono 10px rows, 1px divider, 240px width.
Statement row: grid time | description | amount, mono 10px, 30px height, amount aligned right, +/− sign.
Millimeter ruler: ticks every 0.1 (4px) and 1.0 (10px), mono labels, comparison band with a bracket.
Rate mini table: currency + value, mono 10px, dividers.
Plan column: 20px semibold name, 28px price, 3 mono items with dividers.
Section index: "02 — card" mono 10px gray.