Website design system

Go Beyond · Website implementation standard · October 19, 2026

A practical specification for designers, developers and agents working on the Go Beyond website. It expands the identity guide into repeatable layouts and components, with explicit responsive and interaction rules.

Status: The official brand guide remains the identity authority. The owner approved local implementation of this website addendum. The selected header, shared 1440px grid, homepage, newsletter and page-family introductions are now integrated in the main checkout. Publishing to the public site and updating the separately hosted official brand guide remain separate release steps. Review evidence and practical limits are recorded in docs/site-design-rollout.md.

Jump to: Decisions · Tokens · Layout · Typography · Header · Media · Components · Footer · Page families · Build rules · Acceptance

1. Decisions from this review

2. Tokens and color roles

Use tokens from public/assets/css/style.css. Do not copy palette values into component rules or create near-identical colors for individual pages.

Migration note: Some production neutral tokens still resolve to older gray values. The preview currently uses scoped neutral aliases. Consolidate them into the canonical shared tokens in a dedicated integration change; do not add another override layer or claim the migration is already complete.

No gradients, colored photo tints, decorative green, premium gold, invented navy shades, or recoloring of partner/payment logos. Preserve each partner’s official artwork and recognizable WhatsApp/payment marks.

3. Layout and spacing

Use one shared content grid for the homepage header, hero copy, body sections, newsletter and footer. Different backgrounds and column counts must not introduce different outer text margins:

At a 1440px viewport, the homepage container has 1360px of usable content after padding. The wider shared grid gives the split hero enough text space without pulling its text edge away from the sections below. The header logo/actions, hero copy’s outer edge, section headings, card grids, newsletter and footer content must align to that same box. Reading-width paragraphs and different internal column counts are allowed within it. A full-width section background does not imply full-width text.

Use an 8px spacing scale: 8, 16, 24, 32, 40, 48, 64, 80px. A 12px gap is an allowed compact-control interval.

• Main sections: 80px vertical padding on desktop, 48px on mobile.
• Newsletter: 64px desktop, 48px mobile. Avoid a tall empty signup banner.
• Section heading to content: 40px desktop, 24px mobile.
• Card/grid gaps: 24px; compact partner grids may use 16px desktop / 12px mobile.
• Card padding: 32px desktop, 24px mobile.
• Related paragraphs, labels and actions: 8–24px according to their hierarchy.
• Avoid negative margins for normal composition. Document genuine hero-under-header or sticky cases explicitly.

Proposed responsive boundaries: Under 1240px, collapse the full destination navigation into the mobile drawer. Under 768px, stack major split sections; use 2-column benefits/partners where labels fit. At 320px, collapse dense grids to one column. Test content fit between boundaries as well as at them.

4. Typography and writing

Quicksand 600–700 for headings; Open Sans 400 for body and 600 for navigation/buttons. Use the existing self-hosted font files. Hebrew uses the existing Heebo support and RTL stylesheet; retain the official Latin wordmark.

Use sentence case in new headings and buttons, preserving proper names. Eyebrows may be short uppercase labels; do not uppercase paragraphs. Keep one H1 per page, then meaningful H2/H3 sections. Do not use heading elements merely to obtain a font size.

Use concrete descriptions and helpful action labels. Preserve real testimonials, verified service details and existing prices/terms; do not invent availability, ratings, guest counts or guarantees. Use “Go Beyond,” never “Go Beyond Travel.”

5. Header and navigation

The selected header is a single white row with a subtle divider. Desktop target height: 80px plus divider; mobile target: 64px plus divider. These are design targets, not values to repeat throughout stylesheets.

• Official navy logo at the start; approximately 184px wide on desktop and up to 132px on mobile, never below the brand’s minimum.
• The owner-approved header order is Panama, Flights, Hotels, Cruises and About. Panama contains grouped booking links, holiday programs and local planning information. Tours is the short menu label; experiences remain available in the destination content. Group Travel belongs in the footer, with its existing search landing pages and contextual links preserved.
• Keep Build your trip as the text-only pink action on gobeyond.pa, including on mobile. Flights uses its own text-only My trips action. Collapse destination navigation at 1100px; retain the site action and menu control. Keep the shopping bag cart button visible in the header, including when empty, and retain footer access when it contains items. Adding a tour opens the cart for review.
• No utility strip, language switcher, repeated plain-text wordmark or appointment-booking link in the header.
• Click/Enter/Space opens a destination disclosure; Escape closes it and returns focus. Arrow keys may move through its links.
• Desktop panels use a quiet intro column and link columns. Do not place text over photos within menus.
• Mobile uses a modal drawer with contained focus, a visible close control, expandable groups, and no background scrolling. Closing returns focus to its opener.
• The cart keeps its existing catalog, storage, item count, quoting/checkout behavior and accessible focus handling. Never display sample prices as live quotes.

