Skip to main content

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.

No blurred shadows1- No blurred shadows
Borders are cool2- Borders are cool
Round but not much3- Round but not much


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


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.


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


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