Skip to content
Nithya Parepally

Design notes

Notes from the designer who built this.

Typography

Exactly two font families, site-wide. The editorial voice — wordmark, navigation, headlines, pull-quotes — is Newsreader, a serif built specifically for long-form editorial reading: warm, well-hinted, and legible at both display and text sizes. It's a practical stand-in for the paid typefaces (Recoleta, Tiempos Headline) that came up while deciding on this — Newsreader was picked because it holds up cleanly at any size, not because it was the first free option available. Inter Tight, a grotesk, carries everything else: body copy, the argument, and — via tracking and tabular numerals rather than a third font file — the metadata voice too (role, duration, figure numbers, dates). That last part used to be a literal monospace face; collapsing it into the grotesk, styled distinctly, is what let the type system shrink from three families to two without losing the "metadata, skim this or don't" signal.

Numerals are tabular everywhere a metric appears, because this portfolio's whole argument rests on numbers being trustworthy, and trustworthy numbers should at least line up in a column.

Grid

Twelve columns, a wide outer margin, and a narrow metadata column that runs down the left of every case-study section. That column is where the engineering half of my background shows up visibly — it's the same instinct as a code comment or a spec sheet, applied to a portfolio.

Body text never runs past about 68 characters. Evidence — tables, figures, the interactive components — is allowed to go full width, because density in the evidence zone is deliberate. The contrast between air around an argument and compression inside evidence is, on purpose, the entire visual hierarchy of this site.

Motion

Motion clarifies structure or it doesn't exist. Nothing enters on scroll for decoration, nothing parallaxes, nothing auto-advances. The reading-position hairline at the top of a case study, the token-reveal panel's height transition, the pattern generator's one-time draw — every animated thing on this site is answering a specific question (where am I, what's inside this, what did the rules just produce), not performing.

Durations sit at 150–250ms on one easing curve, site-wide. `prefers-reduced-motion` collapses all of it to instant state changes — every interactive component here is a complete, correct static artefact with motion turned off, not a broken one.

Accessibility

WCAG 2.2 AA is the floor, not the target: 16px+ body text, keyboard-complete navigation, a visible focus ring on every interactive element, semantic headings, and layouts that survive 200% text zoom without breaking. The focus ring uses the generative accent colour on purpose — accessibility isn't a separate coat of paint here, it's tied into the same identity system as everything else.

I audit AI products for explainability and control for a living. Shipping a portfolio that fails its own standard would be the least credible thing I could do.

Colour system

Warm, near-white ground; near-black, slightly cool ink; one generative accent per visitor. That's the whole palette. The accent is generated in OKLCh across the full hue wheel, with lightness solved per hue so every possible output clears WCAG AA contrast against this page — by construction, not by checking after the fact. The full mechanics are documented on /generative, because I'd rather show the rule than just claim it's principled.

Generative identity

The accent colour, and the pattern system on the Generative page, both trace back to a Master's research project — De-Coding Ikat — that decoded the motif/grid/repetition logic inside Indian Ikat weaving and rebuilt it as a small generative program. It's not a decorative flourish borrowed from a moodboard; it's the actual intellectual root of how I approach every system in this portfolio: find the grammar, express it as rules, let the rules generate the surface.

AI philosophy

AI shows up in this portfolio in two places, deliberately kept separate. As content: a stated point of view, built from evaluating an enterprise AI feature and finding 15+ gaps across explainability, control, automation, and interaction — described in the Bharti Airtel / Jio case study. As a build tool: used heavily and invisibly, to draft and pressure-test copy, to generate adversarial questions a recruiter might ask, and to check every generative colour output against contrast requirements — mentioned here, not anywhere else, because the quality of the result is the evidence, not the tool.

Why this portfolio was designed this way

Because the audience for a senior enterprise UX portfolio is not one reader — it's a recruiter scanning for a job title in four seconds, a hiring manager reading one case study's thesis and outcome, a peer reviewer looking for the flaw in the decisions section, and an engineering lead checking whether I'd make their life easier. This site is built so all four of those readers can stop at the depth they need and still leave with something true, rather than a shallow version of the whole story.

And because I think restraint is a stronger signal of seniority than polish is. Anyone can commission a beautiful hero shot. Fewer people can show a heuristic table, a validation pipeline, and an honest "here's what I'd do differently," and let those carry the page instead.