Skip to content
DesignMunkDesignMunk Submit a site

Tanzania Specialist

tanzania-specialist.com
Your dream holiday to Tanzania starts here
Travel Tailwind WordPress Homepage museo-sans
Share Visit site
tanzania-specialist.com DESKTOP · 1440
Tanzania Specialist

AI Breakdown

Design export

---
version: alpha
name: Tanzania Specialist
description: Your dream holiday to Tanzania starts here
colors:
  primary: "#ffffff"
  secondary: "#4c2c1c"
  tertiary: "#ffbe3d"
  neutral: "#465b2d"
  border: "#374151"
  brand-gardener-green: "#5b6424"
  brand-haven: "#a4b48c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: museo-sans
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0.05em
  headline-md:
    fontFamily: museo-sans
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: dk-liquid-embrace
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-xs:
    fontFamily: museo-sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
  body-md:
    fontFamily: museo-sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: 0.079em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: 0px
    padding: 16px 28px
    height: 54px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 28px
    height: 54px
  button-link:
    textColor: "{colors.neutral}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Tanzania Specialist: Olive Dark-Mode With Square Gold CTAs

## Overview

A confident, conversion-first travel UI aimed at safari planners and honeymooners who value expert guidance. The interface uses dark-olive surfaces with high-contrast white text and flat gold accents for actions. Typography balances a robust sans for structure with a hand-drawn script for warmth. Spacing is generous but not airy, keeping dense content (itineraries, reviews) scannable.

## Colors

