Accent colours for Jetpack plans page in new colour themes

[simison]

Should Jetpack green be carried across plans pages as an accent colour, instead of new pink?

Assuming folks start from wp-admin or Jetpack.com, the pink is a new colour they'd experience for the first time only at this page and prices are already accented with green.

"Lazer black" theme might not be published yet? Feels like it shouldn't have these big white boxes at all but something that blends in more. Also the "PayPal" logo becomes unreadable against black background.

This part also seems to need adjusting, as it goes over the light grey border and thus looks a bit off:

Props @AnnaMag

[flootr]

"Lazer black" theme might not be published yet? Feels like it shouldn't have these big white boxes at all but something that blends in more.

Yes, not published yet. It's work in progress and there's still a lot of places which need attention.

[scruffian]

cc @cburton4 and @drw158 for Muriel input.

[davewhitley]

The prices have been green for a while now, for both jetpack sites and wpcom sites.

I'd argue that this was a problem before the color changes, it just wasn't as apparent before. Our blue-wordpress or blue-medium color was our WordPress.com brand accent color, but it didn't stick out as much. I'm not as privy on when to show Jetpack branding vs. WordPress.com branding, so I'd like input from the Jetpack branding team on this one cc @rickybanister

I guess my question is, do we hide that fact that this is WordPress.com, or should it just look like a Jetpack product at this point? Or is it a WordPress.com product that is reached by way of Jetpack?

One solution might be to have a hidden Jetpack color scheme that uses a Jetpack green instead of pink. That might be tricky though since there are wpcom users with an atomic site (and as a result, Jetpack) that don't know what Jetpack is and it wouldn't make sense to use green in those cases.

[rickybanister]

We put in some work this year to remove some of the confusion customers feel when jumping from wp-admin and jetpack.com to wordpress.com, that's where the green came from.

I like the sound of creating a Jetpack color scheme as long as it doesn't add a maintenance burden and it gets updated and supported as new UI is added or modified. We really just wanted to include some green during the connection flow and on the plans page. I recognize that color schemes are user-centric and jetpack's flow is site-centric so that adds a layer of complexity for someone with both types of sites (or a preference for laser black even).

We're also open to other solutions, but our main goal is maintaining some kind of brand presence during the Jetpack connection flow to mitigate confusion with the change in url.

[davewhitley]

If you want to just tweak this connection flow and this plan page, then I think you could easily tweak the buttons shown on this page.

.jetpack-plans-button {
     --color-accent: var( --jetpack-green );
}

I think this would work. It would replace all instances of --color-accent (the pink) with whatever green you want, just for that class though.

From a system perspective please use a Jetpack brand green and not the semantic success green color.

For the Jetpack color scheme idea to work, we'd need to set that preference by site, and then determine if that site is running Jetpack but not hosted by us.

[blowery]

@rickybanister @simison What pages / urls are affected that we want to alter?

/plans/the-site?

[simison]

/plans/the-site?

Correct :thumbsup:

The easiest way to test would be to create a Jetpack site with Jurassic Ninja and connecting it by pressing "Set up Jetpack":

https://jurassic.ninja/

[blowery]

@simison how was the green applied on that page before? I'm not seeing any jetpack specific overrides... Or was it blue?

[simison]

It used to be blue.

Here's an example how Jetpack green is applied to buttons during the connection flow:

https://github.com/Automattic/wp-calypso/blob/006d96c71bf6e41f070bed44ddb655f634b9c52b/client/jetpack-connect/style.scss#L28-L47

[blowery]

It used to be blue.

So on that plans page, it used to be the color of a primary button (blue), which has changed from blue to pink and changes based on the theme chosen.

Do you now want it to be Jetpack green instead, regardless of color theme?

[blowery]

Also, do we want to modify the color of the ribbon on the plans page to Jetpack green? It's currently theme dependent.

[scruffian]

How much work is adding new color schemes? It seems that once the colors are set there won't be any need to maintain them (assuming they are just SASS variables)? I think that approach could be really interesting - obviously Atomic sites wouldn't use the Jetpack colors...

[rickybanister]

@scruffian I think a Jetpack-specific color scheme could be interesting, but a couple of blockers come to mind—color schemes on wpcom are 'user centric' not 'site centric' so if someone had a wpcom site, picked laser black, then they connect a jetpack site, what would we do? Would we make a decision for them?

I was wondering if instead we could try creating jetpack sass variables and putting those classes in jetpack-specific like the connection flow and working in green to all the other color schemes in a way that works well (if possible). That way we'd solve the user-centric issue I mentioned above, but maintain some amount of Jetpack branding.

[davewhitley]

I just tested a new Jetpack site setup flow. The onboarding uses heavy use of Jetpack colors. As soon as I landed in Calypso, all buttons and colors (that weren't a part of an image) were using the theme colors that I specified (the buttons were blue).

Looks like variables are already being used to tweak the onboarding flow, and we could do the same for the Plans page. https://github.com/Automattic/wp-calypso/blob/0fd31ef2cb26c09421aed87be7648487b8f82260/packages/calypso-color-schemes/src/shared/_color-schemes.scss#L222

To close this issue, I think we could:

• Update Calypso with the new Jetpack colors from Color Studio 2.0
• Use variables to change the buttons to green on the plans page. But all other buttons will still be blue?

[Aurorum]

I opened #35217 to switch the colours for the Plans table, but I wonder if the colours of nudges should also be switched? For example, would this be better?

[stale[bot]]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.