Sass design-systems management and utilities.

Usage no npm install needed!

<script type="module">
  import accoutrement from '';


Sass Accoutrement

Build Status

Robust design systems require meaningful, readable, reusable code. These Sass utilities are designed to help define and manage your design tokens (colors, fonts, sizes, etc.) in a format that can be understood by both humans and parsers -- opening the door for automation, while improving consistency and readability. These tools also integrate with Herman, our automated living pattern-library generator built on SassDoc.

Brought to you by OddBird -- the creators of Susy, True, and Herman.


Install the package with npm or yarn

npm install accoutrement [--save-dev]
yarn add accoutrement [--dev]

Import what you need:

// core and all plugins (also available with `/index`)
@import "<path-to>/accoutrement/sass/tools";

// init normalization
@import "<path-to>/accoutrement/sass/init";

// individual plugins (core is required)
@import "<path-to>/accoutrement/sass/core";
@import "<path-to>/accoutrement/sass/plugin/<name>";

If you're using Eyeglass, you can import the default "tools" (core + plugins) using only:

@import "accoutrement";


The accoutrement tools are built around a shared data-storage syntax using Sass "map" objects:

$map: (
  "root": 16px,
  "gutter": 1em,

Using a custom syntax, we can extend maps to handle internal reference, and functional adjustments -- capturing meaningful relationships between design tokens:

$map: (
  "root": 16px,
  // internal reference & adjustments
  "gutter": "#root"
      "_major-third": 1,
      "convert-units": "rem",

Map storage serves a larger purpose:

  • Related data is grouped explicitly, making the code more readable and maintainable
  • The "single source of truth" encourages reusable design patterns
  • Meaningful structure allows automation, from automated style guides to automated functionality (provided in the plugins)


The Core module provides the generic (non data-specific) setup and syntax parsing:


We provide light-weight browser-normalization, as a distinct include. This is not part of the accoutrement/sass/tools package because it is the only module to produce direct CSS output.


While the core module handles generic data-management, we also provide plugins for a few common data types:

  • Animate -- Tools for managing CSS transitions and animations
  • Color -- Tools for managing CSS colors and contrast-ratios
  • Scale -- Tools for managing CSS sizes: typographic scales, spacing, etc.
  • Type -- Tools for managing webfonts, generated content, and other text needs