Multifamily template
Riverline
For one occupied high-rise. A white page with pine as the only fill and gold type on it, Abhaya Libre headings over Inter, and full-pill buttons.
Pages
Riverline includes 12 pages.
“A page each” means one page for every item, such as one for every floor plan.
- Home
- Floorplans
- Floorplans, a page each
- Amenities
- Gallery
- Neighborhood
- Residents
- Contact
- Schedule a tour
- Accessibility
- Privacy policy
- Faqs
For assistants
The pages of Riverline 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_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
Riverline has its own colours, fonts and corners.
A site you start from it keeps them until you ask Clutch to change them.
Riverline is a Rowan Living community on Buffalo Bayou in Houston, and the look comes from empty rooms at golden hour: warm light, a long view, no clutter. The page is white and quiet. Pine is the one fill colour and carries every primary button, the footer and the closing call to action; the type on that fill is the warm gold of the mark. Gold is also the small accent on icon wells and the map pin, never a button. Abhaya Libre is display, large and tight, in pine on white, never italic and never uppercase. Inter is body. Every button, chip, tab and kicker is a full pill: pine fill with gold type is the primary, a pine outline is the secondary, and a white pill on pine or on a photograph is the third. Cards and photographs have 16px corners and a soft shadow, large bands 24px. Photographs are empty rooms, and type on them sits on a dark pine wash with glass tiles over the hero. Muted wells hold facts, questions and filters. The reading well is 1440 wide with page padding of 16, then 32, then 80. Never cream stationery, never acid on black, never a broadsheet.
Colours
- backgroundBackground#ffffff
- foregroundForeground#0e3830
- mutedMuted#fafafa
- muted-foregroundMuted foreground#71717a
- borderBorder#e4e4e7
- primaryPrimary#0e3830
- primary-foregroundPrimary foreground#edbc6a
- on-photoOn photo#ffffff
- card#ffffff
- card-foreground#0e3830
- accentAccent#edbc6a
- accent-foreground#0e3830
- ring#0e3830
Fonts
- Abhaya LibreHeadings
- InterText
Corners
Rounded corners, 16px
Rules
Clutch keeps every change consistent with the rules of Riverline.
They say what its pages always do and never do.Always
- Set the hero's one line in type-display, a page's title in type-h1 and every section heading in type-h2.
- Put a type-label kicker in a rounded-full pill above a section heading; over a photograph the kicker is type-ui on bg-on-photo/15.
- Make every button, chip, tab and kicker a rounded-full pill: bg-primary with text-primary-foreground first, a border-primary outline second, bg-on-photo with text-primary over a photograph or pine.
- Give cards and photographs rounded-md with shadow-md, large bands rounded-lg, and lift a card to shadow-lg under the pointer.
- Set type on a photograph in text-on-photo over gradient-scrim, gradient-scrim-side, gradient-foot or gradient-closing.
- Hold facts, questions and filters in a bg-muted well.
- Put a section's content in max-w-page inside the px-4, sm:px-8, lg:px-20 gutter.
- Move links, buttons and cards with transition-hover, and push a card's photograph in with transition-zoom.
- Fade a filled button to hover:opacity-hover under the pointer.
Never
- Fill a button with gold (bg-accent): gold is type on pine, icon wells, the map pin and the specials chip.
- Set Abhaya Libre in italic, uppercase or a weight other than font-medium's.
- Fill a band with anything but bg-primary, bg-muted or the white page.
- Square a button, a chip or a tab: every control is rounded-full.
- Set type on a bare photograph.
- Lift anything past shadow-lg, or a section band at all.
Start your own site from Riverline.
Name it, and Clutch copies Riverline into a new site under that name and opens it for you to change by asking.