Flight Manual

01Principles

Six rules everything else follows.

01
One loud thing per screen.
Each screen gets one big element: the name, a section title or a number. Everything around it stays small and quiet.
02
A grid you can see.
Five columns, drawn as hairlines from top to bottom. Content snaps to them. Nothing floats.
03
Color means something.
Orange for emphasis and risk, green for good outcomes. Grays carry most of the reading.
04
The gradient means flow.
Orange to green appears only on things that move or progress: the hover card, trails, the active stage. Never in text.
05
Story first, number on hover.
Lists lead with the work. The metric waits in the card that follows your cursor.
06
Space is the thread, not the theme.
Jupiter, the satellite and the trajectory carry the personal touch. They never get in the way of reading.

02Color

Black, white, grays, and two signals.

Most of the site is black and white with a ten-step gray scale. Orange and green are reserved for emphasis. Their gradient is a surface, never a text color.

Core and accents

Dark value · light-theme ink

Space black#000000 · page

The page in dark mode. In light mode it becomes text.

White#FFFFFF · headings

Headings, the one loud thing, and white focus blocks.

Deep signal orange#FF5220 · ink #C93A0E

Emphasis, indexes, risk, the main hover. Text on it is black.

Signal green#12D69C · ink #087A5C

Good outcomes, results, loaded skills, the end of a flow.

Grays

Dark theme

#000000
Page

#0A0A0A
Raised

#121212
Card

#262626
Grid line

#3A3A3A
Strong line

#6E6E6E
Faint

#8F8F8F
Labels

#B3B3B3
Quiet text

#D4D4D4
Body

#FFFFFF
Headings

The gradient

Surfaces only

