Founderpath Design System

A comprehensive collection of reusable UI components for the Founderpath platform

Accordion

Collapsible content sections

Badge

Small status and category indicators

primary

blue

blueLight

brand

green

yellow

red

orange

gray

teal

lightTeal

purple

Custom

Button

Interactive buttons with multiple variants and states

Button Variants

Button States

Button as Link

Internal Link External Link

Custom Styling

Card

Flexible content containers

Sample Card

This is a card description

Card content goes here

Another Card

With different content

Input

Form input fields with labels, validation, and multiple sizes

Input Sizes

Small

Default

Large

Input Types

Text

Password

Number

Phone

URL

Input States

Normal

Disabled

With Error

This field is required

Without Labels

LoadingState

Full-screen loading indicator with Founderpath branding

Note: This component typically takes full screen height in actual usage

Select

Dropdown selection components

Basic Select

With Placeholder

Tabs

Navigation tabs with responsive mobile select

Standard Tabs

Borderless Tabs

Text

Typography components with various styles and weights

heading-md

Sample text using heading-md variant

heading-sm

Sample text using heading-sm variant

subheading-lg

Sample text using subheading-lg variant

subheading-md

Sample text using subheading-md variant

subheading-sm

Sample text using subheading-sm variant

body-lg/600

Sample text using body-lg/600 variant

body-lg/500

Sample text using body-lg/500 variant

body-lg/400

Sample text using body-lg/400 variant

body-md/600

Sample text using body-md/600 variant

body-md/500

Sample text using body-md/500 variant

body-md/400

Sample text using body-md/400 variant

body-sm/600

Sample text using body-sm/600 variant

body-sm/500

Sample text using body-sm/500 variant

body-sm/400

Sample text using body-sm/400 variant

caption/600Sample text using caption/600 variant

caption/500Sample text using caption/500 variant

caption/400Sample text using caption/400 variant

dataSample text using data variant

muted

This is muted text

Textarea

Multi-line text input fields with labels, validation, and sizing options

Textarea Sizes

Small

Default

Large

Textarea States

Normal

Disabled

With Error

This field is required

Different Row Heights

Short (2 rows)

Medium (6 rows)

Large (10 rows)

Without Label

UserAvatar

User profile images with fallback icons in multiple sizes

Avatar Sizes

2xl

With Profile Images

With image

Fallback icon

Large Avatars

Layout Components

Structural components for page layout including navigation, footer, and content sections

Navbar

Global navigation with responsive mobile menu, authentication state, and announcement banner. Includes Growth Playbooks, Courses, Blog, and About Us links.

Props:

showBanner?: boolean - Toggle announcement banner
medium?: string - Marketing tracking parameter
campaign?: string - Campaign tracking parameter
className?: string - Additional CSS classes

Footer

Comprehensive footer with product links, resources, events, company information, legal links, social media icons, and compliance badges (SOC 2, GDPR).