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.
  • No custom styling of :focus. Adhering to the browser or platform style convention ensure recognizable focus-highlighting for keyboard-users.
  • 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.