IntroducingA Design System for anything digital at Aarhus University

The Delphinus Design System is an ongoing project for ensuring a more consistent, more accessible, and generally superb user experience across digital platforms at Aarhus University.

Have a look around. Enjoy!

Made with love and math, Sass and Pug.

This is a demo site

The picker at the bottom right corner for the screen is for demo purposes only. Never ever use it on your production site!

A few highlights

  • Baked-in consistency, e.g. maximum widths directly on p-tags, headers etc. ensuring legibility by preventing lines from ever becoming too long.
  • Automatic control and adjustment for contrast-ratio between text color and background in order to adhere to accessibility standards.
  • Two different line-heights. One for body text and paragraphs and one, more compressed, for stuff that is generally single line, like headers and labels. This ensures a visually coherent design especially on mobile where these tend to wrap onto more than one line.
  • Font-sizes and spacings are all set using css-variables, making it easy to change scales across screen sizes.
  • Font-sizes and spacing varies along a modular-scale to ensure a harmonious relationship between each size.
  • Colors are also set using css-variables that are part of a theming class, making it easy to completly change the colors of the entire page or a single element. No more adding specific hex-codes in css-properties.
  • Modular, reusable components.
  • Almost everywhere within the system sizes are set using rem-units. The absence of pixel-units makes it possible to zoom endlessly or change the browser font-size, without breaking the design in any way.
  • Where sizes need to be set proportionally to the font-size, em-units are used. E.g. maximum line-widths or the size of a text-shadow.
  • To avoid sub-pixel rendering and anti-aliasing effects on stuff we want to be absolutely sharp px-units are, however, used. This goes for e.g. horizontal and vertical borders.

A little history

The Delphinus Design System was originally designed and developed by UX designer Claus Stadel, who worked at Aarhus University's IT Departement from 2018 to 2023. Here's a little trip down memory lane.

Important dates and versions

  • September 10, 2018: Work on Delphinus began with this codepen.
  • Februray 27, 2019: The first version of Delphinus (0.1.1) was released on npm by Frontend Developer Thomas Riis Hansen.
  • November 11, 2021: We finally began keeping a changelog when releasing new versions of Delphinus.
  • January 7, 2022: The first batch of Delphinus merchandise was ordered.
  • March 16, 2022: First build of json-files to keep our new Delphinus Figma Library in sync with the Delphinus codebase using the Tokens Studio Figma-plugin.
  • January 11, 2023: Version 0.34 was launched. The biggest update ever with many new components and some fundamental changes, with the addition of a 5th fontsize in Delphinus.
  • July 20, 2023: Version 1.0 was released with a big update of the internal workings of the Delphinus source code. With this update, build by Frontend Developer Jonatan Fuglsang Schwennesen, we moved away from our pretty outdated Grunt and Webpack based build setup and went on to simply using Node for buliding and running Delphinus.
  • July 31, 2023: The Delphinus website was moved to running on Azure Webservices.
  • August 23, 2023: Version 1.0 release party held at Aarhus University, with some Delphinus inspired cake.
  • August 25, 2023: Claus Stadel left Aarhus University after five years and passed on Delphinus to other AU employees, with the addition of this little history section as his final work on the Delphinus Design System.