De Stijl — Amsterdam, 1921

Pri­mary
Color
UI Kit

Neoplasticism — Piet Mondrian

Pure abstraction through the orthogonal.
Red. Yellow. Blue. Black. White.
No curves. No diagonals. No sentiment.
Only the universal — the absolute.

1921
01
Color Palette
Red.
Yellow.
Blue.
Black.
White.

Nothing else.
Ever.
Primary tones — Light to Pure
Core swatches
Primary
Red
#D40000
R 212 · G 0 · B 0
Action · Danger · Energy
Primary
Yellow
#F5C800
R 245 · G 200 · B 0
Accent · Warning · Joy
Primary
Blue
#0033A0
R 0 · G 51 · B 160
Trust · Structure · Depth
Neutral
Black
#111010
R 17 · G 16 · B 16
Grid · Type · Structure
Neutral
White
#F8F6F0
R 248 · G 246 · B 240
Ground · Space · Rest
02
Typography
One typeface.
Many weights.
No ornament.
Pure rhythm.
Type specimens
Aa
FamilyCourier Prime
WeightBold 700
UseDisplay
Aa
FamilyCourier Prime
WeightRegular 400
UseBody
ABCDEFGHIJ
KLMNOPQRST
UVWXYZ
CaseAll Caps
Tracking0.25em
UseLabels
0 1 2 3 4 5 6 7 8 9
! @ # $ % & * ( ) +
The orthogonal line
is the only truth.
— Piet Mondrian, 1921
StyleMonospace
Size13px / 2.0
UseBody Copy
Type scale
Display
H1
H2
H3
Body
Caption
Primary Color
Grid System
De Stijl — 1921
Neoplasticism in UI
The orthogonal line divides the plane into pure, absolute relationships.
Form follows function — always
03
Buttons
Direct.
Primary.
No shadow.
No gradient.
Pure action.
Primary Color Variants
Sizes — Small / Default / Large
States — Disabled
04
Input Fields
Black label.
White ground.
Thick frame.
Yellow focus.
Red error.
As it appears on the canvas
No ornament — ever
Minimum 8 characters required
05
Selector
One choice.
Many options.
Thick frame.
No ornament.
Pure selection.
Dropdown — Varianti Colore
Multiple selection

Keep press Ctrl (or ⌘ on Mac)
to select more items.

The active selection is highlighted
by blue color.

06
Selection
Square logic.
Binary plane.
Either — or.
No grey.
Radio Button
Checkbox
Toggle
07
System Notifications
Information.
Confirmation.
Warning.
Error.
Info
Information Notice
The system is under scheduled maintenance. Available from 08:00.
OK
Operation Completed
Your changes have been saved successfully to the system.
Att
Attention Required
Session expires in 5 minutes. Please save your current work.
Err
System Error
Connection interrupted. Check your network and try again.