hi there.

My name's Ricky.

I design and code.

Let's build something incredible.

Available starting June 27.

on GitHub

things i've done.

  • QuickBooks: Dark Mode

    At the end of 2018, UI customization started hitting the mainstream. Apple launched macOS Mojave at the end of the year with a system-wide dark mode. Rumors had it that iOS 13 would follow suit in 2019 (and it did). The design team had explored dark mode before in bits and pieces, but never at scale. So, in the spring of 2019, before iOS 13 launched, I started thinking about how this accessibility mode might apply to QuickBooks.

    Five stacked screenshots showing off various screens with dark mode turned on.

    I considered this an accessibility mode because, like high-contrast mode, it makes products usable for more people. For example, my partner Heather suffers from chronic photosensitive migraines. Today, she uses dark mode on all her devices in part because of that.

    Before this, our prototyping team at Intuit built something we called the end-to-end prototype. It sat outside of production so we could test and iterate quickly. We meant it to represent many screens in the user's experience of signing up for and using QuickBooks, and we frequently used it to try out new UI concepts. This turned out to be a great proving ground for my dark mode concept.

    (video of end-to-end prototype)

    I started by deconstructing how Apple applied dark mode to macOS. By exploring different palettes and UI elements, I immediately learned that it wasn't a simple inversion. We couldn't simply plop filter: invert(100%) on the body element and call it a day. Everything needed consideration, from how background layers interact to how hover states and shadows work.

    (Image of some of my macOS explorations)

    The main thing I took away from my reverse engineering is that turning on dark mode is like turning the lights off. Light and dark things darken, but light things stay lighter. However, the grays in our light mode palette weren't suitable for dark mode because most of the grays were over 50% brightness.

    (Image)

    In under a month, I'd adapted all the screens in our prototype to dark mode. And because I'd done this using CSS custom properties, I could also make a high-contrast mode and colorblind mode. I did this to show how the various modes could combine.

    The next challenge is applying this in production. QuickBooks is a big app made up of plugins managed by many different engineering teams. We needed a way to launch this feature without going into the code of every single plugin and releasing a new version.

    The solution I came up with was an automated conversion tool which would pull the CSS for every plugin (leveraging some prior CSS cleanup tooling) and run heuristics on that code to derive a dark mode version. It looks at the context of each CSS rule, modifying the colors depending on that context. Then it builds an overlay stylesheet which applies the colors to the page. From there, we use a few manual overrides, and apply the stylesheet using our own plugin.

  • what i can do.

    • 3D modeling
    • Blender
    • brainstorming
    • color management
    • design critique
    • design systems
    • Figma
    • graphic design
    • icon design
    • Illustrator
    • image optimization
    • interaction design
    • photography
    • Photoshop
    • prototyping
    • responsive design
    • Sketch
    • UX design
    • UI design
    • user testing
    • visual design
    • wireframing
    • Auto Layout (Xcode)
    • babel
    • CSS
    • code review
    • docker-compose
    • Docker
    • eslint
    • Express.js
    • Framer Motion
    • Git
    • GitHub Actions
    • GLSL
    • HTML
    • Next.js
    • Node
    • npm/yarn
    • PostCSS
    • Puppeteer
    • react-three-fiber
    • React
    • Sass
    • SQL
    • stylelint
    • Swift
    • SwiftUI
    • three.js
    • Vanilla JavaScript
    • WebGL
    • Webpack

    more about me.

    Portrait photo of Ricky Romero

    My name's Ricky Romero.

    I'm a designer and engineer in the scenic Bay Area of California. I've worked in web design and development (mobile and desktop) for over 10 years, and I'm dipping my toes in Swift and WebGL now. I've designed for both product and marketing teams, and done both visual and interaction design. I've also written product and marketing code for use in production.

    I've produced my best work in roles leveraging both my design and engineering talents. However, I can specialize in design only when needed.

    In my spare time I like to take photos, build small hobby projects, and play video games (Nintendo for life).

    Follow me on Dribbble and GitHub!

    only 1 left in stock.

    I'm looking for work, but won't be for much longer.

    What do you want to build together?

    Available starting June 27.