Filter categories:
See More:
CompanySystem
repository
code depth
components
JS library/framework
typescript
web components
tests
linter
CSS
CSS in JS
design tokens
bundle manager
UI kit
brand guidelines
color palette
color naming
contrast analysis
typography
icons
space / grid
illustration
data visualization
animation
voice & tone
accessibility guidelines
design principles
documentation website
code documentation
storybook
distribution
PlaceholderPlaceholder

Placeholder

HTML/CSS

yes

no

no

no

no

hound scss lint

Sass

no

no

no

no

no

natural (e.g. red, light red)

no

no

no

no

no

no

no

no

no

  • npm
  • Bower

Placeholder

HTML/CSS/JS

yes

Vanilla

no

no

no

  • ESLint
  • StyleLint

Sass

no

no

Gulp

  • natural (e.g. red)
  • specific (e.g. success)

no

no

no

no

no

no

no

no

no

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme
  • Sinon

ESLint

Radium

yes

no

Webpack

no

no

natural (e.g. red_400)

no

no

no

no

no

no

no

no

no

  • npm
  • Yarn

Placeholder

HTML/CSS/JS

yes

Vanilla

no

no

Qunit

ESLint

Less

no

no

  • Webpack
  • Gulp

no

natural (e.g. teal)

no

no

no

no

  • npm
  • Bower

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Chai
  • Enzyme
  • Mocha
  • ESLint
  • StyleLint
  • Stylus
  • postStylus

no

no

  • Webpack
  • Gulp

no

no

  • natural (e.g. color red)
  • abstract (e.g. color oil)

no

no

no

no

no

no

no

  • npm
  • Lerna

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme

prettier

  • styled-components
  • stylis

yes

no

no

no

no

natural (e.g. red0)

no

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

  • ESLint
  • StyleLint

Sass

no

json

Webpack

no

natural (e.g. blue)

no

no

npm

Placeholder

HTML/CSS

yes

no

no

no

no

no

stlylus

no

no

Gulp

no

no

natural (e.g. green primary)

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

Jest

ESLint

postCSS

no

no

Webpack

no

no

  • natural (e.g. gold)
  • specific (e.g. success)

no

no

no

no

no

no

yes

  • npm
  • Yarn

Placeholder

no

visual only

no

no

no

no

no

no

no

no

no

no

no

hex, rgb, cmyk, pms only

no

no

no

no

no

no

Placeholder

HTML/CSS/JS

yes

jQuery

no

no

  • Mocha
  • Chai

no

Sass

no

no

Gulp

no

natural (e.g. yellow)

no

no

no

no

no

no

no

npm

Placeholder

no

CSS

yes

no

no

no

no

no

CSS

no

no

no

  • branded (e.g. trello blue 50)
  • natural

no

no

no

no

no

no

no

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme

ESLint

  • Glamorous

yes

Webpack

  • Sketch
  • UXPin

no

natural (e.g. red_10)

no

no

no

no

no

no

no

  • npm
  • Yarn

Placeholder

no

HTML/CSS/JS

yes

Jade

no

yes

no

no

CSS

no

no

no

no

no

natural (e.g. blue-900)

no

no

no

no

no

no

no

no

no

Placeholder

no

visual only

no

no

no

no

no

no

no

no

no

no

no

abstract (e.g. cloud)

no

no

no

no

no

no

no

no

no

no

Placeholder

HTML/CSS

yes

no

no

no

no

no

Sass

no

yaml

Webpack

no

no

natual (e.g. orange-dark)

no

no

no

no

no

no

no

no

  • npm
  • Lerna

Placeholder

HTML/CSS

yes

no

no

no

no

no

Sass

no

no

Grunt

no

  • natural (e.g. fill-red)
  • specific (e.g.fill-facebook)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

Vanilla

no

no

Jest

  • ESLint
  • StyleLint

postCSS

no

no

rollup

no

no

  • natural (e.g. gray darkest)
  • abstract (e.g. Primary)

no

no

no

no

no

no

no

no

npm

Placeholder

no

HTML/CSS

yes

no

no

no

no

no

CSS

no

no

no

no

no

natural (e.g. yellow)

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS

