Skip to content
DesignMunkDesignMunk Submit a site

WP Travel Kit

wptravelkit.com
Travel sites, ready to book—responsive, SEO-optimized, powered by WP Travel Engine.
WordPress WordPress Landing Inter Plus Jakarta Sans
Share Visit site
wptravelkit.com DESKTOP · 1440
WP Travel Kit

AI Breakdown

Design export

---
version: alpha
name: WP Travel Kit
description: Travel sites, ready to book—responsive, SEO-optimized, powered by WP Travel Engine.
colors:
  primary: "#101828"
  secondary: "#13a374"
  tertiary: "#1b8a4c"
  neutral: "#ffffff"
  border: "#e5eaf0"
  brand-shamrock-green: "#4fa87e"
  brand-meadow: "#83b08c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 49px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: -0.01em
  headline-xs:
    fontFamily: Inter
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 8px
  sm: 18px
  md: 28px
  lg: 36px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#475569"
    rounded: "{rounded.md}"
    padding: 34px 24px
---

# WP Travel Kit: Jakarta headlines and a proof-led template library

## Overview

WP Travel Kit targets B2B travel operators who need a working booking site fast. The tone is professional, measured, and product-first: concise copy, roomy sections, and clear demonstrations. Density sits in the middle—ample whitespace around cards, but compact headlines and tight line lengths keep sections efficient. When no token covers a case, default to a clean light surface, strong dark text, and green accents for emphasis.

## Colors

