Inconsistent styles in newer pages

[Cherry]

Existing documentation URL(s)

• https://developers.cloudflare.com/products/
• https://developers.cloudflare.com/workers-ai/models/

What changes are you suggesting?

Recently the Cloudflare docs were overhauled to Astro/Starlight, which brought a huge wave of improvements to both the DX for contributors, but also UX for consumers in terms of readability and consistency.

Astro/Starlight provides a huge number of components that are used and configured to maintain a consistent style and feel throughout the docs, but when new components are added with bespoke Tailwind (etc.) classes, this breaks some of that consistent look and feel.

Some examples include:

• spacing/padding
• borders
• border radius
• text colours
• background colours
• "pill" badges
• hover/focus/active states

Many of these are covered in Cloudflare's published style guide, like https://developers.cloudflare.com/style-guide/components/badges/, or implied by the usage of Starlight, but how they're implemented in some of these custom components with unique tailwind classes breaks that ideal:

• https://github.com/cloudflare/cloudflare-docs/blob/f3ed460f1a44d8c6cde8547e6ce8f944e433995a/src/components/ProductCatalog.tsx
• https://github.com/cloudflare/cloudflare-docs/blob/f3ed460f1a44d8c6cde8547e6ce8f944e433995a/src/components/models/ModelBadges.jsx
• https://github.com/cloudflare/cloudflare-docs/blob/f3ed460f1a44d8c6cde8547e6ce8f944e433995a/src/components/models/ModelPlayground.jsx

Compared to similar components like https://github.com/cloudflare/cloudflare-docs/blob/f3ed460f1a44d8c6cde8547e6ce8f944e433995a/src/pages/learning-paths.astro which have implemented similar functionality, but using native Astro/Starlight components like LinkTitleCard, and not hard-coded specific unique Tailwind classes. This way, as these components are improved/iterated on, everything sees benefit, as well as everything remains consistent.