Vela Partners

Overview

Vela Partners operates in the intersection of precision and velocity—a design system built for AI-native quantitative venture capital. The brand embodies 'Computational Minimalism': a dark, near-black canvas (#050505) punctuated by an electric emerald accent (#00dc82) that signals decisiveness and speed. The UI speaks to founders and operators who value clarity over decoration; every pixel serves the mission of rapid capital deployment. The emotional response is one of focused intensity—calm, technical, trustworthy. Voice: direct, data-driven, never flowery. Example: 'Your AI fund closes in 48 hours. Here's your cap table.'

Colors

The color system is built on a near-black foundation (surface: #050505, surface-dim: #0a0a0a) that establishes a premium, high-contrast environment. Primary (#00dc82) is the brand's signature emerald—used exclusively for CTAs ('LAUNCH VC AGENT'), active states, and status indicators. It conveys velocity and trust in a quantitative context. Secondary (#6c757d) provides neutral support for disabled or secondary actions. Tertiary (#219653) is a deeper green reserved for success states and confirmations. Error (#ff6b6b) signals rejection or warnings. The surface stack (surface-container-lowest through surface-container-highest, ranging #000000 to #2a2a2a) creates depth through subtle luminance shifts, enabling layered UI without relying on color. On-surface (#ffffff) and on-surface-variant (#b

Typography

The type system pairs Inter (humanist sans-serif, 400–700 weights) for body and display text with JetBrains Mono (monospace, 500–600 weights) for labels and status indicators. This pairing reinforces the brand's dual nature: approachable yet technical. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with authority. Headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) establish information hierarchy. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) ensure readability at any size. Label-md and label-sm use JetBrains Mono at 14px and 12px respectively, with 0.05em and 0.08em letter-spacing to evoke precision and code. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over animated backgrounds to m

Layout

The layout follows a 12-column grid with a max-width of 1280px, enabling responsive scaling from mobile to desktop. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is semantic and hierarchical. Gutter spacing is 32px, providing breathing room between sections. Hero sections use lg spacing (40px) for vertical rhythm; card stacks use md spacing (24px) for density. Container max-width of 1280px prevents line-length bloat on ultra-wide displays. White-space is intentional: the dark background (#050505) acts as a visual reset, so negative space between elements feels premium rather than sparse. Sections are separated by lg spacing (40px) or dividers (1px solid #505050) to create visual pause points. The grid is fluid on mobile (100% width with gutter padding) and

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the background gradient (#050505 with subtle particle/noise texture) provides the foundation. Level 2 (Standard Card): surface-container (#141414) with 1px border (solid #1f1f1f) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) creates a lifted, readable surface. Level 3 (Elevated/Modal): surface-container-high (#1f1f1f) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) and a 2px border (solid #2a2a2a) signals maximum prominence. Hover states amplify elevation: cards transition to surfac

Shapes

The shape philosophy is 'Precision Minimalism'—rounded corners are used sparingly and purposefully. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px) for a modern, approachable feel that avoids hard edges without appearing soft. Cards and elevated surfaces use rounded.lg (1rem / 16px) to signal containment and focus. Badges and status indicators use rounded.full (9999px) for visual distinction and urgency. Dividers and borders are sharp (0px radius) to maintain technical clarity. The rationale: small radii (8px) feel contemporary and tech-forward; full-radius elements (badges) draw attenti

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#00dc82) background with on-primary (#050505) text, 12px 24px padding, 48px height, and a 1px border matching the background. On hover, the background shifts to primary-fixed-dim (#00dc82) with a 0.25 box-shadow (0 4px 12px rgba(0, 220, 130, 0.25)) over 200ms. Button-secondary uses transparent background with on-surface (#ffffff) text and a 1px outline (#777777); on hover, it fills with surface-container-high (#1f1f1f) and the border becomes primary. Button-ghost is text-only with no border; on hover, it gains a subtle background (rgba(0, 220, 130, 0.1)) over 150ms. All buttons use label-md typography (JetBrains Mono, 14px, 600 weight, 0.05em letter-spacing) for scanability.

Containers & Surf

Do's and Don'ts

**Do**

• Do use primary (#00dc82) exclusively for CTAs and active states—it's the brand's signature and must remain distinctive.
• Do maintain 7:1+ contrast ratios between text and background; test with WCAG AA standards on dark surfaces.
• Do apply 200ms transitions to interactive elements (buttons, inputs) to signal responsiveness without feeling sluggish.
• Do use JetBrains Mono for labels and status indicators to reinforce the technical, quantitative brand voice.
• Do respect the 32px gutter and 40px section spacing to maintain visual rhythm and prevent cognitive overload.
• Do layer surfaces using the surface-container stack (lowest to highest) rather than adding color; this preserves the dark aesthetic.

**Don't**

• Don't use colors other than primary (#00dc82) for primary CTAs; secondary and tertiary are supporting roles only.
• Don't apply shadows larger than lg (0 16px 40px) on standard cards; reserve that depth for modals and elevated surfaces.
• Don't mix Inter and JetBrains Mono weights arbitrarily; use 700 for headlines, 600 for labels, 400 for body.
• Don't add rounded corners larger than rounded.lg (16px) to cards or buttons; it dilutes the precision aesthetic.
• Don't use the outline color (#777777) for text; it's reserved for borders and dividers. Use on-surface (#ffffff) or on-surface-variant (#bdbdbd) for text.
• Don't animate opacity or transforms longer than 300ms on hover; the brand values speed and responsiveness.