Design System
UI Library
The central artefact for UI and frontend developers is the @tui/ui-library, which is an NPM module and can be installed as a build-time dependency into all relevant projects.
It is built on SCSS and provides a set of mixins and components which can be used by downstream projects to build microfrontends, static pages or other web artefacts. The UI library is documented in detail in our Storybook.
Static Assets
Static assets such as icons and fonts can be loaded directly from a central repository on a CDN. A list of available items is available from the file index.
This file is not only an overview, but we see it as the “interface” to the assets service. This means that once a file URL has been published, the file is not being modified in an incompatible way anymore; it just might receive small bug fixes. If a file is changed significantly, especially changing its dimensions, it becomes published under a new URL.
Larger revisions of the repository are published under a new version prefix (e.g. v1
, v2
etc.). While we only show the current version in the file index, older versions will stay online for at least one year after switching to the new version. This gives users enough time to switch to new versions.
Assets are cached on the CDN for 30 days. All develoment teams at TUI and our external contributors should only use these assets directly from the assets CDN instead of downloading them and putting them into their own repositories. This way, our customers will benefit from a hugely accelerated web experience as many static files will already be cached in their browsers. Otherwise, customers would download identical files from different URLs over and over again.
Sketch Libraries
The TUI Design System provides several Sketch libraries as a reference for UI designs:
Templates Library
For our static site generation approach, we are maintaining a shared library of templates. We are mainly using Nunjucks as a templating format, with Eleventy as the tool of choice to actually generate those pages. This repository is currently not yet public, access will be granted on request.