- **primary (#101828):** Deep ink for headlines, navigation, and core text.
- **secondary (#13a374):** Primary accent for CTAs, badges, and highlights.
- **tertiary (#1b8a4c):** Deeper green for hovers, charts, or secondary emphasis.
- **neutral (#ffffff):** Base surface for pages, cards, and buttons.
- **border (#e5eaf0):** Subtle dividers, card outlines, and input borders.
- **brand-shamrock-green (#4fa87e):** Support accent for pills or status labels.
- **brand-meadow (#83b08c):** Muted accent for backgrounds or gentle highlights.
- **surface (#ffffff):** Alias to neutral; default canvas for all sections.
- **on-surface (#101828):** Alias to primary; default text on light surfaces.

## Typography

- Plus Jakarta Sans (headlines): Used for headline-lg (72px/800/1.05), headline-md (49px/700/1.2), and headline-sm (34px/700/1.21). Freely available on Google Fonts. Suitable substitutes: Manrope, Poppins, or DM Sans.
- Inter (supporting heads and body): headline-xs (23px/600/1.22) for small headings and labels; body-md (16px/400/1.7) for paragraphs, lists, and UI text. Freely available on Google Fonts. Suitable substitutes: Roboto, Source Sans 3, or the system-ui stack.
Use tight negative letter-spacing on larger Jakarta heads as specified; keep Inter's line-height generous (1.7) for readability in long sections.

## Layout

Spacing uses a compact but legible scale: 8px (xs) for micro-gaps, 18px (sm) for inline paddings, 28px (md) for card gutters, 36px (lg) for block spacing, and 48px (xl) for section padding. Build sections as stacked bands on a light surface; group related content in cards with 24–34px inner padding. Favor a responsive multi-column grid for libraries and feature rows; collapse to a single column on small screens while preserving the spacing multiples.

## Elevation & Depth

Depth is minimal. A single sm shadow (rgba(16, 24, 40, 0.28) 0px 6px 14px) may lift interactive elements or previews. Most hierarchy comes from borders (#e5eaf0), tonal contrast (white surfaces vs. #101828 text), and whitespace. Avoid layered shadows; md/lg/xl shadows are none by design.

## Shapes

Two corner radii convey scale: 8px (sm) for buttons, inputs, and small pills; 12px (md) for cards and major containers. Stick to these radii to keep the system cohesive—avoid mixed or exaggerated rounding.

## Components

Buttons
- Primary button: 40px height, 10px 18px padding, 8px radius, white background (#ffffff) with #101828 text.
- Secondary button: Matches primary by token; differentiate via placement or label.
- Link button: Text-only, #101828, 0px radius.

Card
- White background, #475569 body text, 12px radius, 34px x 24px padding. Add a 1px border (#e5eaf0) when separation is needed.

### Hero banner
- Headline uses headline-lg (72px, Plus Jakarta Sans 800, -0.02em). Subhead in Inter body-md. Two CTAs side-by-side at 40px height with 8px radius. Keep outer spacing to xl (48px) above/below.

### Trust + feature inline list
- A compact line above the H1 for social proof. Below the CTAs, render a horizontal bullet list of four features using body-md and border-separated items.

### Steps trio (01/02/03)
- Three equal cards explaining Download, Customize, Go live. Use card token (12px radius, 34px/24px padding), a large numeric marker, and body-md copy. Separate columns with 1px #e5eaf0 dividers on desktop.

### Template library grid
- Section title with headline-sm (34px/700). Grid of cards using the card token; include a top-left badge (see next) and a large screenshot. Maintain md (28px) gutters; xl (48px) section padding.

### Template badges (PRO / Newest / Free)
- Small pill with 8px radius; use secondary (#13a374) or brand-shamrock-green (#4fa87e) as the fill and #ffffff text. Padding xs (8px) horizontally, 4–6px vertically.

### Plugin feature panels
- Two-up or stack on mobile. Each panel is a card with a short lead, three bullet features in body-md, and a CTA link. Consider a subtle border to distinguish from template cards.

### Performance scoreboard
- Four stat tiles: number in headline-md (49px, Jakarta 700), label in headline-xs (23px, Inter 600). Use card with 12px radius and optional sm shadow for emphasis.

### Testimonial quotes
- Card per quote, 12px radius, body-md copy. Initials avatar or small photo at top, name and company below in Inter with reduced opacity or #475569.

## Do's and Don'ts

- Do use Plus Jakarta Sans for all display headings; reserve Inter for body and small labels.
- Do space sections with xl (48px) top/bottom and use md (28px) gutters inside grids.
- Do rely on #e5eaf0 borders and the sm shadow sparingly; avoid heavy layered shadows.
- Don't introduce new greens—stick to #13a374, #1b8a4c, #4fa87e, and #83b08c for accents.
- Don't round corners beyond 12px; larger radii break visual cohesion.
- Don't style paragraph text in green; keep long-form copy in #101828 for accessibility.

## Agent Prompt Guide

Quick reference
- Text: #101828
- Background: #ffffff
- Border: #e5eaf0
- Accent: #13a374 (secondary)

1) Hero with proof and dual CTAs
- Container on #ffffff with 48px vertical padding. H1: "Travel sites, ready to book." in Plus Jakarta Sans, 72px, weight 800, letter-spacing -0.02em, color #101828, line-height 1.05. Subhead in Inter 16px/1.7, #101828 at 80% opacity. Two buttons: 40px height, 10px 18px padding, 8px radius, background #ffffff, text #101828; place 18px apart. Add a compact proof line above in Inter 16px.

2) Three-step setup row
- Three card columns using background #ffffff, 12px radius, 1px border #e5eaf0, padding 34px 24px. Step number as Jakarta Sans 49px/700, label as Inter 23px/600, description as Inter 16px/1.7. Use 28px gutters.

3) Template card component
- Card: #ffffff, 12px radius, 34px 24px padding, 1px border #e5eaf0. Title in Jakarta Sans 34px/700; summary in Inter 16px/1.7. Add a top-left pill badge with 8px radius, fill #4fa87e, text #ffffff, inner padding 8px.

4) Plugin panel (Inquiry/Reviews)
- Two-up grid on desktop, stack on mobile. Each panel as a card (spec above). Lead line in Inter 23px/600, features as bullets in Inter 16px/1.7. CTA link in #101828, 8px radius if turned into a button per token (40px height, white background).

5) Performance scoreboard
- Four tiles in a responsive grid. Number set in Plus Jakarta Sans 49px/700, label in Inter 23px/600. Tile style: #ffffff, 12px radius, 24px padding (use card padding), optional shadow rgba(16,24,40,0.28) 0 6px 14px. Keep 28px gutters and 48px section padding.

## Similar Brands

- Kadence WP — similar calm marketing with performance claims; Kadence leans more into block-editor visuals.
- GeneratePress — restrained type and speed-first messaging; more monochrome, fewer accent greens.
- ThemeIsle (Neve) — clear template library and proof points; brighter color accents and more playful illustrations.
- Elegant Themes (Divi) — template-forward pitch with demos; heavier visuals and denser marketing sections.
- Astra by Brainstorm Force — large catalog of starter templates; broader audience beyond travel and more varied color accents.

More like this

Browse WordPress →
simplystatic.com
Simply Static Technology
Simply Static
Secure, fast, zero-maintenance Static WordPress—host, manage, and monitor.
Landing · 21 hours ago
wpmanageninja.com
WP Manage Ninja Software
WP Manage Ninja
A WordPress plugin ecosystem homepage running Work Sans and one blue accent across fourteen near-identical product cards — disciplined to the point of a visible counter-animation glitch.
Landing · 1 week ago
oxygenbuilder.com
Oxygen Builder WordPress
Oxygen Builder
Pixel-perfect design meets WordPress power
Homepage · 9 months ago
wprssaggregator.com
WP RSS Aggregator WordPress
WP RSS Aggregator
Efficiently gather and display content from various sources in one place, providing your audience with a rich, streamlined curation experience.
3 years ago