I'm still trying to wrap my head around all of the changes. Lots of red and green.

For some earlier feedback, I have a question. Are we sure that we don't call to get JITMs from the frontend? We'd only want to do that when the wp-admin is loaded, right?

Yeah, I'll double check just to be sure.

Confirmed it will not show on the frontend, should only perform the api call for users on wp-admin.

I am testing by applying D5613-code to my sandbox as well as this PR to my Jetpack site. Here are a couple of things I notice:

The notice formatting on the Akismet page looks off:

The VaultPress continues to show after each post I publish. This may be happening because each post has a unique ID, but that seems a bit buggy to me.

Perhaps this should be in the WPCOM patch, but for the Akismet nudge, it takes me to a Jetpack.com page that tries to sell me a plan, but I already have a personal plan for this site.

I would expect the primary button to either take me to wordpress.com/plugins/setup/$site, or wordpress.com/plugins/akismet/ericbinnion in this case.

Note: This is the same for VaultPress. I get taken to a Jetpack.com page that expects me to buy a personal plan, but I already have a personal plan.

Width fix looks LGTM.

Some other quick things noticed in the above.

There are some subtle alignment, width issues: close icons should align (highlighted in green) & the green border on the separate messages should be the same width (highlighted in yellow). I would be tempted to move these into a new PR once the above is merged since there's a lot in this PR, but defer to you all.

It's also worth noting that in the above example, the language of the JITM isn't translating. Perhaps this is expected with new language for a short period of time?

JITM translation fix is in another PR: #5535

I propose we move this forward then.

The jitm looks fantastic! Although I'm not a fan of how it's placed next to the tabs, looks crowded. Maybe it would be better if it was on a line of its own.
I'd add

.jetpack-jitm-message {
    display: inline-block;
    width: 100%;
}

so it looks like

And also, the centered text in the button looks awkward and it's harder to consume than in a single line. Adding width: 70% to .jitm-banner__info would make it look like this:

Just some thoughts. Maybe there was another design review to this and was decided to left them like this?

One more, the ⨉ is misaligned with respect to the tab down arrows. With this

.jitm-banner__action + .jitm-banner__dismiss {
    margin-right: -8px;
    margin-left: 5px;
}

It looks aligned: