500k
Ola Maps free tier
Calls per month, all APIs. Consolidates geocoding + POI + matrix into one India-native vendor.
/ 01 — System
Cosmic Engineering
The design language for Ooru's maahaa.dev-authored artifacts. Swiss engineering crossed with Vedic geometric austerity. One accent. One off-axis interruption per composition. No emoji, ever.
/ 02 — Palette
Color tokens
/ 03 — Typography
Type specimen
Display · Fraunces 200
Why a locality.
H1 · Fraunces 300
Reasoned advisory you can trust
H2 · Fraunces 400 · italic accent in saffron
Verified school proximity, real air quality
Body · Outfit 300
Ooru combines real AQI, verified school distance, and metro access into a single
judgement. The body face is Outfit at weight 300, set at a 60-character measure for comfortable reading.
Mono · JetBrains Mono 400 · data, labels, code
GET_LOCATION_AND_LOCALITY → RANK_BY_AQI · us_aqi 42 · pm2_5 11.3
/ 04 — Scale
Type & space scale
| Token | clamp() value | Role | Specimen |
|---|---|---|---|
| --display | 2.6→6.5rem | Hero display, Fraunces 200 | Aa |
| --h2 | 1.4→2.4rem | Section heads, Fraunces 400 | Aa |
| --h3 | 1.1→1.5rem | Sub-heads, card titles | Aa |
| --body | 1→1.2rem | Outfit 300, 60ch measure | Aa |
| --small | 0.85→1rem | Captions, table cells | Aa |
| --micro | 0.72→0.88rem | Eyebrows, labels, mono | Aa |
/ 05 — UI
Components
honest copy
integrity blocker
Stacked bar — ratio data
Win cards — hero number + impact
0
Fabricated claims, v2
One linear hook with only verified fields. The fabrication bug dies by construction.
4,764
Competitor's real pins
bengaluru.rent's data volume. We don't race it — we out-reason it.
Pipeline row — signature flow
geocode
→
schools
→
metro
→
AQI
→
rank
→
LLM
/ 06 — Patterns
Tabs
Every surface carries two layers: a violet/saffron radial bloom (≤10% opacity) plus a faint
fractal-noise grain at mix-blend-mode:overlay. Solid flat backgrounds are forbidden. Violet
appears only here — never as text or solid fill.
Reveal-on-enter via IntersectionObserver toggling .in. Stagger
with .reveal-1 … .reveal-6 delays (0.05s → 0.72s). Bar fills animate width 0 →
target over 1.2s cubic-bezier(.16,1,.3,1). Everything collapses under
prefers-reduced-motion.
Fixed top-left brand strip (vibhuti + wordmark), top-right context label in mono uppercase. Card accent is a 26–32px top-left saffron rule, never a full border. One off-axis interruption per composition.
/ 07 — Discipline
Rules & anti-patterns
One accent
Saffron is the only chromatic accent. Solid, single-stop. Never gradient saffron.
Atmosphere always
Every surface gets a violet/saffron radial bloom plus a faint grain layer. Solid flat backgrounds are forbidden.
Asymmetry
One off-axis interruption per composition. Card accent is a 26px top-left rule, not a full border.
Italic = emphasis
Italic Fraunces in saffron is the only headline emphasis. No bold body, no underlines.
No emoji
Banned by the system. Use the vibhuti mark and mono eyebrows instead.
No generic fonts
Inter, Roboto, Space Grotesk, Helvetica, system-ui are banned. Fraunces / Outfit / JetBrains Mono only.
No invented numbers
Every stat in an artifact must be real (verified competitor data, verified-in-code findings). No fabricated metrics — same rule as the product.
No spiritual kitsch
No literal trishul / om / lotus / mandala. The vibhuti mark is monoline geometry, not iconography.
/ 08 — Implementation
Drop-in tokens
Tokens live as CSS custom properties on :root — the Cosmic Engineering design system. Type scale
uses clamp() for viewport-fit: --display, --h2, --h3,
--body, --small, --micro. Spacing on a clamp scale. Motion reveals via
IntersectionObserver toggling .in, all collapsing under
prefers-reduced-motion. These docs are built on exactly these tokens — each uses a different
macrostructure so they read as one system, not one template.
/ 09 — Read next