Skip to main
font sizes and previews for OddBird.net

Integrated Design Systems

Want to reduce technical debt and scale your applications?

We partner with clients to build design systems that improve team communication, speed up development, and lay the foundation for a scalable codebase. An integrated design system can help your team maintain consistent designs across digital products over the long-term – finding bugs faster, and weaving system updates into the daily workflow.

Talk with us »

When the inventor of the modern design system names you as the number one person she’d hire to build a design system, well then I jump! I’m grateful she put us in contact.

OddBird is a company I recommend without reservation. They are among the best in the world at front end, design systems, and w3c standards.

See work sample »

We provide two integrated design system development packages. Purchase the Goals & Audit package on its own and build your system in house, or hire us to build your design system too.


Goals & Audit

Starting at $4K

Let’s assess your current designs & technology, understand your needs, and create a strategy together.

Taking a visual inventory is a great way to start identifying design patterns.

Goals

OddBird will meet (virtually) with your team. Together with your designers and developers, we will walk through your current workflow and projects, highlighting pain points and bottlenecks so that we can gain a shared understanding of your design system goals and needs.

Audit

OddBird will review any existing design system components, libraries, and/or platforms/tools your company uses, how you are using them, and any related project code.

Deliverables

  1. Visual Inventory: A compilation of existing components within your project, documenting commonly used UI elements and their variations. We will identify and prioritize design patterns to be condensed, expanded, improved, and documented in a pattern library.

  2. User Stories: A list of recommended next steps that could include: documentation, tooling recommendations, a component library, component development, component design, brand/graphic design, code organization, and team training sessions for hand-off.

  3. Estimate: A set of “User Stories” or tasks estimated individually, and prioritized into phases as needed — giving you control of the timeline and budget to build your design system.


Build My Design System

Custom estimates

Let’s set up the tools, workflows, and components you need, and train your team to use and maintain the system over the long-term.

Storybook component library built for Metecho project

Most design system projects begin with the Goals & Audit package to gain a shared understanding of the technology constraints, existing designs, and team goals. Based on the results of the Goals & Audit phase, OddBird will create a proposal and estimate that could include a wide ranges of services. In the “Build” phase, we will start with agreed-upon priorities and meet with you regularly while we work together.

Range of Deliverables

Training & Ongoing Development

The Build My Design System package concludes with training for your team to ensure successful hand-off. We are happy to (and often do) provide continued development and ongoing project updates, as needed, at our standard hourly rate.


OddBird Theme Colors documented using Herman automated style guide

Contact us if you’re interested in talking about auditing or building your design system, or if you want to chat about design system best practices.

OddTools

Herman is a free tool made by OddBird which creates a living pattern library from the code in your CSS files. It saves time by standardizing designer/developer communication, on-boarding, and hand-off, helping to make your life a little easier.

Depending on your needs, Herman may be included in a design systems training and implementation project. We work with you to determine the best tools for your company.

2020 Posts

  1. Miriam talking with Jen Simmons and others
    Talk post type

    Resilient Web Systems

    A workshop with practical steps to take full advantage of the web

    Past
    • – Online

      Smashing Workshops

    see all Talks & Workshops
  2. Video post type

    Design Systems AMA

    Jina and I answer questions about CSS, Sass, Design Systems, and more!

    see all Video posts

2019

  1. Sample organized color swatches with hex and hsl values
    Talk post type

    Agile Design Systems

    with meaningful code and automation

    Past
    • – Washington, DC

      Agile Alliance

    • – Denver, CO

      Agile Denver

    see all Talks & Workshops
  2. Views on Vue Podcast
    Podcast post type

    Design Systems & CSS

    We start by talking about design systems and design tooling – how they differ, and the problems they solve.

    see all Podcast posts

2018

  1. Generated art using CSS Grid inspired by Jared Tarbell
    Article post type

    Beyond Tellerand

    Grid Systems & Vue Invaders!

    I love when conferences give me the opportunity to travel around the world. I love it even more when conferences go beyond the web to find inspiration from other fields. Beyond Tellerand (Düsseldorf, Germany) was the best possible combination.

    see all Article posts
  2. Article post type

    VueConf US

    Agile design systems in Vue

    I’ve been excited about Vue.js since Sarah Drasner first showed me the basics. Since then, we’ve started using it for client work at OddBird, and I’m constantly impressed by the power and simplicity – so it was a real honor being invited to speak at the first VueConf US in…

    see all Article posts
  3. Sample organized color swatches with hex and hsl values
    Article post type

    Herman Style Guides

    An agile approach to design systems on a budget

    Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool to create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps keep our development flow simple, and our UX consistent…

    see all Article posts

2017

  1. the text color(kevin bacon) on a pink background
    Talk post type

    Code Patterns for Pattern Making

    Past
    • – Denver, CO

      Refresh Denver

    • – Denver, CO

      Front Range Front End

    see all Talks & Workshops
  2. Blueprint for NYC signage
    Article post type

    Code Patterns & Style Guides

    Living Style Guide documentation on the web is a difficult problem, gaining a lot of attention in the last few years. Let’s take an in-depth look at one way to store patterns directly in Sass, and generate documentation automatically.

    see all Article posts

2016

  1. see all Article posts
    Article post type

    Clarity Conference

    It was an honor to be part of the first ever Clarity Conference in San Francisco – a beautiful event organized by Jina, and completely focused on Style Guides.