Skip to content
DesignMunkDesignMunk Submit a site

Outsite

outsite.co
Work anywhere. Live differently. Beautiful places to stay.
Lifestyle Travel Next.js Tailwind Homepage bookman Old Style Raleway
Share Visit site
outsite.co DESKTOP · 1440
Outsite

AI Breakdown

Design export

---
version: alpha
name: Outsite
description: Work anywhere. Live differently. Beautiful places to stay.
colors:
  primary: "#2d2c2a"
  tertiary: "#f6da7b"
  neutral: "#f7f2ea"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: bookmanOldStyle
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Raleway
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.039em
  headline-sm:
    fontFamily: bookmanOldStyle
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.032em
  headline-xs:
    fontFamily: bookmanOldStyle
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: -0.043em
  body-md:
    fontFamily: Raleway
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 56px
components:
  button-primary:
    backgroundColor: "#d9d2c6"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 4px
    height: 48px
  button-secondary:
    textColor: "#161615"
    rounded: "{rounded.full}"
    padding: 4px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Outsite: Bookman Headlines on a Cream Travel Booking Canvas

## Overview

Outsite's UI is warm, calm, and editorial. It serves remote workers and digital nomads who need quick availability checks without a loud, high-saturation palette. Spacing is generous and copy-led; density stays low, with visual hierarchy handled by serif headlines over a cream surface. When tokens do not specify, prefer minimal chrome, ample whitespace, and clear, high-contrast CTAs.

## Colors

