Design Foundation · v1.1 · dark-first

Beds on the Bend

The token system and UI kit for the booking layer of Toledo Bend. Deep teal is the enveloping world, gold is the accent, cream is the punctuation. This is the source of truth the Next.js build inherits.

Section 1

Color system

Four locked "Still Water" brand colors on the darker, bluer teal, a documented derived tier that carries the dark-first accessibility load, and an honest map of what may and may not be set as text. Components read semantic roles that flip between the dark ground and the cream punctuation ground.

Brand primitives (locked 2026-07-08)

Ground · ink
Deep teal
#193543

Primary. The enveloping page ground, and the body ink on cream bands.

Fill only
Gold
#C6A059

Accent. Rules, dots, the CTA fill, the map pin. Not a text color.

Punctuation
Cream
#FDF9F3

The light punctuation band, and the body text reversed on teal.

Light wash
Deep cream
#F4ECD8

Secondary light band and quiet card surface.

Derived tier (recomputed against #193543)

Raised dark
Teal raised
#234A5A

Raised cards and panels lifting off the dark ground.

Deepest
Ink deep
#0F2531

Footer floor, deepest recess, and the label on the gold CTA (6.45:1).

Muted on dark
Cream muted
#CFC3AE

Secondary body text on the dark ground. 7.40:1.

Accent text
Gold soft
#E4C583

Accent and link text on dark. 7.73:1 on ground, 5.74:1 on cards.

Muted on light
Teal muted
#3C5763

Secondary text on cream bands. 7.32:1.

Accent on light
Bronze
#8A6A28

Warm accent text and price on cream bands. 4.80:1.

Blessed text pairings (WCAG AA verified)

Cream on deep teal
12.27:1 · AAA · body on the dark ground
Cream muted on teal
7.40:1 · AA · secondary body on dark
Gold soft on teal
7.73:1 · AA · accent / link text on dark
Cream on raised teal
9.11:1 · AA · body on raised cards
Gold soft on raised
5.74:1 · AA · accent text on cards
Ink deep on gold
6.45:1 · AA · the booking CTA label
Deep teal on cream
12.27:1 · AAA · ink on cream bands
Teal muted on cream
7.32:1 · AA · secondary on light
Bronze on cream
4.80:1 · AA · accent text, price

Forbidden as text

✕
Gold on cream

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

✕
Gold on raised teal

3.90:1, fails body text. Raw gold clears AA only on the deep base ground, so use gold soft for any text on dark.

✕
Sand on cream

1.12: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. It is the provisional wordmark face until the vector kit locks. Mulish for body and UI: a quiet, rounded humanist sans set a hair looser on the dark ground for comfortable reading.

This section is a cream band, one of the rhythm breaks in an otherwise dark page.
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), sentence-case nav, and the one small gold CTA that rides top-right on the dark ground.

Beds on the Bend Toledo Bend, Texas
Check dates

Section 5

Buttons & links

Restrained by design: sentence case, tight padding, quiet weight. On the dark ground a small gold button already carries the room, so the gold CTA is the signature action and the outline is its calm partner. Premium is confidence, not size.

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

Section 6

Property cards

The catalog unit shown on a cream band: 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. On the dark ground these same cards render as raised teal panels.

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. The gold-tint fill and gold seal hold on the dark ground, and on a cream band the label deepens to bronze automatically.

Beds Verified Beds Verified Walked in person · Cleaned to checklist · Amenities confirmed
Beds Verified Beds Verified The same seal on a cream punctuation band.

Section 8

Form fields

The booking primitives: date range, guests, and email capture. Inputs hold a 16px floor so iOS never zooms on focus. On the listing, the booking panel sits on a cream band so the transaction reads as the bright, trustworthy focal point against the dark page.

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

Section 9

Footer

The deepest ink-teal floor closes the page. Gold-soft column heads, gold underline on hover. The endorser line stays owner-facing and never appears on a public surface.