Portfolio design system

Night is home, paper is the case study. One typeface, one teal, glass only as floating chrome.

Every specimen on this page is the live component, painted with the site's own tokens. The code tabs read each component's file when the site is built.

Design systems

Principles

“Is it as obvious as knowing to sit in a chair?”
“Prominence = importance.”
“State before words.”
“Fact ≠ forecast.”
“Actionable looks actionable.”
“One element, one job.”
“SCALE leads the hierarchy — weight stays quiet. … Size makes things loud, not weight.”
“Main-site palette: one set, shared by the homepage and every page. Two surfaces, two line greys, three inks, one teal; paper has one ink and one muted ink. Data hues are for drawn product screens only.”
“Radius, three steps: pill, card 16px, inner 8px. 50% for circles.”
“Elevation is tone, not shadow: night → raised → floating glass.”
“Teal as a scalpel (not glow).”

Brand and voice

A design system is the vocabulary. This is the reason.

I didn't pull this palette from a trend deck. I built the view I see when I close my eyes.

I grew up in Mumbai, on the water, and my first home in America was by Boston Harbor. And nothing — nothing — has ever matched the feeling of the ocean and the waves for me. It's the one landscape that has felt like home on two coasts, an entire ocean apart — and I've carried it with me everywhere since. So the waves in this site aren't decoration. They're the closest thing I have to a place that has always been mine.

Then there's the light. I've painted since I was five, I keep my rooms dim, and I'm most awake at night — so the northern lights are, quite simply, the most beautiful thing I can imagine watching. For a painter, colour that dances on its own is a kind of magic. A dim room, moving light, deep water — that isn't a mood board. It's just where my mind goes when it's happiest.

This whole site is those two loves in a single frame: the ocean below, the aurora above, and everything I've made floating in the middle of it. It's my most beautiful daydream, rendered — the view I'd want to live inside.

So no — this isn't a portfolio with a nice background. It's me showing you the inside of my imagination. If you want to know who I am, you're already standing in it.

The dark: Focus. I keep my rooms dim and I work at night — the site should feel the way my studio feels.
The teal: The one colour I trust to lead. Everything else exists to support it.
One voice, quietly: I dropped the second font, then the heavy weights. One typeface, a restrained 300–600 range, and size does the shouting — the restraint is the statement.
The brain you can step into: The closest I could get to showing you the inside of my head — not just what I made.
The light that moves when you arrive: The aurora. Always. Dancing colour above, deep water below.
The stillness underneath it: A dim room at night. Somewhere I would actually want to sit.

The system in brief

Modes: Night (--bg-cinematic) is the homepage. Paper (--paper) is the white case-study page; the first-light transition moves between the two.
Accent: Teal: the color of deep ocean + aurora. It is the system, not decoration.
Buttons: Three looks: primary (solid teal, all caps), the one main action in a view; secondary (the soft fill, all caps), beside a primary or in a row of controls; tertiary (teal small caps, no fill, always an icon) for longer labels in the reading flow.
Controls: One master button in three looks, 40px, Hanken at 400; a label of more than two words is tertiary. Icon-only is a 40px circle in the soft fill. Toggles are their own component.
Type: One typeface, Hanken Grotesk. No monospace face; every label is Hanken held in weight, caps and tracking.
Weight: 600 for display and headings, 500 for labels, 350 for body, 300 for the quietest asides.
Surface: One control surface, the soft fill. In the page it is see-through; floating over pictures or scrolling content it is the same colour made opaque. There is no glass.
Depth: Nothing casts a shadow and no button has a border. Surfaces rise by tone: night, then raised.
Status: A status is information, not an action: dot and plain text, no pill, no outline.
Motion: Blur-to-focus entering, focus-to-blur leaving. No crossfades.

Color

One set, the same on the homepage and every page. Night has two surfaces, two greys for lines and marks, three inks and one teal. Paper has its own inks and a darker teal so it clears contrast on white. Every older token name points at this set.

Night

Surfaces, lines, inks, teal. --glow is teal on night; --teal is teal on paper and in fills.

--night

#03070a

--raised

#0b1517

--line

#222b29

--mark

#5d6966

--ink-1

