Bienville Capital

Overview

Bienville Capital employs a "Computational Gradient" aesthetic—a sophisticated evolution of glassmorphism that prioritizes dynamic mesh gradients over static surfaces. The brand serves institutional and high-net-worth investors seeking clarity in complex financial landscapes. The UI evokes precision, forward momentum, and intellectual rigor through layered color fields (mint-green #adf6bd, electric blue #3077f3, cyan #61eaf4) that blur and blend at 80–100px filter depths, creating an atmosphere of depth without visual clutter. The emotional response is one of confidence tempered by approachability: the gradient feels alive and energetic, yet the typography remains measured and legible.

Bienville's voice is direct, data-informed, and never hyperbolic. Sentences are concise and active. Example: "Your portfolio moves with precision—track every shift in real time." The brand avoids financial jargon when plain language suffices, and uses numerals and metrics as visual anchors. Personality traits: analytical yet optimistic, modern without being trendy, authoritative without condescension.

Colors

The color system is built on a dark-mode-first foundation (surface #191919, on-surface #fefefe) with three vibrant accent families layered atop a mesh-gradient base. Primary (#3077f3, a saturated electric blue) is the brand's signature accent—used on CTAs, focus states, and key interactive elements. It commands attention without aggression, anchoring the visual hierarchy. Secondary (#adf6bd, a luminous mint-green) and Tertiary (#61eaf4, a bright cyan) are deployed as mesh-gradient circles with heavy blur (80–100px filter: blur) to create atmospheric depth; they never appear as solid UI elements. The accent blue (#0a48b2) provides tonal variation within the gradient field. On-surface (#fefefe) is reserved for body text and primary labels over dark backgrounds; on-surface-variant (#c4c7c8) s

Typography

The type system centers on Benton Sans across all weights (300–700), a humanist sans-serif that balances precision with warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero moments; Headline-lg (40px, 600 weight, -0.02em) structures major sections; Body-md (16px, 400 weight) serves as the baseline for body copy and UI labels. Label-md (14px, 600 weight, 0.05em tracking) is applied to buttons and micro-interactions, with uppercase text-transform on CTAs to reinforce hierarchy. Line-heights are generous (1.5–1.75 unitless ratios) to ensure legibility over animated backgrounds. On small labels over busy mesh gradients, apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to maintain contrast. Font-weight 300 (Benton Sans Bk) is used for body text on dark surfaces; weight 400 (Benton S

Layout

The layout employs a fluid, full-viewport model with a max-container width of 1400px for content sections. The grid is 12-column, with gutter spacing of 20px at mobile and 24px at medium+ breakpoints. The 404 error page uses a centered, full-height flex container (height: 100vh, display: flex, align-items: center, justify-content: center, flex-direction: column) with padding-top: 102px and padding-bottom: 40px to account for header and footer zones. Mesh-gradient circles are positioned absolutely within a full-viewport container (width: 100vw, height: 100vh, position: absolute, top: 0, left: 0, overflow: hidden, z-index: 1), allowing text and interactive elements to layer above (z-index: 2). Spacing follows the semantic scale: xs (4px) for micro-interactions, sm (12px) for component paddin

Elevation & Depth

Depth is achieved through a three-tier system combining mesh-gradient layering, backdrop-filter blur, and selective shadows. Level 1 (Base): The full-viewport mesh-gradient background with multiple blurred circles (filter: blur(80px) to blur(100px)) creates atmospheric depth without traditional shadows. Level 2 (Overlay Text): Text and interactive elements sit at z-index: 2, positioned relative to the gradient layer (z-index: 1). Level 3 (Interactive Components): Header and button containers use rgba(255, 255, 255, 0.05) backgrounds with backdrop-filter: blur(10px) and a 1px solid border at rg

Shapes

The shape philosophy is "Precision Minimalism"—rounded corners are subtle and functional, never decorative. Border-radius follows a strict scale: sm (4px) for small UI elements like badges or micro-buttons; DEFAULT (5px) for standard buttons and input fields; md (8px) for cards and containers; lg (12px) for larger modals or hero sections; xl (16px) for expansive surfaces; full (9999px) for pills and circular avatars. Mesh-gradient circles use border-radius: 50% for perfect circles, allowing them to blur and blend seamlessly into the background. The 5px default radius (used on the header contai

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background-color: {colors.primary} (#3077f3), text-color: {colors.on-primary} (#fefefe), padding: 12px 24px, height: 48px, rounded: {rounded.DEFAULT} (5px), and typography: {typography.label-md} (14px, 600 weight, 0.05em tracking). On hover, transition to background-color: {colors.primary-container} (#2c5eeb) via 200ms ease-out. Active state shifts to {colors.primary-fixed-dim} (#2c5eeb). Button-secondary uses transparent background with a 1px solid border at {colors.primary} and text-color: {colors.primary}; on hover, apply background-color: rgba(48, 119, 243, 0.08) for a subtle fill. CTA text uses text-transform: uppercase and letter-spacing: 0.08em to reinforce hierarchy.

Containers & Surfaces The

Do's and Don'ts

**Do**

• Do use the mesh-gradient circles as atmospheric background elements only—never place solid UI components inside them; keep interactive elements at z-index: 2 above the gradient layer.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, active, focus) to maintain the brand's sense of precision and control.
• Do reserve the primary blue (#3077f3) exclusively for CTAs, focus states, and key interactive elements; use secondary and tertiary colors only within the mesh-gradient background.
• Do maintain generous line-heights (1.5–1.75) and apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) when text overlays busy gradient areas to ensure accessibility.
• Do use Benton Sans weight 300 (Bk) for body text, weight 400 (Reg) for standard UI, and weight 600 (Med) for emphasis; never mix weights within a single component.

**Don't**

• Don't add solid backgrounds or borders to mesh-gradient circles; they must remain blurred and atmospheric, never sharp or contained.
• Don't use rounded corners larger than 16px (xl) on any UI element; the brand's precision aesthetic rejects excessive softness.
• Don't apply shadows to elements layered over the mesh gradient; the gradient itself provides depth; shadows will create visual confusion.
• Don't mix Benton Sans with other typefaces; the entire system relies on a single, cohesive family to maintain technical authority.
• Don't animate mesh-gradient circles with opacity changes; use transform and filter properties only to preserve GPU acceleration and performance.