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

Accoutrement Modules

OddBird’s Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving readability. These tools integrate with Herman, our automated pattern-library generator.

Init

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

Color

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

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.

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.

Layout

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


Partner with OddBird on Your Next Project

Interested in a chat with Miriam to find out more? Ask us anything; we’re happy to answer your questions, big or small. If your business is a good fit, we’ll offer a free in-depth project assessment!

Schedule a call with Miriam