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.
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.
Manage timing, easing, transitions and animations — with built-in shortcuts for common patterns.
Manage your color palettes in one place, and access them from anywhere with optional accessibility guidance from the WCAG.
Layout utilities including named media-queries, shorthand positioning, fluid aspect-ratios, box-sizing, and float-clearing.
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.
Manage your webfonts, import them all with a single command, and access font-stacks on-the-fly, with utilities for generated content and accessibility.