Tandem Gainesville

For one student community leased by the bed. Cobalt with a volt highlighter, an oversized Unbounded wordmark over Onest, full-pill buttons, a turning now-leasing sticker and the all-in price of each bed.

The picture the Tandem Gainesville site shows when a link to it is shared

Tandem Gainesville 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
  • Amenities
  • Gallery
  • Neighborhood
  • Parents
  • Apply
  • Faqs
  • Contact
  • Schedule a tour
  • Residents
  • Privacy policy
  • Accessibility

The pages of Tandem Gainesville offer 6 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 Tandem Gainesville and a furnished model: 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 for a bed: the visitor's name, email and phone, the floor plan and lease term they want, the names of a group applying together, how the lease will be guaranteed (a parent or guardian, a second deposit, or a guarantor service), and a message.

  • list_floorplansWebMCP

    The floor plans, each with beds, baths, size, the rent per bed and the total per bed per month with its label, whether rent is by the bed, how many beds are free, how many whole homes are free, the lease terms in months, and whether it takes a waitlist.

  • list_unitsWebMCP

    The homes with beds free now, each with its floor plan, beds, baths, size, rent per bed, status and floor; 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.

Tandem Gainesville has its own colours, fonts and corners.

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

Tandem Gainesville is the site of a new furnished building by the University of Florida, leased by the bed, and it reads loud, confident and clear: a sunny Florida building in cobalt, with a highlighter on the facts that matter. It commits to one oversized device, the wide TANDEM wordmark across the top of home in cobalt, and to one sticker, a volt disc saying it is now leasing, turning slowly on the corner of the hero photograph. Paper white is the ground with ink type; a pale blue-grey sets one band apart, as the lease terms and the residents' words do. Cobalt is the brand and the one colour that acts: every button and link, the slim announcement bar, the footer, and one full-bleed band a page, campus on home. Volt is a highlighter, never type on paper: it marks the total under a price, the chips that say a plan's beds by baths and the beds left, and the sticker, always carrying ink. Unbounded, a wide grotesque, sets the wordmark, the headings and every figure at 700 to 800 and set tight, with the wordmark, the hero line, page titles and section headings in uppercase; Onest sets everything a visitor reads or fills in at 17px on 1.6, with labels in its bold and in sentence case. Corners are full pills on buttons and chips, 22px on cards, photographs and the map, and a circle for the sticker; depth is flat, bands and hairlines, with one shadow under the floating find bar. Prices can't be misread: every price says per bed, sits with its total per bed and that total's label, and the lease terms and what's included follow the plans. Motion is two loops only, the sticker's turn and one marquee ribbon of amenities, both still with reduced motion. Photographs are bright Florida daylight on the building's cobalt corner panels, the rooftop pool, study rooms, the gaming lounge, furnished bedrooms with private baths, a bike lane and the shuttle stop, with no people in focus, no university building shown as if it were the property's, and no words laid over them. The voice is short, upbeat and direct, you and we, with exact numbers, and never a word about who should live here.

Colours

  • backgroundBackground
    #f8fafd
  • foregroundForeground
    #0f141d
  • mutedMuted
    #e9eff6
  • muted-foregroundMuted foreground
    #474d58
  • borderBorder
    #d1d8e1
  • primaryPrimary
    #1a55d8
  • primary-foregroundPrimary foreground
    #ffffff
  • primary-hover
    #0940bb
  • accentAccent
    #d6f231
  • accent-foreground
    #0f141d
  • highlightHighlight
    #e8f9a3
  • highlight-foregroundHighlight foreground
    #0f141d
  • on-photoOn photo
    #ffffff

Fonts

  • UnboundedHeadings
  • OnestText

Corners

Rounded corners, 22px

Clutch keeps every change consistent with the rules of Tandem Gainesville.

They say what its pages always do and never do

Always

  • Set the wordmark in type-wordmark, the hero line in type-display, page titles in type-h1 and section headings in type-h2, all uppercase; inner headings take type-h3 or type-title.
  • 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: Onest bold, sentence case.
  • Spend cobalt on every action: a filled button is bg-primary text-primary-foreground rounded-full with hover:bg-primary-hover, and a link is text-primary.
  • Draw the second action as an outline pill, border-2 border-foreground rounded-full (border-primary-foreground on cobalt), never filled.
  • Print every price per bed with its total per bed and that total's label (totalLabel), the total in type-figure over the volt highlighter mark (bg-accent).
  • Mark a short fact with a volt chip: bg-accent text-accent-foreground type-chip rounded-full (4x4, 3 beds left, Waitlist).
  • Ground the announcement bar, the footer and one full-bleed band a page (campus on home) in cobalt: bg-primary text-primary-foreground, quieter lines at /80.
  • Set a band apart on the pale ground (bg-muted): lease terms and what's included, and residents' words.
  • Round cards, photographs and the map with rounded-card, fields with rounded-field, and buttons, chips and the sticker with rounded-full.
  • 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 volt as type on paper (text-accent on bg-background): volt carries ink, as a chip, the sticker or the mark under a price.
  • Lift anything with a shadow but the floating find bar (shadow-float).
  • Lay type over a photograph: only the sticker sits on a picture's corner, on its own volt ground.
  • Print a price without per bed, a bare from $X, or two prices on a line without their labels.
  • Write students only, dorm, freshman, upperclassman, or any phrase about who should live here.
  • Offer Apply on a plan that takes a waitlist: it offers Join the waitlist.
  • Move more than one thing in a view: the sticker turns and the amenities ribbon slides, and nothing else loops.
  • Set Onest in capitals or track it out: uppercase belongs to Unbounded's wordmark, display, h1, h2, ribbon and sticker.
  • Reach for Tailwind's own palette, sizes, weights or shadows: name a token of this system.

Start your own site from Tandem Gainesville.

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