Cactus Pad · Style guide · Draft 1

Style guide

Everything below is a set of options to pick from: four palettes, three type pairings, two illustration lanes, and the rules for how art and UI sit on the page. Use the palette bar to preview the type, art, and components in any of the four color sets.

Preview in
Part 1

Color

Six colors with the same six jobs in every palette: ground, ink, primary, secondary, accent, pop. The bar under each shows roughly how much of a page each color covers.

A

Poolside

Straight Palm Springs. Motel-sign turquoise, mustard, coral, flamingo pink on cream. Cheerful and retro. Least tied to St. George.

GroundCream#FBF4E6
InkWalnut Black#262019
PrimaryCoral#E4704F
SecondaryPool Turquoise#2E9E9A
AccentMustard#E8B33F
PopFlamingo#F3A5B4
B

Fish Rock

Recommended

From the view. White sandstone ground, the red streak as primary, lava black ink, sage from the fairways, one borrowed pool turquoise so it reads mid-century rather than national park.

GroundWhite Sandstone#F5ECDA
InkLava#2D2926
PrimaryRed Streak#BE4B2B
SecondaryPool Turquoise#3E9C95
AccentSunset#E7A33B
PopSage#9DAE8E
C

Prickly Pear

Misti's garden as the brand. Pad green primary, magenta bloom, tuna-fruit wine for depth, on sand. Fresher and greener. Puts the cactus first.

GroundSand#F2E6CF
InkSoil#2B2A22
PrimaryPad Green#4F7F5A
SecondaryBloom#D2477E
AccentMustard#E6B84F
PopTuna#8E2C5B
D

Desert Modern

The quiet one. Palm Desert late afternoon: terracotta, dusty rose, olive, walnut, faded turquoise. Muted and grown-up. More Alexander house than motel sign.

GroundAdobe#EEE3CF
InkWalnut#4A3628
PrimaryTerracotta#C7623D
SecondaryFaded Turquoise#6FA39E
AccentDusty Rose#E5B8A5
PopOlive#7A8A5A
Part 2

Type

Three pairings, each shown as the wordmark, a heading, a tag, body copy, a button, and a slice of calendar. All are free Google Fonts. None of them are Papyrus.

1

Cooper Era

Recommended

A soft, chunky 1970s serif for the wordmark and headings, with a Futura-style geometric sans for everything else. This is the pairing that matches the cut-paper print: friendly, rounded, a little groovy, and still crisp in the UI.

Cactus Pad
Cactus Standard Time
Book a stay. Bring sunscreen.

A private desert hideout in The Ledges, St. George. White cliffs out the window, Pine Valley Mountain on the horizon, and a cactus garden that is frankly getting out of hand.

Sign in with Google
October · Upcoming stays
1
2
3
4
5
6
7
Fraunces 900 Soft · Jost 400/600
2

Motel Sign

A brush script for the wordmark only, tall condensed caps for headings like a roadside sign, and the same geometric sans for body. The loudest and most kitschy. Great for neon-sign moments, easy to overdo.

Cactus Pad
Cactus Standard Time
Book a stay. Bring sunscreen.

A private desert hideout in The Ledges, St. George. White cliffs out the window, Pine Valley Mountain on the horizon, and a cactus garden that is frankly getting out of hand.

Sign in with Google
October · Upcoming stays
1
2
3
4
5
6
7
Yellowtail · Bebas Neue · Jost
3

Editorial Ink

A sturdy old-style serif for the wordmark and headings, a plain humanist sans for body, and a monospace for small labels. Matches the pen-and-ink drawing: quieter, bookish, like a good travel magazine. Least "motel," most "boutique."

Cactus Pad
Cactus Standard Time
Book a stay. Bring sunscreen.

A private desert hideout in The Ledges, St. George. White cliffs out the window, Pine Valley Mountain on the horizon, and a cactus garden that is frankly getting out of hand.

Sign in with Google
October · Upcoming stays
1
2
3
4
5
6
7
Young Serif · Karla · DM Mono
Part 3

Illustration

Your two references are two different lanes, and they work together. Cut paper for the big moments, ink for the small ones, both drawing the same plants: prickly pear, agave, the sun, the cliffs. Drawn below in the live palette.

I · Cut paper. Flat silhouettes, no outlines, no gradients. Shapes overlap and run off the edge. Sits on a dark panel with a light mat around it, like the print. Use for the hero, section dividers, and the sign-in page.
II · Ink and spot color. Hand-drawn black line with hatching, one flat spot color, white ground. Wobbly on purpose. Use for spot illustrations, empty states, the "not on the list" page, icons, and the confirmation email.
Same cast in both lanes Prickly pear, agave, barrel cactus, the sun, the white cliffs, a striped stool, a terracotta pot. No saguaros, no palms unless we're being ironic.
Cut paper owns the color It uses all six palette colors at once. Ink uses ink plus one spot color, never more.
No outlines in cut paper, no fills in ink That contrast is what keeps the two lanes from blurring into a third, worse thing.
Texture, lightly A faint paper grain on the dark panels and a slight "misregistration" offset on ink lines. Never drop shadows, never gradients.
Part 4

Composition

How art and content share the page, taken from the two references: the print is a centered bouquet on a dark panel with a light mat; the drawing is a single object stacked vertically with acres of white around it.

Art lives in a panel Cut-paper art always sits on a dark rectangle with a light mat around it, like a framed print. Never a full-bleed dark page.
One hero per page One big cut-paper piece at the top. Everything else is ink spots or no art at all.
Vertical stack, centered spine On phones everything centers on one vertical axis: wordmark, art, headline, button. Desktop can go two columns, but the hero stays centered.
Big, medium, dots Every cut-paper composition has one large shape, a few medium leaves, and a scatter of small dots. That rhythm is the whole trick.
Shapes overflow, text never does Leaves can run off the panel edge. Type always has clean margins and never sits on top of the art.
Generous white Ink spots get at least their own height in empty space around them. If it feels too empty, it's right.
The calendar is furniture, not art Flat, paper-colored, tight grid, booking bars in palette colors. No illustration inside the calendar.
Kitsch budget: one joke per screen A blinking motel sign, a fake review, a Cactus Standard Time clock. Never all three at once.
Part 5

UI pieces

The bits that get reused everywhere, drawn in the live palette. Buttons are pills with a hard offset shadow, like a printed sticker. Cards are paper. Tags are all-caps and tracked out.

Buttons

Sign in with GoogleBook itTake the tour

Tags and chips

Cactus Standard TimeAdmin3 nights

Motel sign

Members only · Family & friends

Card and stay row

The Lovelands
Oct 3 → Oct 6 · 3 nights · 4 guests
Grandma
Oct 7 → Oct 10 · 3 nights · 1 guest

Breeze block background

Part 6

Voice

The site pretends to be a commercial resort and everyone knows it isn't. The copy plays it straight and lets the reader find the joke.

Deadpan, not zany "Rated five stars by people who are related to us." Not: "OMG best condo EVER!!!"
Short sentences "Book a stay. Bring sunscreen." Buttons say exactly what happens.
Specific beats generic Name the mountain, the cliffs, the cactus. Never "stunning views."
Warm to insiders "Text Tom or Misti and they'll add you." Strangers get a polite wall, family gets a wink.