SalesboxAI

    Brand Guidelines

    Official SalesboxAI brand assets and guidelines for consistent brand representation across all marketing materials.

    Logo Usage

    Primary Logo

    SalesboxAI Logo

    Use the primary logo on dark backgrounds. Ensure adequate spacing around the logo (minimum clear space equal to the height of the 'S' in Salesbox).

    Logo on Light Backgrounds

    SalesboxAI Logo on Light

    When placing on light backgrounds, ensure sufficient contrast. The logo can be used as-is on white or light gray backgrounds.

    Logo Guidelines

    ✓ Do

    • Maintain aspect ratio
    • Use approved color versions
    • Ensure adequate clear space
    • Use on contrasting backgrounds

    ✗ Don't

    • Stretch or distort the logo
    • Change the logo colors
    • Add effects or shadows
    • Place on busy backgrounds

    Minimum Size

    • Digital: 120px width
    • Print: 1 inch width
    • Favicon: 32x32px

    Color Palette

    Primary Colors

    Primary Magenta

    Main brand color, CTAs, key highlights

    HEX:
    RGB:
    HSL:

    Primary Glow

    Hover states, subtle accents

    HEX:
    RGB:
    HSL:

    Secondary Colors

    Deep Purple

    Secondary elements, backgrounds

    HEX:
    RGB:
    HSL:

    Accent Purple

    Accent elements, icons

    HEX:
    RGB:
    HSL:

    Background Colors

    Background Dark

    Main page backgrounds

    HEX:
    RGB:
    HSL:

    Card Background

    Cards, elevated surfaces

    HEX:
    RGB:
    HSL:

    Muted Background

    Subtle backgrounds, inputs

    HEX:
    RGB:
    HSL:

    Text Colors

    Foreground White

    Primary text on dark backgrounds

    HEX:
    RGB:
    HSL:

    Muted Foreground

    Secondary text, descriptions

    HEX:
    RGB:
    HSL:

    Utility Colors

    Border

    Borders, dividers

    HEX:
    RGB:
    HSL:

    Destructive

    Error states, warnings

    HEX:
    RGB:
    HSL:

    Gradients

    Hero Gradient

    Hero sections, page headers

    Card Gradient

    Card backgrounds, elevated elements

    Accent Gradient

    CTAs, buttons, highlights

    Glow Gradient

    Glow effects, decorative elements

    Typography

    Primary Font

    Display

    Outfit

    Headlines, display text, navigation

    Available Weights:

    300 Light400 Regular500 Medium600 SemiBold700 Bold800 ExtraBold

    Sample:

    The quick brown fox jumps over the lazy dog

    Secondary Font

    Body

    Inter

    Body text, paragraphs, UI elements

    Available Weights:

    300 Light400 Regular500 Medium600 SemiBold700 Bold800 ExtraBold

    Sample:

    The quick brown fox jumps over the lazy dog

    Typography Scale

    H1Headline One
    H2Headline Two
    H3Headline Three
    H4Headline Four
    BodyBody text for paragraphs and general content.
    SmallSmall text for captions and labels.