As for the gradients, there actually is a magic formula.

The difference you see is caused by difference in the rendering system- Apple (and web / react and android for that matter, if you are interested) all use system where gradient is first created into square, then resized. This stack question answers that better: https://stackoverflow.com/questions/38821631/cagradientlayer-diagonal-gradient/43176174#43176174

If you are interested in code, we've written it and you are free to use it — it works for any gradient, no visual adjustment needed. You just need the points :) https://gist.github.com/JiriTrecak/ad5b37a229f39bbb90299ca5ad8e062f

This fixes the points so it renders correctly. You'll need to modify it to your needs.

And if you are interested in something that will help you convert design to your code: https://supernova.studio/ -> we are out of the shadows this month!

Hope this helped,

J