Update Oct 2023

Version 3.1.0 - New variables, more colors, new pages. Check our latest updates!

Foundations

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.

Woman with laptop and setting design fundations like colors and typography

Table of contents

Typography

The default font used by Core is Inter. To customize with your own font(s), follow this steps.

1
Base font

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.

2
Text Styles

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.

3
Type scale

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.

DONE

Congratulations! You have successfully established your typography.

Type specimen of the font family Inter
Type specimen
Figma text styles example
Figma's text styles

Colors

Blue is defined as default primary color. Here is how you can customize and create your own color palette.

1
Primary color & shades

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.

2
Define signal colors

These are the colors that communicate purpose. They help users convey messages. For example, green has a positive connotation, red a negative connotation.

3
Define greys

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.

4
Color usage

This help page explains the purpose of each color, aiding designers and developers in quickly grasping their respective functions.

5
Color contrast check (AA and AAA validation)

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.

DONE

Congratulations! You have successfully defined your color palette.

Figma example of variables with a list of color names and values
Figma's color variables
List of color with a short description of their usage
color usage

Icons

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.

1
Use default icon library OR use your own

You can use the default icon set or choose another icon library from your choice.

2
Add icons and choose default format size

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.

3
Scaling icons

To make sure that your icons scales perfectly, use the Outline Stroke option (Object / Outline Stroke).

DONE

Congratulations! You have successfully established your icon library.

Samples of icons from the Remix Icons library
Icon library Remix Icons

Grid system

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.

1
Default Grid Styles

We already defined and documented 3 grid styles:

  • Mobile
  • Tablet
  • Desktop
2
Edit Grid Styles

Go to Grid Styles and edit each style. Change number of columns, gutters and margins.

DONE

Congratulations! You have successfully established your grid system.

Example of a 6 column grid
Figma's layout grid styles

Spacing 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.

1
Edit Variables

All spacing values are stores inside Variables. Change values and names to fit your needs

DONE

Congratulations! You have successfully defined your spacing system.

List of variables with names and values of spaces
Spacing variables