Quokka is a small, flexible, customizable Sketch design kit based on Google's Material Design Spec. It is intended for web projects, but can absolutely be used for other UI.
Unlike many larger design kits, Quokka is entirely self-contained. You don't need any linked/imported libraries or plugins for it to work properly. For designers that like to keep their system simple and in one place, this is a great starting point.
-
🎨Fill Styles: A set of theme colors (primary, secondary, accent), state colors (success, info, danger, warn), solid, and transparent. Easily override the defaults to change the look of your app.
-
▢ Border Styles: Similar to Fill Styles, except it allows you to apply various borders of different weights to shapes.
-
🛫 Elevation Styles: Easily apply, modify, and create new depth properties across your project.
-
⌨️ Text Styles: Comes with two text styles that match the material type system. Easily add more styles and modify existing ones.
-
📐Layout: Save yourself the headache of setting up a layout for each breakpoints. Provides a responsive column-based grid, complete with fluid layouts and containers.
-
🧰 Toolbox: A set of utilities that you can insert into your projects to make life easier. Features Shapes, Icons (Material & FontAwesome) and avatars.
-
🔁 Components: Build your own component library with a head start. Comes out-of-the-box with buttons, forms, and alerts. All symbols are responsive, tested, and easy to modify.
You'll need to be able to use Google Fonts on your desktop. Recommended: Download SkyFonts. Go to accounts > Browse Google Fonts, and add "Roboto" and "Poppins" to your library.
- Download the Sketch File
- Copy its contents into your project, or use it as a global library.
- Browse available symbols, text, and layer styles and use/customize however you'd like.
If you're familiar with symbols, layer styles, and text styles in Sketch, these patterns should look familiar. Each page comes with some documentation that explains each section and how to use them.
Feel free to use in any personal or commercial projects and in any capacity. If you have questions, a suggestion or spot any issues, submit a PR or create an issue and we'll figure out a solution.