Height integration: Use one measured --navbar-height value, updated from the actual rendered header after resizing, font loading and locale changes. Consumers include anchor offsets, full-bleed heroes, sticky filters, itinerary toolbars and summary panels. The shared height observer targets .site-header and updates after resize, font loading and element-size changes. Do not leave a 73px assumption under a 96px header.

6. Photography, video and heroes

Retain the commissioned homepage video. The homepage uses Vimeo video 1006899736; do not replace it with unrelated stock footage or discard it while restyling navigation.

• Split hero: solid navy copy panel beside naturally bright video/photo. The proposed desktop split is approximately 44% copy / 56% media. The redundant “Experience Panama” caption strip is omitted.
• On mobile, stack content and media without horizontal clipping. Keep meaningful text available when video is unavailable.
• No dark scrims, gradients, navy overlays, brightness filters or text shadows over media. Put captions on their own solid strip.
• The homepage video autoplays muted, loops and plays inline as a decorative background, without player controls or an external watch link. Crop it proportionally to cover the same frame as its poster at every breakpoint; never stretch it or expose the poster around its edges. Retain the poster for reduced motion, data saving and unavailable playback. Poster and player share one clipped media frame; hide the poster after player readiness, and preserve proportional coverage at fractional screen sizes and browser scaling so it cannot bleed along the join.
• Honor reduced-motion and data-saving settings: show the poster instead of starting playback automatically. Do not autoplay audible content.
• Delay video initialization until the hero is visible/idle; do not block navigation or copy while the player loads.
• Preserve aspect ratio and the subject. Reserve image/video geometry to prevent layout shifts. Avoid stretching artwork or cropping a logo.
• Below-fold raster images use WebP, descriptive alt text and lazy loading. Decorative icons are hidden from assistive technology.

Amendment needed in the official guide: Its current examples permit photo scrims. For this website, replace that permission with the separate-solid-copy rule above, matching the current project instruction and the reviewed direction.

7. Reusable components

Buttons and focus

Primary: pink fill, white text, 6px radius, Open Sans 600, 48px minimum height, typically 12px × 24px padding. Compact navigation controls retain at least a 44px target. Hover uses the darker pink token. Secondary actions use a navy outline on a light surface or a clear text link; do not give every action primary weight.

WhatsApp buttons always use white labels and icons on a solid --accent-green background, including visited, hover, focus and active states. Apply this to shared buttons and page-specific variants.

Focus must remain visible on every surface: use a 3px contrasting outline with 4px offset; on navy, use a light outline where pink does not provide enough contrast. Disabled/loading states must include text or semantics, not color alone. Honor reduced motion for lifts/transitions.

Experience and listing cards

White surface, 1px neutral border, 8px radius. Photography occupies a reserved 4:3 area; title, description and action sit on a separate solid body. Use consistent image ratios and action alignment within a row. Hover may lift 4px with a subtle shadow. Do not apply hover styles to every descendant image: logos and badges need their own selectors.

Listing pages may add filters, sorting, availability and pricing, but should reuse card geometry, type and actions. A selected card/state needs a label or icon in addition to color.

Program and feature sections

Use a 50/50 split with approximately 64px desktop gap, stacking below 768px. Preserve the partner logo in its own clear space. Use a concise description, a short list of real inclusions and one primary action. Avoid duplicating a general booking CTA into every paragraph.

Forms

Visible labels for lead/payment forms; an accessible label for a compact email signup. Inputs use 16px text, 48–56px height, 6px radius and a neutral border. Associate errors with fields; preserve entered values on recoverable failure. Do not rely on placeholders alone. Keep existing honeypots, validation and same-origin endpoints. Newsletter success/failure is announced in a live region. Do not submit synthetic leads or payments while checking layout.

Date fields use the shared Flatpickr calendar and flatpickr-theme.css, loaded once by the base layout on desktop and mobile. date-picker.js enhances native date inputs after page-specific booking calendars initialize, preserving their ISO values, labels and changing date limits. New date fields should use type="date" for the no-JavaScript fallback. Keep generic form sizing rules off the calendar's month and year controls.

Reviews and partner marks

Use existing testimonial data without invented ratings or rewritten meaning. Keep attribution and location together. Partner logos retain official artwork and proportions, with consistent visual space rather than forced identical dimensions. Preserve recognizable payment marks and WhatsApp green.

