The
design system is called
| code depth | HTML/CSS/JS/TS | |
| components | ||
| JS library/framework | Patternfly | |
| typescript | ||
| web components | ||
| tests | BackstopJS, aXe, Jest, Web Component Tester | |
| linter | TSLint, ESLint | |
| CSS | Sass, PostCSS | |
| CSS in JS | ||
| design tokens | ||
| bundle manager | Webpack, Gulp | |
| distribution | Go to distribution |
| UI kit | Sketch | |
| brand guidelines | Go to brand guidelines | |
| color palette | Go to color palette | |
| color naming | abstract (e.g. default-color--200), natural (e.g. green-100), specific (e.g. BackgroundColor--dark-300) | |
| contrast analysis | Go to contrast analysis | |
| typography | Go to typography | |
| icons | Font Awesome Free | |
| space / grid | Go to space / grid | |
| illustration | ||
| data visualization | Go to data visualization | |
| animation | ||
| voice & tone | Go to voice & tone |
| accessibility guidelines | Go to accessibility guidelines | |
| design principles | Go to design principles | |
| documentation website | Go to documentation website | |
| code documentation | Go to code documentation | |
| storybook |
40+ Slides ready for action. Perfect for team and stakeholder presentation. Available as a powerpoint and keynote deck.
Learn more & download
Join thousands of companies (including PayPal, Sapient and HBO) and optimize your design process with UXPin.
Start a free trial now!