OddBird’s Accoutrement tools (now merged into a single npm package) are designed around the idea that design systems 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.
By storing all our design tokens and patterns in Sass maps, we can improve both organization and automation – making our design systems meaningful to both developers and the Sass language.
# npm npm install accoutrement # yarn yarn add accoutrementGet started
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.