Front-end updates

[dfinster]

Summary

Refreshes the public docs front end around the Mintlify Aspen theme: brand-aligned gold primary (#FCBC32), new endorsed wordmark logos, a modular CSS layer (css/styles.css and imports) that overrides Mintlify chrome (layout, top bar, sidebar, cards, buttons), and a simplified home page with updated metadata and product cards that use the new styling.

Motivation / context

• Align the site with updated W&B brand colors, typography (Source Serif 4 headings, Source Sans 3 body), and logo assets.
• Replace the single flat snippets/button-links.css with a maintainable stylesheet tree and shared design tokens (css/colors.css).
• Improve readability and consistency for primary actions (Sign Up, Ask AI, form submit, chat send) and navigation (active states no longer defaulting to amber text where design calls for neutral primary text).

What changed

Mintlify configuration (docs.json)

• Theme: mint → aspen.
• Primary palette: #ffb633 → #FCBC32 (light/dark entries updated).
• Custom stylesheet: /button-links.css → /css/styles.css.
• Logos: light/dark now use Endorsed_primary_blackwhite.svg and Endorsed_primary_goldwhite.svg (previous logo_light.svg / logo_dark.svg removed).
• Fonts: heading weight 600 → 400; explicit body font entry for Source Sans 3 at weight 400 (heading format: woff2 removed in the diff).

New CSS architecture (css/)

• css/styles.css: ordered @import entry point (tokens → layout → nav → components).
• css/colors.css: Mintlify :root overrides (e.g. --background-light / --background-dark, --primary-foreground, --page-texture) plus custom hex tokens and .dark overrides for cards, strokes, sidebar, text, and texture URL.
• css/typography.css: --font-serif / --font-sans, global sans default, serif headings with weight 400.
• css/layout.css: warm page background, halftone dot PNG (light-dots.png / dark-dots.png), transparency overrides on main, #background-color, and removal of Mintlify’s inline radial-gradient overlay so the texture shows through.
• css/topbar.css: navbar background + texture, fixed logo dimensions, nav tab/dropdown colors and active states, right-rail control font sizes, Sign Up / Ask AI / Dismiss banner button contrast.
• css/sidebar.css: sidebar backgrounds, Source Sans for groups/items, active item and TOC styling, muted nav tag pill text.
• css/buttons.css: in-content button-style links (Colab, try-in-product, GitHub, compact source-link) using color-mix() with tokens; Ask AI submit and chat assistant send button/icon contrast fixes.
• css/cards.css: .product-card chrome aligned with tokens; Mintlify .card.block hover/border overrides; changelog update labels and orange badges tuned to brand amber.

Assets and housekeeping

• New: css/assets/light-dots.png, css/assets/dark-dots.png.
• New: icons/Endorsed_primary_blackwhite.svg, icons/Endorsed_primary_goldwhite.svg.
• Removed: icons/logo.svg, icons/logo_light.svg, icons/logo_dark.svg.
• Moved (unchanged content): style.css → css/_unused/style.css, table-styling.css → css/_unused/table-styling.css.

Home page and ProductCard

• index.mdx: page title and description updated; product card subtitles cleared; bullet quick links under each card removed; W&B Models card passes iconSize={20}.
• snippets/ProductCard.jsx: switches to vertical layout with product-card classes; icons rendered as a CSS-masked span tinted to brand amber; optional iconSize prop (default 16); title/body use product-card-title / product-card-body.

Removed

• snippets/button-links.css (superseded by css/buttons.css and related imports).

Breaking changes / migration

• Stylesheet URL: anything that assumed /button-links.css as the only custom CSS must use /css/styles.css (already wired in docs.json).
• Logo paths: external references to deleted logo_*.svg files will 404; use the new Endorsed SVGs.
• Theme switch to Aspen may change default Mintlify behavior site-wide; spot-check pages that relied on Mint-specific styling.

Risk / review focus

• Selector fragility: many rules target Mintlify class names, IDs, and inline attributes (including !important in places). A Mintlify upgrade could shift DOM or Tailwind classes.
• Contrast and states: verify Ask AI (top bar, form, chat panel), Sign Up, and dark mode across key templates.
• Layout: logo sizing uses fixed width/height and :has() for the logo link; confirm on narrow viewports and localized nav.
• Empty description in index.mdx front matter: confirm this is intentional for SEO/social previews.

How to test

• Run mint dev and confirm the dev server starts without MDX/CSS errors.
• Run mint broken-links after the build config change.
• Manually check:
  • Home: cards, icons, hover, click-to-navigate vs in-card links (if any remain elsewhere).
  • Global: light/dark toggle, sidebar active item, TOC active state, top nav tabs and dropdowns.
  • Content: pages using .colab-link, .try-product-link, .github-source-link, .source-link.
  • Changelog / badges / Mintlify <Card> if used on representative pages.

Commits

• 4212d6fe1 — Front-end updates

[ghost]

📚 Mintlify Preview Links

🔗 View Full Preview

✨ Added (7 total)

🖼️ Images (6)

File	Preview
icons/Endorsed_primary_blackwhite.svg	View Endorsed Primary Blackwhite
icons/Endorsed_primary_goldwhite.svg	View Endorsed Primary Goldwhite
icons/Inference.svg	View Inference
icons/Models.svg	View Models
icons/Training.svg	View Training
icons/Weave.svg	View Weave

⚙️ Other (1)

File
scripts/css-minify/README.md

📝 Changed (4 total)

📄 Pages (2)

File	Preview
index.mdx	.
support.mdx	Support

⚙️ Other (2)

File
docs.json
snippets/ProductCard.jsx

🗑️ Deleted (5 total)

View deleted files

🖼️ Images (3)

File
icons/logo.svg
icons/logo_dark.svg
icons/logo_light.svg

⚙️ Other (2)

File
snippets/button-links.css
style.css

---

🤖 Generated automatically when Mintlify deployment succeeds
📍 Deployment: 690378e at 2026-05-13 18:48:08 UTC

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
wandb	🟢 Ready	View Preview	May 5, 2026, 7:37 PM

[ghost]

🔗 Link Checker Results

✅ All links are valid!

No broken links were detected.

Checked against: https://wb-21fd5541-df-front-end-updates.mintlify.app

[wandb-docs-pr-writer]

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 75.6%, saving 161.9 KB.

Filename	Before	After	Improvement	Visual comparison
css/assets/dark-dots.png	107.5 KB	25.8 KB	76.0%	View diff
css/assets/light-dots.png	106.8 KB	26.6 KB	75.1%	View diff

[wandb-docs-pr-writer]

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 10.3%, saving 5.4 KB.

Filename	Before	After	Improvement	Visual comparison
css/assets/dark-dots.png	25.8 KB	23.1 KB	10.6%	View diff
css/assets/light-dots.png	26.6 KB	23.9 KB	10.0%	View diff

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​clean-css-cli@​5.6.3
	npm/​chokidar-cli@​3.0.0

View full report