Alture Funds

Overview

Alture Funds is a fintech platform that democratizes access to institutional-grade alternative investments—previously available only to high-net-worth individuals and institutions. The design aesthetic is 'Heritage Institutional Modernism': a refined fusion of deep teal (#0a5840) representing trust and stability with warm gold (#b89f6b) as the signature accent, evoking both the gravitas of traditional finance and the approachability of modern fintech. The UI conveys confidence without coldness, sophistication without gatekeeping. Users feel they are entering a professional, vetted space where complex financial strategies are made accessible.

The brand voice is authoritative yet conversational—precise when discussing investment mechanics, warm when addressing investor concerns. Vocabulary patterns favor clarity over jargon: 'alternative investments' not 'alts,' 'private assets' not 'PE/VC,' 'institutional-grade' not 'accredited-only.' Example sentence in brand voice: 'Your portfolio deserves the same diversification strategies that endowments have used for decades—now available to you.'

Colors

The color system is anchored in a dual-accent model: Secondary (#0a5840, a deep institutional teal) serves as the primary brand identity and hero background, establishing trust and heritage. Primary (#b89f6b, a warm champagne gold) is the interactive accent—used exclusively on CTAs, focus states, and key highlights—creating visual momentum and guiding user action. This pairing avoids the cold minimalism of pure blacks and whites while remaining professional and legible. Surface colors range from pure white (#ffffff) for primary content areas to soft grays (#f3f3f3, #ededed) for subtle container differentiation. The tertiary green (#004c40) is reserved for secondary actions and status indicators. On dark backgrounds (hero sections), text is always white (#ffffff) with a minimum contrast rat

Typography

The type system employs a two-family strategy: Metropolis (a geometric, modern sans-serif) for display and headlines, conveying contemporary fintech credibility; Open Sans and Arial for body and labels, ensuring accessibility and legibility at small sizes. Display (70px, 600 weight, -0.02em tracking) is reserved for hero headlines and sets the tone of sophistication. Headline-lg (40px, 600 weight) anchors section introductions. Body-lg (18px, 500 weight, 28px line-height) is used for quoted testimonials and key messaging, with a 0.5px text-shadow at rgba(0, 0, 0, 0.1) when overlaid on teal backgrounds to ensure readability. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels. All type scales maintain a 1.5x ratio between sizes, creating visual rhythm. Ita

Layout

The layout employs a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Hero sections span full-width with the secondary teal background (#0a5840) and white text, creating a bold entry point. Content sections use lg spacing (40px) for vertical separation between major blocks, md spacing (24px) for internal card padding, and sm spacing (12px) for input field margins. The gutter width is consistently 24px on desktop, scaling to 12px on tablets. Container max-width is 1280px; content rarely exceeds 991px on desktop to maintain comfortable line lengths (60–80 characters). White-space is generous: section padding is never less than 40px top/bottom, and card padding is never less than 24px. The announcement bar at the top uses the primary-container color (#e2d8c2) with ce

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, representing primary content areas and input fields. Level 2 (Standard Cards): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with 1px border in outline-variant (#9c9c9c), used for feature cards, quote blocks, and secondary containers. Level 3 (Elevated/Hover): 0 8px 24px rgba(0, 0, 0, 0.12) shadow with background shift to surface-container-high (#e2d8c2), applied on card hover and modal overlays. The header navigation uses a subtle sm s

Shapes

The shape philosophy is 'Professional Approachability'—combining sharp architectural lines with selective softness to balance institutional credibility with modern accessibility. Buttons and CTAs use full-radius (40px border-radius) to signal action and approachability; this rounded pill shape is distinctive and tappable. Input fields use extreme rounding (1584px, effectively full-height) to create a soft, inviting interaction surface. Standard cards and containers use lg radius (1rem / 16px) for a clean, modern appearance without feeling cold. Quote cards and callout sections use lg radius (1

Components

Action Elements Buttons follow a two-tier system: Primary buttons use {colors.primary} (#b89f6b) background with white text, 18px Metropolis 500-weight, full-radius (40px), and padding of 14px 25px 12px to accommodate descenders. Hover state shifts to {colors.primary-fixed-dim} (#c4af84) over 200ms ease-out. Secondary buttons are transparent with a 2px solid border in {colors.primary}, same typography, and shift to {colors.primary-container} background on hover. Both button types maintain a 48px minimum height for touch accessibility. The 'GET STARTED' CTA in the header and 'SCHEDULE PRIVATE CONSULTATION' in the hero are primary buttons; 'Read Announcement' is a secondary button or inline link styled in {colors.primary}.

Containers & Surfaces Standard cards use {colors.surface-con

Do's and Don'ts

**Do**

• Do use {colors.primary} (#b89f6b) exclusively for interactive elements—buttons, links, focus states—to create a consistent call-to-action language across the platform.
• Do maintain the 48px minimum height for all clickable elements (buttons, inputs, list items) to ensure touch accessibility on mobile devices.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create subtle depth without visual heaviness; reserve {elevation.lg} for hover states only.
• Do use Metropolis 600-weight for all headlines and display text to reinforce the modern, institutional aesthetic; reserve Open Sans for body and labels.
• Do pair the secondary teal (#0a5840) with white text at 7:1+ contrast ratio on hero sections and dark backgrounds; never use gray text on teal.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease-out to create smooth, professional micro-interactions.

**Don't**

• Don't introduce new accent colors beyond {colors.primary} (#b89f6b) and {colors.secondary} (#0a5840); the two-color system is intentional and brand-defining.
• Don't use shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or apply blur/backdrop-filter effects; the design prioritizes clarity over atmospheric effects.
• Don't apply border-radius smaller than {rounded.sm} (0.25rem / 4px) to any interactive element; sharp corners feel unfinished and reduce visual cohesion.
• Don't use system fonts (system-ui, -apple-system) for headlines; always load Metropolis from a web font service to maintain brand consistency.
• Don't exceed {spacing.lg} (40px) for section padding on desktop or reduce below {spacing.md} (24px) for card padding; white-space ratios are critical to the refined aesthetic.
• Don't place body text smaller than 16px or with line-height less than 1.5 (24px); accessibility and readability are non-negotiable, especially for financial content.