---
version: alpha
name: "Nextdoor"
website: "https://nextdoor.com"
description: >-
  A neighborhood-social-network brand whose marketing site pairs a proprietary variable sans called Saans with a single forest-green brand voltage against a white canvas. The hero is a full-bleed park photograph with a white sign-up card centered over it — an unusual move that positions the product as a window into real outdoor space rather than a digital interface. Below the fold, three editorial photography tiles carry inline overlay captions, and the footer resolves to a dense, ink-on-white link grid. The system runs one brand green across every active surface — CTA button, logo, "Join Nextdoor" pill — while every other surface stays white or a blue-gray near-ink.

seo:
  title: "Nextdoor Design System for React — forest green, Saans, 15 components"
  metaDescription: "Nextdoor's marketing design system as a DESIGN.md file. Forest green on white, Saans proprietary sans, photo-over-card hero, 14 colors, 15 components. For React, Next.js, and AI tools."
  highlights:
    - "Photo-as-hero canvas — a full-bleed park photograph replaces the typical gradient or flat color, with the sign-up card centered over it as a floating white panel"
    - "Single forest-green voltage — the brand green appears exactly on the logo, the primary CTA button, and the 'Join Nextdoor' pill below the fold; every other surface is white or near-ink"
    - "Saans variable weight system — the custom proprietary sans runs at fractional weights (420 for body, 620 for labels/headings) rather than the standard 400/600 steps"
    - "Blue-gray ink stack — the primary text tone is a blue-gray near-ink rather than pure black, giving the typography a slightly cooler, editorial feel"
    - "Pill-dominant radius scale — 10000px (full pill) is the most-used border-radius value, appearing on CTA buttons and form elements; 12px carries inputs and cards"
  tags:
    - "Social & Community"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Nextdoor's homepage makes a move that few social products attempt: it puts a full-bleed photograph of an actual park in the hero slot, and places the sign-up form over it as a floating white card. The headline reads "Discover your neighborhood" in a 22px semi-condensed weight of the brand's proprietary Saans typeface. There is no gradient, no illustrated scene, no abstract shape. The implication is that the neighborhood is already there, and the product is the window. Where Facebook's marketing surface uses studio photography of product UI and Instagram leans on a gradient-branded icon wall, Nextdoor bets on documentary photography of public outdoor space.

    The brand voltage is a single forest green — saturated and unmistakably outdoorsy — wired into every interactive surface: the logo mark, the primary CTA button in the hero card, and the "Join Nextdoor" pill in the mid-page feature row. Every other surface on the page is white or a blue-gray near-ink. The typography runs on Saans, a custom variable sans, at fractional weights that don't correspond to the CSS standard steps — 420 for body, 620 for headlines and labels, 700 for bold emphasis. The weight names suggest a variable font axis, and the result is a type hierarchy that feels calibrated rather than pulled from a preset.

    Feed this file to an AI coding tool and it reproduces Nextdoor's moves: forest-green single-voltage on white, floating card over photograph for the hero, Saans-equivalent variable weight typography, and full-pill rounding reserved for CTAs while cards use the 12px contained tier. The one distinctive bet worth noting: the photo-as-hero strategy only reads as "neighborhood authenticity" when the photography itself is warm, outdoor, and non-staged — substitute a studio shot of a phone screen and the visual argument evaporates entirely.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://nextdoor.com"
      title: "Nextdoor — official site"
      description: "Nextdoor's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Nextdoor's primary brand color?"
      answer: "Nextdoor's brand voltage is a forest green — a mid-depth, saturated green wired into the CSS as --theme-ui-colors-greens-core, --brand-logo, --nd-color-staticLogo, and --nd-color-green40. It appears on the logo mark in the top nav, the primary CTA button fill in the hero sign-up card, and the 'Join Nextdoor' pill button in the feature row below the fold. The exact captured hex is the green40 step of Nextdoor's internal green scale. Outside those three surfaces, the brand green does not appear — every other surface on the marketing page is white, near-ink blue-gray, or the pale blue-gray background used for the page base."
    - id: "typography"
      title: "What typeface does Nextdoor use, and what should I substitute?"
      answer: "Nextdoor runs Saans — a proprietary custom sans-serif — across every typographic tier, with a fallback chain to system-ui, Helvetica Neue, Roboto, and Segoe UI. The font operates on a variable weight axis at fractional steps: 420 is the body and secondary-label weight, 620 is the primary label and heading weight, and 700 is the bold/strong emphasis tier. Display headlines sit at 22px / 620. There is no serif or mono voice. The closest open-source substitute is Inter; set 420 to font-weight 400 and 620 to font-weight 600. The fractional rounding between 400 and 700 is what makes Saans labels feel slightly denser than a standard Regular but softer than a typical SemiBold."
    - id: "hero-photo"
      title: "Why does Nextdoor use a full-bleed photograph rather than a gradient or flat color for the hero?"
      answer: "The park photograph in Nextdoor's hero is a deliberate brand argument: the neighborhood already exists outside your window, and the product connects you to it. The sign-up card floats over the photograph as a white panel with a soft shadow, which keeps the photography legible while centering the conversion action. This approach is rare in social products — most use abstract brand visuals, illustrations, or product UI mockups. Nextdoor's bet is that showing an actual public space, populated with people and sunlight, is more emotionally resonant for a hyperlocal product than any illustration or gradient could be."
    - id: "radius-scale"
      title: "What is Nextdoor's corner-radius philosophy?"
      answer: "The radius system is split between two dominant tiers: full-pill (10000px, appearing most frequently) and contained-card (12px). The full-pill treatment is used on the primary CTA button ('Continue' in the hero card, 'Join Nextdoor' in the feature row), the OAuth buttons ('Continue with Google', 'Continue with Apple'), and the sign-up card itself at its top corners. The 12px tier appears on text inputs (email, password fields in the hero card), secondary cards, and the footer business-CTA input. A 16px tier exists for larger content containers. There is no tight 4px or 0px flat tier used for interactive surfaces — the system skips utility-sharp rounding entirely."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a neighborhood or community platform interface?"
      answer: "Yes — feed the file to Claude, Cursor, or any AI tool and it will reproduce Nextdoor's moves: forest-green single-voltage on white canvas, floating card over full-bleed photography for the hero, Saans-equivalent variable-weight typography at 14-22px, and pill-dominant rounding (10000px) for CTAs with 12px cards. The tokens resolve cleanly — {colors.primary} for the green voltage, {typography.heading-md} for the 22px display, {rounded.full} for CTA pills. For a community product outside the neighborhood context, the photo-as-hero approach transfers well to any brand whose product connects people to physical places — real estate, travel, local services."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#1b8751"
  ink: "#232f46"
  ink-muted: "#576580"
  canvas: "#ffffff"
  surface-1: "#f0f2f5"
  surface-2: "#cad3e5"
  hairline: "#cad3e5"

