Details

Design system

Last updated: 10 Dec 2018
The DK design system is based on Google Material Design, gov.uk, Nielsen Norman Group and other thought leaders in accessibility. Design decisions are based on visual design best practices and the aesthetic follows brutalist design methodologies.

Colours

Colour theory is taken from Google Material Design and emphasis shades of grey by decreasing black opacity.

Primary

Yellow #FFCC00
(opacity 1)

Secondary

Black #000000
(opacity .87)

Grey

Black #000000
(opacity .6)

Grey disabled

Black #000000
(opacity .3)

Grey background

Black #000000
(opacity .06)

Yellow accent

Yellow #FFCC00
(opacity .06)

Typography

Typeface sizes and line-heights are built around scales of sixes with a minimum size of 14px (and 24px line-height).

Primary

Arial

Secondary

Inconsolata

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Text
Link text
Help text (example: image text, date update text, quote source and card meta-data)
Timeline date-box
Card CTA
Card CTA | is--inactive
  • Bullets
  • Bullets
  • Bullets
  1. Typography
  2. Cards
  3. Lines
  4. Icons

Table of contents

Table of contents (toc) designs are pulled Wikipedia's proven design methods.

Quotes

Quote text
-- Quote source

Lines

Icons

Media

learn-platform-kickoff-workshop
Image text
learn-image-platform-user-testing
learn-image-platform-workshop
Image text