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
@github-actions

Copy link
Copy Markdown
Contributor

This pull request is now marked as stale because it hasn't seen activity for a while. Add a comment or it will be closed soon. If you wish to exclude this issue from being marked as stale, add the "backlog" label.

@github-actions github-actions Bot added the stale These are items that have been around for a long time without progress label Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stale These are items that have been around for a long time without progress

Projects

Status: To triage

Development

Successfully merging this pull request may close these issues.

1 participant