Design system

FlatifyCSS is not a design system itself and it follows the Duolingo design system principles. It is a collection of design system components that can be used to build a web page.

1- No blurred shadows

2- Borders are cool

3- Round but not much

Shadows

There are no blurred shadows in FlatifyCSS. Instead, we have sharp and subtle shadows, it helps to have a clean and user-friendly interface.

Roundness

Elements are round — but not too much. It does not mean there is no element with circle corners at all, but elements tend to be round enough to be usable. We have rounded elements for buttons, cards, and other elements.

For example, an ordinary element like a button would have 1em for border-radius, and based on its portion roundness value can be less or more.

Color

"The world is a diverse and wonderful place. We want to reflect that in the people we see, and the colors we use — that's why we've developed a bright and beautiful palette."
You use defined palette of FlatifyCSS here.

Typography

As we prefer roundness for elements, the main typeface should be round as well to keep the rhyme. Read more about Typography here.