Multifamily template
Alder & Finch Communities
For a management company with several communities. A page for each state, a set of pages for each community (floor plans, availability, contact), and operator pages for about, careers and management services.
Pages
Alder & Finch Communities includes 13 pages.
“A page each” means one page for every item, such as one for every floor plan.
- Home
- Communities
- Apartments, a page each
- Communities, a page each
- Communities / floorplans, a page each
- Communities / floorplans, a page each
- Communities / availability, a page each
- Communities / contact, a page each
- About
- Careers
- Business
- Privacy policy
- Accessibility
For assistants
The pages of Alder & Finch Communities offer 6 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_communitiesWebMCP
The communities the company manages, each with its city, state and address.
- list_floorplansWebMCP
The community's floor plans, each with beds, baths, size, the published rent range and how many apartments are available.
- 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.
- search_siteWebMCP
Search the pages of this site for a word or phrase and see where it appears.
Design
Alder & Finch Communities has its own colours, fonts and corners.
A site you start from it keeps them until you ask Clutch to change them.
Alder & Finch is a small operator with a handful of communities, and the site should feel like a well-kept leasing office, not a listings portal: a warm paper background, dark brown-ink type, and photographs of each community's own buildings doing most of the talking. Alder red-brown is the one brand colour, on primary buttons, the footer, each community's tour button and the resident portal link. Finch gold is spent only on specials and nothing else. The warm card tone sits behind quotes, room lists, the tour invitation and the resident band above the footer, never behind every section. The home page reads as a short walk: the hero, a row of state photo cards the same height with the state's name set over its photograph, featured communities, current specials, three photo doors to finding a home, careers and management services, a short about with a photograph, residents' words, a band on how each community gives back, and a resident band with the portal, rent and maintenance. A photo card is one link with its action pinned to the bottom, so cards in a row line up, and it lifts and its photograph pushes in slowly under the pointer. The logo is a red-brown leaf in a thin circle, set beside the operator's name in the header and on a small paper tile in the footer so it never sinks into the red-brown. Search is one quiet bar floating at the bottom centre of every page, paper-coloured with a hairline border, a soft shadow and a red-brown return-arrow button; its results strip opens above it, and the footer keeps enough bottom padding that the bar and its strip never cover it. Fraunces at regular weight sets every heading in sentence case at its natural letter spacing; Figtree sets everything else, running text on an open line height, small labels in Figtree medium, still sentence case. One gentle radius rounds buttons, fields, cards, the search bar and photographs alike. Content sits in one page column and reading copy narrows to a reading column. Community pages lead with that community's photograph and its own navigation; operator pages stay quieter so the communities stand out. This site never sets text in capitals or letterspaces a heading, a label or the operator's name, never makes the name into an all-caps mark, never floats cards on grey for decoration, and never hides a price or a move-in date behind a click.
Colours
- backgroundBackground#fcfaf6
- foregroundForeground#241b15
- mutedMuted#f3efe7
- muted-foregroundMuted foreground#5e534a
- borderBorder#dfd8ce
- primaryPrimary#6e3524
- primary-foregroundPrimary foreground#fcfaf6
- on-photoOn photo#fdfcf9
- accentAccent#eac66e
- accent-foreground#2c1e13
- card#f9f3ea
- card-foreground#241b15
- find#ff8c5e
- find-focus#ffc2a4
Fonts
- FrauncesHeadings
- FigtreeText
Corners
Rounded corners, 10px
Rules
Clutch keeps every change consistent with the rules of Alder & Finch Communities.
They say what its pages always do and never do.Always
- Set the one hero line in type-display and a page's title in type-h1, over gradient-scrim on a photograph.
- Set every section heading in type-h2, and a heading inside a page's flow in type-h3.
- Name a card in type-title or type-title-sm, and a grid of three's headings in type-title-lg.
- Set running text in type-body and the paragraph that opens a section in type-lead.
- Set a full-size button in type-button, and the navigation and smaller buttons in type-ui.
- Put a small label in type-label, in sentence case.
- Spend bg-primary on primary buttons, the footer, each community's tour button and the portal link.
- Set type on a photograph in text-on-photo over gradient-scrim, or gradient-scrim-soft on a state card.
- Round buttons, fields, cards, the search bar and photographs with rounded-md.
- Sit a section's content in max-w-page, and reading copy in max-w-read or max-w-measure.
- Move colour, opacity and shadows with transition-hover, and a photograph's push-in with transition-zoom.
Never
- Spend color.accent on anything but a special.
- Set text in capitals, or letterspace a heading, a label or the operator's name.
- Put bg-card behind every section: it is for quotes, room lists, the tour invitation and the resident band.
- Lift a card at rest: shadow-lift is for a photo card under the pointer, shadow-float for the search bar.
- Set a Fraunces heading in any weight but weight.regular.
- Write a size, a leading or a weight beside a level.
- Round past rounded-md, or make a pill.
- Hide a price or a move-in date behind a click.
Start your own site from Alder & Finch Communities.
Name it, and Clutch copies Alder & Finch Communities into a new site under that name and opens it for you to change by asking.