@dante · Fintech & Crypto
Fintech marketing system: true-black storytelling canvas alternating with white catalogue bands, oversized Aeonik Pro 500 headlines, white-pill CTAs, and cobalt-violet as a single deliberate stamp.
A fintech marketing canvas built on a high-contrast two-mode rhythm: a true-black (#000000) storytelling canvas that hosts hero bands, product mockups, and the planning section, alternating with white (#ffffff) catalogue bands for comparison tables, FAQ rows, and download tiles. The modes switch in full-bleed slabs rather than soft transitions — sections slam against each other to create the magazine-spread cadence the brand is known for. Oversized Aeonik Pro headlines and product-led photography (phones, cards, terminals shown full-bleed) give it a fintech-meets-product-brochure confidence without tipping into playful.
The brand accent is Cobalt Violet (#494fdf), but it appears scarcely — reserved for the featured plan card, the wordmark, and secondary CTAs in white regions. The actual primary CTA is a white pill on black, the brightest pixel on the dark canvas. Text greys are cool and structural: Ink (#191c1f), Mute (#505a63), Stone (#8d969e), Faint (#c9c9cd). A wide secondary palette — teal (#00a87e), light-blue (#007bc2), deep-pink (#e61e49), light-green (#428619), warning orange (#ec7e00), yellow (#b09000), brown (#936d62), danger red (#e23b4a) — lives inside product illustrations only, never as button surfaces. Dark surfaces climb just one step, from #000000 to Surface Elevated #16181a.
Aeonik Pro at weight 500 carries every display size from 20px to 136px, with lineHeight: 1.0 and negative letter-spacing that scales with size (bigger tightens more). Inter handles body, button labels, captions and metadata at weight 400 or 600, with positive tracking (0.16–0.24px) that lends UI labels a slightly mechanical, fintech precision. Hero CTAs use the Aeonik Pro button variant; everything below the hero uses Inter. Inline links in dark photo regions step up to Inter 700 rather than borrowing the cobalt accent. When Aeonik Pro is unavailable, Inter Display, General Sans, or Söhne substitute closely at -1% letter-spacing.
A 4px base unit scales through 8 / 14 / 16 / 24 / 32 / 48px to band gaps of 80 / 88 / 120px. Sections breathe at 88–120px so display headlines register at 80–136px without cramping; card padding stays at 32px. Content maxes at ~1200px while hero and product-mockup bands run full-bleed. Border radius runs none (0) for bands and footer, 8px for inline tags, 12px for inputs and download tiles, 20px for feature and plan cards, 28px for product-mockup chrome, and full (9999px) for every button, pill, badge, and tab. There is no drop-shadow language — depth comes from the light/dark band switch and a single surface-luminance step (#000000 → #16181a); photography mockups carry their own glow.
All buttons are pill-shaped: the white pill on black is the loudest action, inverting to a dark pill on white bands, with soft, outlined, and small-pill supporting variants — none ever coloured with an accent hue. Inputs are 56px tall with 12px radius and a light hairline, taking cobalt only on the focus ring. Cards sit at 20px radius and 32px padding — white-on-soft-grey with a hairline, or surface-elevated on black. The featured plan card inverts to a solid cobalt block to mark the recommended tier. Badges, tags, and tabs are fully-rounded pills; the active tab and the feature badge are the only inverted or cobalt surfaces in their groups.
Derived view rendered server-side from package tokens and components — no authored copy.
#494fdf#4f55f1#3a40c4#ffffff#191c1f#1f2226#3a3d40#505a63#5c5e60#8d969e#c9c9cd#ffffff#ffffff#000000#f4f4f4#0a0a0a#16181a#e2e2e7#191c1f#00a87e#376cd5#007bc2#428619#006400#b09000#ec7e00#e61e49#e23b4a#8b0000#936d62#376cd5Aeonik Pro, Inter Display, General Sans, system-ui, sans-serifAeonik Pro, Inter Display, General Sans, system-ui, sans-serifInter, system-ui, Arial, sans-serifInter, system-ui, Arial, sans-serifIBM Plex Mono, ui-monospace, Menlo, monospace{
"displayXxl": "136px/1.0",
"displayXl": "80px/1.0",
"displayLg": "48px/1.21",
"displayMd": "40px/1.20",
"headingLg": "32px/1.19",
"headingMd": "24px/1.33",
"headingSm": "20px/1.40",
"bodyLg": "18px/1.56",
"body": "16px/1.50",
"bodySm": "14px/1.43",
"caption": "13px/1.40"
}Pill-shaped CTAs. White pill on black is the brand's loudest action; dark pill inverts it on white bands; soft and outlined variants carry supporting actions. Cobalt violet is never a button surface.
Tall 56px field on white with a 12px radius and light hairline border — fintech-grade touch target. Cobalt violet appears only on the focus ring, never as a fill.
Feature card at 20px radius, 32px padding. Light variant is white on soft grey with a hairline; dark variant is surface-elevated (#16181a) lifted off true black. No drop shadows.
Small pill badge. Neutral is soft-grey; the feature badge is the rare cobalt-violet surface, reserved for 'Most popular' markers on plan cards.
Aeonik Pro 500 hierarchy from 136px flagship down to 20px, with lineHeight 1.0 and heavy negative letter-spacing that scales with size.
Inline links in blue (#376cd5) on white; on dark photo regions they step up to Inter weight 700 to hold contrast without borrowing the cobalt brand accent.
Full-bleed dark hero band: Aeonik Pro display headline on true black, Inter subtitle, and a white pill primary CTA as the brightest pixel on the page.
64px dark top bar: wordmark left, top-level nav centre, white-pill sign-up right. True-black background matching the hero canvas.
Global dark footer on true black with muted white links in a multi-column grid above a regulatory disclosure block divided by a soft hairline.
Large Aeonik Pro figure over a small Inter label, laid on a top-hairline grid. The single hero figure can take cobalt violet.
Pull-quote in Aeonik Pro 500 with a cobalt-violet opening mark — the rare place the brand accent touches large type.
Sub-nav pill chip — surface-elevated on dark bands, soft grey on light. Fully rounded, used for section filters like Personal / Business / Premium.
Round avatar with a thin canvas ring — used for testimonial bylines and team rosters, legible on both black and white bands.
Pill tab list inside a soft-grey track — used to switch product views like Spend, Save, Invest. The active pill inverts to white.
A fintech marketing canvas built on a high-contrast two-mode rhythm: a true-black (#000000) storytelling canvas that hosts hero bands, product mockups, and the planning section, alternating with white (#ffffff) catalogue bands for comparison tables, FAQ rows, and download tiles. The modes switch in full-bleed slabs rather than soft transitions — sections slam against each other to create the magazine-spread cadence the brand is known for. Oversized Aeonik Pro headlines and product-led photography (phones, cards, terminals shown full-bleed) give it a fintech-meets-product-brochure confidence without tipping into playful.
The brand accent is Cobalt Violet (#494fdf), but it appears scarcely — reserved for the featured plan card, the wordmark, and secondary CTAs in white regions. The actual primary CTA is a white pill on black, the brightest pixel on the dark canvas. Text greys are cool and structural: Ink (#191c1f), Mute (#505a63), Stone (#8d969e), Faint (#c9c9cd). A wide secondary palette — teal (#00a87e), light-blue (#007bc2), deep-pink (#e61e49), light-green (#428619), warning orange (#ec7e00), yellow (#b09000), brown (#936d62), danger red (#e23b4a) — lives inside product illustrations only, never as button surfaces. Dark surfaces climb just one step, from #000000 to Surface Elevated #16181a.
Aeonik Pro at weight 500 carries every display size from 20px to 136px, with lineHeight: 1.0 and negative letter-spacing that scales with size (bigger tightens more). Inter handles body, button labels, captions and metadata at weight 400 or 600, with positive tracking (0.16–0.24px) that lends UI labels a slightly mechanical, fintech precision. Hero CTAs use the Aeonik Pro button variant; everything below the hero uses Inter. Inline links in dark photo regions step up to Inter 700 rather than borrowing the cobalt accent. When Aeonik Pro is unavailable, Inter Display, General Sans, or Söhne substitute closely at -1% letter-spacing.
A 4px base unit scales through 8 / 14 / 16 / 24 / 32 / 48px to band gaps of 80 / 88 / 120px. Sections breathe at 88–120px so display headlines register at 80–136px without cramping; card padding stays at 32px. Content maxes at ~1200px while hero and product-mockup bands run full-bleed. Border radius runs none (0) for bands and footer, 8px for inline tags, 12px for inputs and download tiles, 20px for feature and plan cards, 28px for product-mockup chrome, and full (9999px) for every button, pill, badge, and tab. There is no drop-shadow language — depth comes from the light/dark band switch and a single surface-luminance step (#000000 → #16181a); photography mockups carry their own glow.
All buttons are pill-shaped: the white pill on black is the loudest action, inverting to a dark pill on white bands, with soft, outlined, and small-pill supporting variants — none ever coloured with an accent hue. Inputs are 56px tall with 12px radius and a light hairline, taking cobalt only on the focus ring. Cards sit at 20px radius and 32px padding — white-on-soft-grey with a hairline, or surface-elevated on black. The featured plan card inverts to a solid cobalt block to mark the recommended tier. Badges, tags, and tabs are fully-rounded pills; the active tab and the feature badge are the only inverted or cobalt surfaces in their groups.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css