typography:
  display-md:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue-Medium, \"Helvetica Neue Medium\", Helvetica-Bold, Roboto-Medium, \"Segoe UI Semibold\", Arial-Bold, sans-serif"
    fontSize: 22px
    fontWeight: 620
    lineHeight: 26px
    letterSpacing: 0
  heading-md:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue-Medium, \"Helvetica Neue Medium\", Helvetica-Bold, Roboto-Medium, \"Segoe UI Semibold\", Arial-Bold, sans-serif"
    fontSize: 16px
    fontWeight: 620
    lineHeight: 20px
    letterSpacing: 0
  body-md:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue, \"Helvetica Neue\", Helvetica, Roboto, \"Segoe UI\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 420
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue, \"Helvetica Neue\", Helvetica, Roboto, \"Segoe UI\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 420
    lineHeight: 18px
    letterSpacing: 0
  label-md:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue-Medium, \"Helvetica Neue Medium\", Helvetica-Bold, Roboto-Medium, \"Segoe UI Semibold\", Arial-Bold, sans-serif"
    fontSize: 14px
    fontWeight: 620
    lineHeight: 18px
    letterSpacing: 0
  body-strong:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue, \"Helvetica Neue\", Helvetica, Roboto, \"Segoe UI\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  button-md:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue-Medium, \"Helvetica Neue Medium\", Helvetica-Bold, Roboto-Medium, \"Segoe UI Semibold\", Arial-Bold, sans-serif"
    fontSize: 16px
    fontWeight: 620
    lineHeight: 20px
    letterSpacing: 0
  nav-link:
    fontFamily: "Saans, system-ui, -apple-system, \"system-ui\", HelveticaNeue, \"Helvetica Neue\", Helvetica, Roboto, \"Segoe UI\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 620
    lineHeight: 18px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  full: "10000px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.ink}"
  button-oauth:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "44px"
    borderColor: "{colors.surface-2}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "12px 24px"
    height: "56px"
    borderColor: "{colors.surface-2}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  hero-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "22px 12px 8px"
    height: "56px"
    borderColor: "{colors.surface-2}"
  photo-tile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "0px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "32px 24px"
    borderColor: "{colors.surface-2}"
  footer-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
  business-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    height: "48px"
    borderColor: "{colors.surface-2}"
