# AI Guide — District · Map-forward

- **Slug:** `district-map-forward`
- **Category:** Civic & Public Service · Service Landings
- **Vibe:** map-forward, civic, trustworthy, warm paper
- **Format:** desktop landing page (responsive to one column)
- **Reference implementation:** `reference.html` (same directory, self-contained)
- **Audience:** coding agents reproducing this design in any stack

## Mission

A city-services landing page that leads with a map. The map is not decoration — it is
the mental model: every service is *located somewhere*, and searching is spatial.
Residents should feel that the city is open, responsive, and run by people who answer.

## Mood & voice

- Trustworthy and human: warm paper background, one map-orange accent, deep green ink.
- Voice: plain, second person, active verbs ("Find, pay, and track"), zero bureaucratic
  filler. "No phone trees, no office hours, no runaround."
- The design is proud of being civic: hard black borders and offset shadows give the
  tiles a printed-city-map weight — deliberate, not corporate.

## Color tokens

| Token | Hex | Use |
| --- | --- | --- |
| paper | `#f6f3ec` | page background |
| paper-2 | `#efe9d8` | map canvas, icon chips |
| card | `#ffffff` | tiles, search field, map stats |
| ink | `#16201f` | headlines, borders, text |
| ink-2 | `#3c4a47` | body text, nav |
| muted | `#6b746f` | captions, placeholders, footer |
| hair | `#ddd6c6` | hairlines, chip borders |
| accent | `#e8541d` | map pins, kicker, arrow links (map orange) |
| teal | `#1c7c6c` | emphasized word in headline, "4" pin, response stat |
| map-street | `#d9d1bc` | street lines on the map |
| map-river | `#b7d6cd` | river stroke |
| map-park | `#cfe0c2` | park block fill |

## Typography

Faces: **system grotesk** (`-apple-system / Helvetica Neue / Segoe UI / Arial`) for
everything; **monospace** (`ui-monospace / SF Mono / Menlo / Consolas`) for labels,
kickers, and data chips. No serif anywhere.

| Style | Size | Weight | Tracking | Notes |
| --- | --- | --- | --- | --- |
| kicker | 11 | 700 | +0.14em · uppercase | accent, mono |
| h1 | 52 (40 tablet) | 800 | −0.035em | max 13ch; one word in teal via `<em>` |
| lede | 17 | 400 | 0 | ink-2, max 46ch |
| nav | 14 | 600 | 0 | ink-2 |
| search input | 15 | 500 | 0 | placeholder #9aa09b |
| tile title | 16 | 700 | −0.01em | |
| tile body | 13 | 400 | 0 | muted, 1.5 line-height |
| map-stat k / v | 9 / 18 | 700 / 800 | +0.1em / −0.02em | mono k, grotesk v |
| footer | 12 | 500 | 0 | mono |

## Spacing & shape

- Page gutter: 28px; content max-width 1120px, centered.
- Top bar: 64px tall, hairline bottom border.
- Hero grid: `1.05fr 0.95fr`, 48px gap; 64px top padding.
- Search: white card, **2px ink border, radius 12, hard shadow `5px 5px 0 rgba(22,32,31,.9)`**,
  inner padding 6/6/6/18; go-button is ink with mono uppercase label.
- Map card: 2px ink border, radius 16, hard shadow `8px 8px 0`. Overlay stats sit
  bottom-left with 3px offset shadows; the "Map-forward" pill sits bottom-right,
  ink-filled, mono uppercase.
- Chips: radius 999, hairline border, 13px/600. Tiles: radius 12, 1px hair border,
  padding 20, hover = ink border + −2px lift. Tile icon chip: 38×38, radius 10, paper-2.
- Services grid: 3 columns (2 tablet, 1 phone), 14px gap.

## Map (the centerpiece)

Inline SVG, `viewBox 0 0 560 420`, on `#efe9d8`:

