---
version: alpha
name: "Minecraft"
description: "Minecraft turns its game world into a layered storefront: charcoal navigation and content bands, square grass-green actions, yellow marketplace rewards, white block-like headlines, and edge-to-edge art for games, updates, skin packs, and community stories."
colors:
  bg: "#171615"
  bg-header: "#262423"
  surface: "#3d3938"
  surface-deep: "#111111"
  text: "#ffffff"
  text-muted: "#c8c5c3"
  text-dark: "#262423"
  brand: "#3c8527"
  brand-bright: "#6cc349"
  accent: "#ffc42b"
  accent-orange: "#ffa41f"
  border: "#56514f"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Noto Sans"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Noto Sans"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "0px"
  card: "0px"
  pill: "0px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Minecraft is dark, tactile, and scene-led. Charcoal bands frame colorful world art, while square green and yellow actions feel like controls built from the same blocks as the game.

## Colors

Use `#171615` and `#262423` as layered backgrounds. Grass green drives core purchase actions; yellow and orange identify marketplace rewards, pre-orders, and temporary promotions.

## Typography

Use heavy Noto Sans or a compatible blocky display treatment for major game titles. Body copy remains a clean sans so product details and ratings stay readable.

## Layout

Alternate full-width dark bands and game-art scenes. Keep the current campaign first, followed by game discovery, marketplace offers, updates, and community content.

Crop key art around the main character or game object, not the center by default. Stack marketplace cards without shrinking labels, ratings, or action targets.

## Elevation & Depth

Create depth with stacked dark tones, textured separators, and overlapping key art. Do not use soft SaaS shadows or translucent glass.

## Shapes

Radius is effectively zero. Preserve square corners on buttons, panels, tags, image frames, and cards to maintain the constructed world language.

## Components

Buttons are square, bold, and high contrast. Game tiles use edge-to-edge art with genre and player-mode metadata; marketplace cards add ratings, creator, and currency or free status.

Buttons can shift one or two pixels like physical blocks and darken quickly. Trailers and scene parallax need clear controls and static fallbacks under reduced motion.

Keep white text readable over art with solid panels or scrims. Marketplace ratings need text equivalents, and autoplay media must support pause and captions.

Use adventurous, active language: discover, build, brave, explore, play, and pre-order. Pair playful headlines with exact platform, player mode, price, and release information.

Dark is the default storefront frame. Individual game art can be bright or seasonal, but controls retain charcoal, green, and yellow roles.

The web system directly extends Minecraft's voxel construction language. It rejects smooth, soft product UI in favor of square controls, layered materials, and vivid world imagery.

## Do's and Don'ts

Do use real game art, square geometry, and clear platform metadata. Do not round buttons, replace worlds with generic gradients, or let promotional art hide the purchase action.

Create a Minecraft-style game storefront with charcoal full-width bands, edge-to-edge voxel world art, heavy white headline, square grass-green pre-order button, yellow marketplace action, and block-built cards showing genre, player mode, ratings, and price.