Already sold on patternplate and want to know how things work instead of why we built them? This way:
At SinnerSchrader we build and maintain massive design systems for our clients every day.
Because we wanted to use a tool that can cater to a very wide range of different projects and helps our designers and engineers to connect, we set to build our own.
Our experience with creating beautiful, useful, industry-grade design systems is gathered in patternplate.
We think you might find it just as useful as we do.
Not a CLI, not an app. Both.
Work in the environment you are comfortable with and expend your time for great design and engineering work instead of struggling with tools made for other disciplines.
Your work is so much more than its parts.
Meld code and documentation into something more valuable – a real source of truth that is always up to date by design.
Make sense of your design universe with meta data.
Describe your tokens and components with a fixed schema to help everyone to understand, use and remix your work.
Manipulate your design system directly.
Edit your components, tokens and documentation and see how patternplate updates your Design System without reloading.
HTML, CSS and JavaScript – that's all it takes.
We supports component-specific stacks, so you don't have to commit to a single technology. Wan't to integrate a Vue component in a React Design Sytem? Thats perfectly possible with patternplate.
Show and tell with code instead of faking it.
patternplate uses real-world, production-level code components for demos and examples.
This saves you from wasting time polishing components that never see the light of day and makes the relation between Design System and product transparent.
We created patternplate to connect things and people that belong together. Reaching out and understanding each other often is the best way to improve.
patternplate builds on our experience with massive, production-grade component libraries worked on by dozens of designers and engineers to build products that serve millions of users every day.
Their diverse needs went into the design of the feature set of patternplate – we like to think that after years of refining, we hit a sweet spot between expert-level tool and approachability.
A search that does both fuzzy search and structured search queries helps you to find what you are looking for quickly and reliably.
Configure all colors, fonts, logos and icons in patternplate to match your design requirements.
You'll never have to reload your browser – just edit files in your text editor and save, everything in your design system will update automatically.
Write documentation both for overarching principles and related directly to your components in the well-known Markdown format.
Instead of pressing components and documentation into an inflexible hierarchy of directories, patternplate provides a labeling system – combined with virtual folders based on our search engine you can create lists and item trees for every conceivable use case very quickly.
Embed interactive component demos directly into your documentation to make your point and let the reader experience it with an example.
Develop and test your components isolated from patternplate and other parts of your design system.
If it works on the web, it works with patternplate. By fundamentally using just HTML, CSS and JavaScript, we can accept any input that may be rendered or built into the common web technologies.
This includes popular rendering libraries like React, Angular and Vue.js, transpilers likes Babel or TypeScript and preprocessors like SASS, PostCSS or less.js.
You can even mix your tools and decide to use different technologies for different components in the same design system.
patternplate is built with open source and standard technologies from the ground up. Leveraging the Node.js ecosystem and web standards it ensures you always can take full control if you need to.
Licensed under the MIT license, nothing bars you from forking and adapting patternplate to your needs.