---

## Overview

Nextdoor's marketing site makes a structural argument about what a neighborhood social network is. **Photography as brand medium.** The hero is a full-bleed park photograph — warm sunlight, people on grass, mature trees — and the sign-up form appears as a floating white card centered over it. No gradient, no illustration, no product UI mock. Where Facebook uses studio-quality social imagery and Instagram leans on a rainbow gradient, Nextdoor bets that showing the actual outdoors is more persuasive for a product about physical communities than any brand-designed visual could be.

The chromatic system underneath that photograph is minimal by necessity. One forest-green voltage (`{colors.primary}`) carries every interactive surface — the logo wordmark in the nav, the "Continue" CTA button inside the hero card, and the "Join Nextdoor" pill in the feature band below the fold. The page's text sits in a blue-gray near-ink (`{colors.ink}`) rather than pure black, giving the typography a slightly cooler register that reads as trustworthy-municipal rather than tech-product. The canvas is white throughout; there is no tinted surface or dark mode.

**Key Characteristics:**
- Single forest-green voltage (`{colors.primary}`) used exclusively on the logo, primary CTA fills, and the community-join pill — three occurrences above the fold, two below.
- Blue-gray near-ink text (`{colors.ink}`) rather than pure black — wired as --nd-color-fgStrong and --nd-color-blueGray70; the cool tint distinguishes body text from a pure-neutral typography system.
- Proprietary Saans variable sans running at fractional weights 420 (body), 620 (headings/labels), 700 (bold) — not the CSS standard 400/600/700 steps.
- Full-pill rounding (`{rounded.full}` — 10000px) on every CTA button; 12px contained rounding on inputs and cards.
- Photo-over-card hero: the sign-up card is a white panel with soft shadow, positioned over but not obscuring the photography; the park scene remains visible around and behind it.
- Three editorial photography tiles below the hero carry inline captions on dark overlay, showing neighborhood scenes (community members, street alerts, local food).
- Footer resolves to a dense multi-column link grid in ink on white — no background surface, no brand chrome.

## Colors

### Brand

