BlueBridge

Brand Guidelines

v1.0 — March 2026

Typography

A three-font system balances personality with readability. Loaded via next/font/google for zero layout shift.

Headings
AaSpace Grotesk
Regular 400Medium 500SemiBold 600Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Body & UI
AaRoboto
Regular 400Medium 500Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Labels & Subheadings
AaSpace Mono
Regular 400Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*

Type Scale

h1The quick brown fox
h2The quick brown fox
h3The quick brown fox
bodyThe quick brown fox jumps over the lazy dog. Body text uses Roboto at 16px with a 1.6 line height for optimal readability.
smallSupporting text, captions, and labels at 14px.

Color Palette

A focused palette built on cool blues and neutral slates.

Brand Accents

#0284C7
Primary Blue--accent-primary
#6D28D9
Secondary Purple--accent-secondary
#0369A1
Hover Blue--accent-hover

Backgrounds

#F8FAFC
Page Background--bg-primary
#FFFFFF
Card / Panel--bg-secondary
rgba(255,255,255,0.8)
Glass Panel--bg-card

Typography

#0F172A
Primary Text--text-primary
#475569
Secondary Text--text-secondary
#94A3B8
Muted / Placeholder--text-muted

Borders & Surfaces

rgba(0,0,0,0.08)
Default Border--border-color
rgba(0,0,0,0.05)
Glass Border--glass-border
#0a1628
Login Background—

Gradients

The brand gradient is applied at 135° from primary blue to secondary purple.

Brand CTA Gradientlinear-gradient(135deg, #0284C7, #6D28D9)Primary buttons, sign-in CTA
Login Brand Panellinear-gradient(135deg, #0c2d5a, #0f3d7a, #1a5ba8)Login page left panel
Login Page Backgroundlinear-gradient(135deg, #0a1628, #0f1d32, #131b2e)Dark backdrop behind login card

Border Radius

Intentionally tight radii for a clean, professional aesthetic. Never exceed --radius-xl.

--radius-sm1px
--radius-md2px
--radius-lg4px
--radius-xl6px

Shadows & Elevation

Three tiers of elevation plus a branded glow for focus states.

shadow-sm
shadow-md
shadow-glow
CTA hover

Button System

Three button variants, each with clear usage guidelines.

Primary

Main CTAs and default buttons

.btn .btn-primary

Outline

Only when explicitly requested

.btn .btn-outline

Small

Compact contexts: table rows, inline actions

.btn .btn-sm

Component Libraries

Three layers of UI tooling, each with a clear purpose.

🎨

Tailwind CSS v4

Foundation layer. Utility-first styling for spacing, layout, responsive breakpoints, and the @theme config.

  • CSS-based configuration via globals.css
  • Custom properties bridge to design tokens
  • Responsive prefixes: sm:, md:, lg:
🧩

shadcn/ui

Functional components. Copy-paste, own-your-code approach for accessible, high-quality UI elements.

  • Data Tables, Forms, Dialogs, Sheets
  • Charts, Tabs, Cards, Sidebars
  • Skeleton loaders, Toasts, Breadcrumbs
  • Blocks for dashboard layouts
ui.shadcn.com →
✨

Magic UI

Visual polish. High-impact animations for marketing pages and dashboard accents.

  • Hero text animations (Blur Fade, Gradual Spacing)
  • Animated backgrounds (Retro Grid, Dot Pattern)
  • Number Tickers for KPI metrics
  • Shimmer buttons for premium CTAs

Spacing & Layout

Consistent spacing creates visual rhythm across every page.

TokenValueUsage
--max-width1280pxContent container maximum width
Container padding0 2rem (desktop) / 0 1.25rem (mobile)Horizontal gutters
Section padding5rem 0Vertical rhythm between sections
--transition-speed0.3sAll interactive transitions

Container Demo

max-width: 1280px

Data Tables

Optimal contrast and readability for data-heavy views. Must use zebra-striping against a white card background.

Table Styling Demo

Column OneColumn TwoStatus
Row Item 1Sample data valueActive
Row Item 2Sample data valueActive
Row Item 3Sample data valueActive

Do's & Don'ts

✅ Do

  • Use CSS custom properties from :root for all colors, radii, and shadows
  • Keep headings in Space Grotesk, body in Roboto
  • Use the brand gradient for primary CTAs
  • Make all form inputs pure white (bg-white) on light mode
  • Lean on shadcn for anything interactive in the portal
  • Use Magic UI sparingly for visual polish
  • Maintain tight border radii (max 6px)

❌ Don't

  • Invent new colors — stick to the palette
  • Use border-radius values above 6px
  • Mix Magic UI into form-heavy flows
  • Override shadcn components with inline styles
  • Hardcode font-family — use CSS variables
  • Change the bridge icon color — it is always brand blue (#0284C7)

Blue Bridge AI — Brand Guidelines v1.0 · Internal Reference Document