Multifamily template
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.
Pages
The Place at Buffalo Bayou includes 12 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
For assistants
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.
- list_unitsWebMCP
The apartments, each with its floor plan, size, rent, status 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 published rent range and how many apartments are available.
- search_siteWebMCP
Search the pages of this site for a word or phrase and see where it appears.
Design
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 300-home 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) 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 and every button, 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. Photographs are the building at the right hour, never staged and never stock, and type over one always sits on a green wash. A page opens on a full-bleed photograph, then teasers, a two-column welcome, alternating photo features, a dark tour band and a quiet close. Never cream stationery, never an acid poster.
Colours
- backgroundBackground#faf7f1
- foregroundForeground#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
Fonts
- FrauncesHeadings
- DM SansText
- JetBrains Mono
Corners
Slightly rounded corners, 2px
Rules
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) 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, gradient-banner or a bg-primary/85 wash.
- 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.
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.