Michael Tran

Nhan

Interfaces with calm precision.

Buildingthoughtfulwebexperienceswithafocusonclarity,craft,andsimpleinterfaces.

View projects
Read blog

About

I design and build interfaces that stay out of the way — precise typography, purposeful motion, and systems that hold up under real use. Restraint is the feature.

“Make the interface feel inevitable — never loud.”
0+years shipping
0focus areas

  1. Now

    Building product interfaces

    Shipping calm, resilient web apps with a bias toward clarity and craft.

  2. 2024

    Systems & design engineering

    Bridging design systems and application code so polish survives production.

  3. Earlier

    Open source & experiments

    Learning in public — small tools, motion studies, and thoughtful UI patterns.

Scroll the stack — each principle pins as you move.

CLARITY · CRAFT · CARE

01

Clarity first

Every screen earns its keep with hierarchy and restraint before novelty.

02

Motion with manners

Animation explains change. If it doesn’t help orientation, it doesn’t ship.

03

Systems that hold

Tokens, components, and copy stay coherent under real product pressure.

Tech Stack

Tools I reach for most often.

TypeScriptReactNext.jsTailwind CSSNode.jsFramer MotionPostgreSQLGraphQLPlaywrightVercelTypeScriptReactNext.jsTailwind CSSNode.jsFramer MotionPostgreSQLGraphQLPlaywrightVercel
Core
portfolio — zsh
$ whoami
michael — interface engineer
$ focus --now
clarity · craft · calm systems
$ ship --with care
✓ done

Recent shipping rhythm

Work

Projects

Selected work and experiments.

Product

Signal Desk

A focused dashboard for triage workflows with keyboard-first UX.

Open source

Harbor Docs

Documentation site with search and calm reading rhythm.

Experiment

Frame Lab

Motion playground for micro-interactions and page transitions.

Tooling

Northwind CMS

Lightweight content toolkit for small editorial teams.

||
WireShip

Frame Lab

Hover to expand preview

Signal Desk — scroll the frame

Intake

Capture signal without ceremony.

Triage

Rank what matters in one glance.

Resolve

Close the loop with soft confirmation.

  • Design tokens

    Foundation

  • Interaction kit

    Motion

  • Content model

    Structure

  • Ship checklist

    Quality

Open a case study

Process frames

Frame 01

Quiet density

Information without visual shouting.

Frame 02

Keyed actions

Shortcuts that feel discoverable.

Frame 03

Soft feedback

Confirmation you feel, not just see.

Frame 04

System seams

Where design tokens meet real code.

Writing

Blog

Notes on building and learning.