LibRext — Shapes

Back to Specimens

As for shapes, LibRext deals only with boxes. There are several options available for border radius, box shadow, widget heights, and card styles

Border Radius — A larger radius fits with larger boxes

Box Shadow — Larger sizes imply more distance between box layer and parent layer

Widget Heights — Presets for common/consistent UX elements. Like inputs, buttons, chips, etc.


Border Radii

The system has six border radius styles:

none
0
xs
2px
sm
4px
md
6px
lg
8px
xl
10px

Box Shadows

The system has five box shadow styles available:

xs
1px 1px 2px #24292f
sm
2px 2px 2px #24292f
md
3px 3px 3px #24292f
lg
4px 4px 4px #24292f
xl
5px 5px 4px #24292f

Widgets & Inputs

The system has five available widget heights:

xs1.6875rem
sm2.04125rem
md2.75rem
lg4rem
xl5.25rem