Style Props

Nulogy's components use styled-system to apply groups of style props to different types of components. These props correspond to their css equivalents and allow individual manipulation of a component's style.

Prop categories

spacemargin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py,
layoutwidth, height, minWidth, minHeight, maxWidth, maxHeight, display, verticalAlign, size
typographyfontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontStyle, textAlign
colourcolor, backgroundColor, bg
borderborder, borderWidth, borderStyle, borderColor, borderRadius, borderTop, borderRight, borderBottom, borderLeft, borderX, borderY,
positionposition, zIndex, top, right, bottom, left

For more information on each of these props, see the styled-system docs.


To see which props each component includes, see that component's documentation. But in general, the following rules apply:

  • Block-level components (Alerts, Buttons, Cards, etc.) have access to space props.
  • Text components (Text, Headings, Link) also have access to typography and colour props.
  • The Box component has access to layout props and can be used to add borders, colours, and boxShadows around anything.


Styled-system will check the theme and use that if a key matches, e.g setting a textColor to blue will display Nulogy's #216beb, instead of the html default. If a key can't be found, it will be processed as a CSS value.

The Nulogy Design System is maintained by the Design Ops team. Our mission is to help our teams build better interfaces faster. 🚀

Please reach out with any questions or requests.