Interfaces built
to the pixel.

Design Engineer

I'm Ramona. I design interfaces and build them myself, so nothing gets lost between the mockup and the browser. Motion, states, accessibility and all.

sandbox // try it yourself
Portfolio review
45 min ยท video call

Weekend slots
accent
page theme
> radius:16px accent:...
Selected work

From blank file
to live URL.

The Atlas travel-ops dashboard in dark mode: an in-transit Tokyo trip, KPI tiles, a trip list, and a 64% travel-budget ring
design system

Atlas

ReactTypeScriptStorybookTailwind

A design system built from one token file: two token layers, thirteen components, and a build that fails if anything drifts. The travel-ops dashboard is built entirely from it, documented in Storybook in light and dark.

Ask the Planet answering 'Near Japan': a blue 3D globe with depth-colored earthquake dots inside a dashed ring around Japan, beside the answer '41 earthquakes within 900 km of Japan, in the last 30 days', a timeline of bars, and a list of the biggest quakes
ai data viz

Ask the Planet

Next.jsThree.jsOpenAITypeScript

Live earthquakes from the last month, explored by asking questions in plain English, like "deep quakes near Fiji." The AI only turns your question into a filter. Every dot on the 3D globe and every number comes from the USGS feed, so nothing is made up.

The Motion System playground in dark graphite: the headline 'How things move.' above a full-width instrument with a dark grid screen reading spring.bouncy, 450ms, bounce 0.4, above four flat keys (Duration, Easing, Spring, Stagger), each topped with its color
motion design

Motion System

ReactTypeScriptMotionTailwind

Motion you tune by eye, not by number. Springs are named for how they feel, every token races its siblings in a live playground, and what looks right exports as JSON, TypeScript or CSS.

Experiments

  • ai trivia

    Snapshot Trivia

    Can a quiz feel like flipping through photo prints? AI writes ten questions live, each paired with a photo.

  • brand prototype

    Cha Tea Benefits

    Does teaching sell tea better than selling does? A brand site with a working steep timer.

Four things I won't
ship without.

Every state, mapped

Loading, empty, and error get the same code review as the happy path, each one designed and built before QA ever sees a build.

Tokens, not magic numbers

Every color, radius, and easing curve lives in a variable. The design survives refactors because it was never hardcoded in the first place.

Motion, tuned in code

Motion curves picked per component in code, never the library default. Hover the stage to feel one.

AI in the loop, not in charge

Agents scaffold components, explore variants, and surface the states I'd forget. Every line still gets read before it merges.

I design it.
Then I build it.

I started in front-end engineering, turning Figma files into production code and finding everything the mockups didn't say, like loading states, awkward breakpoints and focus rings. So I started designing those parts myself, then whole flows, then the systems behind them. Now I own an interface from layout and states through the shipped component, and I can explain every decision in it.

ramona@dev // stack

Let's build something people can feel.

Say hello