The Nabe — Pattern Library

Shared building blocks used across every screen. Approve once, everything follows. Unique screens noted where they diverge.

1. Section Headers
How we introduce content sections inside drawers, tabs, and detail views.
Gradient bar — for major sections (events, highlights, categories)
🎵 Tonight in the Neighborhood 3 events
💜 Community Highlights
⭐ Tomorrow
Simple text — for sub-sections within a view (Key Details, About)
Key Details
About This Listing
Matched Agent
"Only on Nabe" badge — centered, for exclusive content
✨ Only on Nabe
Rule: gradient bars for top-level sections in briefings/drawers. Simple text for sub-sections within a detail view. "Only on Nabe" always centered.
2. Event & Item Rows
How we show events, activities, and timed items in lists.
With time pill (briefings, calendar list view)
7 PM
Live Jazz at Devocion
🎷 · 34 going
6:30
Friday Slice Night — Paulie Gee's
🍕 · 18 going
Without time (feed items, notification rows)
📸
Maria posted in Williamsburg
2 hours ago · 12 likes
Rule: time pill on left for scheduled items. Emoji icon box for non-timed items. Always warm-bg row, rounded-md. First event in calendar gets the hero card treatment (unique to calendar).
3. Cards
Container patterns for grouped content.
Info card — warm bg with icon (events, places, features)
🎷
Live Jazz at Devocion
7:00 PM · 34 going
Highlight card — left border accent (alerts, community moments)
🙌
Maria organized a block cleanup
18 neighbors showed up
😱
You missed!
Free pizza — sold out in 40 min
Review card — warm bg, name + stars + text
Sarah K. Feb 2026
★★★★☆
Great building, responsive management.
Rule: warm-bg for standard cards. Amber bg + border for warnings/missed. Left border accent for editorial highlights. All rounded-md (8px) inner, rounded-lg (12px) outer wrappers.
4. Stat Displays
How we show numbers and counts.
Inline stat bar — centered (briefings, summaries)
23 posts · 4 events · 12 new neighbors
Stat boxes — for profile / dashboard (numbers are hero)
23
Posts
4
Events
12
Neighbors
Rule: inline bar for compact contexts (briefings). Stat boxes for profile/dashboard where numbers are the hero. Numbers always gradient text. Always centered.
5. Buttons
Three tiers based on importance.
Primary — gradient, full width CTAs
Secondary — white with border
Text link — inline actions
Rule: one primary per section max. Primary = gradient, rounded-lg (8px), py-2.5. Secondary = white + gray border. Text = indigo-500, no background.
6. Pills & Badges
Selection states, status indicators, scores.
Active / Inactive chips (filters, vibes, tabs)
Williamsburg Greenpoint East Village
Content badges (nudges, tags)
🔥 High Interest 📉 Below Market 💎 Rarely Available
Score pills (score breakdowns)
High: 91 Mid: 68 Low: 42
Status badges
Active Expired Pending
Rule: active = gradient fill, white text. Inactive = white + gray border. Content badges = warm bg + purple border. Scores = gradient/amber/red by value. All rounded-full, px-2.5 py-0.5 text-xs font-medium.
7. Tabs & Toggles
Switching between views within a container.
Segmented control — for switching content within a section
Pill toggle — for binary choices (List/Calendar, Professional/Personal)
List Calendar
Professional Personal
Rule: segmented control for 3+ options within a content block. Pill toggle for binary choices. Both use the same active/inactive color logic.
8. Avatars
People and agents. Always gradient when no photo.
AR
SC
MK
sm (28) · md (36) · lg (44)
Rule: gradient fill default. sm for inline lists, md for cards/rows, lg for profile headers. Always initials, never generic person icon.
9. Score Displays
NabeScore, building scores, ratings.
Score circle — hero display
72
87
sm (32) for cards · md (44) for detail views
Score factor rows — label + pill
Walkability 88
Noise Level 68
Value 42
Rule: circle for the overall score. Pill rows for breakdowns. No bar charts. Gradient = 80+, amber = 60-79, red = below 60.
10. AI & Nabe Intelligence Bar
Entry point to AI features. Always at the bottom of a content section.
✨ Ask Nabe AI for details →
Rule: warm-bg, rounded-md, sparkle icon, indigo text, arrow right. Always at bottom of a section, never floating.
11. Drawer Headers
How every bottom sheet drawer opens.
🌙 Evening Briefing
Since 5pm · Williamsburg
Rule: drag handle centered, title left (can include emoji + gradient text), subtitle below in gray, close X button top right. No gradient background on header — keep it clean white.
Unique Screens (don't force patterns)
These screens have their own identity but still use the shared building blocks above.
Feed cards — unique photo+content layout, 3/1 aspect ratio. Uses shared pills/badges/avatars but the card itself is its own pattern.
Map view — CartoDB tiles, custom markers, neighborhood overlays. Completely unique.
Listing detail photo carousel — full-width swipeable photos with overlaid price + score. Unique to listings.
Calendar hero card — first event of the day gets a large card with colored header. Rest use standard event rows. Unique to calendar.
Onboarding / Welcome — splash screens with their own visual language. Still need design pass but will be unique.
Post creation — form-based, has its own input patterns. Uses shared buttons/pills.

Review each section. Flag anything that doesn't feel right. Once approved, every screen follows these patterns — no more per-screen decisions.