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. Each business's own official brand page is the source of truth for that brand; this site gathers them in one place and hosts the shared assets.

• GOBEYOND: The parent brand representing premium travel experiences. Official page: gobeyond.pa/brand (Brand & Design System, Version 2, July 2026)
• Fresh Kosher Cruises: Specialized kosher cruise experiences. Official page: freshkosher.cruises/brand (Brand Guidelines & Design System)
• Panama Yeshiva Week: Educational and cultural travel programs. It has no brand page of its own; its guidance lives here and uses the GOBEYOND colors and typefaces

What Changed in Version 2

The original brand standards defined the core identity. As the GOBEYOND site was built out, the palette evolved, and Version 2 codifies the system as it lives on the site today:

• Core brand colors are unchanged. Yankees Blue, Jazzberry Jam, and Spanish Orange match the original guide to the hex.
• Neutrals moved from pure gray to blue-tinted (e.g. #F5F8FF instead of #F4F4F4), so backgrounds and dividers harmonize with the navy. This is now the standard.
• A premium ink + surface tier was added for high-end hotel and booking surfaces (deep navy ink, cool off-white panels, no gold).
• Retired: Cool Black #031C5E, Cardinal #BF1630, and the earlier premium gold #C79A46. None matched the palette. The accent everywhere is Jazzberry Jam #B50061.

Core Principles

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

Fresh Kosher Cruises tone of voice: Professional, trustworthy, exciting, aspirational, informative, clear, customer-focused, and welcoming.

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. The primary SVG is preferred for light backgrounds; the white version is used on dark backgrounds such as the main navigation.

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
• Integrity: Do not distort, recolor, or alter the logo; maintain its aspect ratio
• File Format: Use the SVG version where possible for scalability; 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

Each brand has its own palette. GOBEYOND and Fresh Kosher Cruises both name their tokens --primary-color, --secondary-color and --tertiary-color, but the values differ per brand, so never copy a hex from one brand's site into the other's.

GOBEYOND · Core

Brand Colors

The three anchors of the identity plus white. Locked: do not substitute. These carry the brand across every page.

Retired Colors

These colors are retired and must not be used in new work. Replace them wherever they still appear.

Fresh Kosher Cruises

Fresh Kosher Cruises Colors

Fresh Kosher Cruises has its own palette, defined on its official brand page.

Panama Yeshiva Week

Panama Yeshiva Week Colors

Panama Yeshiva Week uses the GOBEYOND core colors. Its logo is a single-color mark in Yankees Blue. For neutrals, follow the GOBEYOND blue-tinted scale above, and the same rules apply: no gradients and no retired colors.

Color Usage Guidelines

GOBEYOND Core Color Usage

• Yankees Blue (#1E1D49): Use for headings, the navbar, primary surfaces, overlays, logos, and dominant brand elements. Should occupy 60-70% of the color usage in most layouts.
• White (#FFFFFF): Page and card backgrounds and reversed text. Essential for breathing room and maintaining clean, modern aesthetics.
• Jazzberry Jam (#B50061): Primary CTAs, links, highlights, and active states. It is the accent everywhere. Use sparingly for maximum impact.
• Spanish Orange (#E45B01): Button hover, energy accents, and warmth; also for highlighting special offers or drawing attention to specific features.

Rules That Apply Everywhere

• No gradients: Not in backgrounds, buttons, heroes, or overlays. Use a solid color or a photo.
• Heroes and banners: Use photography with a solid navy scrim for legibility, never a color blend.
• Tokens, not hex: Reference the CSS tokens so the palette stays centralized.
• Functional colors keep their meaning: Success green, error red and WhatsApp green are never decorative.

Color Combinations

Accessibility & Contrast

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

Measured Contrast of the Palettes

7. Typography

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

GOBEYOND Typeface System

Quicksand for headings (weights 300–700), Open Sans for body (400/600/700). On the GOBEYOND site both are self-hosted, and headings render capitalized site-wide via CSS. Panama Yeshiva Week uses the same two typefaces.

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

The GOBEYOND type scale:

Typography in Action

Fresh Kosher Cruises Typography

Typography Best Practices

Web Typography Implementation

Include Google Fonts (GOBEYOND, Panama Yeshiva Week)

<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">

Include Google Fonts (Fresh Kosher Cruises)

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

CSS Typography Variables (GOBEYOND)

: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: var(--primary-color);
}

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

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: about 800px for long-form, reading-focused content
• Sections: 120px vertical padding on desktop, alternating white / Light Blue (#F5F8FF) backgrounds
• 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)
• Section Rhythm: 120px vertical padding per section on desktop
• Major Breaks Within a Section: 48px (3rem)
• Before Headings: 32px (2rem)
• After Headings: 16px (1rem)

Fresh Kosher Cruises Responsive Breakpoints

The Fresh Kosher Cruises design system is mobile-first:

• Mobile (< 576px): Single column layouts, fixed bottom buttons
• Tablet (576px - 992px): Two-column card grids
• Desktop (> 992px): Full multi-column layouts, sticky booking summary widget

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

GOBEYOND primary buttons use Jazzberry Jam and transition to Spanish Orange on hover: pink → orange, never pink → navy. Hover uses a solid color, no gradient.

Button Styles

Button Specifications

All three share: Quicksand Bold (700), padding 13px 30px, border radius 30px, no border.

Button CSS

.btn {
    display: inline-block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 30px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    transition: background .25s ease, transform .2s ease;
}

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

/* pink → orange, solid color, no gradient */
.btn-primary:hover {
    background: var(--tertiary-color);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn-premium {
    background: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--divider-color);
}

Forms & Inputs

Input Field Specifications

• Height: 48px minimum (for touch targets)
• Padding: 12px 16px
• Border: 1px solid #C7D1E5 (Divider)
• Border Radius: 4px
• Focus State: 2px solid #1E1D49, no outline
• Placeholder: #727D98 (Muted)
• Valid State: #1F8F63 (Success)
• Error State: #DC3545 (Error), never the pink accent
• Font: Open Sans, 16px (prevents zoom on iOS)

Cards

Card Specifications

• Background: #FFFFFF (Premium Surface #FBFCFF on premium pages)
• Border: 1px solid #C7D1E5 (Divider) or no border
• Border Radius: 15px
• Shadow: 0 0 20px rgba(0,0,0,.1)
• Padding: 24px
• Hover State: Gentle scale-up, transform: scale(1.02)

Keep card geometry consistent across tours, hotels, restaurants, and synagogues. The same pattern carries the hotel funnel: imagery on top, details below, one CTA.

Fresh Kosher Cruises Components

Fresh Kosher Cruises components use its own palette and tokens. The full live examples are on its official brand page.

Buttons

Forms, Progress & Alerts

• Text Input (.form-control): Background #f7f8fc, border #e9ecef, focus border #061A60
• Card Selection Options (.ship-section-option, .deck-option, .preference-option): Card-based selection with hover effects and checkmark indicators
• Progress Indicator (.progress-bar-container, .progress-step, .step-circle, .step-label): .active marks the current step in #CC004E, .completed marks finished steps in #061A60
• Booking Summary Widget (.booking-summary-widget, .detail-item, .icon): Sticky sidebar widget with cruise details and call-to-action
• Info Alert (.alert .alert-info): Background #d1ecf1, border #bee5eb, text #0c5460
• Light Alert (.alert .alert-light): Background #f8f9fa, border #dee2e6, text #495057
• Iconography: Font Awesome 6.5.2, solid icons with prefix fas, brand icons with prefix fab

Interaction & Motion

• Standard Transition: All hover transitions use 0.25s ease-out. This applies to buttons, cards, links, and any element with a hover state
• Subtle Lift translateY(-2px): Tabs, newsletter subscribe, secondary actions, WhatsApp buttons
• Prominent Lift translateY(-4px): Clickable cards, Book Now buttons, primary CTAs
• Non-interactive elements (stat cards, feature boxes, highlight cards) should not have hover lifts, only subtle shadow changes
• Touch devices: Transform and box-shadow hover effects are wrapped in @media (hover: hover) to prevent stuck states on touch
• Button hover: Primary buttons hover to orange; secondary buttons (ghost/outline style) hover to filled white with navy text. They must remain visually distinct

Focus States

Keyboard focus indicators use :focus-visible so they appear only during keyboard navigation, not on mouse clicks.

Shadow Scale

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

On the GOBEYOND site all colors are CSS custom properties on :root. Always reference the variable, never a raw hex, so the palette stays centralized. The token names and values below match the official page.

/* GOBEYOND Brand CSS Framework - Brand & Design System, Version 2 */
:root {
    /* Core brand colors (locked) */
    --primary-color: #1E1D49;    /* Yankees Blue */
    --secondary-color: #B50061;  /* Jazzberry Jam */
    --tertiary-color: #E45B01;   /* Spanish Orange */
    --neutral-color: #FFFFFF;    /* White */

    /* Blue-tinted neutrals */
    --font-color: #000000;       /* Ink Black */
    --ink-soft: #4B5572;
    --muted: #727D98;
    --mid-blue: #B7C6E2;
    --divider-color: #C7D1E5;
    --accent-soft: #EEF3FF;
    --light-blue: #F5F8FF;

    /* Premium tier (hotels & booking) */
    --premium-ink: #14142F;
    --premium-muted: #5D6575;
    --premium-surface: #FBFCFF;

    /* Functional (error red #DC3545 has no token) */
    --green: #1F8F63;
    --green-soft: #E4F5EE;
    --accent-green: #25D366;     /* WhatsApp button only */

    /* 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;
}

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

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

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

/* Sections: 120px vertical rhythm on desktop, alternating white / Light Blue */
.section { padding: 120px 0; }
.section:nth-of-type(even) { background: var(--light-blue); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    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-primary);
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 30px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    transition: background .25s ease, transform .2s ease;
}

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

.btn-primary:hover {
    background: var(--tertiary-color);
    transform: translateY(-2px);
}

/* Cards */
.card {
    background: var(--neutral-color);
    border-radius: 15px;
    padding: var(--spacing-md);
    box-shadow: 0 0 20px rgba(0,0,0,.1);
    transition: transform .2s ease;
}

.card:hover { transform: scale(1.02); }

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

Fresh Kosher Cruises Design Tokens

Fresh Kosher Cruises uses its own tokens. Note that --primary-color, --secondary-color and --tertiary-color carry different values than on GOBEYOND.

:root {
    --primary-color: #061A60;
    --secondary-color: #CC004E;
    --tertiary-color: #FF6700;
    --whatsapp-green: #25D366;
    --text-dark: #333333;
    --text-muted: #6c757d;
    --light-bg: #f5f7fb;
    --border-color: #e9ecef;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

Favicon Implementation

The full favicon set covers classic browsers, iOS home-screen icons, and PWA install icons via the web manifest.

<!-- Place in HTML <head> -->
<link rel="icon" href="https://brand.gobeyond.pa/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="https://brand.gobeyond.pa/favicon.png">
<link rel="apple-touch-icon" href="https://brand.gobeyond.pa/apple-touch-icon.png">
<link rel="manifest" href="https://brand.gobeyond.pa/site.webmanifest">
<meta name="theme-color" content="#1E1D49">

Available Files

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. The signatures use PNG wordmarks rather than the SVG logos because Gmail and Outlook do not display SVG. The text style matches Gmail's defaults (Arial 13px, #202124, line-height 1.5) so the signature renders the same in Gmail, our webmail and Outlook.

GOBEYOND

<p style="margin: 0; font-family: Arial, Helvetica, sans-serif; color: #202124; font-size: 13px; line-height: 1.5;">
<br>Best Regards,<br>
Your Name | Your Title | Go Beyond<br>
<a href="https://www.gobeyond.pa/contactus"><img src="https://brand.gobeyond.pa/gobeyond-wordmark.png" alt="Go Beyond" width="200" height="30" style="border: 0;"></a>
</p>

Panama Yeshiva Week

<p style="margin: 0; font-family: Arial, Helvetica, sans-serif; color: #202124; font-size: 13px; line-height: 1.5;">
<br>Best Regards,<br>
Your Name | Your Title | Panama Yeshiva Week<br>
<a href="https://panamayeshivaweek.com"><img src="https://brand.gobeyond.pa/panama-yeshiva-week-wordmark.png" alt="Panama Yeshiva Week" width="160" height="47" style="border: 0;"></a>
</p>

Fresh Kosher Cruises

<p style="margin: 0; font-family: Arial, Helvetica, sans-serif; color: #202124; font-size: 13px; line-height: 1.5;">
<br>Best Regards,<br>
Your Name | Your Title | Fresh Kosher Cruises<br>
<a href="https://www.freshkoshercruises.com"><img src="https://brand.gobeyond.pa/fresh-kosher-cruises-wordmark.png" alt="Fresh Kosher Cruises" width="185" height="41" style="border: 0;"></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.