Minimalist DS foundation kit

<aside> 🧘 Hey! This is my set of files to start a new design system. I hope you enjoy using it.

The foundation kit consists of a Figma template file and a GitHub repository with some css and a html test page.
Feel free to download, change and make it yours!
If you have any comment or feedback send me an email. I'll be glad to hear from you! </aside>

<aside> 📐 Grid System

Minimalist DS foundation kit has a simple grid system with 4 breakpoints:
- Grid XS: 320px to 767px
- Grid SM: 768px to 1023px
- Grid MD: 1024px to 1439px
- Grid LG: 1440px and forward
Grid LG have two options:
- Fluid: with the container fully responsive
- Fixed: with the container with max-width of 1280px
  - To make a grid fixed in Figma you just need to change the #container frame horizontal resizing to fixed width.
When using one column for text, some breakpoints will display a very long line of text, which is very bad.
- There's a grid style in Figma ready to be used in these cases. Just change the #container frame grid to 720px max-width. </aside>

<aside> 📏 Sizes

Minimalist DS foundation kit has a simple size system using multiples of 4 and 8.
Size name in Figma match the css variables in the foundation.css file. </aside>

<aside> 🔤 Typography

Minimalist DS foundation kit uses Inter: an amazing and open source / free typeface.
- If you don’t know much about this incredible typeface, I recommend you to read more about it.
Inter typeface has several font-features and some of them are enabled in the font system:
- Open digits
- Disambiguation
- “r” curves next to rounded letters
If you need to have different text style for each breakpoint, use the text styles css class created for each breakpoint.
Line-height is using % in Figma and em in css.
font-size * line-height in all text styles results in an even number. This makes every element have an even box height.

even box height table

</aside>

<aside> 🎨 Color Palette

Minimalist DS foundation kit has a simple color palette.
If you want to keep things simple, try to change the Brand colors only.
- Using HSL in Figma, change the hue value for your brand's hue and later change saturation or lightness if needed.
- Don't forget to change the hex value of your new colors in foundation.css file. </aside>

<aside> ⏺️ Borders and animation

Minimalist DS foundation kit has a simple border radius system using multiples of 4 and 8.
Minimalist DS foundation kit has only only one animation token. You can create different one as you like it. </aside>

<aside> ⬇️ Download and enjoy!

</aside>