[Docs] Gantt chart images need white backgrounds

[jeanservaas]

@theiliad I missed this and didn't do a review of the Gantt chart usage docs before the PR merged and @mjabbink called out this issue. Our usage images need full separation from the gray 10 background so people clearly understand the difference between our docs site and the UI that we're displaying

problem:

example of UI on white background:

https://www.ibm.com/standards/carbon/components/content-section

Again, Gantt is big, so it's totally fine to use all 12 columns for it (I know the dotcom examples are smaller) but I'm just showing an example of how to put a UI on a white background

You literally just take the image off of the 1312px grid in figma and make an image out of it on a white background.

[mjabbink]

Because the page background is G10, sometimes the white background for images is less effective because the screen may have both G10 and White so it blends into the page. As a result, we also use G20 or G30. We also can use a lo-fi browser header. Please take a look at the hacks below to give you all an idea.

no browser

with browser

crop (so no browser needed)

[mjabbink]

I think for the images that might show the page header of the UI or an entire page the lo-fi browser is a nice add-on.

For images that are crops or portions of screen then a G20 or 30 and no lo-fi browser is good.

[jeanservaas]

UPDATE:

just an update from our Slack thread:

There are two issues here:

1. is just a simple stylistic fix for the usage image, and I think we have that (see gray 20 background above), we'd want all three images to look like that and preferably for the images to use an aspect ratio (3:3, 16:9, 2:1)
2. 1. There's a grid alignment issue that I'd like to have a look at

As a next step, Valerie up a grid alignment call and include Juan and Mike — just so we understand how we can actually use this library/symbols with our grid. This may be my ignorance, maybe there's something that I'm missing. But it will be much easier to deal with this on a call! I will set it up for sometime next week.

We can revamp the images after this grid call and get them right so we don't have to do them twice.

[laurenmrice]

To do

• [ ] Schedule a grid call
• [ ] What should the aspect ratio be of the image? Can it be a cropped image in the browser, or should it be full screen?