Hark Capital

Overview

Hark Capital is a specialized financial services provider offering non-dilutive NAV loans and GP financings to institutional investors and financial sponsors. The design system embodies 'Architectural Minimalism'—a refined aesthetic that treats interface elements as structural components in a larger institutional landscape. The visual language prioritizes clarity, depth, and precision through a sophisticated blue-tonal palette (primary #235e80, secondary #062541, accent #00f2e5) layered with glassmorphic surfaces that evoke transparency and trustworthiness. The UI creates a sense of controlled sophistication: users perceive institutional authority without coldness, technical precision without intimidation.

The brand voice is measured, authoritative, and direct—never hyperbolic or casual. Hark Capital speaks to seasoned financial professionals who value specificity over marketing flourish. Vocabulary emphasizes 'non-dilutive', 'dedicated', 'specialized', and 'efficient'. Example sentence in brand voice: 'Our NAV-based lending structure preserves your fund's equity and accelerates deployment timelines.'

Colors

The color system is anchored in a deep institutional blue palette that conveys stability and financial expertise. Primary (#235e80) is the signature accent used on all call-to-action buttons, active navigation states, and key interactive elements—it appears on the 'Click to Expand' button in the hero and throughout hover states. Secondary (#062541) provides a darker anchor for high-contrast text and critical UI layers. The tertiary accent (#00f2e5, a vibrant cyan-laguna) is reserved for progressive disclosure, accent highlights, and status indicators that demand attention without disrupting the blue-dominant aesthetic.

Surface colors follow a light-mode-first strategy: surface (#f3f3f3) is the default page background, surface-container (#e9ecef) is used for secondary content zones, and su

Typography

The typography system uses Aeonikpro as the primary typeface—a geometric sans-serif that balances technical precision with approachability. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 600 weight) anchors subsections; headline-md (28px, 600 weight) introduces card content and modal titles. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and explanatory text; body-md (16px, 400 weight, 24px line-height) is the default for UI labels and secondary content. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text, badges, and form labels to ensure crisp legibility at small sizes. All headlines use -0.02em to -0.04em letter-spacing to create visual compres

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max: 1280px), maintaining a 24px gutter on desktop and collapsing to 12px on tablet. Page rhythm is established through semantic spacing: lg (40px) separates major sections (hero, values, team, insights), md (24px) separates card groups and subsections, sm (12px) separates inline elements. The hero section spans full viewport height with a 3D perspective background (the geometric mountain-like shape in the screenshot), establishing visual depth immediately. Content containers use padding: 40px 24px on desktop, scaling to 24px 16px on mobile. The 'Click to Expand' menu button in the top-right uses fixed positioning with z-index layering to remain accessible during scroll. Whitespace is treated as a structural elem

Elevation & Depth

Depth is conveyed through a three-tier shadow and glass system. Level 1 (Base): flat surfaces with no shadow, used for body background (#f3f3f3) and primary content zones. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to card-standard and input-field components; these surfaces sit slightly above the base and are used for secondary content, form inputs, and list items. Level 3 (Elevated/Glass): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) combined with backdrop-filter: blur(50px) and background: rgba(255, 255, 255, 0.1), used for modals, glass-card components, and t

Shapes

The shape philosophy is 'Architectural Precision'—sharp corners and minimal rounding reinforce the institutional, engineered aesthetic. Buttons use rounded: sm (0.25rem / 4px) for a subtle, professional appearance that avoids the 'soft' feel of larger radii. Cards and containers use rounded: DEFAULT (0.5rem / 8px) or rounded: md (0.75rem / 12px) depending on hierarchy; primary cards use md, secondary cards use DEFAULT. Glass surfaces and modals use rounded: lg (1rem / 16px) to create a slightly more refined, layered appearance. Input fields use rounded: DEFAULT (0.5rem / 8px) to match card sty

Components

Action Elements Buttons are the primary conversion mechanism and use a two-state system: button-primary (background: #235e80, color: white, padding: 16px 24px, height: 48px, rounded: 4px, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)) for primary CTAs like 'Get in Touch' and 'Click to Expand'. On hover, button-primary-hover transitions to background: #114167 (primary-fixed-dim) over 300ms, creating a subtle darkening effect. Button-secondary uses a transparent background with a 1px border (#919598) and text color #235e80, allowing secondary actions to coexist without visual competition. All buttons use label-md typography (14px, 600 weight) and apply transition: all 300ms ease-out for smooth state changes.

Containers & Surfaces Cards follow a two-tier system: card-standard (backgroun

Do's and Don'ts

**Do**

• Do use primary (#235e80) exclusively for call-to-action buttons and active states—never use it for passive elements or backgrounds.
• Do apply glass surfaces (backdrop-filter: blur(50px), rgba(255, 255, 255, 0.1)) only to navigation, modals, and overlay components; never on primary content cards.
• Do maintain 18:1 contrast ratio between on-surface (#181818) and surface (#f3f3f3) for all body text to meet WCAG AAA accessibility standards.
• Do use cubic-bezier(0.25, 0.46, 0.45, 0.94) for all interactive transitions (300ms default) to reinforce the 'controlled precision' brand personality.
• Do reserve the tertiary accent (#00f2e5) for progressive disclosure, status indicators, and accent highlights—use sparingly to maintain visual hierarchy.

**Don't**

• Don't use rounded corners larger than 16px (rounded: lg) on primary UI elements; the brand aesthetic requires architectural sharpness, not softness.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12) (elevation.lg) on any component—excessive shadow depth contradicts the 'precision' voice.
• Don't mix Aeonikpro with system fonts or serif typefaces; the geometric sans-serif is essential to the institutional aesthetic.
• Don't use the secondary color (#062541) for text on light backgrounds; it creates insufficient contrast. Reserve it for dark-mode surfaces or accent layers.
• Don't animate opacity transitions faster than 200ms or slower than 400ms; the brand uses 300ms as the golden mean for perceived responsiveness without feeling sluggish.