Theme

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 0px 3px 0px rgba(1, 30, 56, 0.2)",
"medium": "0px 1px 4px 0px rgba(1, 30, 56, 0.15)",
"large": "0px 3px 5px 0px rgba(1, 30, 56, 0.1)",
"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
}
}

Usage

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
</NDSProvider>

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.