8. Newsletter and footer

The newsletter uses a light/white surface, navy heading, softer descriptive text, a bordered white email field and a pink subscribe button. It shares the standard container with the navy footer. Desktop can use two columns; mobile stacks the form with full-width input and button.

The footer remains navy with the official white logo, clear link groups, Instagram, both existing contact numbers, legal links and footer-only language selection. Keep headings separated from links by 16px; keep 20px breathing room around the brand description. Treat contact and legal areas as compact rows separated by subtle rules.

Do not let generic page resets erase component margins or colors. Use low-specificity reset selectors and let .footer-brand p, .footer-link-group h2 and other shared component rules retain their intended geometry. This was a real integration issue in the first homepage preview.

The language selector opens upward, supports English/Spanish/Hebrew/French, highlights the current locale, supports keyboard opening/Escape and preserves the corresponding page destination. RTL phone numbers remain LTR. Test labels with longer French/Spanish text as well as English.

9. Page families and integration priorities

A new header does not require a new design for every page. First verify the shared shell. Broader restyling should follow these page families rather than inventing a layout for each URL.

Confirmed code dependencies include the hotel-directory hero’s negative navbar offset and the itinerary builder’s sticky toolbar/summary rules. These need targeted adjustment when the header is actually integrated. They are not evidence that those pages already failed a browser test with the new header.

Implementation: shared tokens/container rules, header height/menus/cart, homepage, shared page introductions and newsletter are integrated in the base layout. Hotel and itinerary offsets use the measured header height. Preserve family-specific filters, galleries, forms, payment and booking logic when extending these templates.

Marketing actions and promises

Each action must describe what opens next. A broad planning action must not send cruise, flight or group enquiries into the Panama trip builder.

The homepage offers both the trip builder and an assisted quote request. Keep kosher expertise clear without implying every hotel includes kosher meals, Shabbat facilities or concierge. Concierge is a separately priced add-on for eligible Go Beyond bookings. Shared data and translated pages must use the same current wording and destinations.

10. Implementation contract

• Edit Eleventy sources in src/; assets in public/. Never hand-edit _site/ or _serve/.
• Use existing layouts, includes, data and translation keys. Confirm the actual permalink owner before changing hotels or itineraries.
• Centralize the chosen component rules in the shared stylesheet when integrating. Edit rules in place; remove obsolete variants instead of stacking override blocks.
• Keep preview CSS scoped. Do not spread hm-* review aliases throughout production pages; consolidate them into semantic component names/tokens during the integration step.
• Reuse existing footer, cart, newsletter handlers and backend contracts. A visual redesign must not silently change booking/payment behavior.
• Keep sample/review pages noindex and out of the sitemap. Production pages retain their canonicals, hreflang, metadata, schema and heading hierarchy.
• Preserve other contributors’ working changes. Local implementation is approved. Pushes, deployment and a live brand-site update require release authorization.

Official guide edits to make after review

1. Add this component/page specification to the official guide rather than maintaining a competing palette.
2. Replace website photo-scrim examples with solid copy surfaces and unfiltered media.
3. Specify responsive type, standard/wide containers, component geometry and state examples.
4. Document the chosen one-row header, footer-only locale control and retained homepage video.
5. Add page-family recipes and the acceptance procedure below.
6. Consolidate neutral tokens and remove retired implementation variants during rollout.

11. Definition of done for a page

Review the rendered page and interactions, not just its source or a resting screenshot.

• Check 320, 390, 768, 1024, 1280 and 1440px; test long labels between breakpoints.
• Verify English, Spanish, Hebrew RTL and French; no untranslated navigation keys or clipped inputs.
• No horizontal overflow, broken images, failed critical resources or JavaScript errors.
• Correct fonts, approved colors, 8px card / 6px control geometry, consistent container alignment.
• Exactly one H1; logical section hierarchy; meaningful links and descriptive alt text.
• Test Tab/Shift-Tab, Enter/Space, Escape, visible focus, modal focus containment and focus return.
• Test hover, focus, active, disabled, loading, empty, error and success states where applicable.
• Confirm header height, sticky controls and anchor destinations do not cover headings or actions.
• For media, check proportional video coverage, absence of player controls and watch links, poster fallback, reduced motion and absence of overlays/filters.
• For forms/cart/checkout, verify validation and recoverable states using safe fixtures without external submissions.
• Run the relevant build/checks and preserve desktop/mobile evidence. Do not claim a live preview URL works until its actual HTTPS route is verified.

The shared production templates implement this contract. The retained mockup gallery records earlier alternatives; use the current homepage and this specification for future work.