Brand Colors
Complete reference of brand colors used throughout the Silverado Policy Accelerator website. These colors are defined in the Tailwind CSS configuration and used consistently across all components.
Color Palette
Color Specifications
brand-1
#306184
Primary brand color - Dark blue
Main headings, primary buttons, key UI elements
brand-2
#739663
Secondary brand color - Green
Secondary elements, accents, nature/environment themes
brand-3
#56959E
Tertiary brand color - Teal
Supporting elements, links, subtle accents
brand-4
#C4E7E7
Light accent color - Light teal
Backgrounds, hover states, subtle highlights
brand-5
#A3C1BF
Medium accent color - Medium teal
Borders, secondary backgrounds, muted elements
brand-6
#FCAF1B
Highlight color - Orange/Yellow
Call-to-action buttons, highlights, warnings, accents
brand-7
#e8edf1
Light neutral - Light gray-blue
Light backgrounds, cards, subtle dividers
brand-8
#edf8f8
Very light accent - Very light teal
Page backgrounds, subtle highlights, light sections
brand-9
#FAB119
Alternative highlight - Golden yellow
Alternative highlights, special accents, gold elements
Usage Examples
Usage Examples
Primary Button
Secondary Button
Highlight Button
Light Background Card
This is a card with light background
Very Light Background
This uses the very light background color
Typography System
Font Family
Primary Font
'Sukhumvit', Arial, Helvetica, sans-serif
Custom font family defined in global.css and page-layout.js
Font Weights Available
- 300 - SukhumvitSet-Thin.ttf
- 400 - SukhumvitSet-Text.ttf (default)
- 700 - SukhumvitSet-Bold.ttf
Base Font Settings
Global Settings
- Font Size: 1rem (16px)
- Font Weight: 400 (normal)
- Font Family: 'Sukhumvit', sans-serif
Line Height
Components typically use leading-relaxed for body text
Custom Typography Scale (Tailwind)
Headings
- ts-h1: 2.488rem (39.8px)
- ts-h2: 2.074rem (33.2px)
- ts-h3: 1.728rem (27.6px)
- ts-h4: 1.44rem (23.0px)
- ts-h5: 1.2rem (19.2px)
Body Text
- ts-body: 1rem (16px)
- ts-sub-detail: 0.833rem (13.3px)
- ts-caption: 0.694rem (11.1px)
- ts-citation: 0.579rem (9.3px)
Standard Tailwind
- text-xs: 0.75rem (12px)
- text-sm: 0.875rem (14px)
- text-base: 1rem (16px)
- text-lg: 1.125rem (18px)
- text-xl: 1.25rem (20px)
- text-2xl: 1.5rem (24px)
Common Patterns
- Headings: ts-h4 → ts-h2 → ts-h1
- Body: text-base → text-lg → text-xl
- Small text: text-sm → text-base → text-lg
Tailwind CSS Classes
Use these classes in your components to apply brand colors:
Background Colors
- bg-brand-1
- bg-brand-2
- bg-brand-3
- bg-brand-4
- bg-brand-5
- bg-brand-6
- bg-brand-7
- bg-brand-8
- bg-brand-9
Text Colors
- text-brand-1
- text-brand-2
- text-brand-3
- text-brand-4
- text-brand-5
- text-brand-6
- text-brand-7
- text-brand-8
- text-brand-9