About Minecraft DESIGN.md
Curated by Dov AzencotUpdated Source minecraft.net
- Gaming & Entertainment
Minecraft.net is what a gaming brand looks like when it refuses to borrow cinema's typographic vocabulary. Where PlayStation runs editorial light-weight display sans, where Xbox commits to angular geometric type, Minecraft picks a literal pixel font — MinecraftTenv2, a chunky bitmap face whose letterforms echo the game's voxel blocks. The display sets at 85px with lineHeight 0.85 and negative letter-spacing, so the blocks interlock rather than separate. Combined with sharp 0px corners on every surface, the chrome reads as continuous with the game world, not as marketing above it.
The system also carries an unusual feature for a gaming brand: per-product color territory. Minecraft Vanilla owns the iconic grass-green ramp (`#6cc349` → `#3c8527` in six steps under `--mc-vanilla-green-*`), Minecraft Dungeons owns an orange/red ramp (`#ffc42b` headlines, deep reds for CTAs), Minecraft Marketplace owns a gold ramp (`#fff27a`), and Legends + Education each have their own. Every sub-brand inherits the structural chrome but paints its own voltage. This DESIGN.md packages all six product palettes — 25 color tokens, 13 typography levels split across three custom typefaces (MinecraftTenv2, MinecraftSeven-v2, Noto Sans), the 4-step radius scale that's mostly just 0px, an 8-step spacing rhythm, and 22 component definitions covering buttons, game tiles, navigation, and the dark-canvas-with-bright-tile composition that paces every page.
Feed the file to Claude, Cursor, or Copilot and the agent reproduces the blocky-chrome voice — pixel-font headlines, sharp green CTAs, dark canvas, white game tiles — rather than a generic gaming theme. Or use it as a reference for any product where the chrome should feel continuous with the game world rather than positioned above it.
What makes it distinct
- Per-product color territoryVanilla green #6cc349 for Minecraft, Dungeons orange #ffc42b for the spinoff, Marketplace gold #fff27a for add-ons; every Mojang sub-brand gets its own 4-6 step ramp under namespaced CSS vars
- Sharp 0px corners on every component including inputsthe voxel aesthetic enforced typographically rather than illustrated
- Pixel-font display at 85px / lineHeight 0.85MinecraftTenv2 chunks interlock with deliberately tight leading, the brand's most distinctive typographic move
- Three-face stackMinecraftTenv2 for hero displays, MinecraftSeven-v2 uppercase for eyebrow labels, Noto Sans 400/700 for body and CTAs
- Dark #313131 canvas with white-tile game cardsthe page reads as a curated games library, not a marketing site
Live at minecraft.net
A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.
minecraft.netExplore Minecraft
Pick what you want to see — mockups, colors, typography, layout, or the full component list.
Surface
Page and card backgrounds.
Semantic
Status, errors, success, inline links.
Other
Specialty colors.
Minecraft design system FAQ
Common questions about Minecraft's tokens, components, and how to use this DESIGN.md in your project.
Related reading
Specs, directories, and component libraries that pair with this design system.
Use Minecraft in your project
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.