- Streets are rounded `#d9d1bc` paths, 8–12px, at slight diagonals; two vertical
  arterials, one horizontal main street, one short stub.
- A river sweeps the right edge: `#b7d6cd`, 26px, rounded cap.
- One park block (`#cfe0c2`) with a "ROSE PARK" label.
- Street labels: 10px, `#a49b85`, letter-spacing 1, uppercase.
- Four pins: orange (`#e8541d`) circles r=11 with 3px white stroke and a bold white
  number; the fourth pin is teal to signal "resolved" contrast.
- Two stat cards and the pill overlay the bottom-left / bottom-right of the SVG.

## Components

1. **Top bar** — brand (22px orange rounded-square mark with inner white inset square,
   wordmark + "City of Meridian" micro-label), nav, EN/ES pill.
2. **Search block** — the hero's spine: big hard-shadowed field, placeholders listing
   service categories.
3. **Popular chips** — "Trash & recycling / Permits / Parking / 311".
4. **Map card** — SVG + overlay stats ("311 requests · this week" orange 1,240;
   "Avg. response" teal 14 min).
5. **Service tiles** — six (Report an issue / Permits & inspections / Pay a bill /
   Trash & recycling / Parking & transit / Business licenses), each with an 19px thin
   line icon, title, one-liner, and an orange mono "go" link.
6. **Footer** — mono line: City Hall address + hours · meridian.gov · 311 · EN/ES.

## Copy (exact)

- Kicker: **City of Meridian · Service hub**
- H1: **Find, pay, and track city services in *one place.*** (teal on "one place.")
- Lede: **Every street, every permit, every bin day — searchable from a single field.
  No phone trees, no office hours, no runaround.**
- Placeholder: **Search permits, parking, trash days, 311…**
- Stats: **311 requests · this week — 1,240** · **Avg. response — 14 min**
- Tile go-links: **File a 311 → / Start an application → / Pay now → / Check my schedule
  → / Go → / Start here →**
- Footer: **City of Meridian · 200 Main St · Mon–Fri 8–5** · **meridian.gov · 311 · EN / ES**

## Interaction

- Search button hover: ink → accent. Chips hover: hairline → ink border.
- Tiles: 1px hair → ink border, lift −2px, 120ms ease. Map pins: static (do not add
  bounce/pulse animations unless asked).

## Responsive behavior

- ≤900px: hero stacks to one column (map below text), h1 drops to 40.
- ≤560px: tiles to 1 column, nav hides.
- The hard shadows can stay at every size; they are part of the identity.

## Do / Don't

- DO keep the map hand-drawn feeling — imperfect angles, labeled streets, no satellite
  imagery, no Google Maps embed.
- DO keep exactly two accent hues (orange, teal) plus ink. Nothing else.
- DON'T add a search autocomplete dropdown, filters, or a sidebar that isn't in the
  reference.
- DON'T use photos, gradients, or rounded-corner-everything; hard borders and offset
  shadows are the signature.
- DON'T put the map behind the headline — it is a sibling column, not a background.

## Reproduction checklist

- [ ] Paper `#f6f3ec`, ink `#16201f`, accent `#e8541d` used in exactly the reference places
- [ ] Search field has 2px ink border + 5px offset hard shadow
- [ ] Map is an inline SVG with streets, river, park, 4 numbered pins (3 orange, 1 teal)
- [ ] Six tiles, 3-col grid, hover lift + ink border
- [ ] Footer mono, address + meridian.gov + 311
- [ ] Stacks to one column ≤900px

## Stack notes

- **HTML/CSS:** `reference.html` is self-contained (no external assets at all).
- **React:** map = an `<svg>` component with props for pins; keep coordinates literal.
- **React Native / Expo:** swap hard shadows for `boxShadow`/`elevation`; map can be
  `react-native-svg`.
- **Tailwind:** `shadow-[5px_5px_0_#16201f]` etc. for the hard-offset look; arbitrary
  values are fine, the tokens are fixed.