# Mana Vaada brand kit: Street Index

Open [the interactive explorer](index.html) to compare three directions and inspect the recommended system. `concepts.html` remains the earlier single-system study; this kit extends the exploration and gives the team concrete reusable code and assets.

## Recommendation

**Street Index** treats the town as a place to navigate and understand, not a backdrop to decorate. Two offset path shapes meet at a small shared center. The logo remains recognizable in one color, while documentary photography and bilingual writing supply the human character. This is the strongest shared language for fast directory tasks, local journalism, and curated guides.

The other directions remain viable options:

| Direction | Strength | Main trade-off |
| --- | --- | --- |
| Local Journal | Distinctive long-form editorial voice | Needs a more decisive contact and comparison language |
| Everyday Atlas | Rapid search and map scanning | Can feel generic for community stories |
| Street Index | Balances clarity and character | Requires disciplined photography and content standards |

## Identity

The approved names are **Mana Vaada** and **మనవాడ**. Use the English or Telugu lockup to match the page language. The bilingual lockup is for covers, share assets and large spaces. In narrow navigation, use one wordmark and a visible language switch. Never replace the product name with a status label.

### Logo assets

| File | Use |
| --- | --- |
| [`assets/mark.svg`](assets/mark.svg) | Color app icon, avatar, favicon source |
| [`assets/mark-one-color.svg`](assets/mark-one-color.svg) | Single-ink print or reverse treatment |
| [`assets/mark.png`](assets/mark.png), [`assets/mark-one-color.png`](assets/mark-one-color.png) | Transparent 512 px raster exports |
| [`assets/mark.pdf`](assets/mark.pdf), [`assets/mark-one-color.pdf`](assets/mark-one-color.pdf) | Vector print exports |
| [`assets/lockup-en.svg`](assets/lockup-en.svg) | English UI and editorial assets |
| [`assets/lockup-te.svg`](assets/lockup-te.svg) | Telugu UI and editorial assets |
| [`assets/lockup-bilingual.svg`](assets/lockup-bilingual.svg) | Covers and broad canvases |
| `assets/lockup-*-one-color.svg` | Monochrome English, Telugu and bilingual lockups |

Keep clear space of at least half the mark's width. Minimum digital mark size is 24 px, with 32 px preferred in a mobile header. English lockup minimum width is 160 px and Telugu lockup minimum is 132 px. Test both at actual device pixels. Do not rotate, stretch, add a drop shadow, put the coral center in a different location, outline the paths, or set the wordmark over a busy photo. The SVG wordmarks retain live text for editing; outline the text with the final licensed font before sending to print or to an environment without those fonts. The mark itself is path-based and font independent.

### Color and contrast

The source of truth is [`tokens.json`](tokens.json) and [`tokens.css`](tokens.css). Main pairings measured with WCAG relative luminance:

| Pair | Contrast | Usage |
| --- | ---: | --- |
| Mineral navy `#18323B` on warm mist `#F3F3EE` | 12.11:1 | Main text |
| Muted `#536269` on warm mist | 5.68:1 | Secondary text |
| White on signal coral `#C44E35` | 4.68:1 | Primary action |
| White on mineral navy | 13.48:1 | Header, action, verified label |

Coral marks one principal action per decision area. It does not make something verified. Sponsorship uses explicit wording and a thin coral border; merchant-managed content uses a neutral filled label. Do not assign meaning by color alone. Dark theme is not selected for launch in this exploration; it should be designed and tested as a separate product decision rather than automatically inverting these tokens.

### Type and language

