The Place at Buffalo Bayou

For one mid-rise. Cream and near-black with deep green bands, Fraunces headlines that end in gold italic, monospaced labels, tight corners and no shadows.

The picture the The Place at Buffalo Bayou site shows when a link to it is shared

The Place at Buffalo Bayou includes 13 pages.

“A page each” means one page for every item, such as one for every floor plan.

  • Amenities
  • Neighborhood
  • Gallery
  • Home
  • Contact
  • Floorplans
  • Floorplans, a page each
  • Residents
  • Schedule a tour
  • Accessibility
  • Privacy policy
  • Faqs
  • Apply

The pages of The Place at Buffalo Bayou offer 5 tools an assistant can use.

A tool is something a visitor's AI assistant can do on the page, such as request a tour. The pages describe their tools to the assistant through WebMCP, a browser standard.

  • request_tourWebMCP

    Request a tour of the community: the visitor's name, email and phone, the day they would like to visit, and the floor plan they are interested in.

  • send_messageWebMCP

    Send the leasing office a message: the visitor's name, email, an optional phone and move-in date, and what they want to ask.

  • request_applicationWebMCP

    Ask the leasing office to start an application, or to join a floor plan's waitlist: the visitor's name, email and phone, the floor plan, the move-in date and a message.

  • list_unitsWebMCP

    The homes, each with its floor plan, size, rent, floor, status (available, on-notice, pending or leased) and the date it is free; filter by status, beds or floor plan.

  • list_floorplansWebMCP

    The community's floor plans, each with beds, baths, size, the rent range, the total monthly price with its label, how many homes are free, and whether the plan takes a waitlist.

The Place at Buffalo Bayou has its own colours, fonts and corners.

A site you start from it keeps them until you ask Clutch to change them.

The Place at Buffalo Bayou is a mid-rise on Allen Parkway, across the trail from the bayou, and the site is warm, clipped and still. Cream grounds and near-black type, one deep green for the dark bands (the specials, the tour band, the footer, the photo viewer) and the main button, and one warm gold spent on the italic last words of every headline, the rule under a call to action and the tour button on a dark band. Fraunces sets every heading upright with its last words in italic, and the serif paragraph under a page's title; DM Sans sets the reading; JetBrains Mono sets the small spaced capitals of labels, the menu, every button and the fee table's names, all at one weight. Corners are tight and depth is flat: the step from cream to green and a hairline rule, never a shadow, but for the floating question bar. A price always leads with the total monthly price and its label, then the rent beneath it, and every fee sits in one table grouped the way a renter meets them. Photographs are the building at the right hour, never staged and never stock, with no one in focus; every photo and plan drawing opens large in the viewer, and type over a photograph always sits on a green wash. A page opens on a full-bleed photograph or a title beside its standfirst, then the facts, alternating photo features, a dark tour band and a quiet close. Never cream stationery, never an acid poster.

Colours

  • backgroundBackground
    #faf7f1
  • foregroundForeground, Highlight foreground
    #14181a
  • mutedMuted
    #f4efe6
  • muted-foregroundMuted foreground
    #2a3d33
  • borderBorder
    #14181a
  • primaryPrimary
    #1e2d26
  • primary-foregroundPrimary foreground
    #f4efe6
  • on-photoOn photo
    #f4efe6
  • card
    #fffefa
  • card-foreground
    #14181a
  • accentAccent
    #a07d4e
  • accent-foreground
    #14181a
  • ring
    #a07d4e
  • destructive
    #e7000b
  • highlightHighlight
    #efddbf

Fonts

  • FrauncesHeadings
  • DM SansText
  • JetBrains Mono

Corners

Slightly rounded corners, 2px

Clutch keeps every change consistent with the rules of The Place at Buffalo Bayou.

They say what its pages always do and never do

Always

  • Set a page's title in type-h1, or type-display when the title is a few words over a banner photograph.
  • Set a headline's last words in an em with text-accent: the em sets them italic, the heading's level sets the rest.
  • Put a page's opening paragraph under its title in type-standfirst, in text-primary.
  • Set labels in type-label and the menu, buttons and calls to action in type-button, always with uppercase.
  • Underline a call to action with decoration-accent decoration-2.
  • Spend bg-primary on the dark bands (specials, the tour band, the footer, the photo viewer) and the main button; the tour button on a dark band is bg-accent.
  • Put on-photo type over a photograph only above gradient-hero (plus bg-primary/65 on a phone), gradient-banner or a bg-primary/95 wash, so gold clears 3:1.
  • Hold a section's content in max-w-page, a legal page or the questions in max-w-column, and a dialog or a short lead in max-w-narrow.
  • Move every hover with transition-hover; a teaser's photograph pushes in with transition-zoom.
  • Lead every price with the total monthly price in words and figures, its label in type-label, then the rent in type-small text-muted-foreground.
  • Make every photo and plan drawing a button that opens the viewer at that picture, with worded Previous, Next and Close.
  • Give every link, button and field a focus ring: focus-visible:outline-2 outline-offset-2 outline-ring.

Never

  • Write a size, a weight, a line height or a tracking beside a level.
  • Lift anything with a shadow but the floating question bar (shadow-float).
  • Round a corner past rounded-md; rounded-full is a status pill's alone.
  • Set a heading heavier than weight.regular: font-strong is the specials bar's title alone.
  • Paint running text or a whole band in gold (color.accent).
  • Put type on a bare photograph.

Start your own site from The Place at Buffalo Bayou.

Name it, and Clutch copies The Place at Buffalo Bayou into a new site under that name and opens it for you to change by asking.