clutch

Marigold Commons

For one income-restricted community. Warm white with brick terracotta and marigold, Bricolage Grotesque over Atkinson Hyperlegible, income limits by household size, and a waitlist beside every apply.

The picture the Marigold Commons site shows when a link to it is shared

Marigold Commons includes 14 pages.

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

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

The pages of Marigold Commons offer 7 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 and a model home: 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 and email, an optional phone and move-in date, and what they want to ask.

  • start_applicationWebMCP

    Start an application or join the waitlist for a plan: the visitor's name, email and phone, the bedrooms and household size, the floor plan, whether they hold a Housing Choice Voucher, and a message.

  • list_income_limitsWebMCP

    The 2026 income limits by household size and AMI tier: the most a household may earn in a year to rent a home in that tier.

  • list_floorplansWebMCP

    The floor plans, one per layout and income tier, each with beds, baths, size, AMI tier, rent, total monthly price, utility allowance, how many homes it has, how many are free, and whether it takes a waitlist.

  • list_unitsWebMCP

    The homes free now or soon, each with its floor plan, beds, baths, size, rent, the program's contract rent, status, the date it is free, and what is built in for accessibility (specialAccess); 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.

Marigold Commons has its own colours, fonts and corners.

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

Marigold Commons is the site of a new affordable building in Saint Paul's Midway, and it reads like a well-run neighbourhood building in daylight: warm, plain-spoken and civic, with the care of the best market-rate sites, never luxury and never cheap. The ground is warm white with warm ink type; sand sets one band apart, as the eligibility summary and the residents' words do. Brick terracotta is the one colour that acts: every button, every link, the header's Apply. Marigold is the building's own colour and the site's mark (the tier chips, the eligibility callout, the wordmark's flower), always carrying ink and never set as type on white. Deep green grounds the footer and one dark band, the special. The type is big and easy to read: Bricolage Grotesque, a warm grotesque with some character, sets every heading tight and in sentence case, and Atkinson Hyperlegible Next, drawn for low-vision readers, sets everything else at 18px on 1.6, with labels in its bold rather than in tracked capitals. Corners are soft, 10px on buttons and fields and 18px on cards and photographs, with full pills for the tier chips, and depth is flat: bands and hairline rules, with a single shadow under the floating find bar. Photographs are bright daylight views of the building, the homes and the Midway, with no people in focus; no words are laid over them, and a section reads on its own while its picture is missing. Numbers lead: the program, the income limits with their year and each tier's rent are text, in tables that read on a phone. The voice is plain and direct, you and we, short sentences and exact numbers.

Colours

  • backgroundBackground
    #fefcf7
  • foregroundForeground, Highlight foreground
    #271d18
  • mutedMuted
    #f8efe0
  • muted-foregroundMuted foreground
    #5c5049
  • borderBorder
    #dfd6c9
  • primaryPrimary
    #a33f1e
  • primary-foregroundPrimary foreground
    #ffffff
  • primary-hover
    #8b3111
  • accentAccent
    #f9b73f
  • accent-foreground
    #271d18
  • secondary
    #1f3326
  • secondary-foreground
    #ffffff
  • highlightHighlight
    #ffe5ab

Fonts

  • Bricolage GrotesqueHeadings
  • Atkinson Hyperlegible NextText

Corners

Rounded corners, 10px

Clutch keeps every change consistent with the rules of Marigold Commons.

They say what its pages always do and never do

Always

  • Set the home hero's name in type-display, a page's title in type-h1, a section's heading in type-h2 and a heading inside a section in type-h3, each in sentence case.
  • Set running text in type-body, a section's opening line in type-lead, and every field name, fact name and table head in type-label: body bold, never tracked capitals.
  • Spend brick on every action: bg-primary with text-primary-foreground on a button, text-primary on a link, and primary-hover under the pointer.
  • Mark a plan's tier with a chip in the property's word (60% AMI): bg-accent text-accent-foreground type-chip rounded-full.
  • Put the eligibility band and the residents' words on sand (bg-muted), and the eligibility callout on marigold (bg-accent rounded-lg).
  • Ground the footer and one dark band a page (the special) in deep green: bg-secondary with text-secondary-foreground, quieter lines at /80.
  • Round buttons and fields with rounded-md, cards, photographs and the map with rounded-lg, chips with rounded-full.
  • Rule rows, table lines, cards and fields with a 1px border-border hairline.
  • Print every income limit and rent as text, in a table with its year in the caption, that reads on a 390px phone.
  • Sit a section's content in max-w-page with px-5 md:px-8, and reading copy in max-w-read.
  • Hide a picture's frame while its picture is missing, so the section reads without it.
  • Move colour under the pointer with transition-hover, and show focus as a 2px outline-primary ring.

Never

  • Set marigold as type on white (text-accent on bg-background); marigold carries ink, as a chip, a callout or a mark.
  • Set a heading in uppercase, or track out any type.
  • Lift anything with a shadow but the floating find bar (shadow-float).
  • Lay type over a photograph: a picture's words sit beside or below it.
  • Write luxury, budget-friendly, perfect for, or any phrase about who should live here.
  • Print an income figure without its year, or a rent without its tier.
  • Offer Apply on a plan that takes a waitlist: it offers Join the waitlist.
  • Reach for Tailwind's own palette, sizes, weights or shadows: name a token of this system.

Start your own site from Marigold Commons.

Name it, and Clutch copies Marigold Commons into a new site under that name and opens it for you to change by asking.