Bridgepoint Design System

Colors

Bridgepoint uses a dark navy base with vibrant yellow-green accents. The marketing site is primarily dark; the app uses light surfaces.

Brand Colors

Dark Navy

#0f2736

Primary brand / backgrounds

Yellow

#DDDF4C

CTAs, accents, pricing

Green

#3BB98B

Success, badges, highlights

Yellow Dark

#c5c73e

Gradient end, hover

Green Dark

#2da077

Gradient end, hover

Dark Navy Light

#1a3a4f

Gradient end

Background Colors

Dark Alt

#0a1c28

Card Dark

#1a2332

Gray 100

#f8f9fa

Surface Light

#f1f5f9

White

#ffffff

Gradient Dark

135deg #0f2736 → #1a3a4f

Text Colors

Text Primary

#1e293b

Text Secondary

#383838

Text Muted

#64748b

Gray 500

#6b7280

Disabled

#9ca3af

Semantic Colors

Success

#22c55e

Warning

#f97316

Error

#ef4155

Info

#2563eb

Gradients

Green Gradient

135deg green

Yellow Gradient

135deg yellow

Light Green Tint

135deg light

Light Surface

135deg gray

Typography

Poppins for headings and display text; Inter for body and UI; JetBrains Mono for code.

Hero Title

Poppins 700 48px line-height: 1.1 letter-spacing: -0.02em

Section Title

Poppins 700 42px line-height: 1.2

Section Title Small

Poppins 700 35px line-height: 1.2

Card Title / H4

Poppins 700 1.3rem

Body Large - Used for hero descriptions and lead paragraphs. The quick brown fox jumps over the lazy dog.

Inter 400 1.1rem line-height: 1.8

Body - Standard paragraph text used across the site. Bridgepoint provides a unified API for messaging, email, and calendar integrations.

Inter 400 0.95rem line-height: 1.6

Body Small - Navigation links, mega menu items, table content

Inter 500 0.875rem

LABEL / BADGE TEXT

Inter 600 0.75rem uppercase letter-spacing: 1px

const response = await Bridgepoint.messages.send();

JetBrains Mono 400 0.85rem

$0.03

Poppins 700 52px / 26px currency Pricing display

Spacing & Layout

4px base unit. Container max-width 1400px with 40px paystreamtal padding.

Spacing Scale

4px

8px

10px

12px

16px

20px

24px

28px

32px

40px

48px

60px

80px

Layout Tokens

Header Height	72px
Container Max Width	1400px
Content Max Width	1200px
Narrow Content	1100px
Container Padding	0 40px
Section Padding	80px 0
Mega Menu Gap	32px
Bento Grid Gap	20px

Borders & Shadows

Generous border-radius (10-20px for components, 8px for buttons/inputs) with layered shadow depth.

Border Radius Scale

4px

6px

8px

10px

12px

16px

2XL

20px

3XL

30px

Pill

Box Shadows

shadow-sm

Cards, inputs

shadow-md

Elevated elements

shadow-lg

Modals, dropdowns

shadow-xl

Mega menu

Border Colors

Light Border

#e5e7eb

Lighter Border

#f1f5f9

Dark Border

rgba(255,255,255,0.08)

Buttons

Yellow primary CTA, dark navy secondary, outline variant for dark backgrounds. 10px border-radius, 14px 28px padding.

Light Background

Dark Background (Hero / Sections)

Button Specs

Primary	bg: #DDDF4C, color: #0f2736, radius: 10px, padding: 14px 28px
Secondary	bg: #0f2736, color: #fff, radius: 10px, padding: 14px 28px
Outline	bg: transparent, border: 1.5px solid #DDDF4C, color: #DDDF4C, radius: 8px
Hero Primary	bg: #DDDF4C, color: #0f2736, radius: 8px, padding: 13px 32px, weight: 700
Ghost/Green	bg: transparent, color: #3BB98B, hover-bg: rgba(59,185,139,0.1)
Transition	all 0.3s ease; hover: translateY(-2px)

Badges & Tags

Pill-shaped badges with tinted backgrounds and subtle borders. Used for section labels and feature tags.

Badge Variants

Features New API Unified API Developer-First

Badges on Dark

API Platform Live

Endpoint Tags (API Methods)

GET POST PUT DELETE PATCH

Inputs & Forms

Clean inputs with 8px radius, green focus rings, and subtle borders.

Text Inputs

Default

Focused (click to see)

Error State

Select

Toggle Switch

Off

Cards

Three card styles: light (white bg, gray border), dark (translucent), and elevated dark (green-tinted border with heavy shadow).

Light Card

Used on light backgrounds for feature sections, bento grid items, and content areas. White background with #e5e7eb border.

radius: 20px, padding: 28px, border: 1px solid #e5e7eb

Dark Card

Used on dark sections. Translucent white bg with subtle white border.

bg: rgba(255,255,255,0.03), border: rgba(255,255,255,0.08)

Elevated Dark Card

Used for hero floating elements. Green-tinted border with heavy shadow and glow.

Navigation

Fixed header with backdrop blur, 72px height. Links are 0.95rem/500 weight with 8px radius hover states.

Bridgepoint

APIs Solutions Pricing Docs Blog

Header Specs

Height	72px
Backdrop Filter	blur(20px)
Border Bottom	1px solid rgba(255,255,255,0.06)
Max Width	1400px
Nav Link	0.95rem, 500 weight, 10px 16px padding, 8px radius
Active Link	bg: rgba(59,185,139,0.15), color: #3BB98B

Mega Menu

Full-width dropdown with white background, 4-column grid for APIs, 3-column for solutions. 0.3s cubic-bezier transition.

Messaging API

in LinkedIn

W WhatsApp

T Telegram

f Messenger

