Styled system prop names
m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, width, fontSize, color, bg, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, ratio, verticalAlign, alignItems, justifyContent, flexWrap, flexDirection, flex, alignContent, justifyItems, justifySelf, alignSelf, order, flexBasis, gridGap, gridRowGap, gridColumnGap, gridColumn, gridRow, gridArea, gridAutoFlow, gridAutoRows, gridAutoColumns, gridTemplateRows, gridTemplateColumns, gridTemplateAreas, background, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, borderRadius, borderColor, border, borderTop, borderRight, borderBottom, borderLeft, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left

The Box is an element, which can be modified by yourself as you need. It is like a "div" on steroids.


I am a box.
<Box bg="cta" color="white" maxWidth="50%" p="20px">I am a box.</Box>