Skip to content
DesignMunkDesignMunk Submit a site

Relocate Now

relocatenow.io
Making your move & life abroad simpler
Software Travel Webflow Homepage Instrumentsans Roca Two-Th
Share Visit site
relocatenow.io DESKTOP · 1440
Relocate Now

AI Breakdown

Design export

---
version: alpha
name: Relocate Now
description: Making your move & life abroad simpler
colors:
  primary: "#620035"
  secondary: "#f0e8d1"
  tertiary: "#ff4121"
  neutral: "#fcf8ec"
  brand-tomato-burst: "#d7221d"
  brand-thuja-green: "#115e10"
  brand-cheerful-yellow: "#fcc924"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: RocaTwo-Th
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
  headline-md:
    fontFamily: Rocath
    fontSize: 47px
    fontWeight: 100
    lineHeight: 1.36
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: RocaTwo-Th
    fontSize: 34px
    fontWeight: 100
    lineHeight: 1.18
  headline-xs:
    fontFamily: Instrumentsans
    fontSize: 25px
    fontWeight: 100
    lineHeight: 1.2
  body-md:
    fontFamily: Instrumentsans
    fontSize: 18px
    fontWeight: 100
    lineHeight: 1.4
rounded:
  sm: 8.5px
  full: 9999px
spacing:
  xs: 10px
  sm: 18px
  md: 26px
  lg: 48px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 21px 29px
    height: 58px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 21px 29px
    height: 58px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 14.175px 0px 0px
---

# Relocate Now: Warm Sand UI with Tomato CTAs

## Overview

Relocate Now is friendly and reassuring. The palette is warm and low-contrast with a single high-energy accent. Type hierarchy is confident but not shouty, and spacing is generous, aiming for calm over density. Use centered layouts and wide breathing room when no token prescribes a rule; the interface should feel helpful, human, and steady.

## Colors

