Design Foundation · v1.3 · 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

Icon set

The hand-drawn brand marks are identity. Everything else is the UI icon set: core glyphs from Lucide (ISC, on the 24px grid at stroke 2), and the lake and angler glyphs Lucide lacks, custom-drawn on the same grid so they sit together as one family. Icons inherit the context accent color.

Brand marks (hand-drawn identity)

emblem
ripple rule
verified seal
map pin

Core UI (Lucide, ISC)

guests
bed
bath
wifi
tv
parking
self check-in
a/c
fire pit
pines
coffee
grill
fridge
laundry
game room
ev charger
pets
hours
calendar
shield
no smoking
location
arrow
menu

Lake & angler (custom-drawn on the Lucide grid)

waterfront
lake view
dock
pier
boat launch
covered slip
boat trailer
swim ladder
marina
sailing
kayak
jet ski
fishing
rod storage
fish station
tournament
life jackets
dock light
hot tub
hammock
golf cart
screened porch

Section 7

Amenity pills

Every amenity is one chip: an icon plus a short label, on the shared pill system. Grouped so a listing can render the handful that apply. This is where the lake and angler glyphs earn their keep.

Water & boating

Waterfront Lake view Private dock Covered boat slip Boat launch on site Boat trailer parking Deep-water dock Fishing pier Fish cleaning station Kayaks & paddleboards Swim ladder Dock lighting Life jackets provided Jet ski friendly

Outdoor

Fire pit Screened porch Outdoor kitchen & grill Hammock Hot tub

Practical

Pet friendly Fast wifi / Starlink Washer & dryer Self check-in Central A/C Bunk room Game room Golf cart EV charger

Angler

Rod storage Bait fridge Early-departure coffee Tournament-ready

Section 8

Property cards

The catalog unit with real Toledo Bend Inn photography: image, location, name, the sleeps / beds / baths facts, nightly price, and the Beds Verified seal riding the photo. Raised teal panels on the dark ground, three-up on desktop, one-up on mobile.

Section 9

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 10

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 11

In-content divider

Section boundaries stay clean and straight. The wave lives on as a small in-content rule, the sibling of the ripple still-rule: a single low, irregular, non-repeating gold line that separates blocks inside a section. Used sparingly.

Full width, between two content blocks

Centered, as a quieter break

Section 12

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.