Design Direction · v1
A portfolio that proves the platform.
Evolving the Gallery into a searchable, filterable, map-enabled portfolio system — property-level proof built to earn credibility with sellers, advisors, investors, employees, and residents. Designed to read as a strategic operating platform, not a rental marketplace.
Positioning
A strategic operating platform — property-level proof, not a rental marketplace.
Scale
Built to grow with new properties, markets and operating companies.
Governance
Designed for missing or pending data; sensitive economics never exposed.
01 — Foundation
Design system
Palette
Marble White
#F6F5F1
Iron Blue
#182634
Steel Blue
#2E4A63
Slate Blue
#4F6B82
Glass Blue
#D6E2EA
Granite Gray
#424143
Gilded Gold
var(--cr-accent,#A99359)
Gilded Gold appears only as a thin accent — rules, dots, active states. Blues carry hierarchy; Marble White carries the page.
Typography
Castoro
Serif · headlines & editorial moments
Figtree
Sans · UI, body, data, labels
Light
Regular
Medium
Semibold
Bold
Brand motifs
pill
Circle, dot, oval and pill recur as map pins, status dots, avatars, and tags — a quiet, repeatable geometry.
Core components
Owned & Managed
Third-Party Managed
In Development
Pending Approval
All operators
Guardian
Flats
Novo
02 — Template
/portfolio/
Portfolio Index
Search and filters are live in this frame — type, toggle operators, markets and statuses, and hover a card to light its market on the map.
Index layout variations
Four arrangements of the map ↔ list relationship. Map-right is recommended for desktop — list reading order stays primary while the map anchors orientation on the right.
03 — Template
/portfolio/portco/[operator-slug]/
Operator / PortCo page
04 — Template
/portfolio/properties/[property-slug]/
Single Property page
Component variations
Property card · 3 designs
Same data, three densities. Horizontal for the synced list, vertical for roll-up grids, compact for list-only views.
A · Horizontal (synced list)
B · Vertical (roll-up grid)
C · Compact (list-only)
Hall Lofts
West Loop · Chicago, IL · 184 units
Wicker Park Flats
Wicker Park · Chicago, IL · 96 units
Filter UI · 3 patterns
Pills are recommended — fast, scannable, mobile-friendly.
A · Pill bar Recommended
All
Guardian
Flats
Novo
B · Sidebar facets
Operator
Guardian
Flats
Novo
C · Dropdown bar
Operator▾
Market▾
Status▾
Hero treatments · 3
Dark anchors the index; light editorial suits operators; split foregrounds geography.
B · Light editorial
Athos Properties Group
Map pins & clusters
Status color lives in the pin; clusters carry counts. Hovering a card scales and rings its market pin.
2
12
Interaction & data states
Every property is designed for incomplete data. Nothing breaks layout; sensitive fields stay hidden until a data owner approves them.
Missing image
Branded striped placeholder holds the frame until photo rights are confirmed.
Missing description
A Class A multifamily community managed by Novo Properties in Washington, DC.
Auto-summary from structured fields
Falls back to a generated summary built from operator, asset type and market.
Missing coordinates
Location not yet mapped
Property stays listed and searchable; simply excluded from map clusters.
Pending approval
Pending approval
Units · withheld
Economics · not shown
Sensitive fields masked until the data owner approves public visibility.
Empty filter results
No properties matchReset filters
Clear path back — never a dead end. Suggests broadening the search.
Card & control states
Default
Hover · selected
Primary
Secondary
Focus
Gold signals interaction — hover, selected, and keyboard focus rings.
CMS field mapping
WordPress “Properties” Custom Post Type with ACF. Each field maps to where it renders and how governance gates it.
SEO, accessibility & handoff
SEO & local discovery
Per-property URLs (/properties/[slug]/) and per-operator URLs build a local-SEO surface area that scales with the portfolio.
Market taxonomy enables city/state landing pages (e.g. /portfolio/?market=chicago) for “multifamily management in {city}”.
JSON-LD via Schema Type (ApartmentComplex / Residence) with address, geo, and operator as the managing organization.
SEO Title + Meta Description fall back to structured-field auto-summaries so no property ships without metadata.
Self-referencing canonical tags prevent duplicate-content issues across market and operator filter views.
Open Graph + Twitter cards default to the hero image (or branded OG image) for shareable proof.
Accessibility
Required Image Alt Text field — no decorative-only property imagery; placeholders carry descriptive alt.
Filter pills are real <button>s with aria-pressed; map markers are keyboard-focusable with visible gold focus rings.
Map is supplementary, never the only path — the synced list is the accessible source of truth (WCAG 2.1 AA).
Color is never the sole status signal: every status dot pairs with a text label.
Contrast: Iron Blue / Granite Gray on Marble White and white on Iron Blue all exceed 4.5:1 for body text.
Semantic headings (single H1 per template), skip-link to results, and reduced-motion fallback for pin animations.
Engineering handoff
WordPress
Properties registered as a Custom Post Type with a Market taxonomy and a PortCo CPT for operators.
Operator roll-ups via a Relationship field query (no manual lists).
Visibility Status drives WP_Query meta filter — Pending/Draft never reach the front end.
Gutenberg
Ship as reusable blocks: Portfolio Index, Operator Profile, Property Detail, CTA Module.
Editors compose pages from blocks; data binds from ACF, not hard-coded.
Pattern library mirrors the card / hero / filter variations shown here.
ACF
Field groups mirror the table: Identity, Location, Classification, Media, Governance, SEO.
Conditional logic hides Units until approval flags are set.
Validation: required alt text, lat/long pair-or-neither, URL format.
Google Maps API
Maps JavaScript API + MarkerClusterer; custom styled basemap to match the muted palette.
Markers from lat/long; missing coordinates simply omitted (graceful).
Card ↔ pin sync via shared property IDs; restrict API key by HTTP referrer.