Skip to content

feat(docusaurus): refresh typography, category colors, and card hover states - #4348

Open
jimmieego wants to merge 1 commit into
awslabs:mainfrom
jimmieego:docs/docusaurus-catalog-retheme
Open

feat(docusaurus): refresh typography, category colors, and card hover states#4348
jimmieego wants to merge 1 commit into
awslabs:mainfrom
jimmieego:docs/docusaurus-catalog-retheme

Conversation

@jimmieego

@jimmieego jimmieego commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Fixes N/A

Summary

Changes

Visual refresh of the documentation site, scoped to typography, category color coding, and server card hover interactions. No content or routing changes.

  • Add src/categoryMeta.ts as a single source of truth mapping each of the 10 server categories to an accent color and a Feather icon. All colors clear 4.5:1 contrast on white. ServerCards consumes it instead of its previous inline icon maps.
  • Color-code the server catalog cards by category: tinted icon chip, colored category label, and a category-colored top hairline revealed on hover, with a subtle lift and shadow. Honors prefers-reduced-motion.
  • Support ?category= and ?workflow= URL params on the catalog so links can open a pre-filtered view, and add a "Clear filters" button.
  • Introduce brand typography (Public Sans for UI text, IBM Plex Mono for code, loaded via Google Fonts with preconnect) and design tokens in custom.css: Squid Ink headings, Cloudscape action blue as the Infima primary, a neutral ink ramp, and a Smile Orange footer rule.
  • Restyle the re:Invent callout on the intro page to match the new palette.

User experience

Before: all server cards look identical regardless of category (single blue accent, plain text category tag), system default fonts, and no way to link to a filtered catalog view.

After: each category has a consistent accent color across icon, label, and hover treatment, making the catalog easier to scan; headings and body text use AWS brand typography; catalog views are deep-linkable via URL params. Verified with npm run build (both en and ja locales pass link checking; the one broken-anchor warning on healthimaging-mcp-server#installation is pre-existing).

Screenshots

Server catalog (/servers):

Before After
Server catalog before Server catalog after

Card hover state (first card hovered — after adds a lift, shadow, and category-colored top hairline):

Before After
Card hover before Card hover after

Intro page typography (Public Sans body/headings, Squid Ink heading color):

Before After
Intro page before Intro page after

Checklist

If your change doesn't seem to apply, please leave them unchecked.

  • I have reviewed the contributing guidelines
  • I have performed a self-review of this change
  • Changes have been tested
  • Changes are documented

Is this a breaking change? (Y/N) N

RFC issue number: N/A

Checklist:

  • Migration process documented
  • Implement warnings (if it can live side by side)

Acknowledgment

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the project license.

@jimmieego
jimmieego requested review from a team as code owners July 26, 2026 06:21
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
jimmieego added a commit to jimmieego/mcp that referenced this pull request Jul 26, 2026
… states

- Add src/categoryMeta.ts as the single source of truth mapping each
  server category to an accent color (4.5:1 contrast on white) and a
  Feather icon; ServerCards consumes it instead of inline icon maps.
- Color-code server cards by category: tinted icon chip, colored
  category label, and a category-colored top hairline revealed on
  hover, with lift + shadow and prefers-reduced-motion support.
- Support ?category= / ?workflow= URL params to pre-filter the catalog
  and add a "Clear filters" button.
- Introduce AWS brand typography (Public Sans + IBM Plex Mono via
  Google Fonts) and design tokens in custom.css: Squid Ink headings,
  Cloudscape action blue primary, neutral ink ramp, footer orange rule.
- Restyle the re:Invent callout on the intro page to match.
@jimmieego
jimmieego force-pushed the docs/docusaurus-catalog-retheme branch from 1f6468e to 022c7fe Compare July 26, 2026 17:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: To triage

Development

Successfully merging this pull request may close these issues.

1 participant