ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated CheckboxCollapsible New Combobox New Command MenuDate PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Add ButtonFilter DateFilter Date RangeFilter DropdownFilter FieldFilter InputFilter Reset ButtonFooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

February, 2021

You’re reading the first ever Nord Design System monthly update. We’re just starting our design systems journey at Nordhealth and have created this documentation platform to support these efforts.

The aim of this platform is to serve as a hub for Nordhealth’s user interface design and frontend development work in the future. We’re pushing towards automating most parts of the documentation creation, but you should also expect to see manually crafted design guidelines, development tutorials, and similar here in the future.

To stay up to date with the latest releases and updates from our design systems team, you can follow the what’s new section that includes our current roadmap and any future updates we might release.

Currently, our main focus has been on brand refresh, exploring the overall visual direction, how the theming system works, and also creating the underlying technical architecture to support the work that follows.

Our draft style guide looks like this:

Provet style guideDiarium style guide

We’ve also started exploring components a little and how they could behave and look like. Here’s a concept on navigation that we’ve also tested on the documentation itself:

Navigation component concept

Last week, we also published the very first production ready design systems package, Nord Webfonts, which includes our UI typefaces and related tools to utilize them:

Nord Webfonts 1.0.1

  • Initial release of @nordhealth/fonts which includes Nordhealth Sans and Nordhealth Mono. For documentation and usage guidelines, please see Webfonts.
  • Makes @nordhealth/fonts package completely independent from @nordhealth/tokens.
  • Can now be used standalone without any other package from Nord.
  • Release date 11.2.2021.

We’ve also started drafting Nord Design Tokens which you can browse here. The early token views are shown below:

Provet Design TokensDiarium Design Tokens

If you liked this update, please consider subscribing to our RSS Feed to follow the latest updates from Nord team.

P.S. Our team is hiring, view open positions to apply.

Until the next time! — Ariel