IntroducingA Design System for anything digital at Aarhus University
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
- 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.