The Design System Starter Kit is made for Figma, Sketch, and Xd (code version coming in HTML/CSS, Angular, React, and Vue). Built to save you weeks (or months) of design effort. this kit will set you up on the right foot to build the design system you’ve always needed but never had the time to make.

The perfect kickstart template for SaaS-focused digital products and brands. Accelerate any project by quickly and easily applying your styles to these atomic components and layouts. The templates are the core groundwork for a robust branded product experience to accelerate any company's deliverables and quality. Imagine instead of a checklist you have a design file primed with everything you need to get started. All you need to do is edit colors, fonts, and styles and you’re off. WEEKs of design work done for you. A great timesaver that is perfect for building client or in-house design systems from scratch.

So, you’ve got your style guide… or maybe you don’t even have that. Not to fear, the main differentiator with this kit is that the initial styles are all best practices (ADA accessibility @ AA/AAA) and are aligned above the atomic components, so you can easily add or tweak them as you go!

This is not a typical UI kit. Most pre-made component kits are often a pain to work with after a few changes and rarely fit your desired end state seamlessly. Why apply something that won’t scale with you? We take atomic design elements and apply best practices to them out of the gate. With 20+ atoms elements, 20+ molecule elements, 10+ Organism Elements, and 10+ Objects you’re instantly ahead of the game. Apply these elements with ease to the 30+ layout options (both web and mobile) using a scalable 4px grid system.

Want to be even further ahead? We’ve designed 25+ matching template samples in both web and mobile to speed up your process even further. These are all built with atomic components to maintain a uniform look and feel. Made with best practices for grid, category, detail, and all the contemporary SaaS products demand. Does marketing need a hand too? We’ve got you covered. System-styled email and social elements are ready to go.

TLDR? Here’s a list of the kit features:

• Styles layouts for Colors, Typography, Icons, Grid, Illustrations, and Photography

• Bonus 300+ Design System Icon set (replace with your own or material, font awesome, iconic, etc.)

• 60+ scalable atomic design components

• Best practice accessibility UI out of the gate (AA/AAA approved color contrast levels by ADA)

• 30+ Mobile and Web nav and layout options

• Bonus iOS and Android framing components (for presentations/mockups)

• 50+ Mobile and Web app template samples

• Template samples include matching dashboard, category, detail, calendar, kanban, to-do, file management, message, chat, news, article, e-commerce, notification, and settings UI layouts for both web and mobile.

• 6 responsive sample email templates

• Social element templates for Instagram, Facebook, Twitter, LinkedIn, and YouTube

• Bonus data set samples (people, locations, and objects) for your mockup needs - All with easily customizable symbols and styles

Want to kick the tires yourself? Check out a version here (view only) - https://www.figma.com/file/gn3v9GSiVh0E3UCZUJXYWK/Design_System_Starter_Kit?node-id=0%3A1

System Assets Used (customize or replace to suit your needs)

Fonts

• Poppins - https://fonts.google.com/specimen/Poppins

• Work Sans - https://fonts.google.com/betterspecimen/Work+Sans

Avatars

• Memoji Free - https://uifreebies.net/ui-kits/avatars-memoji-free

Illustrations

• unDraw - https://undraw.co/illustrations

Photography

• Unsplash - https://unsplash.com/