Design System

Typography

For typography two fonts are mainly used: Space Grotesk and Inter. For monospace Menlo is preferred.

For headings and other prominent UI elements Space Grotesk is used. Normal text and smaller UI elements are set in Inter.

Colors

The base colors are a set of colors from which the light and dark colors are derived. Light colors occupy a slice of each colors shades and dark colors do the same.

The accent color is a blueish purple. In addition there are green and red for positive and negative feedback.

There are often many shades of either very light or very dark greys needed, those are included as well.

Base colors

100
#F5E2FD
200
#EFD5FB
300
#CDAFEF
400
#AA96DF
500
#B275CE
600
#8E75CE
700
#694BB4
800
#8070A9
900
#5D4D80
1000
#4F3879
200
#CEFDDB
300
#BCF5CB
400
#7DED99
500
#69D384
600
#52BC6D
700
#479E66
800
#4D8466
200
#FCD4D9
300
#F8B0BF
400
#E890A0
500
#D77585
600
#A97070
700
#A54F5C
800
#804D4D

Light colors

200
#F5E2FD
300
#EFD5FB
400
#CDAFEF
500
#AA96DF
600
#B275CE
700
#8E75CE
800
#694BB4
200
#CEFDDB
300
#BCF5CB
400
#7DED99
500
#69D384
600
#52BC6D
200
#FCD4D9
300
#F8B0BF
400
#E890A0
500
#D77585
600
#A97070

Dark colors

200
#CDAFEF
300
#B275CE
400
#8E75CE
500
#694BB4
600
#8070A9
700
#5D4D80
800
#4F3879
200
#7DED99
300
#69D384
400
#52BC6D
500
#479E66
600
#4D8466
200
#E890A0
300
#D77585
400
#A97070
500
#A54F5C
600
#804D4D
600
#25282B
700
#281C20
800
#1B1B1B

Footer

Right sidebar