Skip to main content

BRAND_GUIDELINES

title: "B" category: "caching"​

BizRadar Brand & Color Guidelines

Professional color schemes and brand guidelines for the BizRadar platform.

Logo Overview​

Logo Variants​

Available Formats:

  • bizradar-logo.svg - Light background version (primary)
  • bizradar-logo-dark.svg - Dark background version
  • bizradar-icon.svg - Icon only (for favicons, app icons)
  • bizradar-logo-mono.svg - Monochrome version (uses currentColor)

Logo Specifications​

Typography:

  • Font Family: Arial, sans-serif
  • Font Weight: 700 (Bold)
  • Font Size: 36px
  • Letter Spacing: -1px
  • Text Color (Light): #1E293B (Biz) + #3B82F6 (Radar)
  • Text Color (Dark): #F8FAFC (Biz) + #60A5FA (Radar)

Icon Element:

  • Radar ping circles with sweep line
  • Conveys: scanning, detection, business intelligence
  • Colors match text accent color

Typography Recommendations​

For Web/Digital:

/* System Font Stack (Recommended) */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;

/* Or stick with Arial */
font-family: Arial, Helvetica, sans-serif;

Suggested Web Font Alternatives:

  • Inter - Modern, excellent for SaaS/tech products
  • Poppins - Geometric, friendly yet professional
  • Work Sans - Clean, corporate-friendly

Color Palettes​

Primary Palettes​

Classic, trustworthy palette perfect for dashboards and data displays.

Color NameHex CodeUsage
Darkest#0f172aDark backgrounds, headings
Dark#1e293bPrimary text, card backgrounds (dark mode)
Primary Blue#3b82f6Logo accent, primary actions, links
Light Blue#60a5faHover states, accents (dark mode)
Lightest#f8fafcPage backgrounds, light text (dark mode)

2. Ocean Depths​

Deep blues with teal accents for a sophisticated, tech-forward look.

Color NameHex CodeUsage
Deep Ocean#0c4a6eHeaders, strong emphasis
Ocean Blue#0369a1Secondary backgrounds
Primary Blue#3b82f6Primary actions
Cyan Accent#06b6d4Highlights, interactive elements
Ice Blue#ecfeffSubtle backgrounds

3. Sky & Slate​

Balanced neutrals with bright blue accent - clean and modern.

Color NameHex CodeUsage
Slate Dark#334155Text, borders
Slate#64748bSecondary text, icons
Primary Blue#3b82f6Primary actions
Slate Light#cbd5e1Borders, dividers
Sky Light#f1f5f9Backgrounds, cards

Accent & Data Visualization​

4. Business Intelligence (Multi-Color)​

For charts, graphs, and data visualization.

Color NameHex CodePurpose
Primary Blue#3b82f6Main data series
Violet#8b5cf6Secondary data series
Cyan#06b6d4Tertiary data series
Emerald#10b981Positive metrics
Amber#f59e0bWarning/attention metrics

Usage: Rotate through these colors for multi-series charts. Ensure sufficient contrast between adjacent series.

5. Status Indicators (Semantic Colors)​

StatusHex CodeUsage
Success#10b981Completed, approved, positive metrics
Info#3b82f6Informational messages, neutral states
Warning#f59e0bAttention needed, pending items
Error#ef4444Failed, errors, negative metrics
Neutral#64748bInactive, disabled, neutral

6. Midnight Tech (Dark Mode Optimized)​

Color NameHex CodeUsage
Deep Black#0a0e1aPage background (dark mode)
Dark Slate#1e293bCard backgrounds (dark mode)
Sky Blue#60a5faPrimary actions (dark mode)
Cyan Bright#22d3eeAccents, highlights
Ice White#e0f2fePrimary text (dark mode)

Alternative Themes​

7. Corporate Trust​

Navy-based palette for traditional business audiences.

Color NameHex Code
Navy Dark#1e3a8a
Navy#2563eb
Primary Blue#3b82f6
Sky Light#93c5fd
Ice#eff6ff

8. Fresh Mint​

Blue-green combo for a fresh, approachable feel.

Color NameHex Code
Forest#065f46
Emerald#059669
Primary Blue#3b82f6
Mint#6ee7b7
Mint Ice#f0fdf4

9. Premium Indigo​

Rich indigo tones for an upscale, professional appearance.

Color NameHex Code
Indigo Dark#312e81
Indigo#4f46e5
Primary Blue#3b82f6
Indigo Light#a5b4fc
Indigo Ice#eef2ff

Usage Guidelines​

Color Applications​

Primary Actions​

  • Color: #3b82f6
  • Usage: Buttons, links, key CTAs, active states
  • Hover: #2563eb (slightly darker)
  • Pressed: #1d4ed8 (darker still)

Text Colors​

Light Mode:

  • Headings: #0f172a
  • Body Text: #1e293b
  • Secondary Text: #64748b
  • Disabled: #94a3b8

Dark Mode:

  • Headings: #f8fafc
  • Body Text: #e2e8f0
  • Secondary Text: #cbd5e1
  • Disabled: #64748b

Backgrounds​

Light Mode:

  • Page: #f8fafc or #ffffff
  • Cards: #ffffff
  • Hover: #f1f5f9
  • Selected: #e0f2fe

