Admin UI: visual tweaks to Page component

[simison]

The current set of Admin UI components is used around Gutenberg, for example, on the new Fonts and AI Connectors pages:

Fonts	Connectors

We've just adopted the components also in the Jetpack plugin, where it helps a lot to bring consistency between core and our plugin!

However, we also noticed that there could be some small adjustments to improve the component's visual appearance for consumers:

• Breadcrumbs and Titles should follow the same size
• Header should support adding a logo or symbol
• Page background #fcfcfc instead of #ffffff
• No double border when tabs are used

Breadcrumbs and Titles should follow the same size

While both work fine independently, there's an issue when one browses between multiple pages, where some use breadcrumbs, and some use titles. There's a "jump" in text size between the two currently:

Suggest using the same 20/15 from the design system for both. This makes the title slightly smaller than it is today, and breadcrumbs slightly bigger:

Header should support adding a logo or symbol

It's currently possible to pass title prop a logo, which kinda works, but can be fragile in future when header has changes, particularly on mobile. Ad-hoc logo addition, of course, doesn't guarantee consistency between different consumers using the component either like officially supported would.

We propose officially supporting a logo or symbol in the header:

Official support would also ensure better semantic support since the logo could go outside the h2 tag:

It would also avoid needing to pass a separate ariaLabel to maintain good accessibility. Title+logo obviously doesn't work for aria label, since it's not purely just a string, so currently when using logos you have to pass both title and ariaLabel.

Page background #fcfcfc instead of #ffffff

Currently white background lacks dimension between different surfaces, such as when adding cards to the page:

#ffffff	#fcfcfc

Full-page containers, such as pages using DataViews tables, would still be fully #ffffff.

No double border when tabs are used

Described in more detail:

• Admin UI: header container border causing boxy layouts #75428

By avoiding additional border above tabs, the header layout looks less busy and less boxy:

To separate from content particularly when backgrounds are white (like in full-page DataViews) and since the header is sticky, we'd still keep the bottom-border for headers visible at all times.