Minecraft Design System

Overview

Minecraft.net runs on voxel-as-chrome — every UI surface mirrors the game's cubic-block world. Sharp 0px corners on every button, card, input, and modal. Pixel-font display at 85px with lineHeight 0.85 so the chunky letterforms interlock rather than separate. A dark #313131 canvas plays host to brightly-colored game tiles, each carrying its product's own palette. Where PlayStation borrows cinema's editorial typography and where Xbox commits to angular geometric display sans, Minecraft refuses cinema entirely — the chrome reads as continuous with the game world, not as marketing above it.

The system's second distinctive feature is per-product color territory. Each Mojang product owns its own CSS-variable-namespaced ramp on :root: --mc-vanilla-green-* for the main game (6 steps from #a0e081 to #2a641c), --mc-dungeons-orange-* for the dungeon-crawler spinoff (#ffc42b and warmer reds), --mc-marketplace-gold-* for add-ons (#fff27a), plus Legends and Education ramps. Where most multi-product brands lean on a single color voltage that all sub-brands share, Mojang gives each game its own chromatic identity. The structural chrome (neutrals, surfaces, typography) is shared; the voltage is sub-brand-specific.

The third move is the three-face typographic stack. MinecraftTenv2 (the chunky pixel font) handles 85px hero displays. MinecraftSeven-v2 (a tighter pixel face) handles uppercase eyebrow labels at 14-20px with arcade-game letter-spacing — they look like 80s game-cabinet UI text. Noto Sans carries everything else: body at 14-16px, h3 headings at weight 700, CTA buttons at weight 800 uppercase. The pixel faces are the brand voice; Noto is the workhorse that keeps the chrome readable on long-form pages.

Colors

The system declares 25+ tokens organised into product territories. Each product owns a 4-6 step ramp; structural neutrals are shared.

Minecraft Vanilla — the main game's voltage

