The Massachusetts Atlas
How REWAP Brokerage looks, sounds and behaves: a working atlas of the state’s 351 cities and towns, from the Berkshires to the Cape, with every property placed inside it. Worcester is the home office, not the boundary.
- Idea
- We understand the place behind the property.
- Signature
- Know where you’re moving.
- Office
- 652 Park Ave, Worcester, MA 01603
- Coverage
- All of Massachusetts
- Founder
- Hong Tran, real estate lawyer
- Status
- Concept for review. Listings, prices and market figures are samples.
The brand book
Three sheets set the strategy, the identity and the system. Each one is a working page: the voice rewrites, color swatches, type scale, Legend and save controls all respond.
Positioning, personality and voice
The brand idea, four traits with their limits, voice principles with live before-and-after rewrites, audiences defined by their question, the messaging cascade and the Atlas vocabulary.
- A1 Idea · A2 Personality · A3 Voice
- A4 Audiences · A5 Messaging · A6 Naming
The logo, the material palette, the type
The current REWAP logo, unchanged, with clear space, sizes and misuse. A palette where every color names a material, with contrast-checked pairings. Three typefaces and a responsive scale.
- B1 Mark · B2 Color · B3 Typography
Grid, map, motion and components
Spacing and grid, a photography shot list, illustration, sourced data Readings, the branded basemap, icons, motion tokens, working components and the accessibility floor.
- C1 Space · C2 Photo · C3 Illustration
- C4 Data · C5 Map · C6 Icons · C7 Motion
- C8 Components · C9 Accessibility
The website concept
Explore the place, then the property. The home page opens on a statewide map of nine regions; every region, city, town and neighborhood gets a Sheet; property search keeps the map and the list in sync.
Home: know where you’re moving
A statewide Massachusetts Atlas: nine regions you can hover, select or reach from a list, with rail and highway overlays, a region summary, a gazetteer, the three ways in (buy, sell, invest) and Field Notes.
- Map and list twin · keyboard reachable · search form
Area Sheet
The Sheet template, shown for Shrewsbury: overview, a schematic map, housing character, Readings in their empty state and a note from the lawyer’s desk.
Open the SheetProperty search Demo data
Map and list in sync, a Legend for filters, a drawn search area, clustering and saved searches, set in a Worcester demo view.
Open searchListing Sample
A listing placed inside its area: the place behind it, comparable sales of the same building type and the public records worth reading.
Open the listingMobile search Demo data
Full-screen map with a three-stop bottom sheet, the Legend as a filter screen, and a listing view, shown in a phone frame.
Open mobileEntities, URLs and structured data
A provider-neutral data model, the URL plan for regions, towns and neighborhoods, the rules behind team and brokerage relationships, and JSON-LD for search and AI answer engines.
Open sheet EWhat this concept never does
These rules apply to every page here and to anything built from it.
Content describes streets, buildings and services, never residents. No “safe,” “family-friendly” or “perfect for.” A fair housing rule, not a style choice.
No awards, rankings, reviews, sales volume, team rosters or history that cannot be documented.
Readings print their source, period and sample size. Without a feed they show an empty state, never estimates.
Listings, prices and comparables on these pages are samples until IDX is connected.
The original design files, rendered live
Every page here is drawn at load time from the Claude Design artboards in design/project/. Nothing was exported or flattened, so changing an artboard changes the page.
The README in the repository carries the full brand book in text: strategy, voice, palette, type, system, components and the platform model.
Read the README and browse the design files on GitHub
python3 -m http.server 8000 # then open http://localhost:8000
| File | What it holds |
|---|---|
| design/project/canvas.json | The canvas: pages, artboard sizes and order |
| design/project/*.dc.html | Nine artboards: markup, styles and logic |
| design/PRODUCT.md | Product context: users, purpose, constraints, open decisions |
| design/.impeccable/config.json | Design-skill settings used during the work |
| assets/dc-runtime.js | Renders an artboard as a live page |
| assets/demo-nav.js | The “Atlas pages” navigator on every page |
| pages/*.html | One small viewer page per artboard |