IntroducingA Design System for anything digital at Aarhus University

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.