interface design · a working portfolio

Small surfaces,
chosen with care.

UI and interaction design for the network of small web apps I make on the side. Every project is a chance to choose a typeface, a colour set, a rhythm — and to ship.

Singapore self-taught designer shipping on weekends
01

About

I'm an engineer who keeps wandering into the design side. Most of what I build is a small, opinionated web app — a one-page site, a single-file tool, a deliberate visual moment. The constraint is what makes it fun.

My instinct is to design the system before the screen: pick a palette, settle on a type pairing, decide what the headers should feel like, and only then start placing buttons.

I think of this site as a working portfolio — projects ship at the same domain they're designed at, so what you see here is what's running in production somewhere.

Some of the work is product-shaped (a coffee builder, a payment-link sandbox). Some is research-shaped (gesture-driven instruments). All of it shares the same small-batch, single-file aesthetic.

02

Selected Work

live
product · single page

coffeelab

coffeelab.sankhacooray.com

Visual lab for building coffee drinks — drop ingredients into a virtual cup and watch which famous coffee you just made.

visit
product · single page

mixlab

mixlab.sankhacooray.com

Food-experiments scratch pad. Plate combinations, ingredient noodling, the visual side of cooking trials.

visit
portfolio · sister site

ensemble

ensemble.sankhacooray.com

The music-journey site. Dark warm theme, Instrument Serif headlines, timeline of concerts. Same family as this page.

visit
experiment

embodied orchestra

eo.sankhacooray.com

Gesture-driven mini-orchestra in the browser — theremin, bow, and scale-banded instruments controlled by the body. Interface design for an interface without buttons.

visit
tool · sandbox

paynow

paynow.sankhacooray.com

Tap-test sandbox for Singapore payment-app deep links. A utility page that still earns a typography pass.

visit
case studies

Process write-ups

coming to this page

Per-project breakdowns — colour decisions, type pairings, why the dark theme, what got cut. To be added as each project earns a write-up.

to be added
03

House Style

A handful of decisions I keep making, project after project. Not rules — just the path of least friction once you've made them once.

Aa
Serif headlines, sans body
Instrument Serif for warmth, DM Sans for legibility, JetBrains Mono for metadata.
Dark base, two accents
Warm dark background, one primary hue, one cool counterpart. Lets content breathe.
One page, one file
Single-file HTML where possible. No build step, no JS framework, no excuses.
·
Generous whitespace
Sections breathe. The page should feel like a small magazine, not a dashboard.
Numbered sections
A monospace 01 / 02 / 03 gives the page rhythm and orientation without a sidebar.
Link as gesture
Arrow on hover, mono label. Links should feel like deliberate moves, not chrome.
04

This Site's Palette

live tokens

Every site in the network keeps the same structural skeleton and shifts only its accent pair. This page leans magenta & violet — the design-studio register of the family.

bg · #0d0a14
surface · #181425
primary · #e07ab8
secondary · #a98bff
text · #f0ebe0

Case studies, before/after frames, and Figma exports will be added here as the portfolio fills in.