linear-gradient(100deg, #FF5220 0%, #FF7A2E 28%, #F4B56A 50%, #63DBB3 72%, #12D69C 100%)

Use it for: the hover card on work items, trails and progress lines, the wash on an active stage or row, soft glows behind the footer and quotes.

Never for: text, icons, borders of ordinary boxes, or large flat fills. A grain texture sits on top of glows and cards so the gradient feels physical.

Contrast

WCAG ratios, checked

Use	Pair	Ratio	Rule
Headings	#FFFFFF on #000	21.0	Any size
Body	#D4D4D4 on #000	14.2	Any size
Labels	#8F8F8F on #000	6.5	Small text OK
Faint	#6E6E6E on #000	4.1	Large text or decoration only
Orange marks	#FF5220 on #000	6.5	Small text OK
Green results	#12D69C on #000	11.1	Any size
Text on orange	#000 on #FF5220	6.5	Always black, never white (3.2)
Light theme labels	#6E6E6E on #FFF	5.1	Small text OK
Light theme orange	#C93A0E on #FFF	5.1	Small text OK
Light theme green	#087A5C on #FFF	5.3	Small text OK

03Typography

Helvetica to look at, Geist to read.

Helvetica Neue for anything you look at: names, titles, numbers. Geist for anything you read at length. Geist Mono for labels and data. Bold is rare: only the hero name and the footer line.

Display · Helvetica Neue

Aa

400 for titles and numbers, 500 for item names, 700 only for the hero. Falls back to Inter Tight off Apple devices.

Body · Geist

Aa

400 for reading. Comfortable at 17px with 1.6 line height, 62 characters per line at most.

Labels · Geist Mono

Aa

Uppercase, 12px, +8% tracking. Section indexes, captions, data, timestamps.

Scale

Sizes are fluid between phone and 1440 px

HeroHelvetica 700 · 56–136 px
−5.5% · line 0.86

Natesh Aravind S

DisplayHelvetica 400 · 38–76 px
−4.5% · line 1.0

Selected work. Sorted by hat.

TitleHelvetica 400 · 26–38 px
−3.5% · line 1.08

Ranking AI errors by clinical risk.

ItemHelvetica 500 · 21 px
−2% · line 1.15

Agent Flow Blueprint

LeadHelvetica 400 · 23 px
−1.5% · line 1.3

I’m Natesh, a design-driven product builder. Engineer by training, designer by method, builder by instinct.

BodyGeist 400 · 17 px
line 1.6 · 62ch max

Doctors correct the AI’s case sheets every day. Each correction becomes a diagnosis: what broke, in which layer, and which team fixes it.

SmallGeist 400 · 14 px
line 1.5

Shared at a public-safe level. Vendor names, internal data and patient examples stay out.

MetricHelvetica 400 · 35–54 px
−4.5% · tabular figures

~70%

LabelGeist Mono 400 · 12 px
+8% · uppercase

(03)Selected work

Two-tone headings. A title can end in gray to separate the claim from its context, as in “Selected work. Sorted by hat.” Use it once per section at most. No gradient text, no italics for emphasis, sentence case everywhere.

04Grid and space

Five columns, drawn on the page.

The grid lines run from the header to the footer, behind everything. Column one holds indexes, labels and navigation. Columns two to five hold the content.

Spacing scale

Multiples of 4

space-14 px

space-28 px

space-316 px

space-424 px

space-548 px

space-696 px

space-7160 px

Rhythm. 24 px inside every cell. 160 px between home sections on desktop, 96 px on phones. The mentor quote and the footer get the most air. Corners are square. The only rounded things are round in real life (planets, dots) and the hover card (14 px).

Breakpoints

Desktop · 1000 px and up

Five columns. Labels in column one, content in two to five.

Tablet · 640 to 999 px

Two columns of lines. Labels move above titles. Lists keep two columns.

Phone · under 640 px

One content column, 16 px gutters, two faint lines. Metrics show inline because there is no hover.

05Components

The parts, live.

Every component here is the real thing: hover, click and tab through them.

Hero name and identity

Typed, held, deleted

Hey explorer, you’ve reached

Natesh Aravind S

Natesh is an IIT-educated researcher and innovator, an NID-trained systems thinker and service designer, a founding product hire building agentic AI for healthcare, and an astrophysics lover, storyteller and brand builder.

Engineer by training, designer by method, builder by instinct, connecting unconventional dots across engineering, design and business.

Typed like a console. Four identities, each a full phrase. Each types at an even 42 ms a letter, holds for 2.6 s, deletes at 20 ms a letter, then the next one types. An orange block caret blinks while it holds. Set smaller than the name and one step gray, so the name leads. All four are laid out invisibly in the same spot, so the line never makes the page jump. Reduced motion shows the first identity, still; screen readers hear one plain sentence.

Jupiter, the moons and the sun. Eight topics ride two orbits. Labels sit outside the outer ring and inside the inner ring, or alternate sides when space is tight; they never touch the text or each other, and at least seven of eight are in view on desktop and tablet. Each ring moves like a conveyor: a moon fades out at the end of the arc and back in at the start, in order, and the two rings take turns. In light mode the sun rises from behind Jupiter’s limb and the sky warms (2.8 s); back to dark, it sets behind the planet and the stars return (2.2 s). The stars never move when the theme switches.

Buttons and links

Square, Helvetica 500

Read the case study → Resume ↓ Disabled All work ↗

Primary is white on black and turns orange on hover, with black text. Ghost fills on hover. Text links draw an orange underline. Arrows say where you go: → inside the site, ↗ outside, ↓ a download.

Labels, chips and tags

(03)Selected work LLM evalsConversation design Systems thinkingVoice AI

Section header

(03)Selected work

Selected work.

Pranik.ai, Mondee’s AI health-tech venture. Two agentic apps, 0 to 1. Sorted by the hat I wore.

Work list with the hover card

Hover a row

Hat 02

Product leadership

Set up the product function, then took two agentic apps from 0 to 1.

3 case studies

02Taking agentic AI healthcare from 0 to 1, for doctors and for patients.First product person. Two squads, two apps, 20+ hospitals and camps.2025–now→
03Agent Flow Blueprint: a spec format for products that branch on conversation.A living spec for agents that branch on conversation, built in Claude Code.2026→
04Teaching an AI twin to practice like its doctor.How any doctor can train their AI twin without our team in the room.2026→

The hat is the section. It sits in the first column on a raised panel with an orange top rule, and stays in view while its case studies scroll past. Each row washes orange to green on hover, and the card trails the cursor with the row’s headline number, even when the page scrolls under a still pointer. On touch screens and keyboard focus, the number shows inline instead.

Reading highlight

For boxes you read, not click

01Pranik.ai

Rank errors by harm, not by count.

Hover me. The box lifts one quiet step and its gray text steps up, so you know where you are reading.

02Pranik.ai

Kill things on evidence.

No arrow, no orange, no movement, and the cursor doesn’t lock on. Links keep the orange-to-green wash and the arrow.

Where it’s used. In brief, the habits, skills, the toolkit, mission archive entries and a case study’s 60-second version. Mouse and trackpad only; touch screens skip it.

Case study header

Metrics in a white block

Case 01Pranik.ai · AI evals and clinical safety

Ranking AI errors by clinical risk.

RoleLed the design of the evals loop and its rubric

TimelineSep 2025 to present

TeamData science, AI, QA, doctors

SkillsLLM evals RAG

~70%fewer drug-name errors

~35 sprescription latency, from 2+ min

10root-cause categories

Same daygo or no-go on a new model

The 60-second version

01WhoFounding product hire at Pranik.ai, reporting to the CEO and CTO.

02ShippedTwo agentic AI healthcare apps, 0 to 1. 20,000+ consultations.

03Deep onAI evals, clinical safety, conversation design, field research.

04WiredMechanical engineer, EV R&D, strategic design (NID, DAT AIR 1), now product.

ResumeThe one for your ATS.

Download PDF ↓

Reading mode and callouts

How I measured thisDrug mentions with an error ÷ all drug mentions captured, before and after the fix.

Validating fixes, blindEvery month I ask doctors “noticed any change?” before saying what changed.

Trajectory stages

Done · active · upcoming

02 · Injection burn

Tata Elxsi

R&D Engineer, EV Centre of Excellence

Passed

03 · Gravity assist

NID Ahmedabad

M.Des, Strategic Design Management

● Now

04 · Test flight

Xcentro

Founding team, brand and product

Ahead

Payload bayBehavioral scienceService designSystems thinkingBrand identityLLM evals

Pending launch

Click one

Menu items not live yet

No dead-end pages. Things that aren’t live stay small and gray. A click opens a short note right where you clicked, and it fades on its own. No separate “coming soon” page, no extra click back.

Footer

Always on black, centered

Up for a stargazing session?Or already convinced we can build something interesting together?

Say hello →LinkedIn ↗Resume ↓

Elsewherenatesharavinds@gmail.com

SitemapHome · Work · Resume

SoonLab · Notes

Ground stationHyderabad · IST

Design systemFlight Manual →

06Illustrations

Figures drawn like a spec sheet.

Case-study figures are drawn in code with the same grid, type and color rules as the page. All examples are synthetic or illustrative.

Two line weights

1 px gray for structure, 1.5 px ink for what matters.

Square boxes

Square corners

No rounded boxes inside figures.

04 · Root cause

Which layer broke?

Mono labels, Helvetica titles

Uppercase mono for labels, Helvetica for anything you read.

Color has meaning

Orange is risk or the problem, green the outcome, ink is structure, gray is context.

The gradient means flow

Trails, progress, loops. Never a box fill.

Current step

Inverted block

An inverted block is focus

The current step or key result flips to the inverse color.

● The clinical evals looprunning on the live product

Every doctor edit travels the loop. Step 04 is where the fix finds its owner.

01 · Edit

Doctor corrects the AI case sheet

One edit is the counting unit.

02 · Diff

Expected vs captured

Edit-diff rules compare versions.

03 · Classify

One edit, one or more error types

Rules pre-classify at scale.

04 · Root cause

Which layer broke?

Prompt, context, memory, validation, RAG, model or UX.

05 · Triage

Clinical risk first

Safety failures jump the queue.

06 · Fix + verify

Ship, then check blind

Doctors confirm without being told.

FIG.The full set: evals loop, risk matrix, layered defense, eval gates, before and after bars, decision flow, metric tree, options compared, service blueprint, two-site curves and the trajectory map.

07Motion

Calm, quick, and only with a reason.

Motion explains a change or rewards an action. Nothing loops in the reading flow. Jupiter’s winds, its moons and the night sky are the only ambient motion, and all of them pause when off screen.

Token	Value	Used for
Ease	`cubic-bezier(.2, .7, .1, 1)`	Everything. Fast start, soft landing.
Micro	`150 ms`	Press states, toggles.
Hover	`300 ms`	Row washes, arrows nudging 4 px, underlines drawing.
Reveal	`600 ms`	Sections fade in and rise 16 px, once. Content is readable before it animates.
Draw-on	`900 ms`	Figure lines and the trajectory trail draw as they enter view.
Follow	`lerp 0.18`	The hover card trailing the cursor.
Cursor	`lerp 0.32 · jet fade 300 ms`	The satellite and its white jet.
Scrub	`scroll-linked`	The trajectory: travel 65% of each stage, dwell 35%.
Type	`42 ms · hold 2.6 s · delete 20 ms`	Hero identities, typed like a console.
Read	`350 ms`	The reading highlight fading in on a box.
Orbit	`one place every 38 s`	Moons on both rings; the rings take turns fading a moon.
Sunrise	`2.8 s up · 2.2 s down · ease in-out`	The sun rising over Jupiter when light mode turns on, and setting when it turns off.

Reduced motion. With “reduce motion” on: no reveals, no draw-on, no jet, no winds; the trajectory jumps between stages; the system cursor stays.

08Cursor

Juno, flat.

A small Juno satellite replaces the pointer on mouse and trackpad. Test it in the pad below, in Edge, Chrome and Safari.

Move here · hover the buttons · click

A link →

Satellite size waitingSystem cursor visiblePointer checking

Look. Flat gray arrays, a white hexagon body, a black dish with an orange core, and one orange square on the magnetometer boom. In light mode the body turns black. Real size 46 px, with the click point at the dish.

Behavior. Follows with a slight lag, tilts up to 20° into turns, never spins. A thin white jet fires opposite to the motion; its length follows speed and it fades in 300 ms. Over links, four orange corners lock on. A click shrinks it and pulses a ring.

Safety rules (the Edge fix). The satellite has a fixed size that no page rule can squeeze. The normal cursor is hidden only after the satellite has measured a real size on screen; until then, or if anything fails, you keep the standard arrow. Phones, tablets and reduced-motion settings always use the system cursor.

09Marks

A planet, a satellite, three arrows.

Planet mark

Header mark and favicon. A banded planet with a soft glow.

Juno

The cursor, and the craft on the trajectory map.

→ ↗ ↓

Arrows

Inside the site, outside the site, a download.

Lock-on corners

Focus and hover target, borrowed from viewfinders.

10Voice

Plain, specific, first person.

Write the way you would explain it to a sharp friend: what happened, what you decided, and how you knew it worked.

01US spelling: color, organization, behavior.
02Very few em dashes. Use a period, a colon or a comma instead.
03One figure, not a range: “~70%”, never “60 to 80%”. Numbers always carry their context.
04No self-ratings or skill bars. Show the work instead.
05“Built with AI coding tools” or “built in Claude Code”. Never “vibe coded”.
06Public-safe: no vendor names, patient data, dashboards or private details.
07Case titles state the outcome or the decision, in sentence case.
08Space puns live in small places: labels, pending-launch notes, the footer.

Instead of

Write

Drug-name errors dropped 60–80%.

Drug-name errors fell ~70%, to about 10% of mentions.

Expert in AI evals (9/10).

Led the design of the evals loop and its rubric.

Vibe coded an internal tool.

Built the internal tool with AI coding tools.

Leveraged synergies to optimise the colour system.

Rebuilt the spec format so the whole team works from one page.

11Accessibility

Good for everyone, by default.

01Body text at 14:1 or better; labels at 4.5:1 or better. Faint gray only for large text or decoration.
02Every interactive element shows a 2 px orange focus ring, offset 3 px.
03Anything shown on hover is also shown on focus and on touch, inline.
04Reduced motion turns off reveals, draw-ons, winds, the jet and the custom cursor.
05The custom cursor never hides the system one until it is visible itself.
06Figures have a text alternative: a caption that states the takeaway.
07Dark on every visit; light mode is one tap away (sun and moon) and lasts for that visit.

12Tokens

Copy-ready variables.

/* Flight Manual v3.2 · dark is the default */
:root {
  --bg: #000000; --raised: #0a0a0a; --card: #121212;
  --line: #262626; --line-strong: #3a3a3a;
  --ink: #ffffff; --body: #d4d4d4; --quiet: #b3b3b3; --muted: #8f8f8f; --faint: #6e6e6e;
  --or: #ff5220; --gr: #12d69c; --on-fill: #000000;
  --read: rgba(255, 255, 255, .055);
  --grad: linear-gradient(100deg, #ff5220 0%, #ff7a2e 28%, #f4b56a 50%, #63dbb3 72%, #12d69c 100%);
  --font-swiss: 'Helvetica Neue', Helvetica, 'Inter Tight', 'Inter Tight Variable', Arial, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Variable', ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 48px; --space-6: 96px; --space-7: 160px;
  --radius: 0; --radius-card: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --t-micro: 150ms; --t-hover: 300ms; --t-reveal: 600ms; --t-draw: 900ms;
}
:root[data-theme="light"] {
  --bg: #ffffff; --raised: #f7f7f7; --card: #f2f2f2;
  --line: #e5e5e5; --line-strong: #cfcfcf;
  --ink: #000000; --body: #262626; --quiet: #444444; --muted: #6e6e6e; --faint: #9a9a9a;
  --or: #c93a0e; --gr: #087a5c;
  --read: rgba(0, 0, 0, .035);
}

Six rules everything else follows.

One loud thing per screen.

A grid you can see.

Color means something.

The gradient means flow.

Story first, number on hover.

Space is the thread, not the theme.

Black, white, grays, and two signals.

Core and accents

Grays

The gradient

Contrast

Helvetica to look at, Geist to read.

Scale

Five columns, drawn on the page.

Spacing scale

Breakpoints

Desktop · 1000 px and up

Tablet · 640 to 999 px

Phone · under 640 px

The parts, live.

Hero name and identity

Buttons and links

Labels, chips and tags

Section header

Selected work.

Work list with the hover card

Product leadership

Reading highlight

Rank errors by harm, not by count.

Kill things on evidence.

Case study header

Ranking AI errors by clinical risk.

The 60-second version

Reading mode and callouts

Trajectory stages

Tata Elxsi

NID Ahmedabad

Xcentro

Pending launch

Footer

Up for a stargazing session?Or already convinced we can build something interesting together?

Figures drawn like a spec sheet.

Two line weights

Square corners

Mono labels, Helvetica titles

Color has meaning

The gradient means flow

An inverted block is focus

Doctor corrects the AI case sheet

Expected vs captured

One edit, one or more error types

Which layer broke?

Clinical risk first

Ship, then check blind

Calm, quick, and only with a reason.

Juno, flat.

A planet, a satellite, three arrows.

Planet mark

Juno

Arrows

Lock-on corners

Plain, specific, first person.

Good for everyone, by default.

Copy-ready variables.