# Shape
NBUX components and elements can be displayed in a variety of different shapes.
Differentiation in shape can draw attention to specific elements and be an excellent way to express our brands subtly.
- We use different shapes for each brand to help unify the brand expression. For example:
- Jacamo is big and bold, hence using a sharper edge on more of the content.
- JD Williams has circular brand assets, so we try to incorporate this where possible.
Differentiation in shape can be used to draw attention to certain elements as well as being a good way to subtley express our brands.
# Border Radius
Border radius values should be either 0,2,4 or 8px.
Components can apply one of three styles to the shapes of their corners:
- Rounded corner
- Sharp corners
- Round
Many of our shapes have rounded edges unless sitting flush with the screen. We then tend to use sharp edges to help the content sit level.
There may be some instances where you require a larger border radius than 8px; for example, when designing buttons, the border radius can be 50% of the element's height.
Components with unique shapes tend to stand out and can be used to draw the user's attention, and these shapes help the user understand where actionable components are within the page and where to go to next, for example the use of rounded buttons over square. Overuse of these unique shapes can have a negative effect, something to bear in mind.
Border radius values should be either 2,4 or 8px. If you require a larger border radius than 8px then the border radius can be 50% of the element's height - i.e. creating a circle.
# Shape and elevation
Shape and elevation can be combined to define a brand's visual language.
Elevation is used to indicate hierarchy. We use elevation to give components a sense of depth, the more prominent the elevation, the more depth the shape has.
Consideration must be taken when deciding which elevation to use, think about the shape's size and the content of that shape before deciding which elevation to use.