Fintech · Dark

Ore

Studio monochrome where a raw object turns to chrome: the polishing cursor reveals liquid metal beneath the stone, and on scroll a vertical thread of light crosses and cuts the whole object, while titles alternate thin italic and heavy roman.

Palette

--bg#0D0D10
base background, vignette edges
--bg-glow#6E7078
center of the radial gradient behind the object (studio spot)
--surface#18181C
dashboard and plan cards
--light#EBECF0
light product section (phone)
--text#F4F4F6
titles and text on dark
--text-2#9A9BA2
descriptions, social-proof footer
--chrome#D9DCE2
metal reflections, light pill button
--line#2C2D33
outlines of pills, cards and dividers

Typography

Display: neo grotesque with a thin italic + heavy roman pairing in the same family: line 1 in italic 300, line 2 in 700, tracking -4%, clamp(56px, 8vw, 128px), line-height .9 — suggestions: Inter Tight (300 italic / 700) / Instrument Sans
Body: same family 400, 13–14px, white, narrow ~30ch column aligned to the right of the screen
Support/labels: 10–11px 400, gray, no uppercase; financial numbers with tabular-nums
Treatments: titles always with a light-italic/heavy-bold contrast; giant wordmark cropped by the footer with a gradient that fades upward; stone/chrome icons embedded in the middle of the title.

Sections

Pixelated intro — title appears pixelated/blurred and resolves to sharpness while the stone appears.
Nav — icon + name on the left, group of links inside an outlined pill in the center, "Sign in" pill on the right.
Hero — 2-line title at the top left; on the right, a short paragraph high up and another paragraph + light pill button lower down; raw object filling the lower center; social-proof strip in the bottom corners.
Pinned cutting — centered object; a vertical thread of light crosses from left to right turning stone into chrome; short titles swap in the top-left corner; caption on the right at the bottom.
Product (light) — light gray section: title on the left + list of 3 features; on the right a phone mockup with notification cards floating around it.
Dashboard — centered title, pill tabs, dark card with a large balance, line chart and a list of reconciled entries.
Plans — centered title with embedded icons; two cards: basic plan with a raw-stone icon, full plan with a chrome icon and a light button.
Final CTA — centered dark card with a 2-line title and a button; chrome object peeking from the top.
Footer — thin line with copyright and links; giant wordmark cropped at the bottom.

Motion and interaction

Pixelated intro: load → title with a pixelation filter (canvas or SVG feMorphology/blur) from 24px → 1px in 1.2 s steps(8); stone fades in.
Chrome under the cursor: pointermove → radial mask (~180px, soft edge) reveals the chrome version of the stone under the pointer; damping lerp 0.12; on leave the mask shrinks.
Thread of light: scroll scrub with pin → luminous vertical line (2px + glow) travels x 0→100%; everything to its left shows chrome (clip-path inset) and the stone rotates slightly.
Title swap: at every 50% of the pin, the current title blurs and vanishes (blur 8px), the next one enters sharp.
Phone notifications: entrance → cards float (y ±6px loop 4 s) and enter with a stagger.
Dashboard: tabs swap content with a crossfade; chart draws its line (stroke-dashoffset).
Final wordmark: scroll → rises 20% with parallax.

Components

Nav pill: 1px --line border, 999px radius, 11px gray links with white hover.
Light pill button: #E8E9EC background, dark 12px text, subtle inner shadow (metal look).
Outlined pill button: 1px --line border, white text.
Dark card: --surface background, 1px rgba(255,255,255,.06) border, 18px radius, no outer shadow.
Entry row: circular check, name, gray category, tabular value on the right.
Notification card: light glass, mini icon, 10px title + value.
Plan card: 3D icon at the top overlapping the border, name, large price + "/mo", description, button.