OddBird

Open Source

Sass Accoutrement

Manage design tokens & systems in Sass

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.


‘npm package’ ‘build status’

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 accoutrement
Get started

Accoutrement Modules

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.


Ask us anything.

We’re happy to answer your questions, big or small. If we’re a good fit for your custom web project, we’ll offer a free in-depth assessment!

Schedule a call with Miriam