#f2f5f4

--ink-2

#c9d1cf

--ink-3

#93a09c

--teal

#078b9c

--glow

#2fc6d5

Paper

The white case studies: one ink for headings and body, one muted ink for captions and meta.

--paper

#f6f7f7

--paper-ink

#1f2a2e

--paper-ink-muted

#485459

--paper-line

#dfe4e5

--paper-teal

#066a78

Data hues

One per hue, only inside the drawn product screens and charts. Never for the site's own chrome.

--accent-amber

#f59e0b

--semantic-emerald

#10b981

--semantic-blue

#3b82f6

--semantic-rose

#f43f5e

--semantic-orange

#f97316

--semantic-purple

#a855f7

--semantic-cyan

#06b6d4

Older names

Kept so existing code keeps working. Each one resolves to the set above; none adds a colour.

--palette-zinc-100 → --ink-1

--palette-zinc-200 → --ink-1

--palette-zinc-300 → --ink-2

--palette-zinc-400 → --ink-2

--palette-zinc-500 → --ink-3

--palette-zinc-600 → --ink-3

--palette-zinc-700 → --mark

--palette-zinc-800 → --line

--palette-zinc-900 → --raised

--palette-zinc-950 → --night

--bg-primary → --night

--bg-secondary → --raised

--bg-tertiary → --raised

--bg-cinematic → --night

--bg-ink-950 → --night

--bg-ink-900 → --raised

--bg-monitor → --night

--bg-monitor-alt → --raised

--text-heading → --ink-1

--text-primary → --ink-1

--text-body → --ink-2

--text-muted → --ink-3

--text-dim → --mark

--text-monitor → --ink-1

--text-monitor-muted → --ink-3

--text-monitor-dim → --ink-3

--accent-teal → --teal

--accent-teal-bright → --glow

--border-monitor → --line

--focus-ring → --accent-teal

--radius-sm → --r-inner

--section-padding-mobile → --space-20

--section-padding-tablet → --space-24

--section-padding-desktop → --space-32

Case-study scope, night and paper

The case studies read their own --cs-* tokens. Paper re-points them; each pair below is painted inside the real scope.

--cs-space

var(--night) · paper var(--paper)

--cs-silver

var(--ink-1) · paper var(--paper-ink)

--cs-slate

var(--ink-2) · paper var(--paper-ink)

--cs-steel

var(--ink-3) · paper var(--paper-ink-muted)

--cs-ink

var(--ink-1) · paper var(--paper-ink)

--cs-line

var(--line) · paper var(--paper-line)

--cs-reject

#b9556a · paper #a8324d

--cs-teal

var(--teal) · paper var(--paper-teal)

Typography

One family, Hanken Grotesk, and no monospace anywhere. Size leads the hierarchy; weight stays between 300 and 600.

Family

Aa Gg Rr 0123

--font-sans

'Hanken Grotesk', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif

Roles

Made obvious.

Display

--text-6xl · --weight-heading

Same weight, scale sets the rank.

Heading

--text-4xl · --weight-heading

The chair tells you it is a chair.

Subheading

--text-xl · --weight-subheading

Body sits at 350, with relaxed leading for long-form reading.

Body

--text-base · --weight-body

Label voice: weight, caps, tracking

Label

--text-xs · --weight-label

Scale

The quick brown fox, 1,234

--text-xs

0.75rem

The quick brown fox, 1,234

--text-sm

0.875rem

The quick brown fox, 1,234

--text-base

1.0625rem

The quick brown fox, 1,234

--text-lg

1.1875rem

The quick brown fox, 1,234

--text-xl

1.3125rem

The quick brown fox, 1,234

--text-2xl

1.75rem

The quick brown fox, 1,234

--text-3xl

2.1875rem

The quick brown fox, 1,234

--text-4xl

2.5rem

The quick brown fox, 1,234

--text-5xl

3rem

The quick brown fox, 1,234

--text-6xl

4rem

Weights

Restraint is the statement

--weight-heading

600

Restraint is the statement

--weight-subheading

600

Restraint is the statement

--weight-label

500

Restraint is the statement

--weight-body

350

Restraint is the statement

--weight-light

300