Shape

Shape tokens refer to the border radius of a visual element. Border radius is the amount of smoothness applied to the corners of a shape. The higher the value, the smoother the corners are. In addition to t-shirt-sized tokens, there are some utility tokens used for specific elements such as pill and circle.

Tokens

NameStyled-System ValueValuePreview
--hop-shape-circle
circle624.9375rem
--hop-shape-pill
pill1.5rem
--hop-shape-rounded-lg
rounded-lg1rem
--hop-shape-rounded-md
rounded-md0.5rem
--hop-shape-rounded-sm
rounded-sm0.25rem