Dark Mode:

  • Page: #0f172a
  • Cards: #1e293b
  • Hover: #334155
  • Selected: #1e3a8a

Borders & Dividers​

Light Mode:

  • Default: #e2e8f0
  • Strong: #cbd5e1
  • Focus: #3b82f6

Dark Mode:

  • Default: #334155
  • Strong: #475569
  • Focus: #60a5fa

State Colors​

StateColorUse Case
Success#10b981Successful operations, completed tasks, positive trends
Info#3b82f6Informational messages, tips, neutral notifications
Warning#f59e0bWarnings, items requiring attention, pending states
Error#ef4444Errors, failed operations, critical alerts, negative trends
Neutral#64748bInactive states, disabled elements, placeholders

Accessibility​

Contrast Ratios​

All color combinations meet WCAG AA standards (4.5:1 minimum for normal text, 3:1 for large text):

Passing Combinations:

  • #0f172a on #ffffff - 18.76:1 ✓ AAA
  • #1e293b on #ffffff - 14.92:1 ✓ AAA
  • #3b82f6 on #ffffff - 3.36:1 ✓ AA Large Text
  • #64748b on #ffffff - 4.69:1 ✓ AA
  • #f8fafc on #1e293b - 14.51:1 ✓ AAA
  • #60a5fa on #1e293b - 5.82:1 ✓ AA

Important Notes:

  • Use white (#ffffff) or very light text on colored button backgrounds
  • Always test custom color combinations before implementation
  • For data visualizations, ensure adjacent colors have sufficient contrast
  • Consider colorblind-friendly alternatives for critical information

Colorblind Considerations​

When using colors to convey information:

  • Don't rely on color alone (add icons, labels, or patterns)
  • Use high contrast between adjacent colors
  • Test with colorblind simulation tools
  • The blue/amber combination in status indicators works well for most types of colorblindness

Implementation Examples​

:root {
  /* Primary Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #60a5fa;
  
  /* Neutrals - Light Mode */
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-border: #e2e8f0;
  
  /* Status Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
}

/* Dark Mode Override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #60a5fa;
    --color-text: #e2e8f0;
    --color-text-secondary: #cbd5e1;
    --color-bg: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-border: #334155;
  }
}

Tailwind CSS Configuration​

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#3b82f6',
          dark: '#2563eb',
          light: '#60a5fa',
        },
        brand: {
          darkest: '#0f172a',
          dark: '#1e293b',
          blue: '#3b82f6',
          light: '#60a5fa',
          lightest: '#f8fafc',
        },
      },
    },
  },
}

SCSS/Sass Variables​

// _variables.scss

// Primary Brand Colors
$color-brand-darkest: #0f172a;
$color-brand-dark: #1e293b;
$color-brand-blue: #3b82f6;
$color-brand-light: #60a5fa;
$color-brand-lightest: #f8fafc;

// Semantic Colors
$color-success: #10b981;
$color-warning: #f59e0b;
$color-error: #ef4444;
$color-info: #3b82f6;

// Neutrals
$color-slate-900: #0f172a;
$color-slate-800: #1e293b;
$color-slate-700: #334155;
$color-slate-600: #475569;
$color-slate-500: #64748b;
$color-slate-400: #94a3b8;
$color-slate-300: #cbd5e1;
$color-slate-200: #e2e8f0;
$color-slate-100: #f1f5f9;
$color-slate-50: #f8fafc;

Design Best Practices​

Do's ✓​

  • Use the primary blue (#3b82f6) consistently for all primary actions
  • Maintain sufficient contrast between text and backgrounds
  • Use semantic colors (success, warning, error) consistently across the app
  • Test both light and dark themes if implementing dark mode
  • Use neutral grays for most UI elements to let data stand out
  • Provide visual feedback for interactive elements (hover, active, focus states)

Don'ts ✗​

  • Don't use too many colors in a single view - stick to 3-4 main colors
  • Don't rely solely on color to convey information (add text/icons)
  • Don't use low contrast combinations - always test accessibility
  • Don't use pure black (#000000) for text - use slate colors instead
  • Don't make everything blue - reserve primary color for important actions
  • Don't ignore hover/focus states - always provide visual feedback

File Assets​

All logo files are available in SVG format for crisp rendering at any size:

  • bizradar-logo.svg - Primary logo for light backgrounds
  • bizradar-logo-dark.svg - Logo for dark backgrounds
  • bizradar-icon.svg - Icon only (50x50px viewBox)
  • bizradar-logo-mono.svg - Single color version using currentColor

Logo Usage Rules​

Minimum Size:

  • Full logo: 120px width minimum
  • Icon only: 24px minimum

Clear Space:

  • Maintain padding equal to the height of the "B" in "Biz" on all sides

Backgrounds:

  • Light version: Use on white, light gray, or light colored backgrounds
  • Dark version: Use on dark gray, navy, or dark colored backgrounds
  • Ensure sufficient contrast (test with WCAG tools)

Don'ts:

  • Don't stretch or distort the logo
  • Don't change the colors (except in monochrome version)
  • Don't add effects (shadows, gradients, outlines)
  • Don't rotate or flip the logo
  • Don't place on busy backgrounds where it loses legibility

Version History​

  • v1.0 - Initial brand guidelines and color palettes
  • Created: 2025-10-29

Questions or Feedback?​

For questions about brand usage or to request additional assets, please contact the design team.