Design System
With Business Platform Operations we felt a need to have an overarching Design System to span across the different enterprise UX projects. This would help us streamline and speed up our design and development process, while also create consistency throughout our suite of different products.
Our teams could use this as a foundation upon which they could build their own custom components and page to suite their specific needs. As a basis we took MUI as a framework an customised it to our look and feel.
Colours System
We started with our primary colours, these were expanded into hues of 10 step. These were then mapped on dark and light backgrounds. These we're the references upon which we could build the system
Reference Tokens
These are the colours defined at the deepest level and should never be used directly in an interface, but always referenced through a semantic token. This list is purely available for reference.
These are the colours defined at the deepest level and should never be used directly in an interface, but always referenced through a semantic token. This list is purely available for reference.
Applications / System
Roles
In order to create more consistency throughout our products, we have defined colours which should be used when referring to a specific operational role in a comparative context.
In order to create more consistency throughout our products, we have defined colours which should be used when referring to a specific operational role in a comparative context.
For instance, when comparing Arrival and Departure flights, it is important to apply these colours to help users consistently distinguish the colors from each other.
In situations when you are only referencing a single role it is also possible to use basic colours for graphics.
Icon approach
Our icon system is designed to match Schiphol brand icons while still providing enough functionality for use in operations. Icons should be clear, have enough contrast and work well in small instances and be beautiful. It’s important that they are simple while remaining understandable.
In the spirit of keeping things lean, the BPO Design System utilises a combination of both custom design icons and icon from Google Material UI. This approach gives us the flexibility of creating custom icons for Schiphol specific use cases while still having the flexibility and convenience of a large icon set.
Typography
The primary typeface used throughout Schiphol communication and branding is Frutiger Neue. During the development of all applications we strive to evoke Schiphol branding as much as possible, however for applications developed for Schiphol Operations we continually prioritise functionality above form & branding.
To provide more convenience and efficiency during the design and development process we have chosen to provide a secondary font, Inter.
As a rule of thumb we use Frutiger for large headings and Inter for content.
To provide more convenience and efficiency during the design and development process we have chosen to provide a secondary font, Inter.
As a rule of thumb we use Frutiger for large headings and Inter for content.
Layout
Used to define different levels of elevation within an interface, where Base is the lowest level in an interface and Elevation 3 the highest. Elevation levels should always be used consecutively.
Components
We've set up the base components upon new ones can be added. But also for product team to apply and build upon in their on products.
Documententation
For documentation we used Zeroheight. There we put our goals, approach and explanations. To be shared with the different teams, both designers and developers.
