Sketchwind is an open source Sketch template, based on Tailwind philosophy. It contains the basics stones for building a design system, in a coherent and comprehensive way.
Most of the very simple bricks of a design system are isolated and regrouped, and can be combined to fit your needs.
The default values defined in the template are based on the default values of Tailwind. You can modify them or define new ones, at any time during your design process.
- Download the Sketchwind .zip file
- Install Inter fonts family (go to
assets/fonts) - Open the
Sketchwind Design system.sketchfile - You will find exhaustive documentation in the file itself.
If you or your dev colleagues will implement the designs with the help of Tailwind CSS, you can install the Sketchwind exporter plugin. It will help you generate a Tailwind configuration file in a single click. You can then give this file to your frontend developer, it will contain the following definitions:
- Colors
- Border radiuses
- Border widths
- Box shadows
- Opacities
- Spacings
- Breakpoints
- Font Families
- Font sizes and line heights
- Strokes for svg icons
Go to the Sketchwind exporter repository for more informations.