---
id: "2115805857346732297"
source: https://x.com/ndstudio/status/2115805857346732297
author: "National Design Studio (@ndstudio)"
media: "video, 1920x1280, 10.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Dark Map Housing Finder App

## Summary
A dark-mode mobile app for finding affordable housing, presented as three phones on a near-black stage: a map with blue building pins and price-range labels, a bottom sheet that expands into a results list, and a detail view with directions, phone, units and assistance programs. Worth studying for its restrained dark map styling and the clean map-to-sheet-to-detail flow.

## Style
- Theme: dark (charcoal map and near-black sheets)
- Mood: calm, civic, utilitarian, trustworthy
- Tags: map-ui, dark-mode, bottom-sheet, listings, location-search, device-mockup, civic-tech
- Category: Mobile, Web app

## Palette
| Role | Hex |
|---|---|
| Stage background | #0F1318 |
| Map land | #262F2F |
| Sheet surface | #0B0D11 |
| Map water and parks | #344446 |
| Secondary text | #61707B |
| Card dark | #0D1014 |
| Deep black | #020306 |
| Pin blue | #2D6FE8 |

## Typography
- Building name in the detail view: sans, medium, about 1.5x body size, white. Inter (500).
- Labels ("Phone", "Units", "Housing program"): small sans, white, medium weight; values below in grey #61707B regular. Inter (500 and 400).
- List rows: white name on one line, grey address on the next, both small. Inter.
- Map chips (zip code dropdown, "Filters", price ranges like "$1.5K - 2.8K"): tiny sans, medium, dark text on white pills or white text on dark pills.
- The phone number is set as a blue link with a small external icon.

## Layout
- 3:2 stage (1920x1280) with a flat dark background; three phone frames side by side, the centre one in front and raised slightly, the side phones partly hidden behind it.
- Phones use a thin light-grey bezel with about 40px corner radius and a dynamic-island notch.
- Map screen: zip dropdown pill top-left, filter pill top-right, map controls (locate, plus, minus) stacked on the right edge, collapsed sheet with "14 results" and a chevron at the bottom.
- List and detail screens: a full-height dark sheet with 16px side padding and 20 to 24px spacing between sections, hairline dividers, a chevron collapse button top-right.

## Elements
- Map pins: blue rounded squares about 14px with a white building glyph; a few red markers for other points of interest.
- Price chips: white pills with dark text placed over map areas, in the right-hand phone's choropleth view (land shaded in greens).
- Bottom sheet: collapsed handle bar with a result count, expanding to a scrolling list of name and address pairs.
- Detail view: distance line ("0.4 miles from central ..."), title, address, a full-width dark grey "Directions" pill with an arrow, then labelled info blocks for phone, units, programs and housing program with a small info icon.
- Map tiles: desaturated dark teal-grey streets, blue-grey water, darker parks.

## Motion
- 0.4s: the centre phone shows the map with pins.
- About 1 to 2.3s: the sheet slides up to full height (about 400ms, ease-out spring) and the list rows fade in.
- About 3 to 4.2s: a row is tapped and the detail view replaces the list with a crossfade and small upward slide (about 300ms).
- 4.2 to 8.1s: the detail view holds while it scrolls slightly.
- About 9 to 10s: the sheet collapses back to the map (about 350ms), the map pins reappear; side phones stay static and the clip loops.

## Rebuild it
1. Lay out a dark stage `bg-[#0F1318] grid place-items-center` with three phone frames (`rounded-[44px] border border-white/20 aspect-[9/19.5] overflow-hidden`), the middle one `z-10 scale-105`.
2. Render the map with a dark vector style (for example MapLibre with custom colours: land #262F2F, water #344446, labels #61707B) and custom HTML pins `rounded-md bg-[#2D6FE8] size-4`.
3. Build the bottom sheet as a `motion.div` with `drag="y"` and snap points at 80px, 50 percent and full height; animate with a spring (`stiffness: 300, damping: 32`).
4. Results list: `divide-y divide-white/5`, each row a button with name in white and address in grey; tapping sets a selected id.
5. Detail view: wrap list and detail in `AnimatePresence mode="wait"` and animate `opacity` and `y: 12` over 250ms; the Directions button is `rounded-full bg-white/10 h-10 w-full`.
6. Add floating map controls as a vertical stack of 32px circular buttons on the right edge.

## Generation prompt
Three modern smartphones on a near-black background showing a dark-mode housing search app: a charcoal city map with blue building pins and white price-range pills, a bottom sheet listing results with names and addresses, and a detail screen with a directions button and labelled info sections in white and grey sans-serif type; clean minimal civic product presentation, smooth transitions, no logos.