UI Design Cheat Sheet — Spacing, Type Scale, Z-Index & More

Spacing Scale (4pt base)

sp-0.5

2px0.125rem

sp-1

4px0.25rem

sp-2

8px0.5rem

sp-3

12px0.75rem

sp-4

16px1rem

sp-5

20px1.25rem

sp-6

24px1.5rem

sp-8

32px2rem

sp-10

40px2.5rem

sp-12

48px3rem

sp-16

64px4rem

sp-20

80px5rem

sp-24

96px6rem

sp-32

128px8rem

Z-Index Convention

9999Emergency overlayAlerts, critical

1000Modal backdropDialog overlays

900Modal contentDialog itself

800Toast / SnackbarNotifications

700TooltipHover hints

600DropdownSelect menus

500Sticky navFixed header

400Sidebar / drawerSlide panels

300Overlay bgDimmer layer

100Floating UIFAB, badges

10Above contentHover states

1Base raisedNormal stacking

-1Behind contentDecorative bg

Responsive Breakpoints

📱 xs — Mobile< 480px

1 column · 16px padding

📱 sm — Mobile L480–767px

1–2 cols · 540px max-w · 20px padding

💻 md — Tablet768–1023px

2–3 cols · 720px max-w · 24px padding

🖥 lg — Desktop1024–1279px

3–4 cols · 960px max-w · 32px padding

🖥 xl — Wide1280–1535px

4–6 cols · 1200px max-w · 40px padding

🖥 2xl — Ultra> 1536px

Full layout · 1400px max-w · centered

Border Radius Scale

0

None

2px

XS

4px

SM

6px

MD

8px

LG

12px

XL

16px

2XL

24px

3XL

50%

Circle

9999px

Pill

Box Shadow Scale

shadow-xs

0 1px 2px rgba(0,0,0,.3)

shadow-sm

0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3)

shadow-md

0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.3)

shadow-lg

0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -2px rgba(0,0,0,.3)

shadow-xl

0 20px 25px -5px rgba(0,0,0,.5), 0 10px 10px -5px rgba(0,0,0,.3)

ring / focus

0 0 0 3px rgba(99,102,241,.4)

Opacity Scale

5%

10%

15%

20%

25%

30%

40%

50%

60%

70%

80%

90%

95%

100%

CSS Units Reference

Unit	Name	Best For
px	Pixel	Borders, shadows — fixed
rem	Root em	Font sizes, spacing — scales with root
em	Em	Relative to parent font size
%	Percent	Widths relative to parent
vw	Viewport width	Full-width layouts, fluid type
vh	Viewport height	Hero sections, full-screen
dvh	Dynamic vh	Mobile address bar aware
ch	Character	Width of '0' — text columns
fr	Fraction	CSS Grid fractional units
clamp()	Clamp	Fluid responsive values
min()	Minimum	Picks smallest of two values
max()	Maximum	Picks largest of two values

CSS Easing Reference

ease

cubic-bezier(0.25, 0.1, 0.25, 1.0)

ease-in

cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out

cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1.0)

Ease Out Quart ✦

cubic-bezier(0.25, 1, 0.5, 1)

Ease Out Expo ✦

cubic-bezier(0.16, 1, 0.3, 1)

Ease Out Back ✦

cubic-bezier(0.34, 1.56, 0.64, 1)

Ease In Back ✦

cubic-bezier(0.36, 0, 0.66, -0.56)

step-start

steps(1, start)

step-end

steps(1, end)

Font Weights

100ThinThe quick brown fox

200ExtraLightThe quick brown fox

300LightThe quick brown fox

400RegularThe quick brown fox

500MediumThe quick brown fox

600SemiBoldThe quick brown fox

700BoldThe quick brown fox

800ExtraBoldThe quick brown fox

900BlackThe quick brown fox

Line Height Guide

1.0

Display headings only. Never use for body text — too tight to read at small sizes.

1.2

Tight heading. Good for H1–H3 at 32px+. Elegant at large sizes.

1.4

Medium. Good for subheadings and short descriptive text blocks.

1.6 ✦

Ideal body text. The sweet spot for screen reading comfort.

1.8

Relaxed. Good for long-form articles, docs, accessibility-focused designs.

2.0

Very open. Tables, code, list items. Too loose for body prose.

Grid Systems

4-col — Mobile

4 cols · 16px gutter · 16px margin

8-col — Tablet

8 cols · 20px gutter · 24px margin

12-col — Desktop

12 cols · 24px gutter · 40px margin · 1200px max-w

CSS Grid snippet

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;

Auto-fill pattern

grid-template-columns:
  repeat(auto-fill, minmax(280px, 1fr));