Layers [Design System]
Layers was built accessibility-first. Meaning we're building a design system that works for everyone.
All our components are accompanied by documentation, describing its intended use cases and limitations.
Layers features over 350 well-documented components, blocks, and example products.
Nearly every component in our Design System has Auto Layout support. Don't waste your time resizing.
Layers is responsive out of the box. No need to separately style your mobile components.
Easily swap out the color palette and text styles and adapt the design system to your needs.
Layers uses a set of well-defined colors, that have been thoroughly tested to optimize for legibility across the color blindness spectrum. The pallette consists of both functional colors, such as greens for success states and reds for critical errors, as well as interchangeable brand colors.
Colors can also be easily swapped out, to make the design system your own.
All of our elements are built on top of a 2pt grid. It forms the geometric foundation of everything we design at Layers. This means that our components easily snap together to build complex layouts.
This includes not just our components such as buttons and input fields, but also every increment in font size, line height, and even shadow values.
Adapting Layers to suit your brand and style is quick and easy. Change fonts and colors on the fly to whatever your project requires. Update the color and text styles, and your changes will echo throughout the entire design system.
Each component uses our pre-defined color and text styles, so that you can automatically change everything at a moment's notice.
Just about every component in the design system utilizes Auto-Layout. Leveraging the stellar automation features of Figma helps you save hours of time, and speeds up the pace of your product development.
Spend less time resizing components and working out the minute details, and more time focusing on the big picture.
Layers is built on two fantastic, open-sourced resources; Our typeface and iconography are both free to use however you please. Layers uses Inter by Rasmus Andersson for its typeface, which is freely available on Google Fonts.
Our icon library is courtesy of Feather icons, which likewise is entirely free to use.
stay up to date
Stay up-to-date with the latest changes and additions to Layers. The latest file will always be available in your Gumroad Library.
All of our files also come with an embedded changelog, so you can see exactly what changed and when.