Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Back to gallery
fintech · saas · developer tools

Panxo

Dark-first modern-fintech landing that inherits from the post-Vercel cohort rather than from the Stripe/Klarna lineage. Inter + Mona Sans duet, four-accent system anchored by classic web blue #0000ee as deliberate cultural reference, twelve Framer Motion atmospheric gradients holding depth. Sharper than Plasticity's calm subtlety, less choreographed than Chronicle's keynote.

panxo.comAdded 2026-05-15
Panxo - Desktop

Editorial disclaimer

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy
FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Panxo’s language, not just a screenshot.

Paste into your agent. No signup, no cost.
Light-first modern-fintech canvas with dark-zoned section breaks. Pure #ffffff ground, #000000 primary ink, #52525b secondary slate, #1b1917 used as alternate dark section ground for contrast moments. Inter Variable as workhorse (12-16px UI/body) + Mona Sans as display family (32px+ headlines). Four-accent system: classic blue #0000ee primary, mint #10b981 success, lavender #777eff secondary, orange #ff6020 alert — each used at <3% surface, never combined. Twelve atmospheric gradients exist as Framer Motion-animated light leaks. Moderate motion level (4 transitions).
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light-first #ffffff canvas + #000000 primary ink + #52525b secondary slate + #1b1917 alternate dark section ground for contrast moments + four-accent system classic blue/mint/lavender/orange each at <3% surface, never combined), typographic duet (Inter Variable for UI/body 12-16px + Mona Sans for display 32px+), 4px-base spacing scale, atmospheric gradient system (12 gradients as Framer Motion light leaks only, never as fills), moderate motion level (4 transitions, primary state changes only), 640/768/1024/1280/1536 breakpoint ladder. Treat this as my project's constitution. Apply the language, not the source brand. When I ask you to build a page or component, enforce these rules by default and call out any deviation.
Layout
Single-column reading flow with atmospheric gradients holding depth between sections.
Content width
640-768px reading rail; product UI sections may break to wider canvas.
Framing
Modern fintech terminal — dark, sharp, accent-rich without being noisy.
Grid strength
Implicit 4px grid; reading rhythm comes from typography size jumps and the four-stop accent placements.

Pure #000 ground + #ffffff text hold the page; four-accent system (classic blue + mint + lavender + orange) handles attention with deliberate cultural references.

Mode strategyDark-only — light variant plausible but not present in capture.
  • #000000 ground; #1b1917 elevated surface for rare card moments
  • #ffffff primary text, #52525b secondary, slate descender for metadata
  • #0000ee classic blue: primary CTAs, links, focus rings (punk-fintech signal)
  • #10b981 mint: success states, positive trend indicators
  • #777eff lavender: secondary actions, neutral info
  • #ff6020 orange: alerts, error states, attention chips
  • Each accent ≤3% surface; never two in one component

Gradients (paste-ready)

12 atmospheric gradients — Framer Motion-animated light leaks at hero and section edges, never as button or card fills
  • Inter Variable for all UI, body, captions (12-16px range)
  • Mona Sans for display headlines (32px+) only — never below 24px
  • Weights: Inter 400/500/600, Mona Sans 500/600
  • Line-height 1.4-1.5 body, 1.1-1.2 display
  • Letter-spacing 0 for body, -0.01em for Mona Sans display
  • 4px base unit
  • Section vertical rhythm: 80-128px between major content blocks
  • Card internal padding: 20-28px
  • CTA padding: 12-14px vertical / 22-28px horizontal
Surface styleCards float on dark via 1px low-alpha hairline + soft drop shadow; 4 shadow variants total.
  • 4 shadow variants — moderate system
  • Hover lift: 2px Y + shadow opacity bump
  • Focus rings: classic blue 2px ring + 2px offset

Techniques

Fintech dark card

1px rgba(255,255,255,0.06) hairline + 0 8px 24px rgba(0,0,0,0.35) shadow + optional ambient gradient backdrop.

Atmospheric gradient backdrop

Framer Motion-animated radial gradient at 6-10% alpha as ambient section depth.

