Skip to main
Sample organized color swatches with hex and hsl values

Herman

Automated style guides

  • npm
  • Build Status

Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool that helps create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps you keep your development process simple – and your UX consistent – as you scale over time.

Chat about Herman »

Documentation should be the default option – the path of least resistance for developers. Herman combines documentation of design tokens and system guidelines, with code patterns, components, and rendered visual examples – all driven by Sass and CSS. By automating as much of the documentation as possible, you can help ensure that everything stays up-to-date for long-term maintainability.

Help improve communication across stakeholders, with consistency in UX, performance, and accessibility – while reducing technical debt and minimizing long-term maintenance. Herman is designed to grow with you, and keep everything in one place.

Herman’s Current Features

Document colors, icons, ratios, sizes, fonts, and components

Integrate with Accoutrement

Utilities

Various Sass utilities to help manage strings, maps, and lists. As more functions are added to the Sass core, we hope to be able to remove some or all of these over time.

Tokens

Custom syntax for managing design tokens and arbitrary patterns in a format that encourages maintenance and automation.

Ratios

Define and access ratios using the Accoutrement token syntax. Several common ratios are provided.

Animate

Manage timing, easing, transitions, and animations – with built-in shortcuts for common patterns.

Color

Manage your color palettes in one place, and access them from anywhere with optional accessibility guidance from the WCAG.

Layout

Layout utilities including named media-queries, breakpoint map management, and organized named z-index layers.

Scale

Manage a system of consistent sizes to use across your project for typography, spacing, layout, and more. Generate sizes based on modular-scale ratios, and access sizes in any unit you need.

Type

Manage your webfonts, import them all with a single command, and access font-stacks on-the-fly, with utilities for generated content and accessibility.

Upcoming Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for Outline GbROpen Collective Avatar for Mat MarquisOpen Collective Avatar for ScheppOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for Eric PortisOpen Collective Avatar for Thijs

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

Posts

  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. 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
  4. 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
  5. 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
  6. Style written on sketchbook page
    Article post type

    Generating Code Documentation for Polyglot Projects

    Code documentation is ideally written as close to the actual code as possible, but compiled into a comprehensive set of documentation that includes code from all languages in use. Here’s how we intend to do that.

    see all Article posts