# Delhi Pulse — Ring & River

Version 4 · 30 September 2026 · crisp web and mobile design

This is the current brand direction. It supersedes the earlier warm v1, dark v2 and sunlit v3 studies. The user requested a crisp, sharp, modern and minimal interface, informed by three supplied app references. Historical studies remain available as records; their serif type, warm canvas and character artwork are not part of v4.

Review the [brand system](http://localhost:8080/brand.html), [responsive application](http://localhost:8080/design.html), [live miniature map](http://localhost:8080/miniatures.html) and [model collection](http://localhost:8080/miniatures-gallery.html). Browser checks and session status are recorded separately in `design/QA.md` and `SESSION.md`. These are working responsive prototypes; no native Android APK has been compiled.

## The brand idea

**Your city. At a glance.** Delhi Pulse gives people a readable view of Delhi's air, weather, movement, river and sky. Useful readings come first; a calm map makes the city inviting to explore. A saved place and changing sky provide reasons to return. The supporting line is **A city. In motion.**

The screenshot signature is a recognizable Ring & River mark, a clear Delhi Pulse wordmark, bold sans-serif headings, white and ink surfaces, and a few flat lilac, lime and coral accents. Detailed miniatures appear only where they help recognize a selected object. No mascot represents or explains data.

## Identity

The original **Ring & River** silhouette stays: two open concentric forms, an asymmetric river stroke and a north datum. Connaught Place and the Yamuna informed the abstraction; the symbol is not surveyed geography.

The v4 wordmark changes to outlined **DM Sans 700**, reading **Delhi Pulse** in title case. It replaces the Barlow Condensed uppercase lockup used in older studies. The supplied SVG contains glyph paths and does not need a browser font to render correctly.

Use the ink lockup on white or canvas and the white lockup on ink. The app avatar uses the ink symbol on lilac. Clear space is one quarter of symbol width. Minimum symbol size is 24 CSS px; minimum horizontal lockup width is 150 CSS px. Do not stretch the artwork, colour separate letters, add glow or place it on detailed imagery without a readable surface.

## Colour

| Token | Hex | Use |
|---|---|---|
| Ink | #13151A | Primary text, filled controls, strong outlines, dark sky surface |
| Canvas | #F7F8FA | Quiet page and map background |
| White | #FFFFFF | Panels, cards and reverse text |
| Secondary | #6C7481 | Supporting text on white |
| Muted text | #67707C | Supporting text on canvas; essential neutral boundaries |
| Line | #DCE0E6 | Decorative dividers and nonessential card edges |
| Lilac | #C6B6F3 | Air card, selected navigation and supporting graphic fields |
| Lime | #DFFF7A | Weather card and small emphasis fields |
| Coral | #F27D5B | Supporting accents and postcard rhythm |
| Mint | #B9E1D3 | Metro/transit accents and supporting fields |

Let white, canvas and ink occupy most of a screen. Use colour to establish a few clear groups, not to tint every surface. Air uses lilac, weather uses lime, and Metro uses mint or white with mint accents. **These are brand card roles, not AQI severity or live-status encodings.** Official Metro line colours and ordered AQI category colours remain separate, accompanied by words and values.

`tokens.css` and `tokens.json` define these roles. Compatibility aliases such as `paper`, `forest` and `gold` exist for older implementation names; they resolve to v4 colours and do not revive the old theme.

### Readable combinations

`contrast.json` contains computed WCAG sRGB solid-colour pair checks. Ink on white is 18.26:1; ink on canvas 17.19:1; ink on lilac 9.90:1; ink on lime 16.28:1; ink on coral 6.84:1; and ink on mint 12.85:1. White on ink is 18.26:1.

Secondary on white is 4.72:1, but **secondary on canvas is only 4.44:1 and fails the 4.5:1 normal-text threshold**. Use muted text on canvas instead: 4.72:1. Line is a decorative separator; use ink or the essential-border token when a boundary or focus indicator is the only cue identifying a control. Accent fills should carry ink text. These pair checks do not certify an entire page or cover opacity, thin strokes, imagery or every interaction state.

## Typography

| Role | Family and weights | Guidance |
|---|---|---|
| Main heading | DM Sans 700 / 800 | Bold, short, sentence case; roughly 48–64 px desktop and 36–44 px phone |
| Section heading | DM Sans 700 | Roughly 24–40 px, according to hierarchy |
| Body | DM Sans 400 / 500 | 16 px preferred for reading; comfortable line height |
| Controls | DM Sans 500 / 600 | 14–16 px preferred, concise visible labels |
| Data and short metadata | IBM Plex Mono 400 / 500 | Stable numerals, units and times; use only where useful |
| Wordmark | DM Sans 700 | Supplied outlined SVG, not recreated with live text |

Headings use a tight but legible rhythm. Use typography and space to create hierarchy; avoid decorative serif emphasis, dense uppercase prose and unnecessary font changes. A changing value stays connected to its unit, place, category and source time.

The current families are self-hosted in `fonts.css`: DM Sans 400/500/600/700/800 and IBM Plex Mono 400/500. Upstream SIL OFL files are included in `fonts/`. Barlow Condensed, Fraunces and Plex Sans files remain for historical studies; they are not active v4 families. The Latin subsets do not establish Hindi coverage. A Hindi interface requires a separately tested Devanagari family and layout.

## Icons

The original icon family uses a **24px grid, 1.6px stroke, round caps and joins**, with consistent outline construction. The current set includes all fourteen data topics, navigation, weather, Moon phases and common controls. Files: `icons.svg` for the sprite, `icon-sheet.svg` for review, and `public/js/pulse-icons.js` for inline SVG helpers.

Use `currentColor` for a predictable tint. Ink works on the light accent fields; white works on ink. Keep official semantic colours only where the data requires them. No default emoji or platform-dependent coloured glyphs appear as product icons. Decorative icons are hidden from assistive technology; icon-only controls need an accessible action name. Unknown data has a neutral symbol and an explicit text state.

## Shape and responsive layout

Use a 4px spacing grid, 12px panel corners and 16px phone-sheet corners. Rectangular modular cards, simple borders and flat fields provide the structure. Avoid repeated pill containers, oversized shadows, glass blur and ornamental texture in interface panels.

Web controls need at least 44px targets; phone/Android controls need at least 48px. Main destinations are **Today, Explore, Look up and My Delhi**; the latter two implement the Sky and Saved views. Desktop uses a compact header navigation. Phone uses a labelled bottom navigation, safe-area padding and reachable sheet controls. A phone screen has its own hierarchy rather than a compressed desktop dashboard.

Today gives a short brief; Explore makes room for one map question; Look up shows calculated sky events; My Delhi keeps places on the current device. Details open after intent and retain the source and observation time. Preserve readable HTML facts even when a map cannot load. The complete original atlas remains available for all fourteen layers and utilities during migration.

## Map and miniature craft

Keep a neutral geographic foundation: quiet roads, water and simple default building volumes. Park and land-cover areas must not become large distracting green fields. Roads and source geography remain available; the composition is not a decorative reconstruction of every city block.

Seven original GLBs supply targeted detail: **aircraft, bus, Metro, satellite, India Gate, AQI station and electricity tower**. Their natural sandstone, porcelain, timber, forest enamel, smoked glazing and metal materials can stay distinct from the flat UI accent palette. A readable miniature does not need to be painted lilac because the Air card is lilac.

Position, heading and altitude stay tied to the existing data and calculations. Metro motion remains schedule-estimated; satellite motion remains calculated. Local flag, fan and panel clips are decorative detail, not an observation of operation. No idle orbit is required to read the interface. Disable decorative animation for reduced motion and keep useful data updates intact.

Detailed map models use deck.gl ScenegraphLayer with lightweight far-view meshes and a missing-model fallback. The current integration gates most detailed assets by zoom and limits nearby detailed buses; these choices are not a measured mobile performance guarantee.

Stationary miniatures can clear overlapping default building features using their displayed footprints. The filter retains tiles, roads and water; it cannot cut an arbitrary pixel-shaped hole through a source building. Moving vehicles do not update building filters every frame. See `design/MINIATURE-MASKING.md` and `design/MINIATURE-ASSETS.md` for implementation details.

`city-map-v4.jpg` is a captured map view with the original miniatures, using OpenFreeMap/OpenStreetMap data. Preserve the appropriate map attribution wherever it is presented. Older `delhi-miniature-v3.jpg` and `city-network.svg` are historical concept/decorative assets, not active geographic data or the v4 hero.

## Voice and data trust

Use plain place names and explain what a number measures. Prefer “Air at Anand Vihar”, “Next predicted pass” and “No recent station reading”. Keep **measured, reported, modelled, estimated, calculated, predicted and unavailable** distinct. A new fetch does not imply a new observation. Missing data does not become a fabricated zero.

A station reading is not a street measurement. A bridge gauge is not citywide flood depth. An animation is not proof of live GPS. Keep these distinctions in the cards, detail sheets and exported postcards. Show source time and place; do not include precise personal coordinates in a share by default. Brand-study readings are explicitly illustrative.

## Handoff and limits

Current assets include the mark and outlined wordmark variants, lilac avatar, SVG poster, icon family, local fonts and licences, colour tokens, contrast checks, this guide and `REFERENCE-SYNTHESIS.md`. The poster's sample readings are illustrative, not live values.

The current work establishes responsive web/Android-sized screens and a live miniature integration prototype. A native Android build, complete migration of every original drawer, and physical-device frame-time, battery and thermal checks remain separate work. No push or deployment is part of this handoff.


## Midnight and the current atlas

The current app has one Three.js glass hemisphere over a horizontal raised Delhi island, with lower faded surroundings and continuous road/building detail. Navigation is Full atlas → Readings → Sky view. Read `MIDNIGHT.md` for the dark identity; `tokens.json.darkColors` and `[data-theme="dark"]` roles in `tokens.css` export its palette. Keep physical ink on bright accents; use `--dp-text` for theme-dependent primary text.

`atlas-desktop-current.jpg` and `atlas-mobile-current.jpg` are dated 30 September 2026 captures of the running app. Their source readings are historical snapshots, not live data in this kit. This identity package does not bundle the app renderer or build an APK; the repository's `SESSION.md` and `CITY-CONFIG.md` are the implementation/city-porting handoffs.