Use **Figtree** for English and other Latin-script interface text, and **Noto Sans Telugu** for Telugu. Both are under the SIL Open Font License ([Figtree license](https://github.com/google/fonts/blob/main/ofl/figtree/OFL.txt), [Noto Sans Telugu license](https://github.com/google/fonts/blob/main/ofl/notosanstelugu/OFL.txt)). The explorer loads them from Google Fonts for ease of review; a deployed product should self-host a limited set of weights and subsets with `font-display: swap`. System fallbacks are Arial and Kohinoor Telugu. Include the relevant copyright notices and license text with redistributed font files.

Body type starts at 16 px with 1.5 line height. Telugu body uses at least 1.55. Use bold sparingly: 700 in Latin headlines and 600-700 in Telugu headlines. Avoid all-caps or added tracking in Telugu. Never force a fixed one-line place name; let long Telugu names wrap. Keep meaningful actions visible when copy expands.

### Composition

Use a 4 px spacing unit and a 16 px mobile gutter. Cards appear when an item is independently actionable; otherwise use open layout and quiet separators. The default corner radius is 6 px for controls and 12 px for larger surfaces. Phone controls are at least 44 px tall, with 48 px for primary actions. Use a visible 3 px coral focus ring with 3 px offset. Keep the core town feed and place content available in server-rendered text before loading imagery or maps.

## Product patterns

The interactive preview in [`index.html`](index.html) contains four screen types in English and Telugu at 320 px, 390 px and desktop widths. Its sample places and source dates are fixtures for layout testing, not publication-ready local facts.

### Browse

Town selection, search, categories, a guide, and an update appear before decorative content. At 320 px, controls may scroll horizontally while the title and cards wrap. Never publish an empty town/category page just to fill a grid. Empty state: explain that coverage is being checked and offer the town selector or another category. Loading state: reserve the final layout's image ratio and row height. Error state: show a retry control and keep already-loaded text visible.

### Place

Lead with the name, a useful reason to go, and contact or navigation actions. Facts marked unknown say so explicitly. The photo is optional. Show team verification only after a recorded check, with its scope and date available. A merchant-managed label identifies who proposed or controls information. Sponsorship identifies paid placement separately. Closed places need a prominent closed status, and stale details need a checked date and correction path. If coordinates are missing, omit the directions action and offer address/call/website where valid.

### Story

Lead with a concrete headline and brief that helps the reader decide whether to continue. Show source attribution, publication/updated date and correction notes near the body. The original article and its rights-cleared image are separate from external source material. Content is approved in both languages before publication. Do not put party politics in the daily editorial feed.

### Guide and map

The list is primary and complete: each entry has a selection reason and available action. Interactive pins should select and focus their matching list entry by touch or keyboard. The map loads after the core text, with a licensed basemap and attribution. An absent or failed map leaves the full list, details and action links intact. Comparisons use factual attributes and editor-written pros/cons with source dates; paid placement cannot silently change editorial ordering.

### Status language

| State | Label | Meaning | Treatment |
| --- | --- | --- | --- |
| Team check | Mana Vaada Verified / మనవాడ ధృవీకరించింది | A defined check recorded by the team | Solid navy label plus scope/date link |
| Paid placement | Sponsored / ప్రకటన | A business paid for placement | Coral outline and disclosure near the placement |
| Merchant edit | Merchant-managed / వ్యాపారి నిర్వహణ | Business-provided information under review rules | Neutral filled label |
| Ordinary editorial | No badge | Human-approved editorial content | Source and date in plain text |
| Later civic record | Public record / ప్రజా రికార్డు | Separate factual area with official citations | Neutral grayscale treatment, equal fields and no endorsement mark |

Never merge these states into a generic checkmark. A payment or claimed listing does not confer verification.

## Image and motion rules

Use candid, rights-cleared local photography with context: entrance, route, food, person at work or surrounding street. Record permission and attribution with the asset. No-photo listings use a clean text layout, not a synthetic storefront. The generated images in `assets/` are **concept art** and must not be presented as photographs of a named business or a verified exact location. The moodboard is a visual argument, not an approved production asset.

Motion should explain a change: a category selection, map/list synchronization or a new card. Use 160-240 ms transitions on opacity or transform. Honor `prefers-reduced-motion`. Avoid continuous ambient animation in the reading flow, and do not hold up core content while a map or image loads.

## Share and guide templates

The explorer includes a 1.2:1 story/share example and a guide/feature example. Editors replace the headline, town, category, approved image and canonical URL. For English and Telugu, preserve the same hierarchy and allow the Telugu headline more line height rather than shrinking it aggressively. The story card should contain enough context to make sense when shared outside the site; source and checked-date details remain on the destination page. Do not put fabricated engagement counts or claims in a card.

## Files and next production step

- [`index.html`](index.html), [`style.css`](style.css), [`app.js`](app.js): portable explorer with no runtime package dependencies.
- [`tokens.css`](tokens.css), [`tokens.json`](tokens.json): design token sources.
- [`design-plan.md`](design-plan.md): rationale and taste-skill preflight.
- `assets/`: mark, lockups and concept imagery.
- [`assets/export_assets.py`](assets/export_assets.py): regenerates transparent PNG and vector PDF marks using the Python standard library.

Before publishing a real product, replace all sample copy with reviewed local content, self-host optimized font and image files, connect validated actions and sources, and measure LCP, INP and CLS on representative mobile pages. The generated 2-3 MB concept photographs are deliberately unoptimized review assets; production images need responsive sizes and rights review.