Site Design Revamp - Add Caption to Recommended Section

[Gio2018]

Fixes #18674

This PR adds a caption to the recommended section in the Site Design Picker

To test:

• checkout/build/run this branch
• Start the site creation flow and get to the design picker (either skip the vertical selection or select any vertical)
• Make sure that the recommended section (the one with larger thumbnails on top) has a "PICKED FOR YOU" caption
• Make sure the other sections do not have captions
• Cancel the site creation flow, tap the FAB then "Site Page"
• Make sure the page layout picker does not have captions in any section

Regression Notes

1. Potential unintended areas of impact
   Low - Page design picker uses part of the same code

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   test that the page design picker was not impacted

3. What automated tests I added (or what prevented me from doing so)
   none
   PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes in Jetpack from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr18710-760d80f on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[wpmobilebot]

You can test the changes in WordPress from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr18710-760d80f on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[twstokes]

This looks good @Gio2018! 🚀 I tested different accessibility sizes as well as VoiceOver.

In the Figma designs by @kyleaparker it looks like the font size is defined as 13px with a 590 weight. Using .subheadline puts the font at 15pt(px) and I also see we're defining .semibold for the weight.

.caption1 is defined as 12px in the HIG with regular weight. .caption1 with .semibold is visually closest to me, but I wanted to get your thoughts.

Designs

It's best to view these screenshots fullscreen to get a sense of scale.

Subheadline	Caption 1 Regular	Caption 1 Semibold

[Gio2018]

Thanks @twstokes !

.caption1 is defined as 12px in the HIG with regular weight. .caption1 with .semibold is visually closest to me, but I wanted to get your thoughts.

I thought about that, but it looks a bit unreadable. Thoughts @kyleaparker ?

[kyleaparker]

.caption1 is defined as 12px in the HIG with regular weight. .caption1 with .semibold is visually closest to me, but I wanted to get your thoughts.

I think subheadline is probably the best here but we may need to add some margin underneath

[twstokes]

I think subheadline is probably the best here but we may need to add some margin underneath

Sounds good! We have a UI tweaks issue that I'll add this note to. 👍