Enterprise-Payment-Infrastructure-DESIGN.mdFeatured
Enterprise Payment Infrastructure
Enterprise Payment Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.
HTML Preview
Enterprise-Payment-Infrastructure.html
DESIGN.md
Prompt context source
| Frontmatter | Value |
|---|---|
| version | "alpha" |
| name | "Enterprise Payment Infrastructure" |
| description | "Enterprise Payment Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments." |
| colors | token group |
| primary | "#10B981" |
| secondary | "#F87171" |
| tertiary | "#FBBF24" |
| neutral | "#050505" |
| background | "#050505" |
| surface | "#FFFFFF" |
| text-primary | "#A1A1AA" |
| text-secondary | "#9333EA" |
| border | "#FFFFFF" |
| accent | "#10B981" |
| typography | token group |
| display-lg | token group |
| body-md | token group |
| label-md | token group |
| rounded | token group |
| md | "0px" |
| full | "9999px" |
| spacing | token group |
| base | "4px" |
| sm | "1px" |
| md | "4px" |
| lg | "6px" |
| xl | "8px" |
| gap | "8px" |
| card-padding | "9px" |
| section-padding | "32px" |
| components | token group |
| button-primary | token group |
| button-secondary | token group |
| button-link | token group |
| card | token group |
Overview
- Composition cues:
- Layout: Flex
- Content Width: Bounded
- Framing: Glassy
- Grid: Minimal
Colors
The color system uses dark mode with #10B981 as the main accent and #050505 as the neutral foundation.
-
Primary (#10B981): Main accent and emphasis color.
-
Secondary (#F87171): Supporting accent for secondary emphasis.
-
Tertiary (#FBBF24): Reserved accent for supporting contrast moments.
-
Neutral (#050505): Neutral foundation for backgrounds, surfaces, and supporting chrome.
-
Usage: Background: #050505; Surface: #FFFFFF; Text Primary: #A1A1AA; Text Secondary: #9333EA; Border: #FFFFFF; Accent: #10B981
Typography
Typography pairs Inter for display hierarchy with JetBrains Mono for supporting content and interface copy.
- Display (
display-lg): Inter, 48px, weight 500, line-height 48px, letter-spacing -0.025em. - Body (
body-md): JetBrains Mono, 12px, weight 400, line-height 16px. - Labels (
label-md): Inter, 14px, weight 500, line-height 20px.
Layout
Layout follows a flex composition with reusable spacing tokens. Preserve the flex, bounded structural frame before changing ornament or component styling. Use 4px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.
Treat the page as a flex / bounded composition, and keep that framing stable when adding or remixing sections.
- Layout type: Flex
- Content width: Bounded
- Base unit: 4px
- Scale: 1px, 4px, 6px, 8px, 10px, 12px, 14px, 16px
- Section padding: 32px, 56px
- Card padding: 9px, 32px, 56px
- Gaps: 8px, 10px, 16px, 32px
Elevation & Depth
Depth is communicated through glass, border contrast, and reusable shadow or blur treatments. Keep those recipes consistent across hero panels, cards, and controls so the page reads as one material system.
Surfaces should read as glass first, with borders, shadows, and blur only reinforcing that material choice.
- Surface style: Glass
- Borders: 1px #FFFFFF
- Shadows: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 2px 3px -1px, rgba(25, 28, 33, 0.02) 0px 1px 0px 0px, rgba(25, 28, 33, 0.08) 0px 0px 0px 1px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.035) 0px 2.8px 2.2px 0px, rgba(0, 0, 0, 0.047) 0px 6.7px 5.3px 0px, rgba(0, 0, 0, 0.06) 0px 12.5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 22.3px 17.9px 0px, rgba(0, 0, 0, 0.086) 0px 41.8px 33.4px 0px, rgba(0, 0, 0, 0.12) 0px 100px 80px 0px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, 0.06) 0px 12px 12px -6px, rgba(0, 0, 0, 0.06) 0px 24px 24px -12px
- Blur: 12px, 24px
Techniques
- Gradient border shell: Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 56px padding and a 0px radius. Drive the shell with radial-gradient(rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0) 1px) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.
Shapes
Shapes rely on a tight radius system anchored by 6px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.
Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.
- Corner radii: 6px, 16px, 40px, 9999px
- Icon treatment: Linear
- Icon sets: Solar
Components
Anchor interactions to the detected button styles. Reuse the existing card surface recipe for content blocks.
Buttons
- Primary: background #FFFFFF, text #050505, radius 9999px, padding 14px, border 0px solid rgb(229, 231, 235).
- Secondary: text #FFFFFF, radius 9999px, padding 14px, border 1px solid rgba(255, 255, 255, 0.1).
- Links: text #A1A1AA, radius 0px, padding 0px, border 0px solid rgb(229, 231, 235).
Cards and Surfaces
- Card surface: background rgba(255, 255, 255, 0.95), border 1px solid rgba(255, 255, 255, 0.4), radius 16px, padding 32px, shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.035) 0px 2.8px 2.2px 0px, rgba(0, 0, 0, 0.047) 0px 6.7px 5.3px 0px, rgba(0, 0, 0, 0.06) 0px 12.5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 22.3px 17.9px 0px, rgba(0, 0, 0, 0.086) 0px 41.8px 33.4px 0px, rgba(0, 0, 0, 0.12) 0px 100px 80px 0px, blur 12px.
Iconography
- Treatment: Linear.
- Sets: Solar.
Do's and Don'ts
Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles.
Do
- Do use the primary palette as the main accent for emphasis and action states.
- Do keep spacing aligned to the detected 4px rhythm.
- Do reuse the Glass surface treatment consistently across cards and controls.
- Do keep corner radii within the detected 6px, 16px, 40px, 9999px family.
Don't
- Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
- Don't mix unrelated shadow or blur recipes that break the current depth system.
- Don't exceed the detected moderate motion intensity without a deliberate reason.
Motion
Motion feels controlled and interface-led across text, layout, and section transitions. Timing clusters around 150ms and 500ms. Easing favors ease and cubic-bezier(0.4. Hover behavior focuses on text and grayscale changes. Scroll choreography uses GSAP ScrollTrigger and Parallax for section reveals and pacing.
Motion Level: moderate
Durations: 150ms, 500ms
Easings: ease, cubic-bezier(0.4, 0, 0.2, 1)
Hover Patterns: text, grayscale, color
Scroll Patterns: gsap-scrolltrigger, parallax