Genoni Studio.

Design systems
built & deployed

Work faster, build beautiful UIs, and prevent tech debt with custom Figma and React components.

Work with me
  1. Directory
    Select directory to view.
    Directory Message
    src Updated
    build Typo
    docs New color
    .editor Feature
    files Remove
    Stocks
    Get real-time data.
    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. JPJP
      Jones, LLC
      325.45
      0.45
    5. FOOB
      Foobar Inc
      347.96
      -0.45
    Views
    Select one to add.
    1. Form
    2. Gallery
    3. Calendar
    4. Kanban
    5. Grid
    6. Timeline
  2. Impressions
    Monitor your activity.
    +4923
    +172% from last month
    Actions
    Select an item to deploy.
    1. App
      Launch new
    2. Database
      Create a database
    3. Helm
      Deploy a chart
    4. Terraform
      Deploy a module
    5. Manifest
      Deploy to Kubernetes
    Contents
    Design system elements.
    Foundations
    Components
    Svelte components work in isolation. They are self-contained and will only inject the styles they need to display.
    Layouts
    Patterns
  3. Manage Users
    Edit permissions or delete a user.
    1. Carmen Acevedo avatar
      Carmen Acevedo
      Staff Designer
    2. Findlay Barber avatar
      Findlay Barber
      QA Wizard
    3. Jak Sherman avatar
      Jak Sherman
      Content Hero
    person
    Amelia Gordon
    Product Manger
    4
    December 2024
    Sun Mon Tue Wed Thu Fri Sat
    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
    Clear
    Done
  4. Customer Support
    Let’s see if we can help.
    How can I help you today?
    avatar
    I’m having trouble with my account.
    Sorry to hear that. Let’s see what I can do to help.
    avatar
    Thank you. I’m trying to update my payment method.
    File upload
    Adding file to your account.
    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
  5. Create account
    Enter your email info below.
    Email
    Password
    Repeat password
    I agree to your impenetrable, ever-changing Terms of Service.
    Hell yeah, send your newsletter.
    Create Account
    Tags
    Add or select a tag to filter.
    dupe
    invalid
    question
    help
    enhance
    bug
    Controls
    Select an action to perform.
    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
  6. Views
    Select one to add.
    1. Form
    2. Gallery
    3. Calendar
    4. Kanban
    5. Grid
    6. Timeline
    Account updated
    New payment information is now available.
    Let’s connect
    Would you like to approve the incoming request? You can always change your mind later if you want.
    Deny
    Approve
    Share this document
    Anyone with the link can view.
    https://genoni.studio/link
    1. @jak avatar
      @jak
      Jak Sherman
      Edit
    2. @carmen avatar
      @carmen
      Carmen Sandiego
      Edit
    3. @findlay avatar
      @findlay
      Findlay Barber
      Edit

Process

Building design systems fast, so you can build faster

I establish and extend design systems with accessible component design and development, design tokens, product design, and consulting.

Illustration of a man looking over a design file

Work

From Figma to React, tokens to components

Design system engagements have involved a variety of projects, from simple wireframing to complex React component integration.

test
Eventbrite — Multiple design token naming approaches, research, documentation, and a distribution system using Style Dictionary and GitHub packages.
Poe variables
Poe — End-to-end system of Figma components and variables, design token distribution with dark mode, and React components for Quora’s AI app.
test
Zeet — Custom Figma component library and redesign of user interface elements, patterns, primary pages, and user flows.
test
Credit Karma — A CSS-variable driven multi-brand, multi-mode token implementation to inform their design strategy.

Clients

Partnering with young startups and well-known unicorns

I’ve been privileged to work with a number of great tech companies, including long-established businesses and newly funded startups.

  1. Created a custom web application that implemented their multi-mode, multi-brand design CSS variable token structure with live components.
  2. Extended the Marmalade Design System with balanced color palettes and design token strategies to support multi-mode, multi-brand UIs.
  3. Improved designer productivity by identifying opportunities and best practices for the design system and built Figma plugins to address workflow gaps.
  4. Full design system based on existing designs with Figma library, accessible React with TypeScript components, documentation, and a design token system.
  5. Founding member of four-person team building the Thumbprint design system with design, development, research, documentation, and evangelizing.
  6. Rapidly built a Figma library, corresponding React with TypeScript components, and a marketing site, along with developer guidance on best practices.

blog

Design systems learnings and advice

After over a decade of building complex user interfaces with design and development teams, I have thoughts.

Color bands against a wall and corner

Do you need a design system?

Deciding when to introduce a design system is more art than science. I’ll explain how I think about the problem along with the pros and cons of alternatives.

COMING SOON
Web accessibility icon

Accessibility in design systems

Implementing accessibility correctly is no easy task and requires designers and developers working in tandem. Let’s look at what design system teams can do.

COMING SOON
Calculator with text forms and coffee cup

How I freelance in design systems

Working for yourself can be complicated. I’ll talk about why I did it along with a catalog of the tools I use, the monthly costs, and my advice to those considering going rouge.

COMING SOON
Scrabble tiles with different letters and numbers

Understanding design tokens

Keeping your product’s platforms in design alignment is tricky, even with the best of teams. Here’s my experience using design tokens and why it’s not (yet) a silver bullet.

COMING SOON

contact

Let’s work together

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

Schedule meeting
Illustration of waving person