thoughtbot design system
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add tooling to release packages Mar 9, 2018
.github Add contributing instructions describing alpha releases Mar 2, 2018
bin Fix typo May 11, 2018
documentation Fix gulpfile quotes to double-quotes May 4, 2018
packages Add Stylelint Sep 14, 2018
.gitignore Include @thoughtbot/tbds styles Apr 6, 2018
.stylelintignore Stylelint: Check if classes start with `tbds-` Sep 14, 2018
.stylelintrc.json Stylelint: Check if classes start with `tbds-` Sep 14, 2018
.tool-versions Update nodejs to 8.12.0 Sep 14, 2018 Update copyright year to 2018 Mar 9, 2018 Fixes typo Aug 9, 2018
lerna.json Add tooling to release packages Mar 9, 2018
netlify.toml Add full path for dist Netlify deploy folder. Apr 6, 2018
package.json Stylelint: Check if classes start with `tbds-` Sep 14, 2018

thoughtbot design system (tbds)

thoughtbot design system for thoughtbot websites.

Developer Setup


View Documentation Site Locally

cd documentation
npm run server

Documenting a component

Each component may have its own documentation that gets pulled into the documentation site. To create documentation:

  1. In the component's folder, create a documentation folder.
  2. Inside of that, create a Markdown file of the same name as the pattern, taking care to not name it
  3. Provide a front-matter entry for title.
  4. Provide a front-matter entry for type: "component".
  5. Inside that file, describe the component.
  6. Create HTML examples by placing HTML files in a sub-folder, taking care to not name them index.html.
  7. Provide a front-matter entry for type: "example".
  8. Render the examples by using the example Hugo shortcode. When providing the fileName argumenet, take care to include the subfolder and omit the file extension for the HTML sample.

Here is an example documentation file for a fictional pattern known as tbds-thingy:


title: "tbds Thingy"

Here's a Thingy. Check out this basic example:

{{< example fileName="examples/basic.html" >}}

And now check out this modified example:

{{< example fileName="examples/modified.html" >}}

And the corresponding HTML sample for the basic example:


type: "example"

<div class="tbds-thingy">
  This thingy pattern is great, 'amirite?

The fileName argument references an HTML file example in the same folder.


Bump the package versions manually, then run:

npm run release

Installation for Ruby on Rails

tbds is available through npm and requires Rails 5.1+. Yarn is used to support Heroku deployment.

  1. Make sure you have the Yarn package manager installed:

  2. Install the tbds package and save it as a dependency:

    yarn add @thoughtbot/tbds-button@0.0.2
  3. Import the component in your Sass manifest:

    @import "@thoughtbot/tbds-button/index";

    You can now use the tbds-button class to style buttons.

Deploy Ruby on Rails app with tbds to Heroku

  1. Add webpacker to your Gemfile and install:

    gem "webpacker", require: false
    bundle install
  2. Add the Node.js Buildpack to your Heroku app.


thoughtbot/design-system is Copyright (c) 2018 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.



thoughtbot/design-system is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.