v1.0 — Shared Component Library

TeamPilot Design System

A premium, concierge-inspired design system built for TeamPilot. Light, calm, professional — every component is crafted to feel like a trusted co-pilot.

Get Started |Teal #14b8a6 · Navy #1E293B · Gold #D97706

Color Palette

The TeamPilot color system is built around a premium teal primary, navy typography, and gold accents. All interfaces use a white background with slate surfaces.

#14b8a6

Teal (Primary)

--color-teal-brand

#1E293B

Navy

--color-navy

#D97706

Gold (Accent)

--color-gold-brand

#FFFFFF

White

--color-surface-white

#F8FAFC

Surface Slate

--color-surface-slate

#F1F5F9

Slate 100

#E2E8F0

Slate 200

#0F172A

Slate 900

--foreground

Design Tokens (globals.css)

tsx

@theme inline {
  --color-teal-brand: #14b8a6;
  --color-navy: #1E293B;
  --color-gold-brand: #D97706;
  --color-surface-white: #FFFFFF;
  --color-surface-slate: #F8FAFC;
}

:root {
  --background: #FFFFFF;
  --foreground: #0F172A;
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(241, 245, 249, 0.8);
}

.text-gradient {
  background: linear-gradient(135deg, #1E293B 0%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Typography

TeamPilot uses Geist Sans (with Inter fallback) for a clean, modern reading experience. The type scale is designed for clarity and hierarchy.

5xl / 7xl / Black (900)

The quick brown fox

3xl / 4xl / Black (900)

Team experiences, reimagined

2xl / Bold (700)

How It Works

xl / Bold (700)

Popular Activities

body

base / lg / Medium (500)

From 2-hour outings to weekend retreats — discover, plan, and book in seconds.

caption

xs / Semibold (600)

UPPERCASE TRACKING WIDER

small

xs / Normal (400)

Font Stack

tsx

font-family: Inter, ui-sans-serif, system-ui, -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
  Arial, sans-serif;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Button

Buttons are the primary call-to-action elements. Four variants and three sizes cover all interaction needs.

Variants

Primary

Main action buttons. Use for primary CTAs.

Usage: <Button variant="primary" size="md">Generate My Team Plan</Button>

Secondary

Alternative actions. Pairs well with primary.

Usage: <Button variant="secondary" size="md">Become a Partner</Button>

Outlined

Secondary emphasis with a border. Use for less prominent actions.

Usage: <Button variant="outlined" size="md">See a Sample Itinerary</Button>

Ghost

Minimal emphasis. Use for tertiary actions or in tight spaces.

Usage: <Button variant="ghost" size="md">Cancel</Button>

Sizes

tsx

// Small (sm)
px-3 py-1.5 text-xs font-semibold rounded-lg

// Medium (md)
px-5 py-2.5 text-sm font-semibold rounded-xl

// Large (lg)
px-7 py-3 text-base font-bold rounded-xl

States

tsx

// Loading state (add spinner SVG + disabled)
<button disabled class="...">
  <svg class="animate-spin h-4 w-4">...</svg>
  Loading...
</button>

// Disabled state
<button disabled class="... disabled:cursor-not-allowed disabled:bg-teal-300">
  Disabled
</button>

Card

Cards are the primary content containers. They provide structure for information in a clean, approachable layout.

Default

Standard card with white background and subtle border.

Usage: <Card variant="default">...</Card>

Default Card

Clean, minimal, versatile.

Interactive

Hover-lift effect for clickable cards.

Usage: <Card variant="interactive" onClick={...}>...</Card>

Clickable Card

Hover me to see the lift effect.

Highlight

Emphasized card with a gold left border accent.

Usage: <Card variant="highlight">...</Card>

Highlighted

Gold accent for important content.

Card Subcomponents

tsx

import { Card, CardHeader, CardBody, CardFooter } from '@/app/components/ui';

<Card variant="default">
  <CardHeader>
    <h3>Title</h3>
  </CardHeader>
  <CardBody>
    <p>Main content with text-slate-600 text-sm leading-relaxed</p>
  </CardBody>
  <CardFooter>
    <p>Footer with border-t border-slate-100</p>
  </CardFooter>
</Card>

Badge

Badges provide quick visual labels for status, categories, and metadata. Seven variants cover all use cases.

Teal

Primary brand badge for featured content.

FeaturedPopularNew

Gold

Accent badge for highlights and premium content.

PremiumTop Rated

Navy

Dark badge for high-contrast labels.

Official

Slate

Neutral badge for metadata and secondary info.

Draft

Success

Green badge for positive states.

Confirmed

Error

Red badge for errors or warnings.

Cancelled

Pending

Amber badge for in-progress states.

Pending

Input

Form inputs follow a clean, consistent design with clear labels, helpful validation, and accessible focus states.

Text Input

Standard text input with label.

Team Name

Textarea

Multi-line input for longer text.

Description

Error State

Input with validation error.

Please enter a valid email address

Select

Dropdown select with options.

Team Size

Helper Text & Disabled State

tsx

// Helper text (no error)
<p class="text-xs text-slate-400">We'll never share your email</p>

// Disabled input
<input disabled class="... disabled:bg-slate-50 
  disabled:text-slate-400 disabled:cursor-not-allowed" />

Navigation

The main navigation bar provides access to all key sections. It uses a glassmorphism effect with backdrop blur for a premium feel.

Live preview of the Navigation component

TeamPilot

Sign InGet Started

Import & Usage

tsx

import { Navigation } from '@/app/components/ui';

// In your layout or page:
<Navigation />

// Props: none (links are internal)
// Links: How It Works, Planner, Marketplace, 
//        For Teams, For Experience Partners, Sign In, Get Started

Footer

The footer provides secondary navigation, legal links, and brand reinforcement. It uses a light slate background.

Live preview of the Footer component

Import & Usage

tsx

import { Footer } from '@/app/components/ui';

// In your layout or page:
<Footer />

// Props: none (links are internal)
// Sections: Brand, Quick Links, Company, Legal

Spacing & Layout

Consistent spacing creates a calm, premium feel. Use these tokens for all margin and padding decisions.

4xs

2px

3xs

4px

2xs

8px

12px

16px

24px

32px

48px

2xl

64px

3xl

96px

Layout Max Width

tsx

// Page content wrapper
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

// Standard section padding
py-16 md:py-24

// Card padding
p-6 (standard) / p-10 (featured cards)

Usage Guidelines

Best practices for using the TeamPilot Design System consistently across all pages.

Do

Use Teal for primary actions and interactive elements
Keep generous whitespace between sections
Use Gold/Amber sparingly for emphasis and highlights
Maintain consistent card padding and border radii
Use glassmorphism for sticky headers and overlays

Don't

Use dark backgrounds for main content areas
Overuse Gold — it should be accent-only
Mix different border radii within the same component
Place developer diagnostics or raw data in the UI
Skip loading, empty, error, or success states

Accessibility Checklist

All interactive elements are keyboard-focusable

Focus rings visible (ring-2, ring-offset-2)

Color contrast meets WCAG AA standards

Form inputs have associated labels

Images have alt text

Loading states announced to screen readers

Touch targets at least 44x44px on mobile

Semantic HTML (nav, main, section, footer)

File Reference

The complete shared component library and where to find each file.

Component	File Path	Exports
Button	`src/app/components/ui/Button.tsx`	Button (default)
Card	`src/app/components/ui/Card.tsx`	Card, CardHeader, CardBody, CardFooter
Badge	`src/app/components/ui/Badge.tsx`	Badge (default)
Input	`src/app/components/ui/Input.tsx`	Input (default)
Navigation	`src/app/components/ui/Navigation.tsx`	Navigation (default)
Footer	`src/app/components/ui/Footer.tsx`	Footer (default)

Barrel Export

tsx

// src/app/components/ui/index.ts — barrel export
export { default as Button } from './Button';
export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
export { default as Badge } from './Badge';
export { default as Input } from './Input';
export { default as Navigation } from './Navigation';
export { default as Footer } from './Footer';