Halstead Yards
For one apartment community. A white page with evergreen and brass, ultralight Cormorant Garamond headings over Jost, and no rounded corner anywhere.
Halstead Yards includes 13 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
- Virtual tours
The pages of Halstead Yards 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, the floor plan they are interested in, and the kind of tour they would like (tourType: Guided tour, Self-guided tour or Video tour).
- 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.
- list_feesWebMCP
The community's fees, each with its amount (and highest amount when it varies), how often it is charged, whether every resident pays it, and what it is charged per, so a visitor can work out the total monthly price.
Halstead Yards has its own colours, fonts and corners.
A site you start from it keeps them until you ask Clutch to change them.
Halstead Yards is a brick and blackened-steel building in a former Denver rail yard, and the site is painted from that: a white page, near-black type, hairline gray rules, one deep evergreen brand color on buttons and the sticky header, and a brass accent spent only on thin rules and small marks. Every corner is square — no radius anywhere, on buttons, cards, fields or images. Type is an ultralight Cormorant Garamond for display against Jost for body, headings set large and never uppercase and never tracked out, with a single italic word carrying the emphasis in a headline. Body is 16px on 1.8 line-height. Content sits in an 1100px column, and reading copy narrows to 900px and centers. One evergreen header stays at the top of every page: the logo on the left, the sections in a row on a wide screen and behind Menu on a narrower one, the phone, and the site's one Schedule a Tour. The homepage runs in the order a renter shops: a full-bleed photographic hero under that header, the current special, a centered welcome, three photo teasers for the floor plans, the amenities and the neighborhood, one full-bleed photograph, a strip of the gallery, residents' words, and a closing full-bleed call to action with the phone, address and office hours. It should read as a quiet premium property brochure, not a software landing page, and never as cards floating on gray.
Colours
- backgroundBackground#ffffff
- foregroundForeground, Highlight foreground#242424
- mutedMuted#f6f6f6
- muted-foregroundMuted foreground#696969
- borderBorder#e1e1e1
- primaryPrimary#1e362d
- primary-foregroundPrimary foreground#ffffff
- on-photoOn photo#ffffff
- accentAccent#98693d
- accent-foreground#ffffff
- card#f8f8f8
- card-foreground#242424
- highlightHighlight#86c8ae
Fonts
- Cormorant GaramondHeadings
- JostText
Corners
Square corners
Clutch keeps every change consistent with the rules of Halstead Yards.
They say what its pages always do and never doAlways
- Set a page's title in type-h1 and a section's heading in type-h2, with its one italic word in an em that names no level of its own.
- Set a heading inside a section in type-h3, and a card's or a list's title in type-title.
- Put a type-label line in uppercase above a title: the eyebrow over a banner, the hero's kicker.
- Set a call to action in type-button with uppercase, boxed in a 1px border-on-photo/70 or border-foreground/25 rule, solid bg-primary, or underlined.
- Rule rows, fields, tabs and quiet buttons with a 1px border-border hairline instead of a ground.
- Spend evergreen (bg-primary) on solid buttons, the sticky header, the menu and the footer.
- Lay type over a photograph only in text-on-photo above gradient-hero, gradient-banner, gradient-closing or a bg-foreground wash.
- Sit a section's content in max-w-page, and reading copy in max-w-read, centered.
- Move color and borders under the pointer with transition-hover, and a callout's photograph with transition-zoom.
Never
- Round a corner: rounded-md is 0px and the system has no other.
- Use brass (color.accent) on a button or a ground; it is for thin rules and small marks.
- Set a heading in uppercase or tracked out; capitals and tracking belong to type-label, type-control, type-button, type-meta and type-detail.
- Set anything bold: the display is weight.light and the body weight.regular.
- Lift anything with a shadow but the floating find bar (shadow-float).
- Float cards on a gray page; bg-muted is for one band set apart.
Start your own site from Halstead Yards.
Name it, and Clutch copies Halstead Yards into a new site under that name and opens it for you to change by asking.