Design systemstaging

UI Lab

The rendered inventory for BlockPager’s tokens, shadcn primitives, and recurring product patterns. Make a change once, then inspect it here at every supported width.

Not shipped to production
This route returns a 404 unless the application environment is local or staging.

Foundations

The shared visual language behind every component. Color samples use semantic tokens rather than fixed values.

Typography

Display · 42–70 / semibold · marketing only

Meet the people nearby.

Screen title · 34–44 / semibold

Your block, connected.

Compact screen title · 22 / semibold

Block Conversations

Section title · 20–24 / semibold

Neighbors on this block

Row title / action · 13–17 / semibold

123 Example Street

Body · 14–17 / regular

Reach the people close enough to help.

Supporting · 11–13 / regular

Updated a few moments ago

Section label · 11 / semibold uppercase

Directory

Product UI uses regular, medium, semibold, and bold weights only. Supporting text is never smaller than 11px; compact map attribution is the sole exception.

Semantic color

Background
Card
Foreground
Muted
Primary
Success
Warning
Destructive
Map area
Map resident
Map property

Shape, depth, and target widths

461014
390px · compact834px · regular1280px · desktop

Actions and navigation

Button variants, sizes, grouped actions, tabs, and icon affordances—including disabled and selected states.

Button variants

Sizes and icons

Button group

Tabs

Three joined neighbors are nearby.
Line tabs work well for secondary detail views.

Forms

Field composition, input states, text areas, search affordances, and the Base UI combobox used by shadcn.

Household details

Visible only to verified nearby neighbors.

Feedback and status

Inline status communicates with semantic color, clear labels, and text—not color alone.

Default
Public property records are still loading.
Information
Your block boundary comes from Census geography.
Verified
Your residence has been confirmed.
Check this address
The parcel boundary may be incomplete.
Couldn’t send
Keep your draft and try again in a moment.
JoinedYouPublic recordNeeds review

Surfaces

Surface and card primitives establish hierarchy without introducing unnecessary shadow or nested chrome.

Standard card
Title, description, action, content, and footer.
Cards are reserved for self-contained objects with their own actions or status.
Compact card
For dense supporting content.
Spacing changes, but the semantic structure remains intact.
Section label

Section heading

A reusable eyebrow, title, description, and icon hierarchy.

Sheet surface

The 14px presentation radius is reserved for large sheets and modal-like surfaces.

Data display

Representative directory data exercises table headers, rows, horizontal containment, status, and row actions.

Directory table
Example data only—never snapshot resident data.
Three representative directory rows.
AddressResidentStatusAction
123 Example StreetRiley NeighborJoined
125 Example StreetHousehold not joinedProperty
127 Example StreetMorgan NeighborJoined

Mobile full-bleed studies

Three ways the logged-in app could shed desktop card chrome below the mobile breakpoint. Resize the lab or use the interactive tabs to compare density and navigation tradeoffs.

Shared rule under considerationAt 559px and below: remove page gutters from primary product surfaces, drop card borders and shadows, and use spacing plus hairline separators to preserve hierarchy.

A · Edge-to-edge stack

Recommended

Keep today’s vertical flow, but turn every card into an edge-to-edge section with compact headers and separators.

BlockPagerRN
Queen AnneYour block7 properties · 3 joined neighbors
DirectoryPeople and properties
3
Riley Neighbor123 Example StreetJoined
Household not joined125 Example StreetProperty
Morgan Neighbor127 Example StreetJoined
MessagesMy block
RN

Did anyone else lose power for a moment?

Message your block
Smallest implementation change · all content remains visible

B · Task tabs

Let Map, Directory, and Messages become top-level tasks. Each view gets the full screen instead of sharing it.

BlockPagerRN
Queen AnneYour blockTap a parcel to see who lives there
Most app-like · adds navigation between primary tasks

C · Map + attached sheet

Keep the map persistent and attach an expandable directory sheet directly to its lower edge.

BlockPagerRN
Queen AnneYour block
DirectoryPeople and properties
2
Riley Neighbor123 Example StreetJoined
Household not joined125 Example StreetProperty
Map Messages
Strongest map focus · highest interaction complexity
Navigation extension

Use the existing bottom bar to separate place from conversation

Today the bar has Block and Profile. These studies test whether Messages deserves a global destination while message groups remain a local switcher inside it.

D · Block hub + Messages

Recommended

Keep Block as the map-first home with a conversation preview. Add Messages as a global destination, then switch groups at the top of that view.

BlockPagerRN
Queen AnneYour block7 properties · 3 joined neighbors
RNMN3 neighbors have joined
Block conversationDid anyone else lose power for a moment?
Clear global destinations · channels remain local to Messages

