Nextdoor DESIGN.md

1. Visual Theme & Atmosphere

Nextdoor's iOS app feels like a friendly community bulletin board, not a tech product. The defining choice is the canvas: a warm cream (#FAF9F6) rather than the cold pure-white of most social apps. That subtle off-white warmth signals neighborliness — it reads as paper, as a notice pinned to a fence, as something local and human. Cards sit on top as crisp white (#FFFFFF) surfaces, so the cream shows through as the gutter between them, giving the feed a soft, approachable rhythm. Text is a near-black warm ink (#221E1F) with a muted brown-gray secondary (#6B6864) — even the grays lean warm to match the cream.

The accent system is anchored by Nextdoor Green (#00B246) — a confident, civic green used for the primary action, the center "Post" FAB, follow/join buttons, and verified-neighbor accents. Its pressed state deepens to #007A30, and links use a slightly darker forest green (#006B3C) for legibility on cream. Green here reads as "community," "trusted," "go" — it is the color of the local park and the recycling bin, not a startup's brand gradient. The single most distinctive screen is the hyperlocal map: a real neighborhood map with category pins (recommendations, for-sale, alerts, events) dropped at actual addresses — the product's core promise that everything is near you made visual.

Typography is Lato (a warm, rounded humanist sans) mapped to a system fallback. Lato's slightly soft terminals reinforce the friendly, civic tone — it is not a sharp grotesque. Display names are bold with a verified-neighbor badge and a location line ("0.3 mi · Maple Heights"); the location is a first-class metadata element because where a neighbor is matters as much as who they are. Headlines are warm and bold; body text is comfortable for reading multi-paragraph neighborhood posts. The whole system says: this is your street, in print, made simple.

Key Characteristics:

• Warm cream canvas (#FAF9F6) with crisp white (#FFFFFF) cards — paper, not screen
• Nextdoor Green (#00B246) for primary actions, the center Post FAB, follow/join, verified
• Hyperlocal map with category pins at real addresses — the signature screen
• Neighbor cards with name + verified badge + distance/neighborhood location line
• Lato typeface (warm humanist sans) mapped to a system fallback
• Group/topic chips for filtering the feed by community
• Subtle, gentle motion — fades and a soft FAB press, nothing flashy
• Bottom tabs (Home / Map / Post-center FAB / Notifications / Inbox)
• Light mode only — the warm cream is the identity

2. Color Palette & Roles

Primary

• Nextdoor Green (#00B246): Primary CTA, center Post FAB, Follow/Join buttons, verified-neighbor accent, active tab.
• Green Pressed (#007A30): Active/pressed state for green CTAs and the FAB.
• Link Forest (#006B3C): Hyperlinks, tappable place/post references — a darker green for contrast on cream.

Canvas & Surfaces (Light only)

• Cream Canvas (#FAF9F6): The signature warm background — paper, not pure white.
• Surface 1 (#FFFFFF): Cards, the map sheet, composer — crisp white on cream.
• Surface 2 (#F2F0EB): Pressed rows, chip backgrounds, grouped settings.
• Divider (#E4E2DD): Hairline separators, card borders — a warm light tan.
• Text Primary (#221E1F): Post body, names, headlines — a warm near-black ink.
• Text Secondary (#6B6864): Location lines, timestamps, metadata — a warm brown-gray.
• Text Tertiary (#9C9893): Disabled labels, low-emphasis hints.

Semantic

• Verified Green (#00B246): Verified-neighbor checkmark badge (same as primary green).
• Alert Amber (#E58A00): Local alerts, urgent neighborhood notices banner.
• Error Red (#D93A2B): Destructive confirms, validation, report flow.
• Event Blue (#1B6FB3): Event category pins and event RSVP accents on the map.
• For-Sale Purple (#6E4FA3): For-sale/free category pins on the map.

Dark Mode (Not Used)

Nextdoor's iOS app is light-only by design — the warm cream canvas is the brand's identity and does not invert.

3. Typography Rules

Font Family

• Primary: Lato (warm humanist sans — friendly civic tone)
• Fallback Stack: 'Lato', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• System fallback: SF Pro on iOS when Lato is unavailable — keep weights aligned

Hierarchy

Principles

• Warm humanist face: Lato's soft terminals carry the neighborly, civic tone — not a sharp grotesque
• Location is structural: the 13pt distance/neighborhood line is always present, never optional
• Weight at 400 / 700: Lato regular for body, bold for names/headlines/buttons — a simple two-weight system
• System fallback aligned: if Lato is missing, fall back to SF Pro at the same sizes/weights
• Green text only for links — body text never uses the accent; names are ink, not green

4. Component Stylings

Buttons

Primary Button ("Post" / "Join" / "Follow")

• Background: #00B246
• Text: #FFFFFF
• Padding: 12pt vertical, 24pt horizontal
• Corner radius: 24pt (soft rounded — friendly, not a hard rectangle, not a full pill on wide buttons)
• Font: Lato 16pt weight 700
• Pressed: #007A30, scale 0.98
• Disabled: #00B246 at 40% opacity

Secondary / Following Button

• Background: transparent
• Text: #00B246
• Border: 1.5pt solid #00B246
• Padding: 10pt vertical, 20pt horizontal
• Corner radius: 24pt
• Pressed: background #F2F0EB

Center Post FAB (Bottom Tab Center)

• Shape: Circle, 56pt diameter, raised in the center notch of the tab bar
• Background: #00B246
• Icon: SF Symbol plus 26pt in #FFFFFF
• Shadow: rgba(0,178,70,0.32) 0 6px 18px
• Pressed: scale 0.94, #007A30, soft haptic + gentle scale-up of the compose sheet

Card Action Buttons (React / Reply / Share)

• Layout: horizontal row under the card body, icon + label
• Size: 20pt glyph, 14pt w700 label, 44pt hit area
• Default: #6B6864
• Active (reacted): #00B246
• Spacing: evenly distributed across the card footer

Cards & Containers

Neighborhood Feed Card (THE core unit)

• Background: #FFFFFF on the #FAF9F6 cream canvas (cream is the gutter)
• Border: 1pt #E4E2DD, corner radius 16pt
• Margin: 12pt between cards (cream shows through), 16pt horizontal page inset
• Padding: 16pt
• Header: 44pt circular avatar → neighbor name (16pt w700) + green verified badge → location line (13pt #6B6864: "0.3 mi · Maple Heights · 2h") → trailing ⋯
• Body: 16pt w400, 1.45 line height; links/place refs in #006B3C
• Optional photo: full-width, 12pt radius
• Footer: React · Reply · Share row, evenly spaced; a thin #E4E2DD divider above it
• Reaction summary: small inline count ("12 neighbors thanked this")

Map Pin & Cluster

• Pin: a rounded teardrop/circle in the category color (green recommendations, blue events, purple for-sale, amber alerts) with a 12pt w700 white label (price or glyph)
• Selected pin: scales 1.15 and gains a #00B246 ring + white border
• Cluster: a circle with a count ("8") when pins overlap at a zoom level
• Tapping a pin slides up a peek card (the underlying post) from the bottom

Hyperlocal Map Sheet

• Full-screen map (real neighborhood tiles) with category pins at actual addresses
• Top: category filter chips (All · Recommendations · For Sale · Events · Alerts)
• Bottom: a draggable peek sheet showing the selected post or a list of nearby posts
• "Recenter to my neighborhood" circular button (44pt) bottom-right

Group / Topic Chip Row

• Horizontally scrollable chips above the feed: "Crime & Safety", "Recommendations", "For Sale & Free", "Events", "General"
• Default: #F2F0EB background, #221E1F text
• Selected: #00B246 background, #FFFFFF text
• Corner radius: 500pt (full pill), 14pt w700 label

Profile / Neighbor Header

• Cover strip (light), 110pt
• Avatar 80pt circular, overlapping by 32pt, 4pt cream-colored ring
• Name 22pt w700 + verified badge, location line 15pt #6B6864
• "Follow" green primary + message + ⋯
• "Neighbor since 2019 · 142 helpful reactions" stat line

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: #FFFFFF (opaque, sits on cream) with a 0.5pt #E4E2DD top hairline
• Tabs: Home, Map, Post (center raised FAB), Notifications, Inbox
• Icon size: 26pt
• Active: #00B246; Inactive: #6B6864
• Labels: Lato 10pt w700
• Center Post button is a raised 56pt green circle breaking the top edge of the bar
• Notifications/Inbox show a green unread dot badge

Top Nav (Home)

• Height: 48pt + safe area
• Left: neighborhood name (18pt w700) with a small chevron (tap to switch neighborhood)
• Right: search (22pt) + filter (22pt)
• Sits on cream; subtle hairline on scroll

Input Fields

Search Field

• Background: #FFFFFF with 1pt #E4E2DD border
• Height: 42pt, corner radius 500pt (pill)
• Leading magnifyingglass 16pt #6B6864
• Placeholder: "Search your neighborhood", 15pt w400 #6B6864
• Focus: 1.5pt #00B246 ring

Post Composer

• White sheet on cream backdrop
• Audience selector at top: "Neighborhood" / "Nearby neighborhoods" / a specific Group (chevron)
• Category picker chips: General / Recommendation / For Sale / Event / Crime & Safety
• Plain text area 18pt w400 for comfortable writing
• Photo, poll, and location-tag affordances in a toolbar

Distinctive Components

Hyperlocal Map View

• The signature: a real neighborhood map with category-colored pins at actual addresses, a category filter chip row, and a draggable peek sheet — the entire "everything is near you" promise rendered as the product's hero screen

Verified-Neighbor Badge

• A small green checkmark.seal.fill next to a name, signaling an address-verified resident — trust is a first-class visual in a local network

Location Line

• The "0.3 mi · Maple Heights · 2h" metadata under every name — distance and neighborhood are inseparable from identity here

Group Chips

• The community filter row — tapping a chip reframes the feed to one topic/group, making the feed locally scoped and browsable

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
• Standard margin: 16pt horizontal page inset
• Card rhythm: 12pt gap between cards (cream canvas is the gutter)

Grid & Container

• Content width: full device width, 16pt page insets, cards full-width within
• Map: full-bleed edge-to-edge; the peek sheet is full-width with a 16pt-radius top
• For-sale grid (in category view): 2-column card grid, 12pt gap

Whitespace Philosophy

• Warm and breathing: the cream gutter between white cards gives the feed a soft, unhurried rhythm
• Reading comfort: 16pt body at 1.45 line height for multi-paragraph neighborhood posts
• Cards are objects: each post is a discrete bordered white card (unlike divider-only timelines) — like notices pinned to a board

Border Radius Scale

• Square (0pt): Rare — full-bleed map only
• Soft (12pt): Photos, map peek-sheet inner media
• Card (16pt): Feed cards, sheets' top corners
• Friendly (24pt): Primary/secondary buttons (soft, not pill, not sharp)
• Full Pill (500pt): Group chips, search field
• Circle (50%): Avatars, the center Post FAB, map recenter button, verified badge

6. Depth & Elevation

Shadow Philosophy: Shadows are soft, warm-tinted (based on the ink #221E1F, not pure black), and gentle — Nextdoor is calm, not dramatic. Feed cards get only the faintest lift (0.06 opacity) plus a warm tan border, so they read as paper notices rather than floating glass. The two real elevations are map pins (which must clearly sit above the map) and the green center FAB. Nothing in the app uses heavy or cold drop shadows.

Motion

• FAB press: scale 0.94, #007A30, soft haptic; compose sheet rises with a gentle 0.3s ease-out
• Reaction tap: icon fades to #00B246 with a subtle 1.0 → 1.12 → 1.0 scale over 250ms, light haptic
• Card appear: new feed cards fade + 8pt rise over 0.25s ease-out (no bounce)
• Map pin select: pin scales 1.0 → 1.15 with a green ring; peek sheet slides up 0.3s ease-out
• Chip switch: 0.2s cross-fade of the feed when a group chip is selected
• Pull-to-refresh: standard system spinner, no custom flourish — calm by default

7. Do's and Don'ts

Do

• Use the warm cream #FAF9F6 canvas with crisp white #FFFFFF cards — paper, not screen
• Reserve Nextdoor Green (#00B246) for primary actions, the center FAB, follow/join, and verified
• Always show the location line (distance · neighborhood · time) under every name
• Make the hyperlocal map a first-class screen with category-colored pins at real addresses
• Render feed posts as discrete bordered white cards with a 12pt cream gutter
• Use Lato (or an aligned system fallback) — the warm humanist tone matters
• Keep the verified-neighbor badge in green next to names
• Keep motion gentle — fades and soft scales, never bouncy or flashy

Don't

• Don't use cold pure-white as the canvas — the warm cream is the identity
• Don't add a dark mode — Nextdoor is light-only by design
• Don't drop the location/distance line — local context is the product
• Don't use cold black shadows — shadows are warm-tinted and faint
• Don't make buttons hard rectangles or full pills — the 24pt friendly radius is the tone
• Don't bury the map — it's the hero, not a tab afterthought
• Don't add accent colors beyond green and the category-pin palette
• Don't over-animate — calm, civic, and unhurried is the brand

8. Responsive Behavior

Device Sizes

Dynamic Type

• Post body, names, headlines: full scale (reading app — honor it)
• Location line, timestamps: scale modestly
• Tab labels: fixed 10pt
• Map pin labels: fixed 12pt (layout-critical inside pins)

Orientation

• Feed / Profile: portrait and landscape (iPad split)
• Map: portrait and landscape (more tiles in landscape)
• Composer: portrait-locked on iPhone

Touch Targets

• Card action buttons: 20pt glyph, 44pt hit area
• Center Post FAB: 56pt
• Tab icons: 26pt glyph, 44pt effective hit
• Map pins: minimum 36pt tappable, 44pt effective with hit-slop

Safe Area Handling

• Top: neighborhood title and chip row sit below safe area / Dynamic Island
• Bottom: tab bar (with raised center FAB) respects the home indicator; map peek-sheet docks above it
• Sides: 16pt content insets; the map is edge-to-edge

9. Agent Prompt Guide

Quick Color Reference

• Cream canvas: #FAF9F6
• Card surface: #FFFFFF
• Surface 2 (chips/pressed): #F2F0EB
• Divider / card border: #E4E2DD
• Text primary (warm ink): #221E1F
• Text secondary (warm gray): #6B6864
• Nextdoor Green (action): #00B246
• Green pressed: #007A30
• Link forest: #006B3C
• Alert amber: #E58A00
• Event blue (pin): #1B6FB3 · For-sale purple (pin): #6E4FA3

Example Component Prompts

• "Create a SwiftUI Nextdoor feed card: white #FFFFFF card on a #FAF9F6 cream canvas, 1pt #E4E2DD border, 16pt corner radius, 12pt gap to the next card. Header: 44pt circular avatar, neighbor name 'Dana R.' in Lato 16pt weight 700 with a green checkmark.seal.fill verified badge, then a location line '0.3 mi · Maple Heights · 2h' in 13pt #6B6864, trailing ⋯. Body 16pt weight 400 at 1.45 line height with place links in #006B3C. Footer: React · Reply · Share row, 20pt glyphs, 14pt weight-700 labels, with a 1pt #E4E2DD divider above it."
• "Build the Nextdoor center Post FAB: a 56pt green #00B246 circle raised into the center notch of the bottom tab bar, SF Symbol plus 26pt #FFFFFF, shadow rgba(0,178,70,0.32) 0 6px 18px. Pressed: scale 0.94, #007A30, soft haptic, and the compose sheet rises with a gentle 0.3s ease-out."
• "Design the Nextdoor hyperlocal map: a full-bleed neighborhood map with category-colored pins (green recommendations, blue #1B6FB3 events, purple #6E4FA3 for-sale, amber #E58A00 alerts) at real addresses, each pin a rounded teardrop with a 12pt weight-700 white label. A category filter chip row pinned at the top (All · Recommendations · For Sale · Events · Alerts) and a draggable bottom peek sheet showing the selected post. Selected pin scales 1.15 with a #00B246 ring."
• "Create a Nextdoor group chip row: horizontally scrollable pills above the feed — 'Crime & Safety', 'Recommendations', 'For Sale & Free', 'Events'. Default #F2F0EB background with #221E1F text; selected pill #00B246 background with #FFFFFF text; 500pt radius, Lato 14pt weight 700; switching cross-fades the feed over 0.2s."
• "Build the Nextdoor primary button: #00B246 fill, #FFFFFF Lato 16pt weight 700 text, 12pt vertical / 24pt horizontal padding, 24pt friendly corner radius (not a hard rectangle, not a full pill). Pressed: #007A30, scale 0.98."

Iteration Guide

1. Canvas is warm cream #FAF9F6 — never cold pure-white; cards are crisp #FFFFFF
2. Nextdoor Green #00B246 is primary actions + the center FAB + verified; links use forest #006B3C
3. The hyperlocal map with category-colored pins at real addresses is the hero screen
4. Every name carries a location line (distance · neighborhood · time) — local context is the product
5. Posts are discrete bordered white cards with a 12pt cream gutter — paper notices, not a divider timeline
6. Typeface is Lato (warm humanist) at weights 400/700 — fall back to SF Pro aligned
7. Shadows are faint and warm-tinted (based on ink, not black); buttons use a 24pt friendly radius
8. Light mode only; motion is gentle — fades and soft scales, never bouncy