GOBEYOND Brand Guidelines

1. Introduction

Welcome to the GOBEYOND Brand Guidelines. This comprehensive document serves as the authoritative source for maintaining consistency and integrity across all brand communications, both digital and print.

Purpose of These Guidelines

These guidelines exist to:

• Ensure Consistency: Create a unified brand experience across all customer touchpoints
• Protect Brand Equity: Maintain the visual and verbal integrity of the GOBEYOND brand family
• Empower Creativity: Provide clear boundaries within which creative teams can innovate
• Streamline Production: Offer practical implementation guidance for developers, designers, and marketers

Brand Portfolio

This document covers three interconnected brands:

• GOBEYOND: The parent brand representing premium travel experiences
• Fresh Kosher Cruises: Specialized kosher cruise experiences
• Panama Yeshiva Week: Educational and cultural travel programs

2. Brand Essence

Mission & Vision

Mission: To create transformative travel experiences that connect people with destinations, cultures, and each other in meaningful ways.

Vision: To be the premier choice for travelers seeking authentic, curated experiences that go beyond the ordinary.

Brand Voice & Tone

Brand Voice Characteristics

Tone Variations by Context

Writing Guidelines

3. Logo Guidelines - GOBEYOND

Logo Usage

Logo Variations

Clear Space & Sizing

Minimum Clear Space

The logo must have adequate breathing room. Maintain a clear space equal to 25% of the logo's height on all sides. This space should be free of text, graphics, or other visual elements.

Minimum Size Requirements

Logo Misuse - What Not to Do

4. Logo Guidelines - Fresh Kosher Cruises

The Fresh Kosher Cruises logo features a multi-color design that reflects the vibrant and premium nature of kosher cruise experiences.

Logo Variations

Usage Guidelines

• Minimum Size: 120px width for digital, 1 inch for print
• Clear Space: Maintain clear space equal to the height of the letter "F" in "Fresh"
• Background Contrast: Ensure sufficient contrast between logo and background
• File Format: Use SVG for web and digital applications; request vector files for print

5. Logo Guidelines - Panama Yeshiva Week

Logo Variations

Usage Guidelines

• Minimum Width: 120px for digital applications to ensure text legibility
• Clear Space: Equal to the height of the letter "P" in "Panama"
• Typography: The logo includes custom lettering; never attempt to recreate or modify
• Aspect Ratio: Always maintain the 280:50 width-to-height ratio

6. Color Palette

Primary Colors

Primary colors form the foundation of the GOBEYOND brand identity and should be used prominently across all communications.

Secondary Colors

Secondary colors add vibrancy and help create visual hierarchy. Use them for accents, calls-to-action, and to differentiate content.

Neutral Colors

Neutral colors provide balance and ensure content readability. Use them for backgrounds, text, borders, and UI elements.

Color Usage Guidelines

Primary Color Usage

