Vasari is a wellness destination in Iowa City — 44 residences above a 6,861 sq ft health club, opening August 2027. This page is the living style guide: every mark, color, type spec, and asset the site is built from.
The Vasari wordmark is set in a chiseled classical serif, all-capitals, with quiet tracking. Three colorways: ink for everyday use, cream for dark surfaces, and sage as the default brand mark. Never recompose the letterforms; never combine with another mark inline.
The V-mark is the building, simplified. A single chiseled diagonal stroke — the right half of a serif V — used wherever the full wordmark won't fit: favicon, avatar, app icon, embroidery, sleeve, the corner of a coffee cup. Always paired with the sparkle when it appears on its own at avatar scale.
A four-point concave star used as a brand accent. Appears at the center of the seal; in the corner of the V-mark when it stands alone; and as a divider glyph between editorial sentences. Never use as a bullet. Never rotate.
A vertical oval with the brand statement ("A platform for optimized living") arcing across the top and the property description ("Residence & Health Club") across the bottom. The sparkle anchors the center. Reserved for moments that warrant ceremony — the welcome packet, the leasing-office window, the lobby threshold.
The signature line drawing of the building, used in formal contexts: the back of the welcome packet, the leasing-office window, the rooftop sign. Single weight, single color. Renders sit somewhere else in the system; this is where the building's idea lives.
Phosphor Icons · Light weight is the standard for 95% of digital interfaces — arrows, navigation glyphs, amenity markers, form controls. The thin stroke matches our single-weight architectural illustrations. Custom SVG marks (V-mark, Sparkle, Seal) are the only exceptions: they're the brand, not the UI.
Don't mix icon libraries; don't use filled-weight Phosphor; don't swap the V-mark with a Phosphor icon for the avatar.
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web/src/light/style.css">
<i class="ph-light ph-sun-dim"></i>
Two greens are locked at the brand level; everything else is a derived neutral. Sage is the dominant brand color; the saturated primary green is an accent — never an entire surface. CSS variables map to --color-* aliases for Tailwind / shadcn handoff.
Tailwind aliases: --color-accent · --color-forest · --color-brand-dominant · --color-brand-deep · --color-tint-sub · --color-tint-bg · --color-tint-cards · --color-ground · --color-paper · --color-text-default · --color-text-secondary · --color-surface-dark.
Three voices, one register. Headlines run in Cormorant Garamond — a high-contrast classical serif that carries the Renaissance gravitas the name suggests. Body sits in Manrope, a quiet grotesque. Wayfinding, spec rows and any technical chrome run in JetBrains Mono.
Concrete, restrained, never wellness-loud. Sentences earn their length. Specifics over adjectives. The brand never apologizes for choosing well; it never explains a choice it shouldn't have to make.
Reserved for long-form editorial contexts and specific architectural placements — the welcome packet, the lobby threshold, the back page of a printed brochure. Not for primary headlines on digital interfaces, marketing emails, or social captions. Footers, where the line carries the building's identity into the page foundation, are acceptable.
The technical sandbox the brand expects to be built in. Components ship as unstyled primitives; the brand layer lives entirely in the design tokens defined above. AI agents and developers must not introduce external, opinionated UI libraries.
Unstyled primitives, styled exclusively via the mapped Tailwind CSS variables in § 07. No Material, no Mantine, no Chakra.
Colors flow through --color-* aliases. Type and spacing run on the scales in § 08.
95% of digital interfaces. Custom marks (V, Sparkle, Seal) are the only allowed exceptions.
The source artwork that drives this page. SVGs are currentColor-compatible and recolor cleanly via CSS. PNG fallbacks live next to each SVG.
SVG versions of the wordmark and the building illustration are in progress with the designer — the raster originals above will be replaced when they land.