- **primary (#620035):** Plum ink for headlines, navigation, and core text.
- **secondary (#f0e8d1):** Warm sand for section backgrounds and soft panels.
- **tertiary (#ff4121):** Hot tomato accent for primary CTAs and critical highlights.
- **neutral (#fcf8ec):** Ivory wash for the main surface and cards.
- **brand-tomato-burst (#d7221d):** Alert tomato for destructive or error states.
- **brand-thuja-green (#115e10):** Success green for completed steps and confirmations.
- **brand-cheerful-yellow (#fcc924):** Notice yellow for pending or warning states.
- **surface ({colors.neutral} -> #fcf8ec):** Default page canvas.
- **on-surface ({colors.primary} -> #620035):** Standard text and icon color on surfaces.

## Typography

- Headline LG — RocaTwo-Th, 64px/1, weight 400. Display headlines in hero and major section intros. Source: self-hosted/custom; not directly available to agents. Substitutes: Jost (Google), Nunito (Google), Quicksand (Google).
- Headline MD — Rocath, 47px/1.36, letter-spacing -0.014em, weight 100. Secondary section headers and large numerals. Source: self-hosted/custom. Substitutes: Jost Light (Google), Poppins Light (Google), DM Sans Light (Google).
- Headline SM — RocaTwo-Th, 34px/1.18, weight 100. Card and panel titles. Same substitutes as Headline LG.
- Headline XS — Instrumentsans, 25px/1.2, weight 100. Small section leads and callouts. Source: self-hosted/custom. Substitutes: Inter (Google), Manrope (Google), Source Sans 3 (Google).
- Body MD — Instrumentsans, 18px/1.4, weight 100. Paragraphs and UI copy. Use the same substitutes above when the custom family is unavailable.

## Layout

Spacing steps are coarse and readable: 10, 18, 26, 48, and 100px. Use xs/sm for intra-component gaps, md for card padding and stack spacing, lg for section gutters, and xl for vertical section rhythm. A centered, fluid grid with generous side gutters suits the content; align key actions in the first column and keep hero sections spacious (xl top/bottom).

## Elevation & Depth

All measured shadows are none. Hierarchy is conveyed with tonal layers (neutral vs. secondary), 1px insets for interactive states using the accent, and clear spacing. When separation is needed, use borders or background shifts—not drop shadows. Success, warning, and error states rely on the green/yellow/red accent set rather than elevation.

## Shapes

Two radii define the language: 8.5px for cards and tiles, and 9999px for pills. Use the pill radius for buttons, chips, and badges; reserve 8.5px for content containers, images, and country/service cards. Shapes signal interactivity—pills invite action, soft-cornered rectangles hold information.

## Components

- Button — Primary: #ff4121 background, #fcf8ec text, 58px height, 21px/29px padding, pill radius. Secondary: #ff4121 text, pill radius, 58px height; pair with a 1px keyline on sand backgrounds. Link: #620035 text, no radius, inline usage. Maintain one clear primary per view.
- Card: #fcf8ec background, #620035 text, radius 8.5px, padding 14.175px top (plus layout padding); use for country and service tiles.

### Global Navigation Bar
A slim top bar on the sand background with text in #620035. Right-aligned actions include an outlined Sign up (secondary button, 58px pill). Keep item gaps to sm (18px).

### Hero with Dual CTAs
Centered headline using Headline LG 64px with plum text. Body MD 18px paragraph below. Two buttons: Primary (#ff4121) and Secondary outlined, both 58px pills with 21/29 padding, separated by sm–md spacing.

### Product Snapshot Panel
A large neutral card (8.5px radius) showing the app dashboard. Use status chips: success #115e10, warning #fcc924, and errors #d7221d. Headlines inside at Headline XS 25px; body at 18px.

### Country Summary Cards
A responsive grid of cards for Georgia, Portugal, Spain, and UAE. Card background #fcf8ec, titles in plum, metric labels in Body MD. Optional "Coming soon" badge uses #fcc924 with plum text; Learn more is a link style.

### Services Grid
Four tiles (Relocation, Taxes, Living essentials, Housing). Apply 8.5px radius, md internal spacing, and titles in Headline XS 25px. Descriptions at 18px; Read more as a link.

### Stat Counters
Three KPIs (e.g., 1350+, 60+, 2600+). Set numerals in Headline MD 47px with tight letter-spacing and labels in Body MD 18px. Stack items with md spacing, keep band padding at lg–xl.

### Discovery Call Band
A call-to-action stripe on the sand background with a single primary button. Keep button 58px tall and centered; use lg vertical padding.

## Do's and Don'ts

- Do reserve #ff4121 for primary actions and critical highlights; avoid using it for long text blocks.
- Do keep pill buttons at 58px height with 21px/29px padding for visual consistency.
- Do space sections generously (xl ≈ 100px) and prefer tonal panels over shadows.
- Don't mix pill and square corners in one component; use 8.5px cards with 9999px buttons.
- Don't place outlined secondary buttons on identical sand backgrounds without a visible keyline; add a 1px border for contrast.
- Don't introduce new accent colors for status; use green (#115e10), yellow (#fcc924), and tomato-burst (#d7221d).

## Agent Prompt Guide

Quick color reference — Text: #620035, Background: #fcf8ec (or #f0e8d1 for panels), Border/Keyline: #f0e8d1, Accent: #ff4121.

1) Build a centered hero with dual CTAs:
- Background #fcf8ec, max-width 1200px, vertical padding 100px.
- H1: 64px/1, weight 400, color #620035, font-family "Jost", "Nunito", system-ui (substitute for RocaTwo-Th).
- Paragraph: 18px/1.4, color #620035, font-family "Inter", "Manrope", system-ui (substitute for Instrumentsans).
- Primary button: 58px height, padding 21px 29px, radius 9999px, background #ff4121, text #fcf8ec.
- Secondary button: 58px height, padding 21px 29px, radius 9999px, text #ff4121 with a 1px border #ff4121 on background #f0e8d1.

2) Create a 3-column country card grid:
- Container gap 26px; each card background #fcf8ec, radius 8.5px, internal padding 26px.
- Card title: 34px/1.18, color #620035, font-family "Jost" (sub for RocaTwo-Th).
- Body text: 18px/1.4, color #620035, font-family "Inter".
- "Coming soon" badge: pill radius 9999px, background #fcc924, text #620035.
- "Learn more" as a link in #620035.

3) Services grid with icon tiles:
- Four tiles, background #fcf8ec, radius 8.5px, padding 26px, gap 26px.
- Title: 25px/1.2 in #620035, font-family "Inter" (sub for Instrumentsans Headline XS).
- Description: 18px/1.4 in #620035.
- Read more link styled as button-link (text #620035, no radius).

4) KPI band:
- Section background #f0e8d1, vertical padding 48px.
- Number: 47px/1.36, letter-spacing -0.014em, color #620035, font-family "Jost Light" (sub for Rocath).
- Label: 18px/1.4, color #620035.
- Optional CTA at end: primary button spec (58px tall, #ff4121).

## Similar Brands

- Airbnb — Friendly, warm neutrals and rounded pills; Airbnb leans heavier on imagery while Relocate Now emphasizes cards and status chips.
- Headspace — Soft, orange-forward accenting and pill buttons; Headspace is more illustration-led with larger white space blocks.
- Wise — Clear card layouts and strong status colors; Wise is cooler and more utilitarian, while Relocate Now is warmer and more welcoming.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 40 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 40 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago