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

Core

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

Init

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.


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