Levels and Shapes
Use levels and shapes to facilitate understanding of how the interface and components work, as well as expressing and reinforcing the RD Station brand principles.
Rounding
You can apply 3 types of rounding to elements:
| Token | Value | Usage |
|---|---|---|
--border-radius-rounded | 2px | Standard rounding, used on components when needed. |
--border-radius-circle | 50% | Full rounding, used for elliptical formations, applied in specific cases. |
--border-radius-pill | 999px | Full round, used for circular formations, these elements need to be the same width and height. |
Elevation
They are evidenced by the use of shadows. Used to establish a visual hierarchy, create prominence and increase contrast between interface elements and regions.
| Token | Level | Usage |
|---|---|---|
| 1 | It is the lowest level of the interface. Use cases: texts, buttons, forms and images. | |
--shadow-xs | 2 | Where are the elements that are a little more prominent than the level 1 information. Use cases: navigation bars, raised cards, and state changes of elements that are already on the screen. |
--shadow-sm | 3 | Elements that appear after an interaction and must be related to level 1 or 2 triggers. Use cases: Dropdown, Popover and DatePickers. |
--shadow-md | 4 | One of the highest levels of elevation, with elements that need more prominence than lower ones. Ideal for elements that are not present on the screen initially, but need attention and focus. Use cases: Toast. |
--shadow-lg | 5 | It is the highest level of the interface, reserved for elements that need full prominence or even isolation from the rest of the information. Use cases: Drawer on light background. |
--shadow-xl | 6 | It should only be applied to elements that need to be highlighted on a dark background (overlay). Use cases: Modal, Dialog and Drawer on dark background. |
Z-index
The z-index play an important role in how components overlap and interact with each other.
| Token | Level | Usage |
|---|---|---|
--zindex-auto | Auto | Change z-index value to default position according to ordering in body |
--zindex-0 | 1 | Selected elements such as buttons, Select and Card |
--zindex-1 | 1000 | Dropdown and Popover |
--zindex-2 | 1010 | Tooltips and elements fixed to the top such as Navbar |
--zindex-3 | 1020 | Overlays for Drawer, Modal and Dialog |
--zindex-4 | 1030 | Drawer, Dialog and Modal |
--zindex-5 | 1040 | Overlays that need to stand above all elements |
--zindex-6 | 1050 | Toast |
--zindex-back | -1 | Send to back after interaction of some element that was above base. |