🚀 Go to website | ⚛️ React docs | 🌿 Twig docs
The ILO Design System provides tools and components for building accessible websites that implement the visual identity of the International Labour Organization.
It comes in two flavors:
Our Twig Component Library ships production-ready component templates for Drupal. The fastest way to adopt it is via the ILO Base Theme, which bundles the components as Drupal patterns.
If you prefer to build a bespoke Drupal theme, you can still consume the package directly — import the Twig templates you need and wire them into your custom modules.
Quick links:
Our React Component Library provides accessible building blocks for dynamic websites. Install @ilo-org/react (which already depends on @ilo-org/styles) to get the components you need for any framework — Next.js, React Router, Remix, or even a simple Vite app.
Quick links:
You can install each library directly from npm:
npm i @ilo-org/twignpm i @ilo-org/reactThese two packages already include most of the assets you'll need in production. You do not have to — and in most cases shouldn't — install the following Design System dependencies separately.
@ilo-org/styles@ilo-org/fonts@ilo-org/icons(or other icon-related packages)
However, if you need to use logos, you will need to install @ilo-org/brand-assets which provides a selection of approved brand assets in multiple languages.
In addition to the two component libraries mentioned above, this monorepo includes packages that provide the styles, assets, and utilities both libraries need to operate. Again, because the component libraries already include everything (except logos) you need to start a new project, you generally shouldn't install these packages individually. Only installing @ilo-org/react or @ilo-org/twig should give you everything you need.
The one exception is the @ilo-org/brand-assets package which includes assets like logos that don't come bundled in with the main design system packages.
| Package | Description | Current version |
|---|---|---|
| @ilo-org/brand-assets | Logos and image files |  |
| @ilo-org/fonts | Official fonts |  |
| @ilo-org/icon-build-helpers | Module used internally to generate icons |  |
| @ilo-org/icons | Icon files |  |
| @ilo-org/icons-react | Icon components |  |
| @ilo-org/react | React component library |  |
| @ilo-org/styles | Stylesheets for components |  |
| @ilo-org/twig | Twig component library |  |
| @ilo-org/maestro | Storybook helpers for Twig |  |
The following packages have been deprecated and should no longer be used in new projects.
| Package | Last version | Notes |
|---|---|---|
| @ilo-org/themes |  |
We are moving all theming to CSS custom properties defined in @ilo-org/styles, making design tokens available via a standard naming convention so teams can override defaults easily as theming becomes a core feature of upcoming releases. |
| @ilo-org/utils |  |
Initially intended for sharing logic between Twig and React packages, but it no longer provided enough unique functionality to justify a standalone package. |
JavaScript/TypeScript projects undertaken for the ILO should use these configurations to stay consistent with ILO code standards.
| Package | Description | Current version |
|---|---|---|
| @ilo-org/eslint-config | Config for linting with ESLint |  |
| @ilo-org/prettier-config | Config for formatting with Prettier |  |
| @ilo-org/typescript-config | Config for type checking with TypeScript |  |
Feel free to create an issue in this repository for all bugs, questions and feature requests.
ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review our Contribution Guidelines.
Licensed under the Apache 2.0.