v1.0 · web · iOS · android

Rugged, trail‑ready, trustworthy.

The design language behind Kashteo — the peer-to-peer marketplace for RVs, boats, ATVs and everything that gets you off the grid. Warm where it’s relaxed, precise where it counts: trust, money, and safety.

Capable guide

Not a salesperson. Earthy, energetic, plain-spoken with campfire warmth.

Trust forward

Verified owners, real photos, protection shown right next to the CTA.

Calm in money

Plain language at checkout, deposits, and claims. No fee surprises.

Voice & tone

Clear over clever · concrete · calm in money moments

We say

Book your rig.

Not

Commence your odyssey.

We say

No rigs match yet — widen your dates or map.

Not

Zero results found in our database.

We say

You're booked. Adventure on.

Not

Transaction successfully completed.

We say

Sleeps 6 · Towable by a half-ton truck · Delivered.

Not

Spacious unit with various features.

Color

Pine brand · Ember CTA · warm neutrals · avoid pure #fff/#000

Pine — primary brand

600 primary · 700 hover/headers

#EEF4F0

100

#D6E5DC

200

#AECBBA

300

#7FAB90

400

#4E8568

500

#2F6A4F

600

#245540

700

#1C4233

800

#143026

900

#0C1E18

Ember — accent / CTA

500 CTA · 600 hover · 700 text-on-light

#FDF1EA

100

#FAD9C6

300

#F2A06B

500

#E8632A

600

#CF4F1C

700

#A63D14

Warm neutrals — Sand / Stone

bg, surfaces, borders, text

sand.50

#FAF7F2

sand.100

#F2EDE4

sand.200

#E4DBCC

stone.400

#A89F90

stone.600

#6B6256

stone.800

#3A352D

stone.900

#211D18

Semantic & support

states + category accents

success

#2E7D5B

warning

#E0A02E

danger

#C0412E

info

#3B7AA8

sky

#5BA3C7

clay

#B5612F

dusk

#6E5A8C

Usage rules

Pine 600 = primary brand. Headers, nav, key surfaces.
Ember 500 = CTA. One per view (Book, Request, Publish).
Backgrounds warm (Sand 50), text Stone 800/900 — never pure black/white.
Color never alone — always pair with an icon or label.

Category accents

RV Pine / Ember

Boat Sky — water

ATV Clay — trail

Snow Dusk — winter

Typography

Archivo display · Inter body · tabular numerals for money

display

3.0 / 1.05

Adventure on.

2.25 / 1.1

Find your rig

1.75 / 1.2

Lake-ready boats

1.375 / 1.3

Pine Ridge Class C

body-lg

1.125 / 1.6

Book by the day, off the grid.

body

1.0 / 1.6

Sleeps 6 · 24ft · Delivers to site

body-sm

0.875 / 1.5

Bend, OR · 42 miles away

label

0.75 / 1.4

INSTANT BOOK · VERIFIED

Archivo

Display & headings. Strong, slightly geometric, semi-condensed for prices.

Inter

Body & UI. Workhorse, excellent at small sizes. $189/night · 4.96

Spacing, radius & elevation

Base 4 · friendly radii · low warm shadows

Spacing scale px · base 4

Radius

sm 6

md 10

lg 16

xl 24

Elevation

Components

Each maps 1:1 to a Rails ViewComponent

Button

Badge / Tag

Instant book Verified New Superhost

FilterChip

BookingStatusBadge

Requested Accepted Paid Active Completed Cancelled

StarRating

4.96 (128 reviews)

Input · Select · Toggle · Checkbox · Stepper

Where to?

Search by city, park, or marina

Tokens reference

Copy into tailwind.config.js / CSS variables

tokens.css

:root {
  /* color — brand */
  --pine-600:#245540;  --pine-700:#1C4233;  --pine-900:#0C1E18;
  --ember-500:#E8632A; --ember-600:#CF4F1C; --ember-700:#A63D14;
  /* warm neutrals */
  --sand-50:#FAF7F2;   --sand-100:#F2EDE4;  --sand-200:#E4DBCC;
  --stone-600:#6B6256; --stone-800:#3A352D; --stone-900:#211D18;
  /* semantic */
  --success:#2E7D5B; --warning:#E0A02E; --danger:#C0412E; --info:#3B7AA8;
  --sky:#5BA3C7;     --clay:#B5612F;    --dusk:#6E5A8C;
  /* type */
  --font-display:'Archivo'; --font-body:'Inter'; --font-mono:'JetBrains Mono';
  /* radius */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  /* elevation (warm, low) */
  --shadow-sm:0 1px 2px rgba(33,29,24,.08);
  --shadow-md:0 4px 12px rgba(33,29,24,.10);
  --shadow-lg:0 12px 28px rgba(33,29,24,.14);
}
.theme-dark {
  --bg:var(--pine-900); --surface:#241F1A; --text:var(--sand-100);
}