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.

Poe button grid in Figma

Poe — End-to-end system of Figma components and variables, design token distribution with dark mode, and React components for Quora’s AI app.

Theme examples of inputs

Credit Karma — A CSS-variable driven multi-brand, multi-mode token implementation to inform their design strategy.

Token flow diagram

Eventbrite — Multiple design token naming, research, documentation, and distribution with Style Dictionary and GitHub packages.

Full-page design of Zeet's website

Zeet — Custom Figma component library and redesign of user interface elements, patterns, primary pages, and user flows.

Clients

Partnering with young startups and well-known unicorns

I’ve been privileged to work with many notable 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 user interfaces.
  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 design tokens.
  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

On design systems

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

Color bands against a wall and corner

Does your startup need a design system?

 Calculator with text forms and coffee cup

How I freelance in design systems
Web accessibility icon

Accessibility in design systems

COMING SOON
Scrabble tiles with different letters and numbers

Understanding design tokens

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