Founders Research & Investment

Overview

Founders Research & Investment is an institutional equity research platform built for sophisticated, long-term capital allocators. The design system embodies 'Institutional Minimalism'—a philosophy that combines the clarity of institutional governance with the warmth of founder-led conviction. The visual language uses a deep forest green (#3d6c32) as the primary accent, paired with a vibrant growth green (#52a843) for secondary actions, set against a clean white canvas with subtle mint undertones. This creates an atmosphere of trust, discipline, and forward momentum—evoking the precision of financial analysis without sacrificing human warmth. The brand personality is measured, authoritative, and founder-centric: it speaks to institutional investors with respect for their time and capital, using language that is direct, evidence-based, and free of hype. Example voice: 'We back founder-led compounders with durable economic moats—not momentum plays.'

Colors

The color system is rooted in nature-inspired greens that signal growth, stability, and long-term thinking. Primary (#3d6c32, a deep forest green) is used exclusively for primary CTAs ('REQUEST BRIEFING', 'Explore Investment Philosophy'), navigation focus states, and brand-critical interactive elements. Secondary (#2c5932, ultra-deep evergreen) appears in hover states and secondary navigation to reinforce hierarchy without introducing visual noise. Tertiary (#52a843, vibrant leaf green) is reserved for accent highlights, badges, and supporting interactive elements like range sliders (box-shadow: 0 2px 6px rgba(44, 89, 50, 0.3)). The surface stack uses a gradient from pure white (#ffffff) through soft mint tones (#f6faf4, #eaf5e8, #e4efe2) to create subtle depth without dark mode. Glass car

Typography

The type system pairs Plus Jakarta Sans (a geometric, modern sans-serif) for all UI text with Newsreader (a high-contrast serif) reserved for editorial moments and data highlights. Display (60px, 800 weight, -0.04em tracking) anchors hero sections with authority; Headline-lg (40px, 700 weight) structures major sections; Body-md (16px, 400 weight, 24px line-height) ensures readability at standard viewing distances. Label-md (14px, 700 weight, 0.01em tracking) is applied to all buttons and interactive labels to create visual distinction. The type hierarchy communicates institutional credibility through weight contrast (800 for display, 600 for headlines, 400 for body) rather than size alone. On small labels over busy backgrounds or glass surfaces, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0

Layout

The layout system uses a 12-column grid with a max-width of 1400px, enforced via max-w-[1400px] in Tailwind. Page rhythm is established through semantic spacing: lg (40px) separates major sections (hero, research pillars, footer), md (24px) divides card groups and subsections, and sm (12px) provides breathing room within components. The hero section uses a full-bleed background with subtle radial gradients (rgba(61, 108, 50, 0.06) at 32px intervals) to create visual texture without distraction. Container padding is consistently 24px (gutter) on all sides, scaling to 40px on larger viewports. White-space is generous—cards are spaced 24px apart in grid layouts, and text blocks maintain 28px line-height for body copy to ensure comfortable reading. The grid is fluid on mobile (1 column) and ex

Elevation & Depth

Depth is conveyed through subtle glassmorphism and soft shadows rather than dramatic layering. Level 1 (Base): white background (#ffffff) with a faint radial grid pattern (rgba(61, 108, 50, 0.06) dots at 32px spacing). Level 2 (Standard Card): rgba(255, 255, 255, 0.92) with backdrop-filter: blur(16px), 1px border at #e4efe2, and box-shadow: 0 2px 6px rgba(44, 89, 50, 0.3). Level 3 (Elevated/Modals): rgba(255, 255, 255, 0.96) with backdrop-filter: blur(20px), 1px border at rgba(61, 108, 50, 0.2), and box-shadow: 0 4px 12px rgba(44, 89, 50, 0.15). Hover states transition to Level 3 with a 200ms

Shapes

The shape philosophy is 'Institutional Softness'—rounded corners signal approachability and modern design, while maintaining enough angularity to convey professionalism. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel inviting and clickable. Cards use lg (1rem / 16px) for standard content containers, creating a gentle frame without appearing playful. Input fields use md (0.375rem / 6px) for a subtle, business-appropriate appearance. Badges and accent elements use full (9999px) to draw attention as secondary affordances. The rationale: full-radius buttons stand out

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#3d6c32) with white text, 14px 700-weight label, 44px height, 14px 28px padding, and full border-radius. On hover, background transitions to {colors.secondary} (#2c5932) over 200ms. Secondary buttons use white background with a 1px {colors.outline-variant} border, {colors.primary} text, and the same padding/height. Focus state adds a 3px ring at rgba(61, 108, 50, 0.1). Ghost buttons (used for 'View Research Publications') have transparent background, {colors.primary} text, and a 1px border at rgba(61, 108, 50, 0.3); on hover, they gain a {colors.surface-container-low} background.

Containers & Surfaces Glass cards are the primary container pattern: rgba(255, 255, 255, 0.92) background

Do's and Don'ts

**Do**

• Do use {colors.primary} (#3d6c32) exclusively for primary CTAs and focus states—it signals institutional trust and founder-led conviction.
• Do maintain generous white-space: 40px between major sections, 24px between cards, 28px line-height on body text to reflect the brand's respect for investor time.
• Do apply backdrop-filter: blur(16px) and 1px borders to all glass cards to maintain visual separation while preserving the clean aesthetic.
• Do use Plus Jakarta Sans for all UI text and reserve Newsreader for editorial highlights—the pairing communicates both precision and narrative authority.
• Do transition all interactive states over 200ms ease-in-out to create a sense of deliberate, measured interaction.
• Do use the green shadow color (rgba(44, 89, 50, ...)) for all elevation shadows to tie depth to brand identity.

**Don't**

• Don't use {colors.secondary} (#2c5932) or {colors.tertiary} (#52a843) for primary CTAs—they are supporting accents only and will dilute the brand's visual hierarchy.
• Don't apply dark mode or high-contrast backgrounds; the brand is rooted in institutional clarity and white-space, not dramatic contrast.
• Don't use sharp (0px) border-radius on buttons or cards—it contradicts the approachable, modern institutional aesthetic.
• Don't apply text-shadow or drop-shadows to body text; use them only on small labels over busy backgrounds (0 1px 2px rgba(0, 0, 0, 0.1)).
• Don't exceed 1400px container width or use more than 3 columns on desktop—the layout must feel spacious and deliberate, not dense.
• Don't mix typefaces within a single component; Plus Jakarta Sans is for UI, Newsreader is for editorial moments only.