All the available design options for creating interfaces in Nulogy's style can be accessed in Javascript via the theme.

"colors": {
"black": "#011e38",
"blackBlue": "#122b47",
"darkBlue": "#00438f",
"blue": "#216beb",
"lightBlue": "#e1ebfa",
"darkGrey": "#434d59",
"midGrey": "#6c7784",
"grey": "#c0c8d1",
"lightGrey": "#e4e7eb",
"whiteGrey": "#f0f2f5",
"white": "#ffffff",
"yellow": "#ffbb00",
"lightYellow": "#fcf5e3",
"green": "#008059",
"lightGreen": "#e9f7f2",
"red": "#cc1439",
"lightRed": "#fae6ea",
"categorical1": "#19c4e6",
"categorical2": "#8033cc",
"categorical3": "#e372d0",
"categorical4": "#55ddb0",
"categorical5": "#ee5513",
"categorical6": "#d3d322"
"fontSizes": {
"smaller": "12px",
"small": "14px",
"medium": "16px",
"large": "24px",
"larger": "30px",
"largest": "38px",
"heading1": "38px",
"heading2": "30px",
"heading3": "24px",
"heading4": "18px"
"lineHeights": {
"base": "1.5",
"smallTextBase": "1.71428571",
"smallTextCompressed": "1.14285714",
"smallerText": "1.33333333",
"heading1": "1.05",
"heading2": "1.33",
"heading3": "1.33",
"heading4": "1.33",
"title": "1.05",
"sectionTitle": "1.33",
"subsectionTitle": "1.33"
"fontWeights": {
"light": "300",
"normal": "400",
"medium": "500",
"bold": "600"
"space": {
"none": "0px",
"half": "4px",
"x1": "8px",
"x2": "16px",
"x3": "24px",
"x4": "32px",
"x5": "40px",
"x6": "48px",
"x8": "64px"
"sizes": {
"none": "0px",
"half": "4px",
"x1": "8px",
"x2": "16px",
"x3": "24px",
"x4": "32px",
"x5": "40px",
"x6": "48px",
"x8": "64px"
"fonts": {
"base": "'IBM Plex Sans', sans-serif",
"mono": "'IBM Plex Mono', monospace",
"sc": "'Noto Sans SC', sans-serif"
"borders": [],
"shadows": {
"small": "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
"medium": "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
"large": "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
"focus": "0px 0px 5px 0px rgba(33, 107, 235, .9)",
"error": "0px 0px 5px 0px rgba(204, 20, 57, .9)"
"radii": {
"small": "2px",
"medium": "4px",
"circle": "50%"
"breakpoints": {
"extraSmall": "0px",
"small": "768px",
"medium": "1024px",
"large": "1360px",
"extraLarge": "1920px"
"zIndices": {
"content": 100,
"tabsScollIndicator": 200,
"tabsBar": 210,
"overlay": 1000,
"aboveOverlay": 1010,
"tableHeader": 10,
"modalHeaderAndFooter": 2,
"openControl": 1000,
"navBar": 900,
"sidebar": 800


The theme can be accessed via our building block component props. E.g a Box's backgroundColor prop will map to the colours object in our theme. Similarly, a Text component's fontSizes property will map to the fontSizes object, etc.

Custom themes

As of version 3.0, themes can be overriden at the NDSProvider level. This allows changing all definitions of a property at once.

For example, if you were working in one of our legacy Operational Solution modules and wanted the "medium" font size used in all components to be 14px instead of 16px:

import { NDSProvider } from "@nulogy/components"
<NDSProvider theme={fontSizes: {medium: "14px"}}>
// app

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.