The Wren at Clear Creek

For one 55+ community. Warm paper with garnet and a pale Colorado sky, soft Fraunces headings over Lexend at 19px, the phone as large as a headline, and an events calendar to RSVP from.

The picture the The Wren at Clear Creek site shows when a link to it is shared

The Wren at Clear Creek includes 15 pages.

“A page each” means one page for every item, such as one for every floor plan.

  • Home
  • Floorplans
  • Floorplans, a page each
  • Amenities
  • Lifestyle
  • 55 plus living
  • Gallery
  • Neighborhood
  • Faqs
  • Contact
  • Schedule a tour
  • Apply
  • Residents
  • Privacy policy
  • Accessibility

The pages of The Wren at Clear Creek offer 8 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 Wren at Clear Creek with the leasing director: the visitor's name, email and phone, the day they would like to visit, and the floor plan they want to see.

  • send_messageWebMCP

    Send the leasing office at The Wren a message: the visitor's name and email, an optional phone and move-in date, and what they want to ask.

  • rsvp_eventWebMCP

    Reserve places at an open event at The Wren, such as an open house or a talk: the visitor's name and phone, an optional email, the event, how many guests are coming, and a message.

  • start_applicationWebMCP

    Start an application for a home at The Wren: the visitor's name, email and phone, the floor plan they want (or its waitlist), the move-in date and lease length they would like, and a message.

  • list_floorplansWebMCP

    The floor plans at The Wren, each with bedrooms, baths, size, the rent and the total monthly price with its label, how many homes are free, the lease lengths in months, and whether it takes a waitlist.

  • list_unitsWebMCP

    The homes free now, each with its floor plan, bedrooms, baths, size, rent, status, floor, the date it is free and any accessible features such as a roll-in shower; filter by status, beds or floor plan.

  • list_eventsWebMCP

    The events at The Wren: weekly clubs and classes with their schedule, and dated events with their date, start and end times, place and cost; open is true when visitors are welcome to come and RSVP.

  • search_siteWebMCP

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

The Wren at Clear Creek has its own colours, fonts and corners.

A site you start from it keeps them until you ask Clutch to change them.

The Wren at Clear Creek reads as an invitation from a good neighbour: warm, unhurried and generous, made to be read at arm's length without glasses. The Front Range is in the palette. Warm paper is the ground with warm ink type, and linen sets a quieter band apart, as the residents' words and the contact band do. Garnet, the sandstone red of the foothills, is the one colour that acts: every button, every link (always underlined), the phone figure, the focus ring, and the footer's ground. A big pale Colorado sky carries the two bands that matter most to this reader, the age rule stated once in its own words and the lifestyle, and the fact chips, always with ink on it. Honey light is for invitations: the date tile of every open event, the special, and the passage the concierge found. Fraunces, a soft serif display at 600 in sentence case, gives the site its voice in the headings, the prices, the date and the residents' words; Lexend, wide and plain, sets everything a visitor reads or fills in at 19px on 1.65, with labels in its 600 and nothing anywhere under 16px. Two devices carry the brand: the phone number set as large as a headline after Call Diane, wherever the site asks someone to call, and the invitation card, a honey tile with the day in Fraunces beside the time, the place and an RSVP. Prices can't be misread: every plan shows its total monthly price with its label and the rent beside it, a month on each. Corners are soft but not round, 12px on buttons and fields, 20px on cards and photographs; depth is flat, bands and hairlines, with one shadow under the floating find bar. Buttons are at least 52px tall and always carry words; fields are 56px with their labels above. Nothing moves on its own: hover and focus change colour gently, and that is all. Photographs show the buff-brick building with its garnet trim and canvas awnings, the covered drop-off, the foothills and cottonwoods, warm oak interiors with garnet and sky textiles, and the walk-in showers, with no people in focus and no words over them. Any photograph or plan drawing opens large in one photo viewer, a paper panel over a dimmed page with the picture as big as the screen allows and its caption under it, Previous and Next and Close all in words; it moves only when asked. The voice is warm, plain and direct, you and we, short sentences, every price with a month, and the age rule as written; never a word about who should live here beyond it.

Colours

  • backgroundBackground
    #fbf6ef
  • foregroundForeground
    #281916
  • mutedMuted
    #f4ebe0
  • muted-foregroundMuted foreground
    #54433f
  • borderBorder
    #d5c8be
  • primaryPrimary
    #7f1f26
  • primary-foregroundPrimary foreground
    #ffffff
  • primary-hover
    #650d17
  • accentAccent
    #bce1f8
  • accent-foreground
    #281916
  • highlightHighlight
    #f5c66d
  • highlight-foregroundHighlight foreground
    #281916
  • on-photoOn photo
    #ffffff
  • focus
    #7f1f26

Fonts

  • FrauncesHeadings
  • LexendText

Corners

Rounded corners, 12px

Clutch keeps every change consistent with the rules of The Wren at Clear Creek.

They say what its pages always do and never do

Always

  • Set the community's name on home and every page's title in type-h1, a section's heading in type-h2 and inner headings in type-h3 or type-title: Fraunces 600, sentence case.
  • Set running text in type-body (19px on 1.65), a section's opening line in type-lead, and nothing smaller than type-caption (16px), labels included.
  • Spend garnet on every action: a filled button is bg-primary text-primary-foreground rounded-control min-h-13 type-button, with hover:bg-primary-hover.
  • Draw a second action as an outline button, border-2 border-primary text-primary rounded-control, never a second filled one.
  • Underline every link in running text: text-primary underline decoration-2 underline-offset-4, with hover:text-primary-hover.
  • Show focus on every control as a 3px garnet ring set off from it: focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus.
  • Set the phone large wherever the site asks someone to call: globals.callLabel in type-label over the number in type-phone, garnet and underlined (Big Phone).
  • Print every price as the total monthly price in type-figure with its label (totalLabel), the rent beside it, and a month on each.
  • Carry every open event as an invitation card: the honey date tile (bg-highlight) with the day in type-day, then the date, the time, the place and RSVP.
  • Ground the age rule and the lifestyle in sky bands (bg-accent text-accent-foreground), and set a quieter band apart on linen (bg-muted).
  • Print the age rule only from globals.ageRule, word for word, before the plans on every page that lists them.
  • Round buttons, fields and the date tile with rounded-control, cards, photographs and the map with rounded-card, and chips with rounded-full.

Never

  • Write text under 16px, or set Lexend in capitals or tracked out.
  • Set grey on grey: text-muted-foreground stays on paper and linen; on sky and honey the type is ink (text-foreground).
  • Move anything on its own: no autoplaying carousels, marquees or animation; hover and focus change colour only, with transition-hover. The photo viewer moves only when Previous or Next is pressed.
  • Lift anything with a shadow but the floating find bar (shadow-float).
  • Lay type over a photograph.
  • Make a control smaller than min-h-13 (52px) for a button or min-h-14 (56px) for a field, name a field by its placeholder, or draw a button with no words.
  • Offer Apply on a plan that takes a waitlist: it offers Join the waitlist.
  • Call The Wren senior living, retirement or independent living (only the comparing FAQ names them), or write adults only, adult community or golden years.
  • Write any phrase about who should live here beyond the age rule, or a rule stricter than globals.ageRule.
  • Print a price without a month and its total monthly price, or a bare from $X.
  • Reach for Tailwind's own palette, sizes, weights or shadows: name a token of this system.

Start your own site from The Wren at Clear Creek.

Name it, and Clutch copies The Wren at Clear Creek into a new site under that name and opens it for you to change by asking.