Brand Styleguide — Travel Orbit — Phase 1 Walking Skeleton

Your Journey,
On Your Terms.

Living design system reference. Every token, font, and colour role rendered on the Warm Ivory canvas. Proof that the brand system is wired end-to-end.

01Colour System

Contrast Rules (WCAG)

Pair	Ratio	Grade	Status
Charcoal #20242B on Ivory #F6F1E8	~14:1	AAA	PASS
Indigo #332E9E on Ivory #F6F1E8	~7.3:1	AA	PASS
White #FFFFFF on Indigo #332E9E	~7.3:1	AA	PASS
Orange #FF6B35 on Ivory #F6F1E8	~2.4:1	FAIL	FORBIDDEN

D-06: text-accent Tailwind class does not exist — --color-text-accent is absent from @theme inline. Orange is structurally blocked as a text colour.

#332E9E

Royal Indigo

--to-color-brand

Primary brand colour. Buttons, links, emphasis.

#221E78

Deep Indigo

--to-color-brand-deep

Hover/pressed state of brand colour.

#FF6B35

Electric Orange

--to-color-accent

DECORATION ONLY — not for text. Rule lines, section counters, decorative borders.

#D83F87

Magenta

--to-color-magenta

Accent colour for tags, decorative elements.

#20242B

Deep Charcoal

--to-color-ink

Body text, headings. Charcoal-on-Ivory ≈ 14:1 (AAA).

#F6F1E8

Warm Ivory

--to-color-canvas

Page canvas. NEVER pure white (#FFFFFF). All page backgrounds use this.

#EFE8DA

Warm Ivory 2

--to-color-canvas-2

Tag/pill backgrounds, card frame fills, inset areas.

02Typography Scale

Display / HeroSora · clamp(56px, 8vw, 116px) · weight 800 · tracking -0.03em

Your Journey, On Your Terms.

H1Sora · 56px · weight 700 · tracking -0.02em

Page Heading Level 1

H2 / Section TitleSora · clamp(36px, 4.4vw, 64px) · weight 300 · tracking -0.02em

Section Title at H2 Scale

BodySora · 16px · weight 400 · tracking default

Body text at 16px. This is the main reading size used across all paragraphs and descriptions on the site.

Eyebrow / CaptionSora · 13px · weight 400 · tracking default

Eyebrow caption text at 13px

Mono — Section LabelJetBrains Mono · 11.5px · weight 500 · tracking 0.18em

SECTION LABEL / EYEBROW

Mono — Nav LinksJetBrains Mono · 11.5px · weight 400 · tracking 0.06em

NAVIGATION LINK

Mono — Footer / LabelsJetBrains Mono · 11px · weight 400 · tracking 0.14em

FOOTER LABEL / COLUMN HEADING

Mono — Pill LabelJetBrains Mono · 10.5px · weight 400 · tracking 0.08em

PILL LABEL

03Shape / Radii

rounded-sm

6px

PillLabel

rounded-md

14px

Minor containers

rounded-lg

22px

Card component

rounded-full

999px

Button primary, hero pill

04Motion

Easing

ease-orbit

cubic-bezier(.22,.61,.36,1)

All interactive transitions — hover, focus, state changes.

Duration — Fast

duration-fast

160ms

Micro-interactions: hover colour, border-bottom underline.

Duration — Medium

duration-medium

320ms

Larger state changes, modal open/close, drawer animations.

05Spacing Scale

4px grid — all steps are multiples of 4. Boxes below are scaled to their value. Web-only; not in travel-orbit.tokens.css (multi-platform artefact).

p-1 / gap-14pxIcon-to-label gap, tight padding

p-2 / gap-28pxPillLabel padding

p-3 / gap-312pxButton inner gap

p-4 / gap-416pxDefault element padding

p-5 / gap-520pxCard tag group, nav gap

p-6 / gap-624pxNav item gap

p-8 / gap-832pxColumn gaps, small section padding

p-10 / gap-1040pxTopbar horizontal padding

p-12 / gap-1248pxSection padding

p-14 / gap-1456pxLockup stage top padding

p-16 / gap-1664pxMajor layout section breaks

p-20 / gap-2080pxHero vertical padding

p-24 / gap-2496pxSection head top padding

06Button

Primary variant

bg-brand · rounded-full · font-display · hover: bg-brand-deep + shadow-raised · focus-visible: shadow-focus · disabled: opacity-40

Secondary / nav variant

font-mono · text-text-secondary · hover: text-text-brand + border-accent underline · min-h-[44px] touch target

07Card

Frame slot

Nairobi — Affordable Package

From £899 per person

7 NightsHot DealFlights Included

Frame slot

Hajj & Umrah — Premium Package

From £3,499 per person

Hajj 2027Guided Tour

Card spec

bg-white (lifts off ivory canvas)
border-[rgba(32,36,43,0.14)]
rounded-lg (22px)
shadow-card → hover: shadow-raised
Frame: bg-canvas aspect-[16/11] p-7
Meta: pt-[18px] px-[22px] pb-[22px]
Title: Sora 15px weight 600
Sub-label: JetBrains Mono 11.5px

08PillLabel

DefaultIndigoOrangeMagenta

Variant colour rules

Default: bg-canvas-2 (#EFE8DA) · text-text-secondary

Indigo: bg rgba(51,46,158,0.10) · text-text-brand (#332E9E)

Orange: bg rgba(255,107,53,0.12) · text #C9421A (NOT #FF6B35 — darkened for WCAG AA ~4.6:1)

Magenta: bg rgba(216,63,135,0.12) · text #A82A65 (darkened for contrast)

09SectionHeader

01Our Destinations

Explore the world with Travel Orbit

From East African safaris to Hajj packages — we find the journey that fits your life, your budget, and your terms.

Eyebrow row: 28px×1px bg-accent rule + orange number numeral (D-06 decoration exception) + font-mono text-text-secondary. Title: Sora weight 300 clamp(36px,4.4vw,64px). Bold emphasis via <b> → weight 700 text-text-brand.

10Header

The site header renders live at the top of every page via the root layout (app/layout.tsx). It is visible above this section. Features: sticky frosted Ivory (rgba(246,241,232,0.86) + backdrop-blur(14px)), transparent vector logo (/logos/travel-orbit-logo-horizontal.svg), nav links in JetBrains Mono, and a mobile hamburger toggle with aria-label + aria-expanded for screen reader access.

11Footer

The site footer renders live at the bottom of every page via the root layout. It is visible below this section. Contains verbatim D-03/D-04 identity: Travel Orbit Ltd, Company No. 17221281, 116a City Road Bradford BD8 8JT, 02039323459, info@travelorbit.co.uk, VAT Registration Pending, the ATOL supplier disclosure line, and the ATOL Protected · IATA Accredited Agent badge bar.

Travel Orbit — Brand Styleguide · Phase 1 · Plan 01-02

Your Journey,On Your Terms.

Contrast Rules (WCAG)

Your Journey,
On Your Terms.