Talvinder design system

Product context

Talvinder.com is the public record of companies, products, experiments and writing created across eighteen years. It is not a venture-studio site and the work is not one product suite.

The parent identity provides authorship, chronology and editorial discipline. Each product retains its own colour, typography and emotional register.

Design principle

Disciplined frame. Autonomous work. Controlled surprise.

The site must be immediately legible. Non-conformity appears through one intentional break at a time: an unexpected wordmark transformation, an object leaving the grid or an asymmetric product placement. Never through poor kerning, constant motion or explanatory copy.

Typography

Structure and display: Instrument Sans, weights 450–700.
Editorial and personal voice: Newsreader, weights 400–600.
Metadata and code: JetBrains Mono, weights 400–500.
Display tracking: no tighter than -0.055em; prefer -0.035em below 64px.
Display line-height: never below 0.9.
Body line-height: 1.5–1.7.

Instrument Sans replaces DM Sans and Bricolage Grotesque as the universal sans. Newsreader remains because it already carries the site’s editorial voice.

Colour

Parent palette

Ink: #111416
Paper: #F8FAFC
Soft surface: #EDF1F4
Rule: #C8CED4
Muted text: #626B73
Signal: #D7FF28
Link blue: #244AE8

The parent shell is cool and neutral. Beige, cream and terracotta are no longer universal brand colours.

Product colour

Product colour is local and intentional:

Elsewhere: sky blue with safety orange.
Zopdev: acid chartreuse with deep technical green.
Ostronaut: ultramarine.
Pragmatic Leaders: warm red/coral.
Hukam: quiet blue-white.
Side B: black with a live-music accent.

These colours identify work; they do not become global decoration.

Layout grammars

Landing: Product Constellation

Asymmetric product worlds inside a quiet frame. Best for conveying range and current attention.

Work directory: Living Index

Filterable rows with explicit type, era and status. Best for the complete body of work.

Product and company details: Personal Institution

Large identity moment, structured facts, current work, archive and related writing.

Writing and history: Editorial Archive

Newsreader-led long-form typography, chronology, evidence and generous reading rhythm.

Wordmark

The default wordmark is simply Talvinder.

On hover or keyboard focus, one randomly selected transformation plays. The current pool is:

the i becomes a slanted signal;
the v becomes a restrained peace glyph;
vin is struck and WIN is written above it;
the a resolves into two mountain edges;
the T changes into an editorial italic;
the name opens at the v with a blue divider;
the final r becomes a two-colour misprint;
the i becomes a blue vertical column;
the v resolves into two open strokes;
a hand-drawn blue underline appears.

Only one transformation runs at a time. It resets on exit. The accessible name remains “Talvinder.” Motion stops under prefers-reduced-motion.

Motion

Micro: 120–180ms.
Wordmark: 420–620ms.
Page entrance: 500–700ms, once.
No looping movement.
No glitch effects, bouncing or ambient animation.
Motion may reveal hierarchy but must never hide required content.

Radius and borders

Default radius: 0.
Small controls: 2px maximum.
Circles only when the geometry means something.
Use one-pixel rules for structure; avoid decorative card shadows.

Copy in visual surfaces

Start from facts: name, date, type, status, outcome.
Do not praise the author.
Do not force products into one commercial thesis.
Preserve failure and uncertainty.
If the sentence could describe fifty personal portfolio sites, delete it.

Guardrails

The homepage is not a generic product-card grid.
The work index must distinguish companies, products, experiments, forks and past work.
Elsewhere must feel like freedom and continuity, not terminal infrastructure.
Editorial pages keep Newsreader and their reading rhythm.
Product identities may diverge from the parent system deliberately.