clutch

Rowan at Alder Creek

For one garden-style community. Navy on white with a light-blue highlight, Abhaya Libre headings over Inter, pill buttons, and a furnished 3D drawing of every floor plan.

The picture the Rowan at Alder Creek site shows when a link to it is shared

Rowan at Alder Creek includes 13 pages.

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

  • Home
  • Pets
  • Faqs
  • Contact
  • Floorplans, a page each
  • Floorplans
  • Privacy policy
  • Accessibility
  • Residents
  • Schedule a tour
  • Amenities
  • Gallery
  • Neighborhood

The pages of Rowan at Alder Creek 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 with the leasing office: the visitor's name, email and phone, the day they would like to visit, the floor plan they want to see, and a message.

  • send_messageWebMCP

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

  • list_floorplansWebMCP

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

  • list_unitsWebMCP

    The homes, each with its floor plan, bedrooms, baths, size, rent, status (available, on-notice, pending or leased), building, floor, the date it is free and any accessible features such as a roll-in shower; 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.

Rowan at Alder Creek has its own colours, fonts and corners.

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

Rowan reads like a good leasing desk: calm, plain-spoken and exact. Navy carries the voice: every heading, the running text, every filled button and the bands the special and the closing sit on. White pages and a faint grey well (muted) hold cards, fact tiles, the header and the footer; grey (muted-foreground) is for supporting copy. Three small colours have one job each: gold-brown for small category labels, light blue (highlight) for availability chips, the special's eyebrow and received strips, leaf green for the long neighbourhood and pet paragraphs. Headings are Abhaya Libre SemiBold set tight, from a 72px page title down to 24px card titles; Inter sets everything read or pressed, running text at 16px on 1.55. Eyebrows are small tracked capitals written '/ LABEL' in plain words, never a slogan; everything else is sentence case. Every control is a pill: filled navy first, a 2px navy outline second, white on a navy band; 44px tall, 48px for the main action. Cards round 20px on the grey well, photographs and drawings 12px, fields 8px with a grey edge that reads on white. Depth is flat: only what floats over the page (Ask, the menu panel) takes the one shadow. Photographs are the community's empty rooms, pool, clubhouse, grounds and buildings, shown large and with no people; type sits on one only over a dark wash. Any photograph or plan drawing opens large in one photo viewer at the picture clicked, with Previous, Next and Close in words. Prices can't be misread: every plan leads with its total monthly price and its label, the rent beside it, and every fee sits in one table on the floor plans page. Focus is always visible as a blue ring set off from the control. Nothing moves on its own; under the pointer the navy deepens. Every fact comes from the globals and collections, so a new community changes only data.

Colours

  • backgroundBackground
    #ffffff
  • foregroundForeground
    #1f4271
  • mutedMuted
    #fafafa
  • muted-foregroundMuted foreground
    #71717a
  • borderBorder
    #e4e4e7
  • primaryPrimary
    #1f4271
  • primary-foregroundPrimary foreground
    #ffffff
  • primary-hover
    #17345b
  • on-photoOn photo
    #ffffff
  • goldAccent
    #7c6234
  • highlightHighlight
    #a9cbf4
  • highlight-foregroundHighlight foreground
    #1f4271
  • leaf
    #4d7369
  • ring
    #457dc7
  • scrim
    #121212

Fonts

  • Abhaya LibreHeadings
  • InterText

Corners

Rounded corners, 8px

Clutch keeps every change consistent with the rules of Rowan at Alder Creek.

They say what its pages always do and never do

Always

  • Set the page's one title in type-h1, a section's heading in type-h2 under its eyebrow, statements and sub-heads in type-h3 and card titles in type-title, all in sentence case.
  • Write every eyebrow as '/ LABEL' in plain words ('/ FLOOR PLANS', '/ AMENITIES') in type-label with uppercase, text-muted-foreground or text-gold.
  • Fill the first action as a pill, rounded-full bg-primary text-primary-foreground type-button min-h-11 (min-h-12 for the main action) with hover:bg-primary-hover transition-hover.
  • Lead every plan's price with its total monthly price in type-figure and its totalLabel, the rent beside it, and a month on each.
  • List every fee in one table at /floorplans#fees, grouped by its group, each with its amount and how often it is paid; a plan's page lists that plan's fees.
  • Open every photograph and plan drawing in the photo viewer: a Dialog holding a Carousel that opens at the picture clicked, with Previous, Next and Close in words.
  • Show focus on every link and button with focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring, and on every field with the same classes under focus:.
  • Round cards and wells with rounded-card on bg-muted, photographs and drawings with rounded-photo, and fields with rounded-md and border-field.
  • Set type on a photograph only in text-on-photo over gradient-wash (a card's foot) or gradient-scrim (a photo band).
  • Put a section's content in max-w-page inside px-4 md:px-10 lg:px-20, and a column of reading in max-w-read.
  • Spend highlight only on availability chips, the special's eyebrow and received strips, gold only on small labels, and leaf only on the long neighbourhood and pet paragraphs.
  • Bind every fact (a price, a fee, a count, the hours, the phone, the address, the name) from the globals and the collections.

Never

  • Show people in a photograph: empty rooms, grounds and buildings only.
  • Write title case, an exclamation mark, or a slogan in an eyebrow.
  • Print a rent or a from price without the plan's total monthly price and its label.
  • Offer Apply on a plan that takes a waitlist: it offers Join the waitlist instead.
  • Write who should live here (families, professionals, students, an exclusive lifestyle): describe the homes, the grounds and the place.
  • Lift anything with a shadow but what floats over the page, with shadow-float.
  • Set type on a bare photograph.
  • Square a button, a chip or a tag: every control is rounded-full.
  • Reach for Tailwind's own palette, sizes, weights, corners or shadows: name a token of this system.
  • Take a field's outline away without the focus ring in its place.
  • Move anything on its own: hover and focus change colour with transition-hover, and the photo viewer moves only when asked.
  • Put a second filled button beside the first: the second action is an outline pill, border-2 border-primary text-primary.

Start your own site from Rowan at Alder Creek.

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