Salem Speakers

Brand Guide

A visual reference for colors, typography, and design tokens used throughout the Salem Speakers platform.

Logo

Primary logo usage on dark and light backgrounds.

Salem Speakers Logo White
Salem Speakers Logo

Color Palette

Design tokens defined in index.css and mapped in tailwind.config.js.

Navy

Primary brand color, navbar, CTAs, headings

Tailwindbg-navy
CSS Var--navy
HSL218 66% 13%
Hex (approx)#0F1F3D

Gold

Accent color, highlights, buttons, icons

Tailwindbg-gold
CSS Var--gold
HSL46 92% 52%
Hex (approx)#F0B429

Background

Page background

Tailwindbg-background
CSS Var--background
HSL0 0% 98%
Hex (approx)#FAFAFA

Foreground

Main text color

Tailwindbg-foreground
CSS Var--foreground
HSL218 66% 13%
Hex (approx)#0F1F3D

Card

Card/panel backgrounds

Tailwindbg-card
CSS Var--card
HSL0 0% 100%
Hex (approx)#FFFFFF

Primary

Primary buttons and interactive elements

Tailwindbg-primary
CSS Var--primary
HSL218 66% 13%
Hex (approx)#0F1F3D

Secondary

Secondary buttons, badges

Tailwindbg-secondary
CSS Var--secondary
HSL46 92% 52%
Hex (approx)#F0B429

Muted

Subtle backgrounds, disabled states

Tailwindbg-muted
CSS Var--muted
HSL220 14% 94%
Hex (approx)#EDEEF2

Muted Foreground

Subdued text, placeholders, captions

Tailwindbg-muted-foreground
CSS Var--muted-foreground
HSL220 10% 46%
Hex (approx)#6B7280

Border

Dividers, input borders, card outlines

Tailwindbg-border
CSS Var--border
HSL220 13% 88%
Hex (approx)#DADDE5

Destructive

Error states, delete actions, warnings

Tailwindbg-destructive
CSS Var--destructive
HSL0 84% 60%
Hex (approx)#EF4444

Motion Gradient

Animated gradient used for the hero, footer, and accent sections. These are raw hex values (not Tailwind tokens).

linear-gradient(135deg, #0a1628 0%, #0d2044 25%, #1a3a6b 50%, #0d2044 75%, #071525 100%)

Gradient Stop 1

#0a1628

Start / darkest navy

Gradient Stop 2

#0d2044

Deep navy blue (primary gradient color)

Gradient Stop 3

#1a3a6b

Mid navy blue (lightest highlight)

Gradient Stop 4

#071525

Near-black navy (end stop)

Typography

Two fonts are used: Poppins (headings) and Lato (body/UI). Both imported from Google Fonts in index.css.

H1 — Poppins Bold

Inspiring Voices.

font-poppins font-bold text-4xl

H2 — Poppins SemiBold

Meaningful Impact.

font-poppins font-semibold text-3xl

H3 — Poppins Thin

Trusted Connections.

font-poppins font-light text-xl

Body — Lato Regular

Browse our curated directory of professional speakers across every topic and industry.

font-lato text-base text-muted-foreground

Small / Caption — Lato

Filter by topic, location, availability, and budget to find the perfect speaker for your event.

font-lato text-sm text-muted-foreground

Label / Uppercase Track — Lato

Inspiring Voices. Meaningful Impact.

font-lato text-xs font-semibold uppercase tracking-wider text-gold

Buttons

Core button styles used throughout the app.

Badges & Labels

Used for tags, status indicators, and category chips.

FeaturedCategory TagNeutral PillMuted BadgeError