- **primary (#2d2c2a):** Core ink for headlines, body text, and high-contrast UI elements.
- **tertiary (#f6da7b):** Accent for badges, highlights, and limited emphasis—not for large backgrounds.
- **neutral (#f7f2ea):** Brand cream used as the default page background and card surfaces.
- **surface ({colors.neutral}):** Alias of neutral for surfaces to keep implementation consistent.
- **on-surface ({colors.primary}):** Alias of primary for text and icons placed on neutral surfaces.

## Typography

- Bookman Old Style (headline-lg, headline-sm, headline-xs): Custom, self-hosted display serif. Use for hero statements, section intros, and editorial pull lines. Since it is proprietary for agents, substitute with Google fonts of similar warmth and x-height: Lora, Libre Baskerville, or Literata.
- Raleway (headline-md, body-md): Google font; loadable. Use for subheads, UI labels, and all body copy. Body runs at 16px/1.5; headline-md is 36px with slight positive letterspacing for clarity.
- Letterspacing is intentionally tight on Bookman sizes (negative values) to keep large lines compact; maintain as specified in tokens.
- Emoji support is available via Noto Color Emoji if needed; sans fallbacks like Roboto or Noto Sans are acceptable for system UI where Raleway isn't available.

## Layout

The spacing scale is 8px-based: xs 8, sm 16, md 24, lg 40, xl 56. Use sm (16) for inner padding, md (24) for gaps within groups, and lg/xl for section separations. Cards default to 16px internal padding. Grids should land on multiples of 8px; keep controls in a 48px vertical rhythm to match buttons and inputs. Content width can remain generous; rely on whitespace rather than dividers.

## Elevation & Depth

Depth is subtle. The only drop layer is "sm," a faint 0–3px shadow for floating controls. Larger shadows are none. Structure is conveyed with the neutral surface, the 1px inset 'inner' shadow as a border substitute on light backgrounds, and tonal contrast. Use borders sparingly; prefer section spacing and typographic scale for hierarchy.

## Shapes

Two radii define the language: sm (8px) for containers and cards, and full (9999px) for interactive pills—buttons, inputs, and segmented search controls. Roundness signals interactivity; squared edges (0px) are reserved for textual links and bare lists.

## Components

Buttons and cards are the foundation; keep sizes, colors, and radii exact.

- Button — Primary: background #d9d2c6, text {colors.primary}, height 48px, padding 4px, rounded 9999px. Use for key CTAs like Search, Apply, or Sign up.
- Button — Secondary: text #161615, height 48px, rounded 9999px; apply border or tonal background from the surface; reserve for less prominent actions.
- Button — Link: text {colors.primary}, no radius; use where a textual affordance is sufficient.
- Card: background {colors.neutral}, text {colors.primary}, radius 8px, padding 16px; use for lists such as deals or location tiles.

### Availability Search Bar
- Full-width pill container using rounded full (9999px). Group four segments: Location, Check-in, Check-out, Guests. Inputs align to 48px height; internal gaps sm (16px). Apply the 'inner' inset border and optional sm shadow for lift; CTA uses the button-primary spec.

### Announcement Bar
- Thin strip above the header for promos (body-md, Raleway 16px). Text {colors.primary} on {colors.neutral}. Keep padding xs (8px) and avoid shadows.

### Locations Grid
- Use Card spec with radius 8px. Section title in headline-md (Raleway 36px). Location names can use headline-sm (Bookman Old Style 28px) over imagery or in captions on the neutral surface.

### Membership Pricing Cards
- Two cards side-by-side on desktop. Headlines in headline-sm; price emphasized in headline-md. Badges like "Most Popular" and "Best Value" use the tertiary accent #f6da7b. Primary buttons at 48px height.

### Deals List / Carousel Item
- Card background {colors.neutral}, 16px padding. Deal label chips may use tertiary for emphasis. Title in headline-xs or headline-sm depending on length; CTA as button-link or primary for featured deals.

### Testimonial Block
- Quote can use headline-xs (Bookman 21px) with generous line height; author details in body-md (Raleway 16px). Keep padding lg (40px) and no heavy shadow.

### KPI Stats Row
- Large numerals (headline-lg 48px) with compact line height 1. Labels in body-md. Space items with md (24px) gutters within a neutral card.

### Newsletter Signup
- Two pill inputs (First Name, Email) at 48px height with rounded full and inner inset border. Submit uses button-primary. Keep vertical spacing md (24px).

## Do's and Don'ts

- Do set all body text in Raleway 16px/1.5 on #f7f2ea with #2d2c2a ink for maximum legibility.
- Do keep interactive controls at 48px height and fully rounded; mix with the 'inner' inset border to define groups.
- Do reserve #f6da7b for highlights, badges, and chips; overuse dilutes emphasis.
- Don't introduce heavy drop shadows; use the sm shadow only when a control needs lift over imagery.
- Don't mix additional radii; cards are 8px, pills are 9999px, links are 0px.
- Don't substitute fonts arbitrarily; if Bookman Old Style is unavailable, use Lora, Libre Baskerville, or Literata, not geometric serifs or display faces.

## Agent Prompt Guide

Color reference
- Text: #2d2c2a
- Background: #f7f2ea
- Border: #2d2c2a (use the 1px 'inner' inset where possible)
- Accent: #f6da7b

1) Build the hero with headline and search
- Background video or image; overlay text in Bookman Old Style, 48px, weight 400, letter-spacing -0.025em, line-height 1, color #f7f2ea or #2d2c2a depending on contrast.
- Place a full-width pill search bar below: container rounded 9999px on #f7f2ea with a 1px inner inset; four segments (Location, Check-in, Check-out, Guests) in Raleway 16px; CTA button 48px high using #d9d2c6 background and #2d2c2a text, radius 9999px, padding 4px.

2) Create a two-card membership section
- Section heading in Raleway 36px.
- Each card: background #f7f2ea, radius 8px, padding 16px. Plan title in Bookman Old Style 28px; price in Raleway 36px. Badge chip uses #f6da7b. Primary button 48px high, #d9d2c6 fill, #2d2c2a text, radius 9999px.

3) Deals list item
- Use a card (bg #f7f2ea, radius 8px, padding 16px). Deal label chip in #f6da7b; title in Bookman Old Style 21px; metadata in Raleway 16px. Add a button-link in #2d2c2a or a primary button per prominence.

4) Newsletter signup bar
- Neutral background #f7f2ea. Two inputs at 48px height, rounded 9999px with inner inset. Labels in Raleway 16px. Submit as primary button (#d9d2c6 bg, #2d2c2a text, radius 9999px).

## Similar Brands

- Airbnb: Soft surfaces and strong typographic hierarchy; Outsite is warmer and uses a serif headline where Airbnb stays sans.
- Selina: Also targets remote workers with lifestyle content; Outsite is calmer with cream backgrounds and fewer saturated colors.
- Sonder: Minimal UI for booking; Outsite leans more editorial with serif display and badge accents.
- Remote Year: Community-centric travel with large photography; Outsite's palette is warmer and components are more pill-driven.
- The Hoxton: Boutique hotel vibe with serif display; Outsite is less luxe, more functional for availability search.

More like this

Browse Lifestyle →
joinpause.co
Pause Event
Pause
Meet one new Londoner each week—face-to-face, with no phone distractions.
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago
unrivaledsportsco.com
Unrivaled Sports Ecommerce
Unrivaled Sports
Unrivaled selection for serious sports collectors and fans.
Homepage · 6 days ago
overlay.com
Overlay AI
Overlay
The Future of Beauty is Automated
Homepage · 7 days ago