UI Cheat Sheet
Published in
1 min readJun 30, 2021
Typography
- Choose a font family (preferably one that has weight family)
- Start with a standard font size (commonly use 16px for body text)
- Adjust line height 130%-180% for readability
- Define a scale (Common scales for type are 1.250x,1.414x, 1.5x, 1.618x)
- Use https://type-scale.com/ for variety of scale
Grid System
- Common grid is 12 column grid, margin 70, gutter 20. Keep it to scale so you can scale to different screen
- Add another grid row (like 8 grid system) on top of the column grid to know the spacing (optional)
- Make sure everything is divisible by 8 (in Figma, you can adjust the nudge value when doing shift up/down)
Colours
- Use a contrast checker https://webaim.org/resources/contrastchecker/
- Have primary and secondary colours.
- Do your shades and tints https://maketintsandshades.com. You don’t have to create all the shades, just the one you’re likely to use.
Icons
- Store all your icons in a separate page and have it consistent sizing (24px x 24px)
- Choose one source of icons for consistency “material icon, ant design, flaticon)
- Use ruler to align the size of the icons inside the 24px x 24px frame
Components/Symbols
- Design for every state: default, active, hover, focus, disabled
- Don’t forget Header and Footer as a component
