I design and develop user interfaces

Messy web app? Designers and developers out of sync? Get a design system to work faster, build beautiful UIs, and prevent tech debt with branded 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
First
Last
City
State
Zip
I agree to your impenetrable, ever-changing Terms of Service.
Sign up
Cancel
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.
Tickets
Showtimes
  1. Command line
    ssh https://125.236.56.123
    Deploy to AWS using CLI
  2. Open in AWS console
  3. Sync with cloud provider
  4. Download configuration
  1. ACME
    Acme Inc
    152.45
    -1.25
  2. FUNH
    Funhouse Inc
    253.45
    2.33
  3. IPLP
    Important People Inc
    325.45
    0.45
  4. FOOB
    Foobar Inc
    347.96
    -0.45
Status
Usage
Data
  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
    SRE
  1. App
    Launch new
  2. Database
    Create a database
  3. Helm
    Deploy a chart
  4. Terraform
    Deploy a module
  5. Manifest
    Deploy to Kubernetes
Progress…
Foundations
Components

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

Layouts
person
Terri Gordon
Product Manger
4
Hey there, long time no see. How have you been doing?
avatar
Been great. Thanks for asking. You?
avatar
Oh you know, living the dream. Wanna grab a coffee at our usual spot?
avatar
Let’s do it ☕️!
avatar
See you there in 10 mins!
avatar
dupe
invalid
question
help
enhance
bug
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 product design, component development, design tokens, prototyping, plugins, 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
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
Instacart
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
Thumbtack
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
Ueno
Tom did superb work for us at Tecton. He quickly delivered high quality CSS components, a set of functional CSS styles, and several full pages built with these components. 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
FAQ

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 interested in understanding 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.

Contact

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