Odyssey

Odyssey is a photography-led consumer identity for imagery-first product surfaces. The base canvas is pure white (#ffffff) with deep near-black ink (#222222) for headlines and body, and a single voltage of Coral (#D83752) carrying every primary CTA, the search-button orb, the heart save state, and inline brand links. There is no secondary primary color in mainline marketing — the Atlas purple (#460479) and Harbor magenta (#92174d) tokens are sub-primary accents that only appear inside Odyssey Atlas / Harbor contexts.

Type runs Plus Jakarta Sans at modest weights: display headlines render at 22–28px in weight 500–700 rather than relying on oversized, heavy type. Photography, content cards, and generous white space carry visual weight while the text stays conversational.

The shape language is soft. Buttons are 8px radius , content cards are ~14px , the search bar is fully pill-shaped , wishlist hearts and search orbs are circles , and category strip rounded corners run at 32px . There is essentially no hard corner anywhere except the body grid itself — every interactive element is rounded.

Key Characteristics:

• Single accent color: (#D83752 — "Coral") carries every primary CTA, the search orb, the heart save state, and the wordmark. Used scarcely — most pages are 90% white + ink with one or two Coral moments.
• Custom variable type: Plus Jakarta Sans. Display weights sit at 500–700, body at 400. Modest weight is intentional — Odyssey trusts photography for visual heft.
• Three-product top nav: three peer tabs — each with a hand-illustrated 32px icon and "NEW" badges on the two newer products. Active tab uses an underline rule .
• Pill-shaped global search bar: white surface, fully rounded , divided by 1px hairlines into Where / When / Who segments, terminated by a circular Coral search orb .
• Content cards are photo-first: aspect-ratio rectangles with corner clipping, swipeable image carousel, "Guest favorite" floating badge top-left, heart icon top-right, then 4–5 lines of meta beneath.
• Editorial dropdowns (footer, language picker) are clean text columns over the white canvas — no card surface, no shadow.
• The design system caps elevation at one shadow tier (box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px) — used on hover-floated cards and search/account dropdowns.
• 8px base spacing system, with major sections at (64px) — generous but not airy enough to feel editorial-magazine; the browsing density wants more cards per scroll.

One value per role — no ranges, no alternatives.

• Pack: Phosphor — friendly and airy, matching a photo-led surface that never wants a hard edge.
• Style: light weight, rounded terminals.
• Weight rule: Use light; step to regular only when an icon sits alone without a label.
• Size: 20px in controls and nav; 16px inline with body text; 24px for empty states and feature moments.
• Colour: icons inherit currentColor — never a hardcoded hex, so they follow the text token they sit beside.
• Import: pull in icons individually, never the whole set.

Touch Targets

• Primary CTAs at minimum 48×48px (above WCAG AAA).
• Search orb is 48×48px circular — the most-tapped element on the page.
• Heart save button is 32×32px circular — borderline for AAA but compensated by a generous 12px padding inside the photo card.
• Date-picker day cells are 40×40px circular.

Collapsing Strategy

• Top product tabs collapse into a hamburger sheet below 744px.
• Search bar's 3 segments collapse into a single-tap entry that opens a full-screen search overlay on mobile.
• Content and link grids drop column counts cleanly at each breakpoint — never reflow rows; always reduce columns.
• The side card on the detail view switches from sticky right-rail to a sticky bottom bar on mobile, carrying just the primary CTA + price summary.

• Hover state colors: intentionally not documented per the global no-hover policy — Odyssey's actual :hover styling for content cards is a subtle elevation lift, but precise extraction is unreliable.
• Loading states / skeleton screens: not visible on the extracted surfaces.
• Map view styling: the search-results map uses map service-tinted tiles with custom Coral markers; not captured here.
• Form input error states: error text color is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.
• Specialty palettes: Atlas and Harbor are optional scoped modes; their typography overrides are not part of the core contract.