Design system

• for headings and body text go to typescale.com.
• used 1.2 minor third.
• added 2 more upper headings starts with 68.80px

Spacing

4 point grid system:

whenever we are giving space betweeen any elements it should be a multiple of 4. 4, 8, 12, 16, ...

• always have less spacing to the elements inside the container eg: padding of 16 should have elements with space less than 16 i.e. 8, 4.
• learn to break that rule when you have to seperate elements from same container go up like 16, 20 etc for creating seperation. mostly used for vertical spacing

Resolve hydration Issue

if u get warning that clint props not matched with the server props do this

const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  })
  if(!mounted) return null;
  return (
    <Element />)