Design follow-up fixes

[JakeSCahill]

Fixes a few issues mentioned in https://github.com/redpanda-data/documentation-private/issues/2637

• Admonitions:
  • Adds opacity 50% to the background color of admonitions in dark mode.
  • Adds a different color to the important admonitions to make it distinct from the note admonition.
• Home page: Makes the header Redpanda red for better brand awareness.
• Metadata and breadcrumbs: Include the product name so users can identify where they are

2024-08-09_13-36-41.mp4

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	86610f5
🔍 Latest deploy log	https://app.netlify.com/sites/docs-ui/deploys/66ba3708e061d00008691801
😎 Deploy Preview	https://deploy-preview-216--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Deflaimun]

Note and important still look too close to each other. Suggest we either stick to
Note -> blue
Important/tip -> green
warning/caution -> yellow or orange
danger -> red

Or merge note and important into a single admonition. Conceptually, they're too close too.

Colors for comparison. With the 50% opacity they look super close to each other

Important

Note

[yougotashovel]

@Deflaimun

Note and important still look too close to each other. Suggest we either stick to Note -> blue Important/tip -> green warning/caution -> yellow or orange danger -> red

Or merge note and important into a single admonition. Conceptually, they're too close too.

Colors for comparison. With the 50% opacity they look super close to each other

Important Note

I suggested originally inverting the color from the palette, so that it will have roughly the same level of importance from the background color. You can use math to help you choose these colors.

All of the color choices should be relative to the most prominent color on the page, which in this case is the page background color.

e.g:
light mode

• white background = gray.0 orwhite
• admonition background = <color>.100
• this is roughly a 100 point difference between background and highlighted background

dark mode

• dark background = darkblue.900 which is pretty close to black as it's already a "dark color" it's closer to something like <color>.1000
• admonition background = <color>.900
• this allows us to get pretty close to that 100 point difference.

[Feediver1]

Rather than "Select a product", wondering if we should say "Select a platform". Then, once in Cloud or Self-managed, you can select the actual product doc you want (explanations and links will be in the landing pages (forthcoming)). For example, for Cloud, the products are Serverless, BYOC, and Dedicated.

[Feediver1]

Not seeing an update here for the tab name (Enterprise > Self-managed) @JakeSCahill

[JakeSCahill]

Not seeing an update here for the tab name (Enterprise > Self-managed) @JakeSCahill

redpanda-data/docs#684

[JakeSCahill]

Rather than "Select a product", wondering if we should say "Select a platform". Then, once in Cloud or Self-managed, you can select the actual product doc you want (explanations and links will be in the landing pages (forthcoming)). For example, for Cloud, the products are Serverless, BYOC, and Dedicated.

redpanda-data/docs-site#70

[JakeSCahill]

Update admonitions

like this? 86610f5