Design Foundation · v1

Beds on the Bend

The token system and UI kit for the booking layer of Toledo Bend. Calm, curated, still-water hospitality. This is the source of truth the Next.js build inherits.

Section 1

Color system

Four locked "Still Water" brand colors, a documented derived tier that carries the accessibility load, and an honest map of what may and may not be set as text. Components reference semantic roles, never these raw values.

Brand primitives (locked)

Ink · surface
Deep teal
#215D5A

Primary. Body ink on cream, and the dark surface for hero, footer, bands.

Fill only
Gold
#C6A059

Accent. Rules, dots, the CTA fill, the map pin. Never set as text.

Page
Cream
#FDF9F3

Page surface, lightest. Also the body text reversed on teal.

Wash
Deep cream
#F4ECD8

Alternating section wash and quiet card surface.

Derived tier (documented, not new brand colors)

Raised dark
Teal deep
#17423F

Raised panel on dark, footer floor.

Deepest ink
Ink deep
#14211F

Deepest ink, and the label on the gold CTA (6.79:1).

Muted text
Teal muted
#3E6360

Secondary text on cream. 6.34:1.

Accent text
Bronze
#8A6A28

The gold family made legible as text on cream. Price, accent links. 4.80:1.

Text on teal
Gold soft
#E9CE93

Accent and link text on the teal surface. 4.94:1.

Hairline
Sand deep
#E7DCC0

Hairline borders and chip fills on cream.

Blessed text pairings (WCAG AA verified)

Deep teal on cream
7.20:1 · AA · AAA large · body ink
Cream on deep teal
7.21:1 · AA · AAA large · body reversed
White on deep teal
7.56:1 · AA · solid CTA label
Ink deep on gold
6.79:1 · AA · the booking CTA label
Bronze on cream
4.80:1 · AA · accent text, price
Gold soft on teal
4.94:1 · AA · accent text on dark
Teal muted on cream
6.34:1 · AA · secondary text
Deep teal on wash
6.42:1 · AA · ink on section wash

Forbidden as text

✕
Gold on cream

2.33:1, fails as text. Gold is a fill, rule, and dot color. For gold-toned text on cream, use bronze.

✕
Gold on teal

3.09:1, fails body text. For accent text on teal, use gold soft.

✕
Sand on cream

1.13:1, effectively invisible. Sand is a surface, never a text color.

Section 2

Typography

Fraunces for display: a warm, high-contrast old-style serif with soft terminals, drawn mixed-case for a hospitality feel that reads related to but clearly apart from the Living hub's austere all-caps. It is the provisional wordmark face until the vector kit locks. Mulish for body and UI: a quiet, rounded humanist sans that stays legible at booking-form sizes.

DisplayFraunces 600 · fluid
Still water, close to shore.
H1Fraunces 600
Ten minutes to either shore
H2Fraunces 600
The vetted way to stay on the Bend
H3Fraunces 600
What every Beds home promises
H4 / labelMulish 700 caps
Sleeps, beds & baths
KickerMulish 700 · tracked
Waterfront · Sabine County
LeadMulish · fluid
A calm, dock-side cabin with room for eight, five minutes from the marina and the day's first cast.
BodyMulish 400 · 17px
The porch faces due west, so the light you booked it for arrives every evening without fail. Coffee at the rail, a slow morning on still water, and the lake doing the rest. Everything here is checked, cleaned, and confirmed before you arrive.
CaptionMulish · 13px
Rates shown before taxes and the one-time cleaning fee.

Section 3

Space & grid

An 8px-based scale drives every gap, pad, and rhythm. Reading columns are capped so text never runs too wide to track.

Spacing scale (8px base)

space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-748px
space-864px

Containers & measure

Reading measure66ch · listing story, policies
Content container1200px · most sections
Wide container1360px · galleries, footer
Gutterclamp(1.25rem, 5vw, 3rem)

Section 4

Masthead & nav

The wordmark lockup (placeholder emblem plus provisional Fraunces face), primary nav, and the booking CTA that rides top-right on every page.

Beds on the Bend Toledo Bend, Texas
Check dates

Section 5

Buttons & links

Two filled tiers carry the hierarchy. The gold CTA is the booking action, ink-deep label at 6.79:1. The solid teal is its inversion partner, cream label at 7.21:1. Ghost and text buttons stay quiet.

Book this stay Check availability Save home See all photos
Waterfront Private dock Pet friendly Editor's pick

Section 6

Property cards

The catalog unit: photo, location, name, the sleeps / beds / baths facts, nightly price, and the Beds Verified seal riding the image. Three-up on desktop, one-up on mobile.

Beds Verified
Lakehouse · west porch

Housen Cove · Sabine County

The Cedar Porch

Sleeps 8 4 beds 2 baths
$240 / night View
Beds Verified
Dock & still water

Six Mile · Sabine County

Sabine Boathouse

Sleeps 6 3 beds 2 baths
$195 / night View
Beds Verified
Pines & screened porch

Pine Island · Sabine County

The Timber Room

Sleeps 4 2 beds 1 bath
$165 / night View

Section 7

The Beds Verified seal

The trust mark of the whole venture: every home is walked, checked, and confirmed before it earns the seal. It is an object, not a phrase, and it appears on cards, on the listing header, and standalone. Gold seal on light, gold-soft on dark, both AA.

Beds Verified Beds Verified Walked in person · Cleaned to checklist · Amenities confirmed
Beds Verified Beds Verified

Section 8

Form fields

The booking primitives: date range, guests, and email capture. Inputs hold a 16px floor so iOS never zooms on focus. Grouped fields share one framed container the way a date picker reads.

Check in
Check out
Guests
Email for your confirmation
Request these dates

Section 9

Footer

Deep teal floor, gold-soft column heads, gold underline on hover. The endorser line stays owner-facing and never appears on a public surface.