OddBird stands with the Black community in demanding change. Make a donation, and OddBird will match it.


An OddBird Project

Herman: Automated Style Guides

Get your design & development teams on the same page

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 iterate on patterns and scale over time.

Start using Herman or hire us for design systems training.

Give Your Design System a Home

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

  • Supports all SassDoc annotations and configuration settings
  • Integrated with Sass/CSS for better automation
  • Visualize design tokens like fonts, colors, sizes, ratios, and icons
  • Display Sass mixins and Nunjucks macros with expected input and rendered examples
  • Include additional prose, pages, and links to third-party docs
  • Encourage self-documenting patterns, without locking yourself in
  • Optionally integrate with OddBird’s Sass Accoutrement libraries


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


Lightweight browser normalization. This is the only Accoutrement library with direct CSS output when imported.

Plugin: Animate

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

Plugin: Color

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

Plugin: Layout

Layout utilities including named media-queries, shorthand positioning, fluid aspect-ratios, box-sizing, and float-clearing.

Plugin: 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.

Plugin: 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.

We’re here for you

Ask us anything. We want to answer your questions, and get to know you – your needs, goals, and expertise – so we can provide thoughtful advice, and help guide you to a successful launch of your web project.

Schedule a call with Miriam