Get familier with Orca


Orca is a Utility first CSS component library which also comes with all the basic components which is required to build an awesome website.


How to use

You can either copy and paste the whole component and you can also use utility classe for ease and flexiblity while building your project.


Available Utility classes

Orca UI has different utility classes.


Root sizes

By default Orca uses 62.5% magic number, what it means is Orca is built with the size system is 10px = 1rem for ease of calculation. You can remove this by setting root font size to 100% in your project.


Size system

Orca design system follows the Rule of 8 which means the set sizes are all 8px apart. These are written in form of variables which can be accessed anywhere in the code by using var(--s6)

sizes in design system

Margin Utility

sizes in design system

Fonts Utility

sizes in design system

You can explore more by visiting here.