Stripe
Premium fintech marketing aesthetic: weight-300 sohne-var headlines on pure white with deep navy #061b31 headings, saturated purple #533afd CTAs, and blue-tinted multi-layer shadows that signal financial-grade confidence…
$ aoe install @community/persona-stripeProjection
Always in _index.xml · the agent never has to ask for this.
Stripe [persona] v1.0.0
Premium fintech marketing aesthetic: weight-300 sohne-var headlines on pure white with deep navy #061b31 headings, saturated purple #533afd CTAs, and blue-tinted multi-layer shadows that signal financial-grade confidence.
Loaded when retrieval picks the atom as adjacent / supporting.
Stripe [persona] v1.0.0
Premium fintech marketing aesthetic: weight-300 sohne-var headlines on pure white with deep navy #061b31 headings, saturated purple #533afd CTAs, and blue-tinted multi-layer shadows that signal financial-grade confidence.
School
stripe
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: sohne-var (Söhne variable) with fallback SF Pro Display
- Body: sohne-var weight 300 — same family, never switches
- Monospace: SourceCodePro with fallback SFMono-Regular
- Color:
- Temperature: cool-neutral
- Palette: purple #533afd brand CTA, purple hover #4434d4, deep navy #061b31 headings, brand dark #1c1e54 immersive sections, body text #64748d, border #e5edf5, accent ruby #ea2261 and magenta #f96bee decoration-only
- Background: #ffffff
- Density: compact — 4–8px radius only, 8px base spacing with dense small-end scale (1/2/4/6/8/10/11/12px), 1080px max-width
- Layout: white canvas with alternating #1c1e54 dark immersive sections, centered 1080px, conservative grid
- Imagery: abstract gradient decoration (ruby #ea2261 → magenta #f96bee) in hero only — never applied to functional UI elements
- Motion: restrained — blue-tinted multi-layer shadows do the heavy lifting; interactive states via opacity and color shift on sohne-var weights
Example Brands
- Stripe
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/pattern-metric-card
- @community/fact-fintech-number-display
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/template-fade-stagger
- Typography Required:
- Display: sohne-var (Söhne Variable)
- Weight Signature: 300
- Opentype Features: ss01
- Color Required:
- Background: #ffffff
- Heading: #061b31
- Shadow Style: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
- Motion Prescriptions:
- @impeccable/template-card-hover-lift
- @impeccable/template-easing-curves
Loaded when retrieval picks the atom as a focal / direct hit.
Stripe [persona] v1.0.0
Premium fintech marketing aesthetic: weight-300 sohne-var headlines on pure white with deep navy #061b31 headings, saturated purple #533afd CTAs, and blue-tinted multi-layer shadows that signal financial-grade confidence.
School
stripe
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: sohne-var (Söhne variable) with fallback SF Pro Display
- Body: sohne-var weight 300 — same family, never switches
- Monospace: SourceCodePro with fallback SFMono-Regular
- Color:
- Temperature: cool-neutral
- Palette: purple #533afd brand CTA, purple hover #4434d4, deep navy #061b31 headings, brand dark #1c1e54 immersive sections, body text #64748d, border #e5edf5, accent ruby #ea2261 and magenta #f96bee decoration-only
- Background: #ffffff
- Density: compact — 4–8px radius only, 8px base spacing with dense small-end scale (1/2/4/6/8/10/11/12px), 1080px max-width
- Layout: white canvas with alternating #1c1e54 dark immersive sections, centered 1080px, conservative grid
- Imagery: abstract gradient decoration (ruby #ea2261 → magenta #f96bee) in hero only — never applied to functional UI elements
- Motion: restrained — blue-tinted multi-layer shadows do the heavy lifting; interactive states via opacity and color shift on sohne-var weights
Example Brands
- Stripe
Composition
- Must Include:
- @community/template-shadcn-pricing-toggle
- @community/pattern-metric-card
- @community/fact-fintech-number-display
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/template-fade-stagger
- Typography Required:
- Display: sohne-var (Söhne Variable)
- Weight Signature: 300
- Opentype Features: ss01
- Color Required:
- Background: #ffffff
- Heading: #061b31
- Shadow Style: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
- Motion Prescriptions:
- @impeccable/template-card-hover-lift
- @impeccable/template-easing-curves
Relations
related: [@impeccable/persona-stripe-fintech, @impeccable/template-oklch-palette, @impeccable/template-card-hover-lift, @community/principle-typography-hierarchy, @community/check-line-length-optimal, @community/rule-opentype-features-on, @community/constraint-typography-weight-blacklist, @community/fact-fintech-number-display, @community/fact-variable-font-axes, @community/principle-color-system-foundation, @community/check-color-oklch-required, @community/check-contrast-aa, @community/rule-single-accent-color, @community/rule-brand-color-primary-only, @community/principle-intentional-gradient, @community/rule-gradients-justified-only, @community/constraint-no-pure-white-bg, @community/anti-pattern-generic-saas-blue, @community/check-color-blacklist-brand] compatible: [stripe-fintech, swiss-modernist, dense-pragmatist, editorial] conflicts: [brutalist, notion-warm, magazine-editorial] contradicts: [@impeccable/persona-brutalist, @impeccable/template-fade-stagger]
Compatible
- stripe-fintech
- swiss-modernist
- dense-pragmatist
- editorial
Conflicts
- brutalist
- notion-warm
- magazine-editorial
Contradicts
- @impeccable/persona-brutalist
- @impeccable/template-fade-stagger
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/persona-stripe/atom.yaml