Skip to content
DesignMunkDesignMunk Submit a site

Guesty

guesty.com
The future of vacation rental management, built on AI.
AI Software Travel Next.js WordPress Homepage Figtree
Share Visit site
guesty.com DESKTOP · 1440
Guesty

AI Breakdown

Design export

---
version: alpha
name: Guesty
description: The future of vacation rental management, built on AI.
colors:
  primary: "#101010"
  secondary: "#16665d"
  tertiary: "#007a67"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-light-green-veil: "#e7f6ce"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Figtree
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Figtree
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: -0.008em
  headline-sm:
    fontFamily: Figtree
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: Figtree
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 30px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 48px
  xl: 152px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 12px 30px
    height: 50px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 30px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Guesty: Routing Hero Card and Pill CTAs Drive Focus

## Overview

Guesty's UI is pragmatic SaaS with a hospitality tilt: generous spacing, calm neutrals, and confident teal accents. It should feel capable and modern rather than flashy—clear headlines, direct copy, and fast routes to a demo or plan. Density is moderate: sections breathe (48–152px vertical rhythm) while cards group complex information into scannable blocks. When a token is missing, prefer clarity, whitespace, and border delineation over decorative color.

## Colors

- **primary (#101010):** Deep ink for headlines and core text.
- **secondary (#16665d):** Dark pine accent for secondary actions, icons, and emphasized links.
- **tertiary (#007a67):** Primary action teal for CTAs and key interactive states.
- **neutral (#ffffff):** Base canvas and default card fill.
- **border (#e5e7eb):** Subtle dividers, card outlines, tables, and input strokes.
- **brand-light-green-veil (#e7f6ce):** Gentle highlight wash for promos, selected states, or success moments.
- **surface (#ffffff):** Standard surface color for sections and cards.
- **on-surface (#101010):** Default text color on light surfaces.

## Typography

Figtree is the sole family across headings and body. It is freely available on Google Fonts and can be loaded directly. Substitutes with similar geometry and x-height: Inter, Manrope, or Roboto (all Google). Roles:
- Headline-lg (40/1.1, 400): Primary H1 for hero and major section tops.
- Headline-md (33/1.21, 400): H2s and important subheads.
- Headline-sm (27/1.19, 400) and Headline-xs (22/1.18, 400): Card titles, FAQ questions, and feature blocks.
- Body-md (18/1.4, 400): Paragraph copy, lists, and UI helper text. Emphasis is handled by size and placement rather than heavier weights.

## Layout

Spacing uses a short, purposeful scale: 6, 14, 24, 48, 152. Use 152px for hero and major section top/bottom padding. Default section rhythm is 48px; card internal padding pairs 16px (component token) with 24px gaps between items. Apply 24px gutters in two-column layouts (text + media), with 14px for tight control groups (chips, badges). Micro-adjustments and icon padding use 6px. Prefer a simple two-column grid at wide breakpoints, stacking to one column on mobile.

## Elevation & Depth

Depth is subtle. Cards rest primarily on borders (#e5e7eb). Use shadow-sm (0 2px 2px, 10% black) for sticky headers or small popovers; shadow-md (0 16px 64px, rgba(51,26,0,0.2)) for floating elements like the hero routing card or modal-like panels. Larger shadow tiers are disabled; rely on whitespace and tonal accents instead of heavy elevation.

## Shapes

Two radii define the language: 8px for structural surfaces (cards, inputs, thumbnails), and 30px for high-priority interactive controls (primary/secondary buttons, prominent pills). Button links are square (0px) to read as text-level actions. Use shape to signal intent: pill = action, 8px = information container.

## Components

Buttons
- Primary button: 50px height, 12px 30px padding, 30px radius, #007a67 background with white text. Use for "Get started," "Get a demo," and key submits.
- Secondary button: Same dimensions and 30px radius with text in #101010 on white; add a 1px #e5e7eb border when clarity is needed.
- Link button: Text-only, 0px radius; reserve for inline navigations.

Card
- 8px radius, 16px internal padding, white fill, #101010 text. Optional 1px #e5e7eb border; elevate with shadow-sm or shadow-md when floating.

### Hero Interest Picker
- A floating card over the hero with Headline-xs (22px) and six option tiles. Use 8px-radius item cards, 14px gaps, and a primary CTA at the bottom.

### "How it works" Steps
- Three cards in a row: each uses Headline-xs for the step title and Body-md for copy. 24px gaps, card borders #e5e7eb.

### Plan Tiers (Lite / Pro / Enterprise)
- Three vertical panels using Headline-sm for titles, small sublabels, and a CTA per panel. Maintain consistent 8px radius and 24px internal spacing.

### Feature Pill Tabs
- Six horizontal category selectors acting as secondary buttons (30px radius). Use #e7f6ce for selected background and #101010 text.

### AI Agents Capability Grid
- Multi-card grid listing agents (Data intelligence, Bank Reconciliation, etc.). Use Headline-xs for names, 18px body, 24px gaps, and optional shadow-sm.

### Logos + Metrics Band
- Narrow cards or inline badges with 6–14px internal padding on a white surface; divide rows with #e5e7eb.

### Testimonial Stack
- Quote cards with 8px radius, 24px padding, and Headline-sm for key stats (e.g., "10x").

### FAQ Accordion
- Question rows in Headline-xs (22px), answers in Body-md. 1px #e5e7eb dividers and 24px vertical padding per item.

## Do's and Don'ts

- Do use #007a67 and the 30px pill for the primary action every time; reserve #16665d for secondary emphasis.
- Do separate dense information with 8px-radius cards and #e5e7eb dividers instead of heavy backgrounds.
- Do keep headline weights at 400 as tokened; build hierarchy with size and spacing.
- Don't mix additional brand colors; the system relies on teal accents over white.
- Don't apply large shadows—only sm or md are defined; otherwise use borders and whitespace.
- Don't round structural cards to 30px; that shape is reserved for CTAs and pills.

## Agent Prompt Guide

Quick reference
- Text: #101010
- Background: #ffffff
- Border: #e5e7eb
- Accent (primary action): #007a67
- Secondary accent: #16665d

1) Two-column hero with routing card
- Container: white (#ffffff), top/bottom padding 152px.
- Left: H1 set in Figtree 40px/1.1 (400), body copy 18px/1.4.
- Right: floating card 8px radius, 16px padding, 1px border #e5e7eb, shadow-md. Inside: title 22px, grid of 6 option tiles (8px radius, 14px gaps). CTA button 50px tall, 30px radius, background #007a67, text #ffffff.

2) "How it works" step row
- Section padding 48px. Three cards (8px radius, 16px padding) in a 3-col grid with 24px gaps. Each card: title 22px, body 18px. Use a secondary button (text #101010, 30px radius) if needed.

3) Feature tabs band
- Horizontal row of six pill buttons, 30px radius, 12px 30px padding. Active state background #e7f6ce with #101010 text; inactive on white with #101010 text and 1px #e5e7eb border. Content area below uses cards with 24px gaps.

4) FAQ accordion
- List container on white. Each item: 24px vertical padding, question in Figtree 22px, answer in 18px. Use 1px #e5e7eb dividers. Primary CTA at section end (50px height, #007a67, 30px radius).

## Similar Brands

- Lodgify — Similar card-first SaaS layout and teal accents; Guesty uses stricter spacing and a more neutral type scale.
- Hostaway — Comparable PMS feature grid; Guesty's pill CTAs and borders are more disciplined.
- Mews — Hospitality software with clean white surfaces; Guesty leans warmer with teal actions and softer radii.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 38 minutes ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 2 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 14 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 15 hours ago