Onboarding + Hosting dashboard: Unify background color

[jasmussen]

Extracted from #100114 (comment):

Problem: We have some mixed background colors, and a lack of coherent system for how to apply shades of gray across onboarding and hosting dashboard.

A new color, #f8f8f8, was proposed, as a way to:

• Be the same across onboarding and Calypso (Right now one is #fdfdfd and the other is Studio Gray 0, #f6f7f7)
• Be slightly lighter than Gray 0 (f8 range instead of f7 range)
• Be neutral gray instead of slightly blue-gray, which matches Gutenberg core components.

It would depart from current brand guidelines (4CRpGNilt0r1E10WKCJmgt-fi-199_13585), however, which maintains the existing Studio Grays, which contain a smidgeon of blue in them. This is where we have a bit of a challenge: if we are going to proceed to slowly adopt core componentry, that core componentry will default to using the neutral grays that are defined for that package. That means a mix of tinted grays and neutral grays will slowly build up over time, unless we make a decision. To aid the discussion, are the different colors in question:

Current, #fdfdfd

Lightest Studio gray, Gray 0, #f6f7f7

Proposed, an in-between but neutral gray, #f8f8f8

Some ideas we can explore:

• Adopt Studio Gray 0 across onboarding, so it matches the gray BG in Calypso. It's unclear why it's different.
• Adopt a new neutral gray across both, as proposed.
• Update Studio grays to be neutral, and closer to core componentry. This would need some thought from our brand friends (CC: @sfougnier @marko-srb)

Also curious any thoughts you have, @Automattic/dotcom-design

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Appearance & Themes: The issue is focused on unifying background colors, which directly relates to the visual appearance of the onboarding and hosting dashboard.
• [Feature] Customizer: The suggested changes involve altering visual aspects like background color, which can be managed through a customizer feature.
• [Feature] Launchpad: The onboarding process mentioned in the issue is tied to how users are introduced to the platform, which is related to the Launchpad feature.

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?

[crisbusquets]

Thank you, @jasmussen!

I’d default to the lightest gray available in Core for now (or even white?). Once everything is consistent and we have clearer brand guidelines, we can decide how we want these interfaces to differ from Core. cc @sfougnier.

[jasmussen]

There's an ideal state, where we decide: is a gray background something we want? If yes, then we want to find a balance where that particular shade of gray is applied in enough places to be reasonable. For example here (UghCEspEeHFI3E1kRJeyOZ-fi-39904_14251) it is applied to both onboarding and hosting dashboard. For the moment, the lightest gray available is either Gray 0 from Studio, or Gray 100 from Gutenberg base styles (#f0f0f0). The former is applied on the dashboard right now, with #fdfdfd applied to onboarding contexts. The simplest path forward until we have a clearer plan, may be to just keep the existing inconsistency.

[keoshi]

I’d default to the lightest gray available in Core for now (or even white?)

Just want to point out that even these two tones are a ways apart. Here's GB's Gray 100 vs pure white against a neutral 50% gray:

Adopting one over the other wholesale can have unintended consequences in our UIs.

is a gray background something we want?

From my point of view it would be beneficial for 3rd-parties and ecosystem products to have a neutral gray. They could use it for a surface that needs contrasts with other elements. For example, cards in a dashboard (think Woo Analytics).

In the past Woo has explored #FCFCFC, Jetpack has played around with #F7F7F7, and I'm sure there are many other shades in Figma and in production that don't match each other.

Current, #fdfdfd

I really appreciate the subtlety but honestly feels too close to white without being it. I doubt it would be perceived as gray in most screens, or provide enough contrast with foreground elements. Feels like a “Designer shade” that we really like to see, but has no practical function.

Proposed, an in-between but neutral gray, #f8f8f8

When viewed in the context of the Github issue, the screenshot makes it feel like it's a really dark gray, especially in contrast with the first. However, when in full-width, it feels appropriate and helps other elements stand out. It's still subtle, but tasteful.

---

Having said all that, I'm still debating whether we should use a gray in the log in + onboarding screens.

While the gray is functional and helps draw attention to the foreground elements, a cleaner white seems more timeless and classy. Here's a comparison between white and #f8f8f8 in the Jetpack context:

[jasmussen]

Good thoughts. The Jetpack example is particularly meaningful, and for me really boils it down to this: either we adopt a gray, and it's a shade of gray that's visible, and looks intentional, so it makes the white inputs and buttons stand out. This is also useful in case of "card" designs in a dashboard context. OR, we adopt a fully pure white. It's the in-between that's currently used only in onboarding, that feels off, to me.

[keoshi]

I realize I didn't finish with a clear conclusion to my thoughts. Back to intentionality, it feels like the dashboard example where cards need to stand out, a gray would be helpful in creating that depth. In the login + onboarding flows, less so. Not sure if that would create a dissonance in the UX from the get go, but it would be my preference. Context should dictate the function and, therefore, the form. My two cents.

[marko-srb]

For me personally, I don't mind the proposed gray. On other nice comments pointed by @keoshi I can only say, if it is going to change to 'white' then you'd need more cross-collab to make that happen. I don't mean 'time' but cross-collab, like dotcom, brand (we) and product should be in the same chat in order for the update to happen across touchpoints. :)

—

I also think @jrdnhllr might have more better insight than I do (in terms of any potential blockers), as Jordan is much deeper involved with the pages on wp.com.

[sfougnier]

I also don't mind the proposed gray, but I share similar apprehensions to making the update without knowing the full impact.

The current lightest studio gray feels a bit too dark in this context, but it's hard to say let's run with the updates without seeing them all in context.

I agree with @crisbusquets that, for now, we could use white #ffffff as an onboarding background, keep using Lightest Studio gray, Gray 0, #f6f7f7 elsewhere, and test how these look in the context of the full flows as you all continue iterating/we continue to make brand updates.

[jasmussen]

Appreciate all the input 👌 🙏