Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Already sold on patternplate and want to know how things work instead of why we built them? This way:

Create better Design Systems

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.

Principles

Come as you are

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.

Establish a Source of Truth

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.

Bring Order to Chaos

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.

Stay in touch with your work

Manipulate your design system directly.

Edit your components, tokens and documentation and see how patternplate updates your Design System without reloading.

Be as free as the web

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.

Real components. Period.

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.

Built to connect

We created patternplate to connect things and people that belong together. Reaching out and understanding each other often is the best way to improve.

  • The abstract and the concrete
  • Documentation and implementation
  • Principles and examples
  • Designers and engineers

A tool worthy of your best work

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.

Super-powered search system

A search that does both fuzzy search and structured search queries helps you to find what you are looking for quickly and reliably.

Theme patternplate your way

Configure all colors, fonts, logos and icons in patternplate to match your design requirements.

Real-time updates

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.

Give context with Markdown docs

Write documentation both for overarching principles and related directly to your components in the well-known Markdown format.

Stay flexible with labels

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.

Inline demos

Embed interactive component demos directly into your documentation to make your point and let the reader experience it with an example.

Isolated component workbench

Develop and test your components isolated from patternplate and other parts of your design system.

Your system, your technologies

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.

All open, zero lock-in

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.