- **primary (#ffffff):** Core text on dark surfaces, form inputs, and icon highlights.
- **secondary (#4c2c1c):** Deep umber accent for badges, ratings, or emphasis in headers.
- **tertiary (#ffbe3d):** Action color for primary CTAs, price flags, and promotional chips.
- **neutral (#465b2d):** Default surface/background and secondary button fill.
- **border (#374151):** Subtle dividers, card outlines, and input borders on dark surfaces.
- **brand-gardener-green (#5b6424):** Alternate dark section background and hero overlay blocks.
- **brand-haven (#a4b48c):** Muted supporting tint for highlights, tags, or subtle backgrounds.
- **surface ({colors.neutral}):** Alias to the olive surface for containers and cards.
- **on-surface ({colors.primary}):** Alias to white for all text placed on dark blocks.

## Typography

- Headline LG — Museo Sans, 60px, 900, tight 1.0 line-height and +0.05em tracking for impactful H1s and marquee claims. Proprietary (Adobe/self-hosted). Substitutes: Source Sans 3 Black, Montserrat Black, Nunito Sans ExtraBold.
- Headline MD — Museo Sans, 36px, 900, 1.25 line-height and +0.1em tracking for section leads and hero statements. Proprietary. Substitutes: Source Sans 3 Bold, Montserrat Bold, Nunito Sans Bold.
- Headline SM — Dk Liquid Embrace, 30px, 400, 1.2 line-height and +0.05em tracking for short, characterful subheads. Proprietary. Substitutes: Caveat Brush, Pacifico, Merienda.
- Headline XS — Museo Sans, 18px, 400 for card titles and small section labels.
- Body MD — Museo Sans, 16px, 400, roomy line-height 2.0 and +0.079em tracking for long-form copy and feature lists. For builds without Museo Sans, prefer Source Sans 3 Regular with the same sizes and rhythm.

## Layout

Spacing follows an 8px base with steps at 8/16/28/40/56. Use 56px for section padding, 40px for major gaps between blocks, 28px for intra-section spacing, 16px for card padding and form gutters, 8px for tight element pairs. Hero content stacks left with a right-aligned form card on larger screens; itinerary tiles arrange in a responsive grid. Maintain generous vertical rhythm to keep dense content readable.

## Elevation & Depth

Depth is restrained. Small and medium shadows add lift to overlays and interactive cards; large and inner shadows are disabled. Hierarchy relies on tonal contrast between olive surfaces and white text, square gold buttons, and occasional borders in #374151 to separate dense regions (menus, review lists).

## Shapes

Buttons are strictly square (0px radius) to emphasize decisiveness and grid alignment. Cards and media containers use a soft 8px radius for friendliness without losing structure. Keep radii consistent: 0px for actions; 8px for content blocks and imagery.

## Components

Button variants and card:
- Primary Button — Background #ffbe3d, text #465b2d, 0px radius, 16px×28px padding, 54px height. Use for main CTAs like "Start Customizing" and "Make a request".
- Secondary Button — Background #465b2d, text #ffffff, 0px radius, same sizing; place on light photography or alongside the primary.
- Link Button — Text #465b2d, 0px radius; use for tertiary actions.
- Card — Background #465b2d, text #ffffff, 8px radius, 16px padding; default container for itinerary tiles and compact content blocks.

Distinctive components on this page:
### Language & Currency Switcher Bar
- Compact utility row in the header. Text in #ffffff on dark olive; dividers in #374151. Keep hit targets to 40–54px height to align with button sizing.
### Ratings Strip
- Two review sources with star icons and scores. Use Museo Sans at 18px for labels, white text on olive, and a thin border or sm shadow to separate it from the hero.
### Hero Trip-Planner Card
- Right-aligned overlay with Adults, Children, and Arrival Date fields. Card uses #465b2d background, white labels, and a primary CTA (#ffbe3d) at 54px height.
### Benefits Row
- Five bullet items with icons under the hero. Set in Body MD (16px/2.0) with white text; use brand-haven (#a4b48c) sparingly for icon tints.
### Itinerary Tiles Grid
- Each tile is a card: 8px radius, 16px padding. Price badge uses #ffbe3d with #465b2d text; titles in Headline XS (18px) and body in Body MD.
### Mega-Nav with Request CTA
- Category links (Safaris, Kilimanjaro, Zanzibar, Discover) plus a standout primary action. Keep the action in #ffbe3d and 0px radius to remain dominant.
### Testimonials List
- Review excerpts with author and date. Use 16px body copy, generous 28–40px vertical spacing, and sm shadow or border separators for scannability.
### Cookie Consent Modal
- Full-width or modal treatment with dark background and a gold primary action; secondary action on neutral olive with white text.

## Do's and Don'ts

- Do keep white text (#ffffff) on olive surfaces (#465b2d or #5b6424) for contrast; avoid mid-tone-on-mid-tone combinations.
- Do reserve the gold (#ffbe3d) for the most important CTAs and price badges; limit to one primary action per view.
- Do keep buttons square (0px radius) and 54px high; mixing radii weakens the visual language.
- Don't set long sentences in the script face; keep Dk Liquid Embrace for short subheads only.
- Don't add heavy drop shadows; use the provided sm/md elevation or borders (#374151) to separate layers.
- Don't change the card padding (16px) or radius (8px); consistency keeps dense grids readable.

## Agent Prompt Guide

Quick colour reference:
- Text: #ffffff
- Background: #465b2d (surface) or #5b6424 (brand-gardener-green)
- Border: #374151
- Accent / Primary action: #ffbe3d

1) Build the hero with right-aligned planner
- Page background: #5b6424; text: #ffffff.
- H1: Museo Sans (or Source Sans 3 Black fallback), 60px/1.0, 900, letter-spacing 0.05em, all-caps.
- Subhead: Dk Liquid Embrace (or Caveat Brush), 30px/1.2.
- Planner card: background #465b2d, 16px padding, 8px radius, sm shadow.
- Primary button: background #ffbe3d, label #465b2d, height 54px, padding 16px 28px, radius 0px.

2) Lay out itinerary tiles
- Grid of cards using background #465b2d, text #ffffff, radius 8px, padding 16px, gap 28px.
- Title: Museo Sans (or Source Sans 3), 18px/1.25.
- Body: 16px/2.0.
- Price badge: background #ffbe3d, text #465b2d, square corners (0px).

3) Build the ratings strip
- Container background #5b6424, text #ffffff, 16px vertical padding.
- Stars in #ffbe3d; score labels at 18px Museo Sans (or Source Sans 3 Bold).
- Use border-bottom: 1px solid #374151 for separation.

4) Cookie consent modal
- Overlay card: background #465b2d, text #ffffff, radius 8px, padding 40px.
- Primary action: #ffbe3d with #465b2d text, 54px height, radius 0px.
- Secondary: background #465b2d, text #ffffff, 1px border #374151.

## Similar Brands

- Intrepid Travel — Bold headings and prominent CTAs; Intrepid runs lighter palettes where Tanzania Specialist leans into dark-olive blocks.
- G Adventures — Strong purple brand and booking-led homepage; similar card grids but with rounded buttons instead of square actions.
- Audley Travel — Editorial tone with custom trip planning; uses serif/sans pairings where this site uses sans + brush script.
- SafariBookings — Itinerary-first marketplace; more utilitarian UI and lighter backgrounds versus this site's moody dark mode.
- National Geographic Expeditions — Photography-driven travel with strong typographic hierarchy; Nat Geo is higher-contrast on a black canvas, this site is earth-toned and olive.

More like this

Browse Travel →
outsite.co
Outsite Lifestyle
Outsite
Work anywhere. Live differently. Beautiful places to stay.
Homepage · 2 weeks ago
rigakvest.com
Rigakvest Entertainment
Rigakvest
Онлайн квест по старому городу Риги!
Homepage · 2 weeks ago
relocatenow.io
Relocate Now Software
Relocate Now
Making your move & life abroad simpler
Homepage · 2 weeks ago
guesty.com
Guesty Features AI
Guesty Features
The hero centers a large, high-contrast headline with a mixed serif/italic accent on Guesty’s “Unified Inbox,” supported by concise subcopy and a…
Features · 3 weeks ago