no

no

no

no

no

Sass

no

no

Gulp

no

no

specific (e.g. $button-colour)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

ESLint

Sass

no

no

Webpack

no

no

no

no

no

no

no

no

no

no

no

no

no

  • npm
  • Yarn

Placeholder

no

HTML/CSS

yes

no

no

no

no

no

CSS

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

Placeholder

HTML/CSS/JS

yes

React

no

no

Jest

  • ESLint
  • Sasslint
  • Sass
  • inuit

no

no

  • Webpack
  • Gulp

no

  • structured (e.g. accent-1)
  • specific (e.g. critical)
  • natural (e.g. gray)

no

no

no

npm

Placeholder

CSS

yes

no

no

no

no

no

Sass

no

no

no

no

no

no

no

no

no

no

no

no

no

  • npm
  • Bower

Placeholder

HTML/CSS/JS

yes

jQuery

no

no

Jasmine

jshint

Sass

no

no

Grunt

no

no

specific (e.g. $feature-copy)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme

ESLint

Fela

yes

no

no

no

no

abstract (e.g. grass)

no

no

no

no

no

no

no

no

no

no

  • Yarn
  • Lerna

Placeholder

Bitbucket

HTML/CSS/JS

yes

any

no

no

no

no

Sass

no

  • yaml
  • json
  • sass

no

