I plan and build design systems

Messy web app? Designers and developers out of sync? Work faster, build beautiful UIs, and prevent tech debt with custom designed and coded components.

Work with me
December 2024
Sun Mon Tue Wed Thu Fri Sat
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
  1. Grid
  2. Form
  3. Calendar
  4. Gallery
  5. Kanban
  6. Timeline
  7. List
I agree to your impenetrable, ever-changing Terms of Service.
Sign up
Your account is updated
New payment information is now available.
Andy Burgess painting of Palm Springs home
At the MOMA
London-born artist Andy Burgess presents his latest works of modernist and mid-century architecture.
  1. Command line
    Deploy to AWS using CLI
  2. Open in AWS console
  3. Sync with cloud provider
  4. Download configuration
  1. ACME
    Acme Inc
  2. FUNH
    Funhouse Inc
  3. IPLP
    Important People Inc
  4. FOOB
    Foobar Inc
  1. Carmen Acevedo avatar
    Carmen Acevedo
    Staff Designer
  2. Findlay Barber avatar
    Findlay Barber
    QA Wizard
  3. Jak Sherman avatar
    Jak Sherman
    Content Hero
  4. Lakshmi Sharma avatar
    Lakshmi Sharma
  1. App
    Launch new
  2. Database
    Create a database
  3. Helm
    Deploy a chart
  4. Terraform
    Deploy a module
  5. Manifest
    Deploy to Kubernetes

Svelte components work in isolation. They are self-contained and will only inject the styles they need to display.

Terri Gordon
Product Manger
Hey there, long time no see. How have you been doing?
Been great. Thanks for asking. You?
Oh you know, living the dream. Wanna grab a coffee at our usual spot?
Let’s do it ☕️!
See you there in 10 mins!
Directory Message
src Updated build
build Typo fix
docs Updated color
.editor New feature
files Remove unused
lib New script
You need access
To proceed you’ll need to ask a project admininstrator for permission to view and edit this project.
Request access
  1. Form
  2. Gallery
  3. Calendar
  4. Kanban
  5. Grid
  6. List
  7. Timeline

From Figma to React svelte note

I partner with little startups and well-known unicorns to establish and extend design systems with component design and development, design tokens, and consulting.

The implementation quality of Tom’s component work is second to none. He quickly and accurately implemented all of our design systems components in code to demonstrate support for multiple brands and light and dark mode. Tom’s extensive design systems experience was critical for informing our theming strategy.
Jules Forrest
Jules Forrest
Director Of Product Design
Credit Karma
We partnered with Tom to kickstart Poe's design system. He quickly understood our needs, methodically built design tokens and foundational components, and collaborated closely with our engineering partners. Tom delivered on time and remained flexible throughout the process, tailoring his deliverables to our requirements. We highly recommend him for his expertise and commitment to delivering quality design systems.
Jason Chan
Jason Chan
Head of Design
Tom was a big help to our team at Instacart. He improved designer productivity through user interviews, mapped opportunity areas for our design system, and built Figma plugins to address gaps in our designers’ workflow.
Eduardo Alarcon
Eduardo Alarcon
Design System Manager
Tom was the original creator of Thumbprint, our design system at Thumbtack. He designed and built the initial components, worked with teams to incorporate it into our development processes, and helped evolved it to meet our needs. Thanks to Tom’s expertise and collaboration, Thumbprint is an essential tool for how we build products.
Tim Carter
Tim Carter
Senior Director Of Engineering
Tom did superb work for us at Tecton. He quickly delivered high-quality components, a set of functional CSS classes, and several full pages built with these components to demonstrate layouts. His work allowed our engineers to quickly assemble the new UI and extend it over time.
Jeremy Hermann
Jeremy Hermann
Entrepreneur in residence
Costanoa Ventures
Tom was brought in to help us make sense of how engineering and design can work together to modernize a legacy design system. Tom was instrumental in helping guide our client in the right technology choices and how to socialize the new system within design and engineering. He is the real deal and perfect for a company looking to hit the ground running on a design system.
Jon Delman
Jon Delman
Executive Creative Director
Working together with our designer, Tom built Flagship’s design system and component library. Tom’s level of engineering and design output is exceptional and I couldn’t be happier with the result. He made great technical and design decisions in a chaotic startup environment and shared valuable knowledge about engineering, design, and collaboration. Tom changed the way how we build our products for the better.
Juhana Kangaspunta
Juhana Kangaspunta
CTO & Co-Founder

Ask away

These are a few of the common questions I’ve received over the years. Reach out if you’d like to hear more.

Having spent a lot of time on design and engineering teams I’m able to help small startups and established companies as a generalist in a variety of ways.

  • Creating and extending accessible design systems with design and code.
  • Presentational component development in React and Svelte.
  • Design token naming, management, and distribution.
  • Product design of web applications from wireframing to final polish.
  • Prototyping in Figma and with live code.
  • Chrome extensions and Figma plugins.
  • Integrating with content management systems.
  • Authoring documentation.
  • General consulting to help teams define roles, sequence work, and plan for future.

During our initial meetings we’ll determine what work is required for your project and the phases needed to complete it. I can also refer you to other designers and developers if I’m not able to help you.

At its most basic, a design system is a collection of design and developer assets that can increase product development velocity, reduce tech debt and repetition, and increase user interface consistency.

With the complexity of building modern applications many companies have adopted design systems and often dedicate entire teams to build and maintain them.

Though most small companies don’t have a need for such full-time attention, even a small design system will bring speed and consistency benefits and serve as a foundation as the product evolves.

Projects that can be well-scoped will be quoted on a fixed-price basis. If the work is exploratory or you prefer an open-ended engagement I can charge at an hourly rate. I also offer discounted rates for non-profits and educational institutions.

For design I use Figma to plan, test, and build components and libraries.

Code projects are built in React, Svelte, with an optional functional CSS library to help with layout and responsiveness. All code is managed and tracked in a private GitHub repository or can be located in your GitHub organization.

Acesss to the design files and code will be granted early in the process with ownership of them handed over at the conclusion of the project.

Have other requirements? Let me know!

For design systems projects I will commonly provide…

  • Systems for color, spacing, iconography, and typography.
  • Foundational presentational components like buttons, avatars, and form elements.
  • Documentation in Figma for design components and Storybook for coded components.
  • Full-page coded layouts of a few representative pages or patterns as needed.
  • Two weeks of post-project support.

And regardless of the type of project, all deliverables will be clearly detailed in our working agreement.

I’m Tom Genoni, a designer and developer living in San Francisco.

I’ve always been fascinated by the process of building products and why great design so often turns into not-so-great user experiences. Working in design systems has provided a perfect intersection of these interests and I love the challenges of keeping the chaos at bay.

I also like cats, boring documentaries, and sour candy.


Let′s chat

I′d love to know if I can help with your project. Send me a few details and we′ll talk.

2023 Genoni, LLC · San Francisco, California