Repository navigation
Update docs to latest branding - #3077
Open
yashovardhan wants to merge 9 commits into
Open
yashovardhan wants to merge 9 commits into
yashovardhan wants to merge 9 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The default, Quickstart, and Tutorials share images still carried the "MetaMask Developer" layout, and Quickstart and Tutorials used the old outlined fox and stacked wordmark. Rebuild all three on the grid metamask.io uses for its own og:image cards (1200x630): a two-line Grotzec Condensed headline at 150px cap height, the MetaMask wordmark bottom left, and the fox bottom right, in black on white as on metamask.io/developer. Filenames are unchanged, so no page references move. Update the og:image:alt and twitter:image:alt text to describe the new cards instead of "MetaMask Developer Documentation". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The 98 banners that Embedded Wallets pages use as their share image still had the old stacked "Meta/Mask" wordmark, the Web3Auth mark, and the old blue-purple gradient. Rebuild them at 1200x630 on the same template as the docs social cards: a two-line "Embedded Wallets" Grotzec headline, the MetaMask wordmark bottom left, and the chain or provider mark in the fox slot bottom right. The Web3Auth mark is dropped, since the headline now names the product. There is no source artwork for most marks, so each is cropped from its old banner at the template's disc positions, trimmed past the old rim and drop shadow, and upscaled. Banners that paired a platform with a provider (for example iOS and Auth0) keep both marks side by side; multichain keeps its four chain marks in a 2x2 grid. Six banners whose disc sat off the old template (algorand, fhenix, hedera, kinto, morph, xdc) are cropped at their measured positions. Filenames are unchanged, so no page references move. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Developers sharing these pages are looking for a specific integration, so the chain, platform, or login provider should be the first thing they read. Make the tech name the Grotzec headline (150px cap height, shrunk to fit for the four longest names, such as "Android + Firebase") and move "Embedded Wallets" to a small Inter label above it. Names follow the docs page titles, written in each project's own casing (Astar zkEVM, ZetaChain, iOS + Auth0). Marks, wordmark, and filenames are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Rebuild every share image (site default, Quickstart, Tutorials index, 13 tutorials, 98 Embedded Wallets chains and providers, plus five new product-section cards) in the docs' own hero style: the #242628 charcoal band, the hero line art from static/img/shapes/hero/shape.svg on the right, the section name in #B9F302 Inter, a white Grotzec headline kept in the left column clear of the art, and the white MetaMask wordmark. Chain and provider marks keep their discs, ringed in charcoal over the lines. Lines break only at spaces, so "ERC-8004" and "chain-agnostic" stay whole and "+" stays with the word before it. Tutorial pages were sharing metamaskog.jpg instead of their own banner: the swizzled MDXPage replaced the original, which is what emits the front matter image as og:image. Emit it again with PageMetadata. Docs pages without an image now fall back to their product section's card instead of the site-wide one, via a DocItem/Metadata swizzle that reads the section from the permalink (after stripping baseUrl, which staging builds set through DEST). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 Embedded Wallets pages set `image: 'img/metamaskog.jpg'` in front matter, and the Snaps and Embedded Wallets landing pages hard-code og:image, twitter:image, and itemProp image tags to the same file, so they kept the site-wide card instead of their section's banner. Point them at img/banners/embedded-wallets.png and img/banners/snaps.png, and correct the declared og:image:type to image/png. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Typography: the docs used the same Grotzec Condensed and Inter files as metamask.io but set them differently, so text read slightly off. - Track text at -0.02em as metamask.io does. Applied per element at zero specificity (an em value set on body would be inherited as body's pixel size), so component rules still win; code stays untracked. - Set page-content h1-h3 in Grotzec Condensed with line-height 1, one step up the type scale since the face is condensed (55/38/30px on desktop). h4-h6 and component headings such as cards keep Inter. Tutorial cards: the image box was a fixed 200px tall with object-fit cover, sized for the old 2.17:1 banners, so the 1200x630 banners lost their top and bottom edges. Size the box with aspect-ratio 1200/630. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Reviewed home, tutorials, doc pages, Embedded Wallets, Quickstart, navigation, and 404 at 360-1920px in light and dark, against metamask.io. Fixes: Layout - Tutorials: filters and cards sat on their own margins (5% / 8px), so their left edge drifted from the hero title at every width. Put them in the same container > grid > centre column as the home sections. - Hero: start on column 1 at tablet (was column 2, nudged -1.6rem), so it lines up with the content below it. - Home cards: text ran under the corner art; reserve the art's width for title and description, and go three-up only from 1440px. - Quickstart cards: same art overlap; same fix. - Tutorial pages: left-align the title block with the article and set the title in Grotzec like doc titles. - Example cards: equal-width, equal-height grid instead of a wrapping flex row with percentage widths. - Tutorials and other pages: fixed-width iframes (YouTube's 560px) widened the phone layout to 576px; keep them inside the column at 16:9. Theme and contrast - Dark page background is brand black #0A0A0A (was slate #393D46), with charcoal #242628 for raised surfaces. - Light-mode text under WCAG AA: SDK card links (purple on white), the Products menu's selected item and the Quickstart Preview button (white on purple), tag pills, select placeholders and arrows, input placeholders, code-tab labels, code comments, and the tutorial byline in dark. - Badge and Input colours mapped to the brand palette. - Quickstart dark: notes and code blocks recess to black inside the step card instead of matching it. Components - 404: branded Grotzec heading, useful copy, and pill links to the main sections, replacing the Docusaurus boilerplate. - Tables inside admonitions scroll instead of being clipped. - Mobile h2/h3 step 30/24px (were 24/22px, hard to tell apart). Brand details - Buttons are no longer uppercase (metamask.io uses normal case). - Navbar search is a brand-neutral pill; navbar links are brand black. - Active sidebar link gets a 2px primary rule matching the TOC rail. - Home card fill is the neutral #F5F5F5 (was blue-grey #E9EDF6). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updates the docs to latest branding. Removes any developer branding since we are switching to a common branding across.