clutch

Multifamily template

Halstead Yards

For one apartment community. A white page with evergreen and brass, ultralight Cormorant Garamond headings over Jost, and no rounded corner anywhere.

The picture the Halstead Yards site shows when a link to it is shared

Pages

Halstead Yards 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 Halstead Yards offer 11 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.

  • list_amenitiesWebMCP

    List the amenities.

  • list_neighborhoodWebMCP

    List the neighborhood.

  • list_specialsWebMCP

    List the specials.

  • list_testimonialsWebMCP

    List the testimonials.

  • list_faqsWebMCP

    List the faqs.

  • search_siteWebMCP

    Search the pages of this site for a word or phrase and see where it appears.

Design

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 grey rules, one deep evergreen brand colour 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 centres. The homepage is short: a full-bleed photographic hero with the header overlaid on it, a centred welcome, three photo teasers, one more full-bleed photograph, and a closing full-bleed call to action. It should read as a quiet premium property brochure, not a software landing page, and never as cards floating on grey.

Colours

  • backgroundBackground
    #ffffff
  • foregroundForeground
    #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
  • highlight
    #86c8ae

Fonts

  • Cormorant GaramondHeadings
  • JostText

Corners

Square corners

Rules

Clutch keeps every change consistent with the rules of Halstead Yards.

They say what its pages always do and never do.

Always

  • 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, centred.
  • Move colour 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 grey 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.