Radii4 / 6 / 8 / 12 / 16Icon treatmentStroke 1.5px monoline; rare filled icon for accent surfaces.Icon setsCustom + Lucide for utility
  • Buttons: 8-10px radius
  • Cards: 12-16px radius
  • Pills and chips: fully rounded (rounded-full)
  • Primary CTA (classic blue)
    background
    #0000ee
    textColor
    #ffffff
    fontFamily
    Inter Variable
    fontWeight
    500
    fontSize
    15px
    padding
    12px 24px
    borderRadius
    10px
    shadow
    0 6px 18px rgba(0,0,238,0.32)
    hover
    background shifts to #1a1aff + shadow expand

    Tailwind

    inline-flex items-center gap-2 rounded-[10px] bg-[#0000ee] px-6 py-3 text-[15px] font-medium text-white shadow-[0_6px_18px_rgba(0,0,238,0.32)] transition hover:bg-[#1a1aff]
  • Fintech dark card
    background
    #1b1917
    border
    1px solid rgba(255,255,255,0.06)
    borderRadius
    16px
    padding
    24px 28px
    shadow
    0 8px 24px rgba(0,0,0,0.35)

    Tailwind

    rounded-2xl border border-white/[0.06] bg-[#1b1917] p-7 shadow-[0_8px_24px_rgba(0,0,0,0.35)]
LevelmoderateDurations180ms / 300ms / 500ms

Easings

cubic-bezier(0.22, 1, 0.36, 1)
HoverCard lift 2px + shadow bump, Button background lightens to brighter accent variant on hover, Link underline reveal on hover

Scroll patterns

  • Framer Motion-animated atmospheric gradients on viewport entry
  • Fade-in + 16px translate per section (one-shot)
  • Sticky nav appears after 100px scroll with backdrop blur
  • Motion is moderate — sharper than calm but less choreographed than expressive
  • Respect prefers-reduced-motion: collapse Framer gradients to static
  • Hover lifts cards subtly
  • Focus rings: classic blue 2px + 2px offset
  • Active state: button bg shifts 8% darker, no scale change
Approachmobile-first

Tailwind defaults (640/768/1024/1280/1536).

  • <768: 16px gutter, single column, simplified gradients
  • 768-1024: 720-768px rail, basic motion
  • ≥1024: full reading rail + atmospheric gradients enabled
  • WCAG AAA on body text (#ffffff on #000 is 21:1)
  • Classic blue on dark passes AA for UI text (8.6:1)
  • Framer Motion gradients respect prefers-reduced-motion
Next.jsFramer Motion for gradient animationsInter + Mona Sans variable fonts

Typography + atmospheric gradients are the visual identity; minimal decorative illustration.

  • Inter and Mona Sans loaded as woff2 with font-display: swap
  • Framer Motion gradients lazily mounted after first interaction
  • Use Inter for UI/body, Mona Sans for display 32px+
  • Reserve classic blue for primary CTAs and links (punk-fintech signal)
  • Use four accents as a tasting menu — one register each
  • Let atmospheric gradients hold depth between sections
  • Don't paint card surfaces in any accent — accents are emphasis only
  • Don't combine two accents in one component
  • Don't introduce a third typography family
  • Don't use gradients as button fills — they are ambient only
  • Dark-only — no light variant
  • Inter + Mona Sans only — no third family
  • Each accent ≤3% surface — measure before shipping
  • Font-family grep: only `Inter` and `Mona Sans` appear
  • Background colour grep: only `#000000` for ground, `#1b1917` for elevated cards
  • Accent colour count: each of four accents ≤3% per viewport
  • Gradient usage: only as atmospheric ambient backdrops, never as fills
  • Shadow variants total: ≤4 distinct values site-wide

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 3 nodes across 2 levels, shallow to deep by color.

  • body2
    • div
    • Asidedialog

Accessibility

Contrast matrix

88 combinations - 44 pass AA - 30 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

Normal text passes AAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#F4F5F7
APCA Lc
+100
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#F4F5F7
bg
#000000
APCA Lc
-101
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#F7F3EB
APCA Lc
+99
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#F7F3EB
bg
#000000
APCA Lc
-100
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#EEF5ED
APCA Lc
+99
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#EEF5ED
bg
#000000
APCA Lc
-100
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#FFFFFF
bg
#1B1917
APCA Lc
-107
Use
background on foreground

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images
30
Lazy loaded
21%
Format mix
  • svg22 · 52%
  • png11 · 26%
  • unknown6 · 14%
  • jpg3 · 7%

Hero image

https://framerusercontent.com/images/tY9fRCoNTgNp2kGIdSeVpxxWf3g.svg?width=102&height=21
Format
SVG
Dimensions
102x21
Loading
auto
srcset
no
Industry
fintech
Industry
saas
Industry
developer-tools
Theme
Light
Added
2026-05-15
panxo.com

FAQ

Questions people ask about Panxo

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Side-by-side reads sharing this design signal.