Custom Google and Apple Signup/in buttons

Question

I want to modify the default sign up and sign in buttons of Google and Apple for an iOS project keeping the changes as per their guidelines.

By default, these are like this:

And I want to use it like this(G's border-radius updated to 6px, shadow removed, border-color updated and Apple's font size changed to 14px just to match it with Google's) :

Now the confusion is due to the guidelines' do's and don'ts in Apple's guidelines, at one place it says:

To coordinate with your app design, you can change:

• Title font. You can also adjust the font's weight and size.

And just below that, it says:

Prefer the system font for the title — that is, Sign in with Apple, Sign up with Apple, or Continue with Apple. Regardless of the font you choose, the title and button height of your custom button should use the same proportions that the system uses. Using the system font for example, the title's font size should be 43% of the button's height — in other words, the button's height should be 233% of the title's font size, rounded to the nearest integer.

And in Google's Guidelines, it says you have to stick with white or blue colour which is okay but in the custom button design page of google, it says anyone can change anything without hampering the aspect ratio and basic requirements.

SO how can I attain this so that the product will not be getting a revision from iOS's App store?

TLDR: How much customisation is okay for Apple and Google Signup/in buttons so that the app's design doesn't go into the revision from the App Store's side?

Answer 1

This no longer seems to be an issue (at least not for Apple). You are free to adjust the buttons size or text size to fit your design. This is described in Apple's Human Interface Guidelines (updated September 14, 2022). There is also an editor to customize the buttons.

Answer 2

There are always going to be some degree of 'conflict' between design guidelines, since I don't think the designers from different organisations talk to each other to make sure that there are no clashes.

In fact, this is why cross-platform applications tend to have an independent look & feel so that there are no clashes and the appearance is consistent, or they follow the native implementation and deal with the consequences of the inconsistencies (just think about Microsoft's evolving UI design). This is now even more problematic because of the different devices and their hardware differences too (e.g. soft vs. hard buttons, iPhone's notch on the screen caused by hardware placement).

It would be preferable to conform as much as you can to the platform you are submitting the work to, but it is not their problem how bad it makes the other aspects of your design look. So while you might get a response from Apple about the use of their logo, it is still up to you to find a solution of how to fit the other design so that it is consistent. Another way to look at this problem is to consider what adjustments you would make to the Playstore and work out the best trade-off.

My guess is that Google will care less and therefore give you the greater flexibility to make adjustments from that end.