Email API

G Gmail

O Outlook

Calendar API

G Google Calendar

O Outlook Calendar

Mega Menu Specs

Background	#ffffff
Border Radius	0 0 20px 20px
Shadow	0 25px 50px rgba(0,0,0,0.12)
Inner Padding	40px
Grid	4 columns, 32px gap
Section Title Border	2px solid #DDDF4C (bottom)
Link Icon Size	32px x 32px, 6px radius
Transition	all 0.3s cubic-bezier(0.4, 0, 0.2, 1)

Code Blocks

Dark code editor style with traffic-light dots header. JetBrains Mono font with syntax highlighting.

index.js

import { BridgepointClient } from 'Bridgepoint-node-sdk'; const client = new BridgepointClient({ apiKey: 'sk_live_...', baseUrl: 'https://api.' }); // Send a message via any provider const message = await client.messages.send({ provider: 'linkedin', to: 'user_id', text: 'Hello from Bridgepoint!' });

Code Block Specs

Body Background	#1a1f2e
Header Background	#0b0b0b
Font	JetBrains Mono, 0.85rem
Border Radius	12px
Keyword	#c678dd
String	#98c379
Function	#61afef
Comment	#5c6370
Dot Colors	#ff5f57 / #ffbd2e / #28ca42

Alerts & Status

Tinted background alerts with left-border accent for info boxes.

Account connected successfully

API rate limit approaching

Authentication failed

New API version available

Info Box (Pricing style)

Usage-based pricing starts at $0.03 per connected account per day.

API Endpoint Tags

Color-coded HTTP method badges used in API documentation tables.

GET /api/v1/messages POST /api/v1/messages PUT /api/v1/accounts PATCH /api/v1/users DELETE /api/v1/webhooks

Bento Grid

12-column grid system with 20px gap. Cards span 4, 6, or 8 columns for varied layouts.

span 8 (Large)

span 4 (Medium)

span 6 (Wide)

span 4

Pricing

Dark pricing cards with yellow price amounts and translucent borders.

Messaging

$0.03

per account / day

$0.01

per account / day

App / Portal

The Bridgepoint dashboard uses a dark navy sidebar with light content area. Same brand colors on white surfaces.

App Layout Structure

Bridgepoint

Dashboard

Accounts

API Keys

Webhooks

Logs

Settings

Dashboard

Connected

Messages

1,248

API Calls

12.4K

App Layout Specs

Sidebar Width	260px
Sidebar Background	#0f2736
Active Link BG	rgba(59,185,139,0.15)
Active Link Color	#3BB98B (green)
Content Background	#f8f9fa
Card Background	#ffffff
Card Radius	12px
Card Border	1px solid #e5e7eb

Tables

Data tables with dark navy header and light body. Used for API endpoints, webhooks, and logs.

Provider	Status	Messages	Last Sync
LinkedIn	Active	342	2 min ago
WhatsApp	Active	128	5 min ago
Gmail	Syncing	891	Just now
Telegram	Error	56	1 hour ago

App Components

Dashboard-specific components using the light theme with green/yellow accents.

App Inputs

Filter

Focus Ring

Inputs receive a green focus ring on focus: 0 0 0 3px rgba(59,185,139,0.1) with border changing to #3BB98B.

CSS Custom Properties

Ready-to-use CSS variables extracted from the Bridgepoint website.

:root { /* Brand */ --up-dark: #0f2736; --up-yellow: #DDDF4C; --up-green: #3BB98B; --up-white: #ffffff; /* Grays */ --up-gray-100: #f8f9fa; --up-gray-200: #e5e7eb; --up-gray-500: #6b7280; --up-gray-700: #374151; /* Text */ --up-text: #1e293b; --up-text-muted: #64748b; /* Gradients */ --up-gradient-dark: linear-gradient(135deg, #0f2736, #1a3a4f); --up-gradient-green: linear-gradient(135deg, #3bb98b, #2da077); --up-gradient-yellow: linear-gradient(135deg, #dddf4c, #c5c73e); /* Spacing */ --up-header-height: 72px; --up-container-max: 1400px; --up-content-max: 1200px; /* Border Radius */ --up-radius-sm: 8px; --up-radius-md: 10px; --up-radius-lg: 16px; --up-radius-xl: 20px; --up-radius-pill: 30px; /* Shadows */ --up-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --up-shadow-md: 0 4px 12px rgba(0,0,0,0.25); --up-shadow-lg: 0 20px 60px rgba(0,0,0,0.2); --up-shadow-xl: 0 25px 50px rgba(0,0,0,0.12); /* Transitions */ --up-transition-fast: all 0.2s ease; --up-transition-default: all 0.3s ease; --up-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

Motion & Transitions

Consistent motion system with ease and cubic-bezier curves. Button hover lifts with translateY(-2px).

Transition Values

Fast (links, hover)	all 0.2s ease
Default (buttons, cards)	all 0.3s ease
Smooth (mega menu, panels)	all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
Slow (sections)	all 0.5s ease-in-out
Bounce	0.5s cubic-bezier(0.77, 0, 0.175, 1)
Backdrop Filter	backdrop-filter 1s (delayed 1s)
Button Hover	translateY(-2px) + shadow
Card Hover	translateY(-4px) + shadow expand
Badge Pulse	2s ease-in-out infinite (dot scale)
Green Glow Pulse	2s box-shadow pulse rgba(59,185,139)
API Slide	0.4s cubic-bezier(0.4, 0, 0.2, 1) translateY(8px)
Mega Menu Enter	opacity + translateY(-10px to 0) 0.3s cubic-bezier

Interactive Demo

Hover over these elements to see the transitions in action:

Hover Card (lift + shadow)

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-hero-title font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-hero-title focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.