- **Primary Green** (`{colors.primary}` — #1b8751): frequency 4. Used as background — the logo mark, the primary CTA button in the hero card, the "Join Nextdoor" pill. Wired in CSS as --theme-ui-colors-greens-core, --brand-logo, --nd-color-staticLogo, --nd-color-green40. The sole chromatic brand signal on the page; every other interactive surface is white.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 174. The dominant surface — the page background, the hero card, the nav, every content band below the fold. Wired as --nd-color-bgPrimary and --nd-color-bgElevated.
- **Surface-1** (`{colors.surface-1}` — #f0f2f5): frequency 4. The page base tone — used for the outer page background, the inset field background inside the hero card. Wired as --nd-color-bgBase and --nd-color-bgInlay.
- **Surface-2** (`{colors.surface-2}` — #cad3e5): frequency 6. A soft blue-gray used for card background fill and for the shadow on the floating hero card. Wired as --nd-color-bgUnderlay and --nd-color-blueGray10.

### Text

- **Ink** (`{colors.ink}` — #232f46): frequency 223. The primary text tone — used for headlines, body paragraphs, nav labels, and link text. Wired as --nd-color-fgPrimary, --nd-color-fgStrong, --nd-color-blueGray70. Noticeably blue-gray rather than neutral black.
- **Ink Muted** (`{colors.ink-muted}` — #576580): frequency 58. Secondary text — footer sub-labels, form helper text, secondary nav items. Wired as --nd-color-fgSecondary and --nd-color-blueGray50.

### Hairline

- **Hairline** (`{colors.hairline}` — #cad3e5): used for input borders, card outlines, and the footer top rule. Shares value with surface-2; the same blue-gray handles both light surface fills and 1px divider lines.

## Typography

### Font Family

The system runs **Saans** across every tier — a proprietary custom variable sans that Nextdoor ships with their marketing site. Fallbacks walk to `system-ui, -apple-system, HelveticaNeue, Helvetica, Roboto, "Segoe UI", Arial, sans-serif`. There is no separate display family, serif tier, or mono voice; one variable-weight sans handles everything. The weight axis operates at fractional steps: 420 is the body register, 620 is the heading and label register, 700 is the bold/strong tier.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-md}` | 22px | 620 | 26px | Hero h1 ("Discover your neighborhood") |
| `{typography.heading-md}` | 16px | 620 | 20px | Feature-tile headings, section sub-titles |
| `{typography.body-md}` | 16px | 420 | 20px | Default body text, form field text, footer columns |
| `{typography.body-sm}` | 14px | 420 | 18px | Sub-labels, photo-tile captions, helper text |
| `{typography.label-md}` | 14px | 620 | 18px | Footer column headings, nav link labels, active states |
| `{typography.body-strong}` | 16px | 700 | 20px | Bold emphasis within body copy |
| `{typography.button-md}` | 16px | 620 | 20px | CTA button labels, OAuth button labels |
| `{typography.nav-link}` | 14px | 620 | 18px | Top-nav link labels |

### Principles

The display tier is modest — 22px at weight 620. The headline sits over a full-bleed photograph and competes with photography; making it larger would fight the image. Saans at 620 is the system's one emphasis step. Body runs at 420, which reads like a custom light-medium between standard 400 and 500. There is no ultra-light or heavy tier; the weight range is deliberately compressed.

### Note on Font Substitutes

Saans is proprietary. **Inter** with variable font support is the closest open-source substitute — set weight 420 to `font-weight: 400` and weight 620 to `font-weight: 575` (using font-weight-adjust or the variable axis directly). For the 700 tier, standard Inter bold transfers cleanly.

## Layout

### Spacing System

- **Base unit:** 8px.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 64px.
- **Hero card internal padding:** 24px on all sides; the card holds the headline, two OAuth buttons, the email/password fields, and the primary CTA button.
- **Feature-tile padding:** implicit — each tile is an edge-to-edge photograph with an overlay caption strip at 24px internal left/bottom padding.

### Grid & Container

- **Max content width:** ~1280px on the nav and footer; the hero photograph is full-bleed behind the centered 360px card.
- **Hero:** full-bleed photograph, white card centered horizontally and positioned in the upper-center third.
- **Feature band (mid-page):** 3-column photography tile grid at desktop, each tile carrying an overlay text label.
- **"Connect with your neighbors" band:** centered headline + single green pill CTA on white canvas.
- **Business CTA band:** two-column layout, left side a headline and sub-paragraph, right side an inline email-capture input.
- **Footer:** 5-column link grid (Nextdoor, Neighbors, Partners, Industries, Legal) at desktop.

### Rhythm

The page alternates between full-bleed photograph (hero), contained white editorial (feature tiles), and pure-white typography bands. There is no tinted background surface shift — every non-photo band is white canvas. Depth comes from the hero card's shadow rather than surface-color stacking.

## Elevation

The system uses a **single elevation tier** — the hero sign-up card. A soft drop shadow (`{colors.surface-2}` at low opacity) lifts the white card off the photograph. No other surface on the page uses a shadow; cards in the content bands below the fold sit flat on white canvas with hairline borders.

- **Flat (no shadow):** every content surface below the hero — feature tiles, editorial bands, footer.
- **Card elevation:** the hero sign-up card carries the only shadow, distinguishing it from the photograph behind it.

## Shapes

The radius scale is **binary with a dominant pill tier**:

- `{rounded.none}` 0px — the full-bleed photo tiles; photography tiles are edge-to-edge flush with no rounding.
- `{rounded.sm}` 8px — minor UI surfaces; small chips.
- `{rounded.md}` 12px — text inputs (email, password), the business CTA input, secondary content cards.
- `{rounded.lg}` 16px — the hero card's container, larger content tiles.
- `{rounded.full}` 10000px — primary and secondary CTA buttons, OAuth buttons, the "Join Nextdoor" community pill. The most-used radius value on the page.

The full-pill treatment on every button is Nextdoor's single shape statement. The rest of the system is contained-card; the pill is reserved for every call to action.

## Components

**`button-primary`** — Forest-green `{colors.primary}` fill, white text, full-pill `{rounded.full}` radius, 8×24px padding, 40px height. "Continue" inside the hero sign-up card is the canonical instance; "Join Nextdoor" in the feature band is the same component.

**`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px ink border, full-pill `{rounded.full}` radius, 8×16px padding. Used for "Have a business? Get started" and "Have an invite code?" below the primary CTA.

**`button-oauth`** — White fill, ink text, hairline border, full-pill `{rounded.full}` radius, 44px height. Used for "Continue with Google" and "Continue with Apple" with inline brand icons.

**`top-nav`** — White canvas, 56px height, hairline bottom rule. Carries the Nextdoor wordmark flush left, the Partners / Businesses dropdowns and Log In link in the center-right, and the green "Sign up" pill button flush right.

**`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (14px / 620), 8×12px padding.

**`hero-heading`** — Ink `{colors.ink}` text, Saans 22px / 620. The "Discover your neighborhood" headline sits inside the white hero card, not over the photograph directly.

**`hero-card`** — White `{colors.canvas}` fill, `{rounded.lg}` 16px radius, 24px padding. Floats over the hero photograph with a soft shadow; contains the headline, OAuth buttons, form fields, and primary CTA.

**`body-paragraph`** — Ink text at `{typography.body-md}` — the footer columns and the mid-page editorial paragraphs.

**`body-paragraph-muted`** — Muted `{colors.ink-muted}` at `{typography.body-sm}` — helper text under form fields, secondary sub-labels.

**`card`** — White fill, `{rounded.md}` 12px radius, 16px padding, 1px hairline border. The default content card in feature and business sections.

**`text-input`** — White fill, ink text, `{rounded.md}` 12px radius, 22px top / 12px side / 8px bottom padding (floating-label pattern), 56px height, hairline border. The email and password fields in the hero card use a floating-label interaction pattern where the placeholder lifts on focus.

**`photo-tile`** — Edge-to-edge photography with no rounding (`{rounded.none}`), ink overlay at reduced opacity, white overlay-caption text in `{typography.body-sm}`. Used in the 3-column feature band below the hero.

**`footer`** — White canvas, muted-gray text, 32×24px padding, hairline top rule. Five-column link grid.

**`footer-heading`** — Ink text at `{typography.label-md}` (14px / 620) — the column headings (Nextdoor, Neighbors, Partners, Industries, Legal).

**`business-input`** — White fill, ink text, `{rounded.md}` 12px radius, 48px height, hairline border. The "Your business name" inline capture field in the business CTA band.

## Do's and Don'ts

**Do** use documentary outdoor photography for any hero background — the entire visual argument of the Nextdoor system is that real neighborhoods are more compelling than brand-designed visuals. Replace the photography with abstract shapes or gradients and the brand position dissolves.

**Do** reserve `{colors.primary}` (forest green) for the logo, primary CTAs, and community-action pills only. The system has three to four green occurrences above the fold; multiplying them into section headers or icon accents destroys the signal-scarcity that makes each green moment read as action.

**Do** use `{colors.ink}` (#232f46) — never pure black — for all text. The blue-gray tint is load-bearing; switching to neutral black makes the type look like it belongs to a different system.

**Do** apply `{rounded.full}` (10000px) to every interactive button. The pill shape is the single consistent shape signature in the system; cards use 12-16px, buttons are always full-pill.

**Don't** set display typography above 22px on this system. The hero headline is 22px because it competes with a full-bleed photograph; bumping to 36px or 48px turns the headline into the visual protagonist and undercuts the "photo-as-medium" strategy.

**Don't** introduce a tinted or dark background surface below the hero fold. The system is white throughout; surface-1 (`{colors.surface-1}` — #f0f2f5) appears only for inset field backgrounds, not section fills.

**Don't** use weight 700 (bold) for headings. That weight is reserved for `<strong>` emphasis within body paragraphs only; headings and labels use weight 620.

**Don't** place hairline borders (`{colors.hairline}` — #cad3e5) on photo tiles or CTA buttons. The hairline is a field-and-card token; photo tiles are borderless, buttons are either pill-filled or ink-outlined.

## Known Gaps

- **Sign-up form complete state:** the hero card captures only the unauthenticated empty state; the form's error states, field validation, and success redirect are not visible on the marketing surface.
- **Hover and focus states:** only the resting state is captured; focus rings, hover fills on nav links, and button active-press states are not represented.
- **Mobile layout:** the screenshot captures a desktop breakpoint; the hero card at mobile likely fills the viewport edge-to-edge, and the 3-column photo grid collapses to single column.
- **Dark mode:** no dark-mode marketing surface exists at the captured URL; the declared CSS variables include --nd-color-bgTint and overlay tokens but no rendered dark canvas.
- **Authenticated product surfaces:** the Nextdoor feed, maps, events, and Faves interfaces carry a substantially richer component set (reaction chips, map markers, feed cards, neighborhood badges) not represented here.
- **Motion:** the page has no visible transition animations above the fold; scroll-in animations on the feature tiles below are not captured.