Skip to content

Refactoring UI

Visual hierarchy, spacing, color, depth, dark mode and data viz.

From refactoring-ui ↗ by wondelai

30 principles

01

Design in grayscale first

02

Combine levers, don't multiply

03

Labels are secondary to values

04

One primary action per view

05

Use a spacing scale

06

More space between groups

07

Constrain content widths

08

A type scale, two fonts max

09

Line height by context

10

Shade scales in HSL

11

Tint your grays

12

Meet contrast minimums

13

Don't rely on color alone

14

Match shadows to elevation

15

Every control shows its state

16

Visible labels, sized inputs

17

One border-radius system

18

Treat images deliberately

19

Size icons to their text

20

Empty states are opportunities

21

Left-align by default

22

Vary emphasis, break the box

23

Truncate labels, not content

24

Dark mode is not an inversion

25

Pick the chart by the question

26

Honest bar charts

27

Color charts by data type

28

Right-align table numbers

29

Dashboards: big numbers first

30

Manage focus in modals