• Vanilla Green 3 (#6cc349) — frequency 309. Used as text (157), border (152), background (0). The brand's load-bearing voltage: every CTA accent, every grass-green link, every active state. Mapped as --mc-vanilla-green-3. The most-used hex on the entire site by 2× the runner-up.
• Vanilla Green 5 (#3c8527) — frequency 3. The primary CTA button fill. Darker than the accent green for contrast against white text. --mc-vanilla-green-5.
• Vanilla Green 1 (#a0e081) — frequency 40. Bright tint, used for hover states and decorative highlights. --mc-core-green-1.
• Vanilla Green 2 (#86d562) — --mc-core-green-2. Secondary tint.
• Vanilla Green 4 (#52a535) — --mc-vanilla-green-4. Mid-tone for secondary surfaces.
• Vanilla Green 6 (#2a641c) — --mc-vanilla-green-6. Deepest green, for high-contrast text on lighter green fills.

Minecraft Dungeons, Marketplace, Legends — sub-brand voltages

• Dungeons Orange (#ffc42b) — frequency 58. The gold-orange that carries Dungeons headlines, "Don't Miss This" callouts, and dungeon-crawler product tiles. --mc-dungeons-orange-3.
• Marketplace Gold (#fff27a) — frequency 3. Brighter yellow for Marketplace add-on tiles. --mc-marketplace-gold-1.

Structural neutrals — shared across all products

• Off-white (#ffffff) — frequency 790. Game-card backgrounds, primary text-on-dark. The brightest pixel on every viewport. --mc-core-off-white.
• Cold-grey-6 / Canvas (#313131) — frequency 513. The dark page canvas. --mc-vanilla-coldgrey-6.
• Rich black (#000000) — frequency 97. Full-bleed hero bands and footer. --mc-core-rich-black.
• Off-black (#171615) — frequency 39. Mid-tone surface, slightly warmer than rich-black. --mc-core-off-black.
• Marketplace grey-6 (#1d1e1e) — frequency 36. Card backgrounds in the Marketplace section. --mc-marketplace-grey-6.
• Core grey-5 (#3d3938) — frequency 29. Mid-elevation surface. --mc-core-grey-5.
• Marketplace grey-2 (#d0c5c0) — frequency 74. Secondary body text on dark backgrounds. --mc-marketplace-grey-2.
• Vanilla grey-1 (#ede5e2) — frequency 56. Light surface tint and form-input text color. --mc-vanilla-grey-1.
• Core grey-3 (#aba09c) — frequency 15. Disabled-state text. --mc-core-grey-3.

Semantic — focus, warning

• Focus blue (#1157be) — --mc-default-focus. Browser focus-ring + form-input focused border.
• Warning red (#ff605e) — frequency 6. Error toasts and warning callouts. --mc-default-warning-2.

Typography

Three typefaces, each scoped to a strict role.

MinecraftTenv2 is the brand voice. It handles 85px hero displays ("Don't Miss This", section titles like "Discover Our Games") at weight 400 with lineHeight 0.85 and -1.275px letter-spacing. The tight leading is the typographic signature — pixel-font glyphs are already chunky, and the negative leading makes them interlock vertically. Substitute Press Start 2P (Google Fonts) for a free near-equivalent.

MinecraftSeven-v2 is the eyebrow voice. Used for uppercase section labels (16px / 0.96px tracking) and small all-caps labels (14px / 0.56px tracking) — the arcade-game letter-spacing is what gives the chrome its 80s console-cabinet feel. Substitute Press Start 2P or VT323.

Noto Sans is the workhorse. Body at 14-16px weight 400, h3 headings at 18px weight 700 with -0.27px tracking, CTA buttons at 18px weight 800 with 0.54px tracking. Noto's broad Unicode coverage handles the site's localized variants (/en-us, /ja-jp, /zh-hans) without font swap. Fallback stack: Helvetica Neue, Helvetica, Arial, sans-serif.

The 800-weight CTA tracking + uppercase casing is the bridge between Noto Sans's neutrality and the pixel fonts' chunky voice — the buttons read as game-UI elements even though they're set in a humanist sans.

Layout

The system runs on a 4px scale: 4, 8, 12, 16, 24, 32, 48, 64. The 16px value is the dominant gutter (64 uses); the 4px micro-step appears on tight pixel-aligned layouts (51 uses).

Pages alternate dark and lighter dark surfaces section-by-section: hero photography bands sit on #000000 rich-black, content sections on #313131 canvas-dark, marketplace strips on #1d1e1e slightly-warmer surface-dark. The container caps at a wide 1440px content grid; game tiles use a strict 4-up horizontal row that collapses to 2-up at smaller breakpoints.

Elevation & Depth

The system uses minimal box-shadows. Depth comes from surface-color stratification — every section sits on its own grade of dark (#000000 → #171615 → #1d1e1e → #313131 → #3d3938), and the layer changes signal section breaks. The only shadow that consistently appears is a faint 0px 0px 3px below game-card thumbnails to lift them off the canvas. Bright-colored game tiles (Vanilla green, Dungeons orange, Marketplace gold) provide the page's color-pop depth signal — the eye reads color contrast as elevation more than shadow.

Shapes

0px corners on every component. Buttons, cards, inputs, modals, the search field, the nav strip — every interactive surface renders at borderRadius: 0. The voxel aesthetic enforced typographically. The only exception is a 3px radius on certain slider knobs and pixel-art-style decorative elements, used sparingly.

Combined with 2px borders on primary CTAs (#262423 near-black border outside #3c8527 vanilla-green-5 fill), the buttons read as inset blocks rather than rounded chrome — they feel like they could be placed into Minecraft's inventory grid.

Components

The component vocabulary covers the entire marketing surface. Three button variants (primary green-fill-with-dark-border, secondary outline-on-dark, tertiary transparent-green-text) cover every CTA. Three card variants distinguish white game tiles (card-game), dark news tiles (card-news), and marketplace add-on tiles (card-marketplace) — all 0px radius, 0px padding (image-bleed-to-edge). Two hero bands alternate dark-on-dark photography bands with the slightly-lighter canvas-dark sections.

Notable: the game tile variants are per-product (game-tile-minecraft carries vanilla-green-5 fill, game-tile-dungeons carries dungeons-orange-3). When composing a new game card, pull the tile variant matching that product's territory. The pixel eyebrow label (pixel-eyebrow) uses MinecraftSeven-v2 at the section-label scale — used for "DISCOVER OUR GAMES", "DON'T MISS THIS", "MARKETPLACE ADD-ONS", "GAMEPLAY TRAILERS", "NEWEST NEWS".

Do's and Don'ts

• Do hold every component at rounded: 0px — the sharp-corner doctrine is the brand's most enforceable rule. A single 8px-radius button breaks the entire voxel illusion.
• Don't soften pixel-font headlines with fontSmoothing: antialiased. The pixel-font is supposed to read as crunchy, blocky, low-resolution. Anti-aliasing it makes it look like a stretched Comic Sans.
• Do use the per-product color territory when rendering a sub-brand. A Dungeons card with vanilla-green CTAs reads as a UI bug; use --mc-dungeons-orange-* ramp on dungeons-related surfaces.
• Don't mix product palettes within a single component. A button that uses Marketplace gold for fill and Vanilla green for border doesn't carry brand meaning — it reads as accidental.
• Do set heading lineHeight to 0.85-0.9 when using MinecraftTenv2. Wider leading separates the chunky blocks visually and breaks the interlocking glyph effect.
• Don't render body copy in MinecraftTenv2 or Seven. Pixel fonts are illegible at 14-16px running prose — Noto Sans handles body, the pixel faces handle display + eyebrow only.
• Do use the warm-grey ladder (#d0c5c0, #ede5e2, #aba09c) for secondary text on dark backgrounds — not pure 60% white. The warm-grey reads as part of the system rather than as transparent overlay.
• Don't use border-radius: 9999px pills anywhere. Pill geometry is the antithesis of voxel chrome; even circular avatars on the news cards render as 0-radius squares.

Known Gaps

Several things aren't captured. MinecraftTenv2 and MinecraftSeven-v2 are proprietary Mojang typefaces with no public web fonts — Press Start 2P or VT323 substitute reasonably but lose brand exactness. Motion (the MINECRAFT LIVE marquee animation, the game-tile pop-hover transitions, the pixel-card cycle reveals) is not captured. The full Minecraft Legends and Education color ramps are only partially extracted — those product surfaces aren't fully reachable from the homepage. Form validation beyond focus, the in-game UI chrome (inventory grids, hot-bar, crafting tables, achievement toasts), and the localized variants' typographic adjustments (Japanese/Chinese pixel-font fallbacks) are out of scope. The Mojang Studios sub-brand identity and the Marketplace creator-spotlight layouts aren't covered here either — this captures the consumer-facing minecraft.net marketing surface specifically.