Introducing Version 3.0.0 🚀 - Experience our new design with online documentation, the latest Figma features, and much more!
Foundations in a design system refer to the fundamental elements and guidelines that serve as the building blocks for the entire system. They provide a consistent and cohesive set of rules and principles that define the visual and functional aspects of a design.
The default font used by Core is Inter. To customize with your own font(s), follow this steps.
Change the main font face(s) and update the type specimen. It’s a great way to showcase typeface designs by presenting the constituent fonts, individual characters and glyphs in a particular theme or context. It’s also a great way to help you understand the purpose of the font. Useful plugin for replacing fonts: Quick Font Replace.
This is where you define your types of text styles. Basically how your headlines, body text, form label, textlinks looks like. It’s mostly defined by the font family and the font weight.
Define here your type scale based on your needs. If you don’t know how to start, you can use this useful Figma plugin called Typescales.
Congratulations! You have successfully established your typography.
Blue is defined as default primary color. Here is how you can customize and create your own color palette.
This is usually the color that a brand sets as their identity. Using brand colors as primary colors strengthens brand awareness. Use the Figma plugin Color Shades to create contrast levels inside your UI.
These are the colors that communicate purpose. They help users convey messages. For example, green has a positive connotation, red a negative connotation.
These include shades of grey, all the way from white to black. These are mostly used for text colors and form the majority of your UI.
This help page explains the purpose of each color, aiding designers and developers in quickly grasping their respective functions.
After defining your colors, use the Contrast plugin to identify AA or AAA valid color combinations. This is your initial step in creating an accessible UI.
Congratulations! You have successfully defined your color palette.
The basic set of icons is using the library Remix Icons. It's an open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.
We divided the icons in 3 main categories:
You can use the default icon set or choose another icon library from your choice.
Before adding your icons, please ensure that you have the correct default frame size. We have set the default size to 24x24px, which should fit well within your components. However, feel free to adapt it according to your specific requirements.
To make sure that your icons scales perfectly, use the Outline Stroke option (Object / Outline Stroke).
Congratulations! You have successfully established your icon library.
A grid system will help you to build designs, arrange information and make consistent user experiences. It’s the skeleton of design and help you create order and organize the content of your design.
We already defined and documented 3 grid styles:
Go to Grid Styles and edit each style. Change number of columns, gutters and margins.
Congratulations! You have successfully established your grid system.
All the measurments of Core are based on the 8pt based grid. These base units will help you keep the design consistent and improve communication between designers and developers. We chose an 8 unit because most screen sizes are divisible by 4 and 4 itself is also an easily divisible number.
All spacing values are stores inside Variables. Change values and names to fit your needs
Congratulations! You have successfully defined your spacing system.
