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.

Under construction This is a demo site of work in progress

Still in its early days, these pages demonstrate the current level of progress in developing the Delphinus Design System. A lot of stuff, like tables and responsive behavior for navigation, is still questionable at best.

Also, 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.