E · Keep the two-tab bar

Leave the current Block/Profile bar unchanged. Add Explore and Messages as a second level inside Block.

BlockPagerRN
Queen AnneYour block7 properties · 3 joined neighbors
RNMN3 neighbors have joined
Block conversationDid anyone else lose power for a moment?
Zero global-nav change · “Block” now contains two different modes

F · Four direct destinations

Expose Map, Directory, Messages, and Profile directly in the bar for maximum one-tap access.

BlockPagerRN
Queen AnneYour block7 properties · 3 joined neighbors
RNMN3 neighbors have joined
Block conversationDid anyone else lose power for a moment?
Fastest direct access · weakest map + conversation relationship
Cold-start extension

Make an empty conversation useful and make every area visible

These keep the Block / Messages / Profile bar, replace abstract geography names with recognizable places and distance, and put map or directory context directly on the Messages screen.

  • Your block · 200 ft
  • Queen Anne · 1.2 mi
  • North Seattle · 6 mi

G · Map + directory context

Recommended

Pair a tiny parcel map with a compact directory preview above the conversation. The empty state offers introductions and invitations without trapping the user in dead chat.

BlockPagerRN
MessagesConversations
Nearby3 neighbors · 7 homes
RNMN
ConversationYour block
No messages here yet

Meet the people nearby or be the first to say hello.

Message your block
Place context stays visible · directory remains one tap away

H · Map-backed switcher

Give the active conversation a wider map snapshot. Named areas and distance stay in the switcher, while one compact row opens the full map.

BlockPagerRN
MessagesConversations
ConversationYour block
No messages here yet

Meet the people nearby or be the first to say hello.

Message your block
Geography is explicit · conversation keeps most of the screen

I · Activity-first inbox

Treat Messages as a place activity inbox. Neighbor joins and mapped homes give the screen life before anyone sends the first message.

BlockPagerRN
MessagesPlaces and activity
Around Your blockYour block is taking shape
ConversationYour block
No messages here yet

Meet the people nearby or be the first to say hello.

Message your block
Useful before chat starts · more mixed-content than a classic messenger
Refined direction

Three global destinations, with geography kept in context

Messages contains Block, Neighborhood, and Region today, with room for school or institution groups later. Explore is a separate curated feed that can be filtered to the user’s neighborhood or region.

K · Messages, Explore, Profile

Refined direction

Messages holds every group a person belongs to. Explore surfaces curated incidents and events, while Profile stays focused on identity, residence, and preferences.

BlockPagerRN
MessagesYour communities
Your blockSeattle, WA 9811215 properties
DirectoryKing County
Block conversation
No messages yet. Introduce yourself to the block.
Purpose stays global · group scope stays inside Messages · discovery scope stays inside Explore

Product patterns

A small set of real compositions catches regressions that isolated primitives cannot: density, hierarchy, icon alignment, and responsive wrapping.

Directory
Top tabs
Always-visible destinations above the conversation. This is the clearest replacement for the sidebar.
Recommended
Messages
RN
Riley Neighbor

Did anyone else lose power for a moment?

Conversation chips
Messenger-like channel chips leave room for unread counts and more destinations later.
Messages
RN
Riley Neighbor

Did anyone else lose power for a moment?

Compact switcher
Signal-like focus on one conversation, with the channel list available from a compact header switcher.
RN
Riley Neighbor

Did anyone else lose power for a moment?

Responsive carousel

One, two, or three cards remain visible as the viewport grows, with keyboard and button navigation from the shared shadcn carousel primitive.

BlockPager in everyday life
Packages

Bring in a package while you’re away.

Ask someone nearby to get it off the porch before the weather does.

Home alarms

Check an alarm from across town.

Find out what’s happening at home without calling everyone you know.

Water leaks

Get nearby eyes on a leak quickly.

Reach the people close enough to spot the source or help find the shutoff.

Outages

Compare notes when the power goes out.

Share one useful update and see which homes may need a hand.

Lost pets

Look together when a pet gets loose.

Start with the people already closest to where your pet was last seen.

Storm damage

Share what’s blocked after a storm.

Coordinate around the homes and sidewalks affected, without starting a public feed.

Deliveries

Check whether a service visit happened.

Get a nearby confirmation before a delivery window closes or a driver leaves.

Found items

Return something left on the sidewalk.

Let the closest households know what you found and where they can collect it.

Home projects

Give neighbors a useful heads-up.

Reach just the homes close enough to be affected by noise, access, or equipment.

Everyday help

Find a nearby hand when timing matters.

Coordinate one small favor with someone who is already a few doors away.