no

  • natural (e.g. $mds-color-black)
  • abstract (e.g. $mds-color-neutral-20
  • specific (e.g. warning)

no

no

no

Markdown

no

  • npm
  • Bower

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Chai
  • Enzyme
  • Mocha
  • Sinon
  • ESLint
  • StyleLint

Sass

no

no

Webpack

  • natural (e.g. light blue)
  • abstract (e.g. jazzy orange)

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

Vanilla

no

yes

no

no

CSS

no

no

Gulp

no

no

branded and natural (e.g.NIBlueBrush)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

ESLint

Sass

no

no

Gulp

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

Jest

prettier

  • glamor
  • postCSS

yes

no

no

no

no

  • natural (e.g. psColorsWhite)
  • abstract (e.g. psColorsBone)

no

no

no

no

no

no

yes

  • npm
  • Lerna

Placeholder

HTML/CSS/JS

yes

  • jQuery
  • Vue

no

no

  • Chai
  • Karma
  • Sinon
  • Mocha
  • ESLint
  • cssLint
  • StyleLint
  • Sass
  • Less
  • postCSS

no

no

  • Webpack
  • Gulp

no

no

no

no

no

no

no

no

no

no

no

  • npm
  • Yarn

Placeholder

HTML/CSS/JS

yes

Vanilla

no

no

proprietary

ESLint

Sass

no

no

  • Webpack
  • Gulp

branded (e.g. audi black)

no

no

no

no

no

  • npm
  • Bower

Placeholder

HTML/CSS

yes

no

no

no

  • Mocha
  • Chai
  • Sinon

no

Sass

no

no

no

  • branded (e.g. brand blue)
  • specific (e.g. link color)

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme
  • Chai
  • Sinon
  • ESLint
  • StyleLint
  • Less
  • CSS Modules
  • postCSS

no

no

Webpack

no

no

hex only

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/TS

yes

React

yes

no

  • Jest
  • Enzyme
  • ESLint
  • TSLint
  • Stylelint
  • Sass
  • PostCSS

no

  • yaml
  • theo
  • Rollup
  • Webpack

no

  • abstract (e.g. sky)
  • natural (e.g. green)

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

no

Sass

no

no

Webpack

no

natural (e.g. color-blue-500

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

jQuery

no

no

no

  • jshint
  • scsslint
  • Sasslint

Sass

no

no

Grunt

no

natural (e.g. green-dark)

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/TS

yes

React

yes

no

  • Chai
  • Enzyme
  • Jest
  • Mocha
  • Sinon
  • ESLint
  • TSLint
  • CSS
  • Less
  • postCSS
  • styled-components

yes

no

Webpack

  • abstract (e.g. prom dress)
  • generic (T500)

no

no

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme
  • Mocha
  • Sinon

ESLint

Sass

no

  • yaml
  • theo

gulp

no

  • abstract (e.g. endeavour), natural (palette_gray_2)

no

no

npm

Placeholder

HTML/CSS/JS

yes

  • React
  • Vanilla

no

no

  • Karma
  • Mocha
  • Jest
  • Chai
  • Sinon
  • Enzyme

ESLint

Sass

no

no

Gulp

no

specific (e.g. text-01)

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

Polymer

no

yes

  • WCT
  • Mocha
  • Chai
  • Sinon

no

Sass

no

no

Gulp

no

  • specific (e.g. $status-red3, $primary-default, $gray8)

no

no

no

no

no

Bower

Placeholder

HTML/CSS/JS

yes

  • React
  • Angular
  • Vanilla

yes

no

  • Jest
  • Prettier
  • ESlint
  • Stylelint
  • Sass

no

yes

  • Webpack

no

natural (e.g. Red Medium)

no

no

no

  • npm

Placeholder

HTML/CSS/JS

yes

no

no

Jest

ESLint

sass

no

no

Webpack

no

no

natural

no

no

no

no

Markdown

no data

  • npm
  • Lerna

Placeholder

HTML/CSS/JS

yes

yes

no

no

no

no

  • Sass
  • Bourbon
  • Neat

no

no

  • Browserify
  • Webpack

natural (e.g. blue, gray, white)

no

no

no

no

no

no

npm

Placeholder

no

visual only

no

no

no

no

no

no

CSS

no

no

no

no

no

no

no

no

yes

no

no

no

Placeholder

HTML/CSS/JS

yes

jQuery

no

no

no

ESlint, Sasslint

Sass

no

no

Gulp

no

natural (e.g. blue primary)

no

no

no

Placeholder

HTML/CSS/JS

yes

  • React

yes

no

  • Jest
  • Enzyme

ESLint

Less

no

no

Webpack

no

abstract (e.g. Sunset Orange)

no

no

no

npm

Placeholder

private

HTML/CSS/JS

yes

React

no

no

yes

ESLint

Sass

no data

  • sass
  • json

no data

Sketch

no

  • natural (eg: $purple-lighten-10)
  • structured: ${base-color-name}-{darken/lighten}-{step}

no

Icon Font

no

no

no

no

no data

no

no data

Placeholder

HTML/CSS/JS

yes

React

no

no

jasmine

ESLint

Sass

no

no

Gulp

no

no

  • specific (e.g. error-1)
  • structure (e.g. accent-1)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

  • Vanilla
  • React

no

no

  • Pa11y CI
  • Karma
  • Sinon
  • Mocha

ESLint

Sass

no

no

webpack

no

no

  • natural (e.g. teal), abstract (e.g. sky)

no

no

no

no

no

no

no

npm

Placeholder

private

HTML/CSS

yes

no

no

no

no data

no data

Less

no

no

no data

Sketch

no

  • natural (e.g. orange-400)
  • abstract (e.g. powder-100)

no

no

no

no

no

no

no

no

npm

Placeholder

harmony

no data

no data

yes

no data

no data

no data

no data

no data

no data

no data

no data

no data

no data

  • natural (e.g. green 01)
  • branded (e.g. quickbooks green)

no

no

no

no

no

no

no data

Placeholder

HTML/CSS/JS

yes

  • React
  • Angular

no

no

  • Karma
  • Chai
  • Enzyme
  • Mocha
  • Sinon
  • ESLint
  • StyleLint
  • Sass
  • postCSS

no

no

Webpack

no

no

generig (e.g. color-1)

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS

yes

React

no

no

AVA

StyleLint

Sass

no

PostCSS

no

no

natural (e.g. gray-300)

no

no

no

no

no

no

no

no

no

Placeholder

no data

no data

yes

React

no

no

  • Jasmine
  • Enzyme
  • Visual Regression

ESLint

Sass

no data

  • json
  • theo

yes

Sketch

no data

abstract (e.g. calypso)

no data

no data

no data

no data

no data

Placeholder

HTML/CSS/JS

yes

React

no

yes

  • Jest
  • Enzyme

ESLint

Sass

no

yes

Webpack

Sketch

natural (e.g. red, light red)

no

no

no

no

  • yarn
  • npm

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Enzyme
  • Jest

ESLint

Sass

no

no

  • Webpack
  • Gulp

no data

no

Natural (e.g. $mintPrimary)

no

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS

yes

no

no

no

no

no

Sass

no

no

no

no

no

  • abstract (e.g. $color-developer)
  • natural (e.g. $color-silver)
  • specific (e.g. $color-success)

no

no

no

no

no

no

no

no

no

no

no

no data

Placeholder

HTML/CSS

yes

no

no

no

no data

StyleLint

Less

no

no

Gulp

no

no

natural (e.g. orange)

no

no

no

no

no

no

no

no

no

no

npm

Placeholder

GitHub

HTML/CSS/JS

yes

React

no

no

no data

no data

no data

no data

no data

no data

no data

no data

  • natural (e.g. Light Green)
  • abstract (e.g. stone)

no

no data

Icon Font

no

no

no

no

no data

no data

no data

Placeholder

GitHub

HTML/CSS/JS

yes

no data

no data

no data

no data

no data

no data

no data

no data

no data

no data

no data

specific (e.g. success color)

no

no

no

no data

no data

no data

Placeholder

GitHub

HTML/CSS

yes

no

no

no data

no data

no data

no data

no data

no data

no data

no data

no

natural (e.g. blue)

no

no

no

no

no data

no data

no data

no data

Placeholder

HTML/CSS

yes

no

no

no

no data

no data

Sass

no

no

no data

no data

no

abstract (e.g. event cyan)

no

no

no

no

no

no

no

no

no data

no data

no data

Placeholder

no data

HTML/CSS/JS

yes

React

no data

no data

no data

no data

Sass

no data

no data

no data

no data

no

  • branded (e.g. eurostar blue)
  • abstract (e.g. metallic gold)

no

no

no data

no

no

no

no

no data

no data

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

scsslint

Sass

no

no

Grunt

no

  • natural (e.g. c-cyan)
  • specific (e.g. c-inputgrey)

no

no

no

no

no

  • npm
  • bower
  • ruby gem

Placeholder

HTML/CSS/JS

yes

Angular

yes

no

  • Jasmine
  • Selenium
  • Karma
  • Mocha

TSLint

  • Sass
  • PostCSS

no

no

Webpack

no

natural (e.g. red)

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

no

Less

no

no

Webpack

no

  • natural (e.g. green-1)
  • specific (e.g. alertOrange)

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS/SWIFT

yes

React

yes

no

  • Jest
  • Sinon
  • Enzyme

TSLint

Sass

no

no

Webpack

Adobe XD

no

  • natural (e.g. yellow)
  • specific (e.g. themeDarkAlt)

no

no

no

no

no

no

no

npm

Placeholder

GitHub

HTML/CSS/JS

yes

React

no data

no data

no data

no data

no data

no data

no data

Webpack

no

no

  • branded (e.g. brand-primary)
  • natural e.g. gray-base

no

no

no

no

no

no data

yes

  • npm
  • yarn

Placeholder

no

HTML/CSS/JS

yes

Vue

no

no

no

no

  • Sass
  • postCSS

yes

no

  • Webpack
  • Gulp

no

natural pattern

no

no

no

no

no

no

no

no

no

npm

Placeholder

no data

HTML/CSS/JS/SWIFT

yes

React

no data

no

no data

no data

Sass

yes

Sass

no data

no data

  • Natural (e.g. $color-brand-orange)
  • Abstract (e.g. $color-identity-apple)

no

no

no

no

no

no

no

no data

no data

npm

Placeholder

HTML/CSS/JS

yes

React

yes

no

  • Jest
  • Cypress
  • ChromaticQA

ESLint

  • Emotion
  • Sass

no data

no data

no

no

Abstract (e.g. Peach)

no

no

no

no

no data

Placeholder

HTML/CSS/JS

Vue

no

no

  • Jest
  • Visual regression
  • Prettier
  • ESlint
  • Stylelint

Sass

no

Webpack

natural (e.g. green-500)

npm

Placeholder

no data

HTML/CSS/JS

yes

React

no data

no data

no data

no data

Sass

no

no data

no data

Sketch

  • Branded (e.q. Quickbooks Green)
  • Natural (e.g. Green 01)

no

no

no data

no data

no data

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Enzyme
  • Jest

Prettier

Less

no

no

Webpack

no

  • natural (e.g. blue)
  • abstract (e.g. cloud)

no

no

no

no

no

  • npm
  • Lerna

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Jest-styled-components
  • Enzyme
  • ESLint
  • StyleLint
  • styled-components
  • postCSS

yes

no data

Webpack

no

no

  • abstract (e.g. verdigis)
  • natural (e.g. grey–800)

no

no

no

no

no

no

no

no

Markdown

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Jest
  • Enzyme
  • ESLint
  • StyleLint

postCSS

no

no

Webpack

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

no

  • npm
  • Yarn

Placeholder

HTML/CSS/JS

yes

React

no

no

  • Chai
  • Karma
  • Sinon
  • Mocha
  • ESLint
  • StyleLint

CSS

no

no

Webpack

no

no

natural (e.g. dark_indigo)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

  • Vanilla
  • React
  • jQuery

no

no

  • Jest
  • Pa11y
  • Visual regression

no

Sass

no

no

no

semantic

no

no

no

no data

npm

Placeholder

HTML/CSS/JS

yes

Node

no

no

no

  • ESLint
  • StyleLint

Sass

no

json

Webpack

no

natural (e.g. blue)

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

yes

no

  • Jest
  • Enzyme
  • Chromatic

no

no

styled-components

json

  • Webpack

no

no

no

natural (e.g. blue)

no

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS

yes

React

no

no

no

  • ESLint
  • Prettier

Tachyons

no

json

semantic (e.g. $bg-action-primary)

no

no

no

no

no

no

no

  • NPM
  • VTEX IO

Placeholder

HTML/CSS/JS

yes

no

no

no

no

no

yes

no

no

no

no

no

no

no

no

no

no

no

no

Placeholder

HTML/CSS/JS

yes

React

yes

no

jest

TSLint

emotion

yes

no

Webpack

no

yes

no

no

no

no

no

npm

Placeholder

HTML/CSS

yes

no

no

no

no

sass-lint

Sass

no

no

no

yes

no

no

no

no

no

no

npm

Placeholder

GitHub

HTML/CSS/JS

yes

React

yes

no

Visual Regression

  • TSLint
  • Stylelint

Sass

no

json

yes

Sketch

no

yes

Natural

yes

yes

SVG

yes

no

no

no

no

no

yes

yes

yes

  • npm
  • Abstract

Placeholder

HTML/CSS/JS

yes

Angular

yes

no

Jasmine

TSLint

CSS

no

no

Webpack

yes

no

no

no

no

no

yes

no

yes

yes

no

npm

Placeholder

Private

HTML/CSS/JS

yes

  • React
  • Angular
  • Vue.js
  • Ember
  • Vanilla

yes

yes

  • Jest
  • Axe
  • Visual Regression
  • Proprietary
  • ESLint
  • Sass-lint
  • Prettier

Sass

no

  • CSS Custom Properties
  • JSON
  • Sass
  • Less
  • Stylus
  • JS
  • XML
  • Gulp
  • Stencil

specific (e.g. success color)

no

no

no

no

Placeholder

HTML/CSS/JS

yes

jQuery

no

yes

yes

yes

SASS

no

no

Gulp

Adobe XD / SVG

no

yes

no

no

no

no

no

no

npm

Placeholder

Private GitHub

HTML/CSS/JS

yes

no

yes

no

no

  • ESLint
  • Stylelint
  • Prettier

Sass

no

no yet

  • Webpack
  • Gulp

no

no

no

no

no yet

Placeholder

JS

yes

no

no

yes

no

no

no

yes

yes

Rollup

no

no

yes

  • specific (e.g. border)

yes

yes

SVG

yes

yes

no

no

no

yes

no

no

npm

Placeholder

Private

HTML/CSS/JS

yes

React

yes

no

  • Jest
  • Enzyme
  • Cypress
  • Cucumber
  • Axe
  • Percy
  • ESLint
  • StyleLint
  • Prettier
  • CSS
  • Sass

no

  • Style Dictionary
  • JSON
  • Sass
  • rollup
  • webpack

Sketch

  • Branded
  • Semantic
  • Specific

no

no

no

no

no

no

  • npm
  • Nexus

Placeholder

no data

yes

React

no data

no data

  • Jest
  • React Testing Library
  • Chromatic
  • Prettier
  • ESlint
  • Stylelint

Sass

no data

yes

no data

no data

no data

natural (e.g. neutral-500)

no data

no data

no data

no data

no data

no data

no data

yes

Placeholder

HTML/CSS/JS

yes

yes

no

no

yes

yes

yes

yes

yes

Webpack

Sketch

no data

natural

no

no

no

no

no

no

no

npm

Placeholder

HTML/CSS/JS/TS

yes

yes

yes

  • BackstopJS
  • aXe
  • Jest
  • Web Component Tester
  • TSLint
  • ESLint
  • Sass
  • PostCSS

no

no

  • Webpack
  • Gulp
  • abstract (e.g. default-color--200)
  • natural (e.g. green-100)
  • specific (e.g. BackgroundColor--dark-300)

no

no

no

Placeholder

HTML/CSS

yes

no

no

no

aXe (a11y)

  • ESLint
  • Stylelint

SASS

no

no

no

no

no

no

yes

no

yes

no

Placeholder

private

HTML/CSS/TS

yes

  • Vanilla
  • React

yes

not yet

Jest

ESLint

Vanilla

emotion

no

Webpack

no

not yet

natural

no

no

no

no

no

no

not yet

no

GitHub Packages

Placeholder

HTML/CSS/JS

yes

Angular

yes

no

  • Cypress
  • Jest
  • Stylelint
  • TSLint

Sass

no

no

Webpack

  • natural (e.g. violet)
  • abstract (e.g. ocean)
  • specific (e.g. error)

no

no

no

no

no

Placeholder

HTML/CSS/TS

yes

React

yes

no

  • Chromatic
  • Cypress
  • Jest
  • React Testing Library
  • aXe-core

ESLint

no

Emotion

  • yaml
  • theo

Rollup

specific (e.g. color-background-error)

no

no

Placeholder

no

HTML/CSS/JS

yes

React

yes

no

Jest

  • ESLint
  • Prettier

tailwindcss

no

yes (defined in tailwind.config)

Rollup

no

natural (e.g. blue-500)

no

no

no

no

no

WCAG 2.1 Level AA

no

no

yarn monorepo

Placeholder

HTML/CSS/JS/SWIFT/KOTLIN

yes

React

yes

no

  • jest
  • react-testing-library
  • puppeteer
  • eslint

no data

yes

yes

no data

yes

no data

no data

no

no

no

no

no

Placeholder

no

HTML/CSS/JS

yes

Blazor

yes

yes

no

no

style-components

no

yes

no data

yes

specific

yes

no

no

no

  • npm
  • nupkg
company
system

why adele?

Adele Goldberg. The Icon.

No. Adele – the Design Systems Repository, is not named after Adele – the singer. This is a tribute to one of the most important computer scientists focused on graphic user interfaces, design patterns and object-oriented programming – Adele Goldberg.

Adele Goldberg worked at XEROX PARC in the 70s and managed the System Concepts Laboratory where, together with Alan Kay and others, she developed Smalltalk-80 – an object-oriented, dynamically typed programming language that was meant to power the "human-computer symbiosis".

Needless to say, SmallTalk also pioneered many concepts important to all modern design systems. Objects in Smalltalk were easily transferable between applications and customizable. Smalltalk also served as the foundation of PARC's work on graphically based user interfaces (many GUI concepts have been developed by Adele Goldberg and her group!).

Thank you Adele!

do you need help with your system?

Evangelize Design System with a Free Template!

Slide Icon

40+ Slides ready for action. Perfect for team and stakeholder presentation. Available as a powerpoint and keynote deck.

Learn more & download

UXPin: Prototype and Manage Your Design System

Prototyping Icon

Join thousands of companies (including PayPal, Sapient and HBO) and optimize your design process with UXPin.

Start a free trial now!