• Yankees Blue (#1E1D49): Use for headers, primary CTAs, logos, and dominant brand elements. Should occupy 60-70% of the color usage in most layouts.
• White (#FFFFFF): Essential for breathing room, text on dark backgrounds, and maintaining clean, modern aesthetics.

Secondary Color Usage

• Jazzberry Jam (#B50061): Ideal for primary action buttons, links, and emphasis. Use sparingly for maximum impact.
• Cool Black (#031C5E): Excellent for creating depth and visual hierarchy in headers or dark sections.
• Cardinal (#BF1630): Best for urgent messaging, important alerts, or time-sensitive promotions.
• Spanish Orange (#E45B01): Perfect for highlighting special offers, creating warmth, or drawing attention to specific features.

Color Combinations

Accessibility & Contrast

All color combinations must meet WCAG 2.1 Level AA standards for contrast ratios:

7. Typography

Typography is a crucial component of the GOBEYOND brand identity. Consistent use of our typefaces ensures recognition and readability across all communications.

Typeface System

Primary Typeface: Quicksand

Why Quicksand? Quicksand's rounded letterforms convey friendliness and approachability while maintaining professionalism. Its geometric structure ensures excellent legibility at all sizes.

Secondary Typeface: Open Sans

Why Open Sans? Open Sans offers exceptional readability for extended reading. Its neutral, humanist design complements Quicksand while being optimized for screen display.

Type Hierarchy

Typography in Action

Typography Best Practices

Web Typography Implementation

Include Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

CSS Typography Variables

:root {
    /* Font Families */
    --font-primary: 'Quicksand', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    /* Font Sizes */
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-h4: 20px;
    --font-size-body: 16px;
    --font-size-small: 14px;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
}

/* Heading Styles */
h1 {
    font-family: var(--font-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: #1E1D49;
}

/* Body Text */
body {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: #333333;
}

8. Layout & Spacing

Consistent spacing creates visual harmony and improves content readability. GOBEYOND uses an 8-point grid system for all spacing decisions.

8-Point Grid System

All spacing (margins, padding, element positioning) should use multiples of 8px:

Layout Principles

Container Widths

• Desktop Maximum: 1200px (centered)
• Content Maximum: 800px for reading-focused content
• Responsive Padding: 20px minimum on mobile, 40px on desktop

Grid Structure

• Desktop: 12-column grid with 24px gutters
• Tablet: 8-column grid with 20px gutters
• Mobile: 4-column grid with 16px gutters

Vertical Rhythm

Maintain consistent vertical spacing between elements:

• Between Paragraphs: 16px (1rem)
• Between Sections: 48px (3rem)
• Before Headings: 32px (2rem)
• After Headings: 16px (1rem)

Spacing CSS Variables

:root {
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
}

/* Example Usage */
.section {
    padding: var(--spacing-xl) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.card {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
}

9. UI Components

Buttons

Button Styles

Button Specifications

Button CSS

.btn {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #B50061;
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: #8c004c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(181, 0, 97, 0.3);
}

.btn-secondary {
    background-color: #1E1D49;
    color: #FFFFFF;
}

.btn-secondary:hover {
    background-color: #151339;
}

.btn-outline {
    background-color: transparent;
    color: #1E1D49;
    border: 2px solid #1E1D49;
}

.btn-outline:hover {
    background-color: #1E1D49;
    color: #FFFFFF;
}

Forms & Inputs

Input Field Specifications

• Height: 48px minimum (for touch targets)
• Padding: 12px 16px
• Border: 1px solid #CCCCCC
• Border Radius: 4px
• Focus State: 2px solid #1E1D49, no outline
• Font: Open Sans, 16px (prevents zoom on iOS)

Cards

Card Specifications

• Background: #FFFFFF
• Border: 1px solid #E0E0E0 or no border
• Border Radius: 8px
• Shadow: 0 2px 8px rgba(0,0,0,0.1)
• Padding: 24px
• Hover State: Subtle lift (translateY) and enhanced shadow

10. Implementation Guide

Web Implementation

Using GOBEYOND & Panama Logos on Websites

For single-color logos (GOBEYOND, Panama Yeshiva Week), use CSS background-image with filter classes:

<!-- HTML Structure -->
<div class="brand-logo gobeyond-logo logo-white"></div>
<div class="brand-logo panama-logo logo-primary"></div>

/* CSS Styles */
.brand-logo {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.gobeyond-logo {
    background-image: url('https://brand.gobeyond.pa/gobeyond.svg');
    width: 200px;
    height: 50.86px;
}

.panama-logo {
    background-image: url('https://brand.gobeyond.pa/panama-yeshiva-week.svg');
    width: 280px;
    height: 50px;
}

/* Color Filters */
.logo-primary {
    filter: none;
}

.logo-white {
    filter: brightness(0) invert(1);
}

Using Fresh Kosher Cruises Logo

For multi-color logos, use standard <img> tags:

<!-- Primary Multi-Color Logo -->
<img src="https://brand.gobeyond.pa/fresh-kosher-cruises.svg"
     alt="Fresh Kosher Cruises"
     style="height: 50px; width: auto;">

<!-- White Version for Dark Backgrounds -->
<img src="https://brand.gobeyond.pa/fresh-kosher-cruises-white.svg"
     alt="Fresh Kosher Cruises"
     style="height: 50px; width: auto;">

Complete CSS Framework

/* GOBEYOND Brand CSS Framework */
:root {
    /* Colors */
    --color-primary-blue: #1E1D49;
    --color-primary-white: #FFFFFF;
    --color-secondary-pink: #B50061;
    --color-secondary-cool-black: #031C5E;
    --color-secondary-cardinal: #BF1630;
    --color-secondary-orange: #E45B01;
    --color-neutral-black: #000000;
    --color-neutral-dark-gray: #333333;
    --color-neutral-medium-gray: #CCCCCC;
    --color-neutral-light-gray: #F4F4F4;

    /* Typography */
    --font-primary: 'Quicksand', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-body: 16px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;

    /* Layout */
    --container-max-width: 1200px;
    --content-max-width: 800px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-neutral-dark-gray);
    margin: 0;
    padding: 0;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-primary-blue);
    margin-top: 0;
}

h1 { font-size: var(--font-size-h1); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--font-size-h2); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--font-size-h3); font-weight: 500; line-height: 1.3; }

/* Buttons */
.btn {
    display: inline-block;
    font-family: var(--font-secondary);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-secondary-pink);
    color: var(--color-primary-white);
}

.btn-primary:hover {
    background-color: #8c004c;
    transform: translateY(-2px);
}

/* Cards */
.card {
    background: var(--color-primary-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Utilities */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }

Favicon Implementation

<!-- Place in HTML <head> -->
<link rel="icon" href="https://brand.gobeyond.pa/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://brand.gobeyond.pa/favicon.ico" type="image/x-icon">

11. Brand Applications

Email Signatures

Professional email signatures for all GOBEYOND brands. Click the "Copy HTML" button, paste into your email client, and replace placeholder text with your information.

GOBEYOND

<p style="margin: 0; font-family: 'Open Sans', Arial, sans-serif; color: #333; font-size: 14px; line-height: 1.6;">
Best Regards,<br>
<strong>Your Name</strong> | Your Title | GOBEYOND<br>
<a href="https://www.gobeyond.pa/contactus"><img src="https://brand.gobeyond.pa/gobeyond.svg" alt="GOBEYOND" width="150" style="display: block; margin-top: 8px;"></a>
</p>

Panama Yeshiva Week

<p style="margin: 0; font-family: 'Open Sans', Arial, sans-serif; color: #333; font-size: 14px; line-height: 1.6;">
Best Regards,<br>
<strong>Your Name</strong> | Your Title | Panama Yeshiva Week<br>
<a href="https://panamayeshivaweek.com"><img src="https://brand.gobeyond.pa/panama-yeshiva-week.svg" alt="Panama Yeshiva Week" width="200" style="display: block; margin-top: 8px;"></a>
</p>

Fresh Kosher Cruises

<p style="margin: 0; font-family: 'Open Sans', Arial, sans-serif; color: #333; font-size: 14px; line-height: 1.6;">
Best Regards,<br>
<strong>Your Name</strong> | Your Title | Fresh Kosher Cruises<br>
<a href="https://www.freshkoshercruises.com"><img src="https://brand.gobeyond.pa/fresh-kosher-cruises.svg" alt="Fresh Kosher Cruises" width="180" style="display: block; margin-top: 8px;"></a>
</p>

Social Media

Profile Image Guidelines

• Facebook/Instagram: Use square logo variant or symbol if available (180x180px minimum)
• Twitter: 400x400px, maintain clear space
• LinkedIn: 300x300px company logo

Cover Images

• Facebook: 820x312px
• Twitter: 1500x500px
• LinkedIn: 1128x191px

Print Materials

• Business Cards: Logo minimum 0.75" width
• Letterhead: Logo positioned top-left or top-center, 1.5"-2" width
• Brochures: Ensure proper color matching (use CMYK values provided)

Merchandise

For branded merchandise (t-shirts, bags, promotional items), request vector files from the brand team. Ensure minimum size requirements are met for embroidery or screen printing.