Stripe Fintech
Fintech trustworthiness made aspirational: brand-color OKLCH systems with a single hue variable, animated gradient hero backgrounds, dense API-doc tables, rounded 12px cards with crisp 1px hairline borders, dark-mode tog…
$ aoe install @impeccable/persona-stripe-fintechProjection
Always in _index.xml · the agent never has to ask for this.
StripeFintech [persona] v1.0.0
Fintech trustworthiness made aspirational: brand-color OKLCH systems with a single hue variable, animated gradient hero backgrounds, dense API-doc tables, rounded 12px cards with crisp 1px hairline borders, dark-mode toggle as first-class. Reads as 'we move money and we have taste.'
Loaded when retrieval picks the atom as adjacent / supporting.
StripeFintech [persona] v1.0.0
Fintech trustworthiness made aspirational: brand-color OKLCH systems with a single hue variable, animated gradient hero backgrounds, dense API-doc tables, rounded 12px cards with crisp 1px hairline borders, dark-mode toggle as first-class. Reads as 'we move money and we have taste.'
School
stripe-fintech
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: geometric or grotesque sans with strong numerals — e.g. Sohne, Camphor, ABC Diatype, Inter, Larsseit, GT Walsheim, Untitled Sans
- Body: same family as display with tabular-nums always on — e.g. Sohne, Inter, Camphor, system-ui
- Monospace: essential for code samples and financial values — e.g. Sohne Mono, JetBrains Mono, IBM Plex Mono, Geist Mono
- Color:
- Temperature: cool
- Palette: OKLCH brand-hue system: --brand-hue: 235 generates 50-step ramp, plus semantic green (#00d924) and red (#df1b41), gradient hero of brand-hue + adjacent hue (e.g. 235 to 280)
- Background: light-mode oklch(99% 0.005 240) near-white with cool tint, dark-mode oklch(13% 0.02 240) deep navy-black; gradient heroes use conic-gradient or radial multi-stop
- Density: balanced — vertical rhythm 1.55, dense data tables (40-44px row height with tabular-nums), card padding 24px, section padding 96-128px
- Layout: 1280px max-width, sticky nav with backdrop-blur, hero with animated gradient mesh, 3-up feature cards with 12px radius and 1px hairline border, API-style code blocks side-by-side with prose
- Imagery: abstract gradient meshes, isometric 3D illustrations of cards/checkout flows, real product screenshots in browser-chrome frames, no stock photography
- Motion: smooth — 300-400ms ease-out for transitions, animated gradient hue shifts on hero, count-up animations for stats, hover states with 2px lift + border-color shift, no spring physics
Example Brands
- Stripe
- Plaid
- Mercury
- Ramp
- Brex
- Wise
- Modern Treasury
- Increase
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/fact-fintech-number-display
- @impeccable/template-oklch-palette
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
- Typography Required:
- Display: Söhne | Inter | Camphor (single-family sans)
- Tabular Nums: true
- No Serif Body: true
- Color Required:
- System: OKLCH --brand-hue variable (50-step ramp)
- Background Light: oklch(99% 0.005 240)
- Background Dark: oklch(13% 0.02 240)
- Motion Prescriptions:
- @community/pattern-gradient-mesh-engine
- @impeccable/template-easing-curves
Loaded when retrieval picks the atom as a focal / direct hit.
StripeFintech [persona] v1.0.0
Fintech trustworthiness made aspirational: brand-color OKLCH systems with a single hue variable, animated gradient hero backgrounds, dense API-doc tables, rounded 12px cards with crisp 1px hairline borders, dark-mode toggle as first-class. Reads as 'we move money and we have taste.'
School
stripe-fintech
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: geometric or grotesque sans with strong numerals — e.g. Sohne, Camphor, ABC Diatype, Inter, Larsseit, GT Walsheim, Untitled Sans
- Body: same family as display with tabular-nums always on — e.g. Sohne, Inter, Camphor, system-ui
- Monospace: essential for code samples and financial values — e.g. Sohne Mono, JetBrains Mono, IBM Plex Mono, Geist Mono
- Color:
- Temperature: cool
- Palette: OKLCH brand-hue system: --brand-hue: 235 generates 50-step ramp, plus semantic green (#00d924) and red (#df1b41), gradient hero of brand-hue + adjacent hue (e.g. 235 to 280)
- Background: light-mode oklch(99% 0.005 240) near-white with cool tint, dark-mode oklch(13% 0.02 240) deep navy-black; gradient heroes use conic-gradient or radial multi-stop
- Density: balanced — vertical rhythm 1.55, dense data tables (40-44px row height with tabular-nums), card padding 24px, section padding 96-128px
- Layout: 1280px max-width, sticky nav with backdrop-blur, hero with animated gradient mesh, 3-up feature cards with 12px radius and 1px hairline border, API-style code blocks side-by-side with prose
- Imagery: abstract gradient meshes, isometric 3D illustrations of cards/checkout flows, real product screenshots in browser-chrome frames, no stock photography
- Motion: smooth — 300-400ms ease-out for transitions, animated gradient hue shifts on hero, count-up animations for stats, hover states with 2px lift + border-color shift, no spring physics
Example Brands
- Stripe
- Plaid
- Mercury
- Ramp
- Brex
- Wise
- Modern Treasury
- Increase
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/fact-fintech-number-display
- @impeccable/template-oklch-palette
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
- Typography Required:
- Display: Söhne | Inter | Camphor (single-family sans)
- Tabular Nums: true
- No Serif Body: true
- Color Required:
- System: OKLCH --brand-hue variable (50-step ramp)
- Background Light: oklch(99% 0.005 240)
- Background Dark: oklch(13% 0.02 240)
- Motion Prescriptions:
- @community/pattern-gradient-mesh-engine
- @impeccable/template-easing-curves
Relations
related: [@impeccable/persona-vercel-clean, @impeccable/persona-dense-pragmatist, @impeccable/template-oklch-palette, @community/principle-typography-hierarchy, @community/check-line-length-optimal, @community/fact-fintech-number-display, @community/fact-variable-font-axes, @community/rule-font-feature-settings, @community/principle-color-system-foundation, @community/check-color-oklch-required, @community/check-contrast-aa, @community/constraint-oklch-only-color, @community/principle-intentional-gradient, @community/rule-gradients-justified-only, @community/pattern-gradient-mesh-engine, @community/pattern-color-scale-decision, @community/anti-pattern-generic-saas-blue, @community/check-color-blacklist-brand] compatible: [modern, trustworthy, developer-friendly, vercel-clean, data-rich] conflicts: [brutalist, warm-institutional, tokyo-minimal, magazine-editorial] specializes: [@community/persona-stripe] contradicts: [@impeccable/persona-brutalist, @impeccable/persona-warm-institutional]
Compatible
- modern
- trustworthy
- developer-friendly
- vercel-clean
- data-rich
Conflicts
- brutalist
- warm-institutional
- tokyo-minimal
- magazine-editorial
Specializes
- @community/persona-stripe
Contradicts
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
Source
aoe-engine/examples/frontend-design/primes/compiled/@impeccable/persona-stripe-fintech/atom.yaml