--- version: alpha name: "Minecraft" description: "Blocky pixel-grid canvas in deep charcoal and grass-block green, Minecraft Seven typeface, earthy material palette." colors: # Canvas background: "#1d1d1d" # deep charcoal — the near-dark default site canvas surface: "#2e2e2e" # panel surface, card fills surface-elevated: "#3c3c3c" # modal, dropdown surface surface-light: "#f2f0e8" # cream/parchment — used in editorial / light-mode sections surface-moss: "#1a2a1a" # deep green panel used beneath hero # Ink ink: "#ffffff" # primary text on dark canvas ink-muted: "#c8c8c8" # secondary body text, captions ink-dark: "#1c1c1c" # primary text on parchment / light surfaces on-background: "#ffffff" # Brand — Grass Block Palette primary: "#62b33b" # grass-block green — primary CTAs, nav accents on-primary: "#ffffff" primary-dark: "#3c7a24" # darker grass — hover state primary-container: "#2a5018" # deep-green badge/tag fill # Dirt & Earth accents accent-earth: "#8b6040" # dirt-brown — secondary accent, soil-tone UI beats /* estimated */ accent-stone: "#6e6e6e" # stone gray — tertiary dividers, ghost button stroke /* estimated */ accent-sand: "#e8d07a" # sand/gold — warning callouts, highlight badges /* estimated */ # Interactive states focus-ring: "#62b33b" # grass green focus ring text-hover: "#82d354" # lighter grass on hover links /* was rgba approximated */ link: "#62b33b" # Semantic success: "#62b33b" # same as primary — green IS success in Minecraft warning: "#e8d07a" # sand-gold warning error: "#cc3333" # lava red info: "#5588cc" # sky-blue info tone /* estimated */ # Borders border: "#444444" # subtle dark border between panels border-light: "#c0b89a" # parchment-mode border /* estimated */ # Shadow tints shadow-soft: "#000000" # pure-black shadow — pixel world has hard shadows typography: display-hero: fontFamily: "Minecraft Seven, 'Minecraft', 'Courier New', monospace" # the pixel bitmap font fontSize: 72px fontWeight: 400 lineHeight: 1.0 letterSpacing: 2px # pixel fonts gain clarity with positive tracking display: fontFamily: "Minecraft Seven, 'Minecraft', 'Courier New', monospace" fontSize: 48px fontWeight: 400 lineHeight: 1.05 letterSpacing: 1px heading-section: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" # UI prose headings fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.25px heading-sub: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px body: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px nav-link: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.5px button-ui: fontFamily: "Minecraft Seven, 'Minecraft', 'Courier New', monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 1px caption: fontFamily: "Noto Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px # the dominant radius — blocks don't have curves sm: 2px # micro rounding on very small interactive chips only md: 4px # subtle softening on input fields /* estimated */ pill: 9999px # tag pills only components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-primary-active: backgroundColor: "{colors.primary-container}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px card-hover: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-earth: backgroundColor: "{colors.accent-earth}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 8px nav-item: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 8px 16px nav-item-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 8px 16px --- # Minecraft Design System ## Overview Minecraft's website translates the game's foundational promise — a world made of blocks, where every surface is a raw material — into digital chrome. The canvas opens on a deep charcoal (`{colors.background}`) that reads less like a designed dark mode and more like the rendered darkness of an underground cave system. Against this field, the grass-block green (`{colors.primary}`) does exactly what it does in the game: it signals life, the surface, the place you break through to. The brand is not trying to be sophisticated; it is trying to be instantly, globally, childishly recognized by anyone who has ever mined their first dirt block. The typographic system is deliberately split. Minecraft Seven — the pixel-grid bitmap font that the game's in-world HUD has used since Alpha 1.0 — handles all branded display moments: hero headlines, button labels, game-edition callouts. It is rendered at sizes where its 8×8 pixel cell structure is visible and intentional, not cleaned up. Beneath that, Noto Sans carries body copy, navigation, and prose sections with a utilitarian openness that honors the game's global audience (Minecraft has been translated into over 30 languages; Noto's multilingual coverage is its whole reason for existing here). The two fonts never fight — one is a visual artifact from the game world, one is infrastructure. The palette is an earth-material system rather than a brand-color system. Charcoal is stone. Green is grass. `{colors.accent-earth}` is dirt. `{colors.accent-sand}` is sand and gold. `{colors.error}` is lava. These are not arbitrary brand decisions; they are the Minecraft biome hierarchy — the same chromatic logic a player uses to navigate a survival world — imported into the interface wholesale. Every UI decision reinforces the same material vocabulary: sharp `{rounded.none}` corners everywhere (blocks don't have bevels), hard drop shadows (pixel-world shadows are pure-black and directional), and a layout that snaps to visible grid increments. **Key Characteristics:** - Deep charcoal canvas (`{colors.background}`) — cave darkness as the page ground plane - Grass-block green (`{colors.primary}`) as the singular brand accent and primary CTA color - Minecraft Seven pixel bitmap font for all branded display and button text — 8×8 grid, positive letter-spacing - Noto Sans for all UI prose, navigation, and body copy — broad language coverage, utilitarian clarity - Zero border-radius on every interactive element — `{rounded.none}` as the system's defining shape rule - Earth-material palette: charcoal (stone), green (grass), brown (dirt), gold (sand), red (lava) - Blocky grid-snap layout — spacing scales in 8px and 16px increments, no odd values - Hard pure-black drop shadows — `box-shadow: 4px 4px 0 #000` pixel-accurate, no blur - Game-edition cards use distinct environmental photography (biome shots, world screenshots) full-bleed - Navigation is dark and compact, icon-heavy — Creeper face favicon and brand logomark anchor the left - Positive letter-spacing (+1–2px) on all pixel-font text so cells read at screen resolution - Earthy secondary accents (`{colors.accent-earth}`, `{colors.accent-sand}`) used for badges, pricing, and callout states ## Colors ### Canvas - **Cave Charcoal** (`{colors.background}`): The primary page background — close to `#1d1d1d`, the darkest stone-gray before absolute black. Not pure black; it's a Minecraft cave at render distance 8. All page chrome sits on this surface. - **Panel Surface** (`{colors.surface}`): A step above the canvas — card backgrounds, sidebar fills, content modules. The equivalent of a wooden plank against stone. - **Elevated Surface** (`{colors.surface-elevated}`): Modal surfaces, dropdown backgrounds, secondary card states. Iron block against wood. - **Parchment** (`{colors.surface-light}`): Cream/parchment tone used in editorial content zones, article bodies, and certain marketing sections that want a warmer, more booklike feel. ### Brand Accent — Grass Block - **Grass Green** (`{colors.primary}`): The signature. Primary CTAs ("Download Now", "Buy Minecraft"), active navigation states, focus rings, link colors, and any UI element that signals "do this." Exact match to the classic Minecraft grass-block top-face color. - **Grass Dark** (`{colors.primary-dark}`): Hover state for primary buttons — deepened by about 15%, stays within the green family. - **Deep Canopy** (`{colors.primary-container}`): Near-black green for badge fills, label backgrounds, and the surface inside chips where green text sits. ### Earth Accents - **Dirt Brown** (`{colors.accent-earth}`): The warm secondary accent. Used on secondary badges, pricing callouts, secondary section backgrounds. Matches the game's dirt block side texture. - **Stone Gray** (`{colors.accent-stone}`): Tertiary dividers, ghost button strokes, disabled states. The Minecraft world's most common material, here serving as mid-tone neutral. - **Sand/Gold** (`{colors.accent-sand}`): Warning states, premium pricing callouts, "new" badges, featured-edition labels. Gold ore frequency in the game maps to its rarity here. ### Text - **Pixel White** (`{colors.ink}`): All primary text on dark surfaces — pure `#ffffff` for maximum contrast against the charcoal canvas. - **Muted White** (`{colors.ink-muted}`): Secondary body text, captions, metadata labels. Equivalent to a pale gray pixel. - **Dark Ink** (`{colors.ink-dark}`): Primary text on parchment and light editorial surfaces. ### Semantic - **Lava Red** (`{colors.error}`): Error states, danger alerts, destructive-action confirmations. Lava is the most dangerous material in the game — same threat register here. - **Sky Blue** (`{colors.info}`): Informational callouts, tooltip backgrounds. Minecraft sky. - **Sand Warning** (`{colors.warning}`): Matches `{colors.accent-sand}` — warnings share the gold/sand register. ### Borders & Shadows - **Panel Border** (`{colors.border}`): Low-contrast border between adjacent charcoal panels — subtle structure without harsh lines. - **Pixel Shadow** (`{colors.shadow-soft}`): Pure `#000000` used for the hard 4px offset shadows that mimic Minecraft's in-game block shadows. ## Typography ### Font Family - **Brand Display**: `Minecraft Seven` — the official pixel bitmap typeface extracted from the game's HUD. Monospace, 8×8 grid cell, uppercase-dominant. Available as a web font from Minecraft's CDN and as a free download from font sites. Closest web-safe substitute: `Courier New` bold at carefully sized increments. - **UI Prose**: `Noto Sans` via Google Fonts — humanist sans-serif with coverage for 500+ languages. Clean, neutral, optimized for body reading. Closest substitute: `Inter` or `Roboto`. - **OpenType Features**: Pixel font relies on no OT features — the character comes purely from cell structure. Noto Sans uses standard ligatures and kern pairs. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Homepage "Minecraft" wordmark treatments, edition launch banners — pixel font at max visible grid scale | | `display` | Edition names ("Bedrock Edition", "Java & Bedrock Edition"), major section title callouts | | `heading-section` | "Features", "Latest News", "Buy Now" section labels — Noto Sans, bold, clean | | `heading-sub` | Card titles, modal headings, sub-section labels | | `body-large` | Feature descriptions, editorial intro paragraphs | | `body` | Standard reading text: article body, store descriptions, FAQ answers | | `nav-link` | Navigation items, footer links, breadcrumbs | | `button-ui` | All button labels — pixel font, so CTAs are visually continuous with the HUD register | | `caption` | Metadata, legal copy, image credits | ### Principles - **Pixel font is a portal**: Minecraft Seven at `{typography.display-hero}` isn't nostalgia — it's an actual interface artifact from the game world. Every time a player reads "Download Minecraft" in this font, they're looking at the same letterforms that told them their inventory was full. That continuity is worth the readability trade-off at display sizes. - **Positive tracking on pixel font**: Unlike grotesks that gain from tightening, `Minecraft Seven` at screen resolution needs `1–2px` positive letter-spacing so individual pixel cells remain visually distinct rather than blurring into connected glyphs. - **Noto as multilingual infrastructure**: The game's global player base includes many languages where Latin grotesks degrade or fail entirely. Noto Sans is not an aesthetic choice — it is a functional one, covering Simplified Chinese, Japanese, Korean, Arabic, Hindi, and 490+ more scripts without font fallback gaps. - **Weight restraint in prose**: Noto Sans never goes above weight 700 in the UI. Heavy weights on a dark canvas reduce contrast rather than adding presence. The pixel font already carries the visual weight; prose type can stay measured. - **No italic in the system**: The pixel font has no italic variant. Prose uses italic only in editorial body copy (block quotes, emphasis), never in chrome or navigation. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. The grid is a block grid — all spacing values are multiples of 8px (`8, 16, 24, 32, 48, 64, 96`). The 4px value exists only for micro-details (inner badge padding, icon-to-label gaps). No intermediate values appear; a 13px margin would be as incongruous as a 13-pixel-tall block in the game engine. ### Grid & Container - Max content width: 1280px centered; full-bleed hero and game-art sections extend edge-to-edge - Hero: full-viewport-width photography of game worlds — biome shots, builds, promotional key art - Feature grid: typically 3-column on desktop, 2 on tablet, 1 on mobile — each cell a game-edition or feature block - News/article grid: 3-column card grid desktop, 2 tablet, 1 mobile - Store: product cards in a 4-column grid desktop — Minecraft Java, Bedrock, Legends, Dungeons - Gutters: 16px between cards (2 grid units), 32–64px between page sections ### Whitespace Philosophy - **Darkness as margin**: The charcoal canvas absorbs padding and makes even tight layouts feel spacious. Blocks of content float against the cave backdrop with natural visual separation. - **Grid rigidity over breathing room**: The system doesn't use whitespace generously — it uses it exactly. 16px is 2 blocks, 32px is 4 blocks. Breathing room is architectural, not decorative. - **Full-bleed game art earns its density**: Large photography panels fill the viewport and establish visual richness. Text and chrome elements are minimal alongside game worlds; the art does the luxury work. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Canvas backgrounds, in-page section fills, inline text | | Block Rest (Level 1) | `4px 4px 0 #000000` | Primary CTAs at rest — the signature pixel-hard shadow | | Block Hover (Level 2) | `6px 6px 0 #000000` | Primary CTA hover — shadow offset increases, button appears to rise | | Card Lift (Level 3) | `4px 4px 0 rgba(0,0,0,0.5)` | Content cards on hover, `box-shadow` approximated as `#000000` at rest | | Modal (Level 4) | `8px 8px 0 #000000` | Modal overlays, dropdown panels — maximum hard-offset presence | | Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard focus on buttons and inputs | **Shadow Philosophy**: Minecraft uses exclusively **hard offset shadows** — no blur radius, no spread, pure directional `x y 0 #000`. This is the game's own lighting model: in Minecraft, a block either receives full light or drops into hard shadow; there is no ambient occlusion softness. The 4px offset on all interactive elements creates the same tactile language as the brick-press on Lego — a physical click-in feel — except instead of suggesting plastic, it suggests the way a block looks when placed one unit to the right of a light source. The system refuses soft Gaussian blur because soft shadows imply a rendered 3D world, and Minecraft's world is voxel geometry. Hard edges only. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | All primary interactive elements — buttons, cards, inputs, nav, modals | | `sm` | 2px | Micro-rounding on the smallest chips when strict zero reads as too harsh at tiny sizes | | `md` | 4px | Input fields where platform conventions slightly soften the edge | | `pill` | 9999px | Category tags, genre badges, and small reading labels only | The system is **binary at the macro level**: everything is `{rounded.none}`. Blocks are square. The only exception is small text labels where zero-radius at 13px creates an optical sharpness that tips from bold to harsh. The pill (`{rounded.pill}`) appears exclusively on small read-only tags, never on action buttons. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — Grass green (`{colors.primary}`) fill, white pixel-font label, zero radius, hard 4px black drop shadow. The web equivalent of clicking a Minecraft UI button: blocky, green, satisfying. Hover deepens to `{colors.primary-dark}` and the shadow offset increases to 6px. - **`button-secondary`** — Dark panel fill (`{colors.surface}`), white pixel-font label, zero radius. Used for secondary actions alongside a primary green CTA. - **`button-ghost`** — Canvas background, white text, `1px solid {colors.border}` outline stroke. Used for tertiary options and destructive confirmations where color would be misleading. ### Cards Game-edition cards are the system's flagship pattern: full-bleed screenshot or promotional art as the card background, a semi-transparent panel at the bottom carrying the edition name in `{typography.display}` pixel font, pricing in `{typography.heading-sub}`, and a primary green CTA. Zero radius on all card edges. Shadow of `4px 4px 0 {colors.shadow-soft}` lifts the card off the canvas. News and article cards use a thumbnail + metadata + excerpt pattern on a `{colors.surface}` background, with the title in Noto Sans `{typography.heading-sub}`, a category badge in `{colors.primary-container}`, and a `1px solid {colors.border}` edge. ### Inputs Form fields use `{colors.surface}` backgrounds with `{rounded.md}` (4px — the subtle exception in this otherwise zero-radius system). Focus state applies a `3px solid {colors.focus-ring}` outline in grass green. Placeholder text renders in `{colors.ink-muted}`. The pixel font is never used in inputs — Noto Sans maintains legibility for user-entered content. ### Badges / Tags - **Edition badges** (e.g., "NEW", "BEST SELLER"): `{colors.accent-sand}` fill, `{colors.ink-dark}` text, `{rounded.none}`, zero radius — these are block-like stamps. - **Category tags** on news cards: `{colors.primary-container}` fill, `{colors.primary}` green text, `{rounded.pill}` radius, `{typography.caption}` — the only fully-rounded element in the system. ### Navigation Compact horizontal nav on `{colors.background}`. The Minecraft logo (block face + wordmark) anchors the left. Navigation links use `{typography.nav-link}` in `{colors.ink}`, shifting to `{colors.primary}` on hover. CTAs ("Get Minecraft", account icon) right-aligned. On mobile, collapses to a hamburger menu that opens a full-screen dark drawer with stacked navigation items. ## Do's and Don'ts ### Do - Use `{rounded.none}` on all buttons, cards, modals, and inputs — the zero-radius block shape is non-negotiable - Set all display and button text in `Minecraft Seven` pixel font with `1–2px` positive letter-spacing - Apply the 4px hard-offset black drop shadow (`4px 4px 0 #000`) to every primary CTA at rest - Use `{colors.primary}` exclusively for primary CTAs and focus states — preserve its grass-block immediacy - Keep the earth-material palette coherent: charcoal for stone, green for grass, brown for dirt, gold for sand, red for lava - Snap every spacing value to the 8px block-grid — no intermediate values - Use full-bleed game world photography for hero and edition card backgrounds - Apply `{typography.button-ui}` (pixel font) to all button labels so every CTA references the in-game HUD register - Use `{colors.ink-muted}` for secondary metadata — high-contrast white text everywhere reads as claustrophobic on a dark canvas - Serve Noto Sans for all prose so multilingual users see consistent, intended typography ### Don't - Don't add border-radius larger than `{rounded.sm}` (2px) to any primary interactive element — rounded blocks are not Minecraft blocks - Don't use soft Gaussian blur shadows — the system is 4px hard-offset only, no `blur-radius` - Don't introduce the pixel font at sizes below 14px — below this threshold, `Minecraft Seven` degrades to unreadable noise - Don't use `{colors.primary}` for decorative fills or background panels — grass green marks action, not decoration - Don't put Noto Sans on buttons or display-level callouts — the pixel font is the brand voice at those sizes - Don't use the parchment surface (`{colors.surface-light}`) on dark-adjacent panels — it needs surrounding light sections to land correctly - Don't apply mid-range radius (6–12px) anywhere — the system is zero-radius except inputs (4px) and pills - Don't use multiple accent colors on the same card — pick either the earth-brown or the sand-gold accent, never both - Don't shrink the pixel font below its minimum legible size — preserve letter-spacing so cells remain distinct - Don't use atmospheric soft shadows on card backgrounds — the hard-offset treatment is the elevation language --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <360px | Single column, hero type 32–40px pixel font, stacked CTAs | | Mobile | 360–599px | Single column, hamburger nav, edition cards stack 1-up | | Tablet | 600–959px | 2-column card grid, nav links partially visible, hero type 40–56px | | Desktop | 960–1279px | 3-column card grid, full nav, hero type 56–72px, sidebar visible | | Large Desktop | ≥1280px | 4-column edition grid, max content 1280px, hero type 72px+ | ### Touch Targets - Primary CTAs: minimum 48px touch height (`12px 24px` padding on 16px pixel font) — comfortable for all ages including younger Minecraft players - Navigation items: 40px+ height with 16px horizontal padding - Edition cards: large tap targets by nature (full card is interactive) - Category tags: minimum 32px height on mobile ### Collapsing Strategy - **Navigation**: Full horizontal bar collapses to hamburger on tablet and below; full-screen dark drawer with stacked links and primary CTA at bottom - **Edition grid**: 4-column → 3-column → 2-column → 1-column; card art always full-width within the column - **Hero type**: Pixel font scales down from 72px → 48px → 40px → 32px — stays in `Minecraft Seven` at all breakpoints; never swapped to Noto Sans - **Section spacing**: 64–96px desktop gaps → 32–48px mobile; always multiples of 8px - **Feature grid**: 3-column desktop → 2-column tablet → 1-column mobile; feature icon scales proportionally ### Image Behavior - Game-world hero shots: full-bleed at all breakpoints using `object-fit: cover` — the world keeps its horizon - Edition card art: crops responsively to maintain the subject (game character, key art focal point) centered - No explicit art-direction breakpoints in base system — single image scales with focus kept center --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Primary Text: `{colors.ink}` - Secondary Text: `{colors.ink-muted}` - Brand Accent / CTA: `{colors.primary}` - CTA Hover: `{colors.primary-dark}` - Border: `{colors.border}` - Pixel Shadow: `{colors.shadow-soft}` (pure black, 4px hard offset) - Card Surface: `{colors.surface}` - Warning / Gold Badge: `{colors.accent-sand}` - Error / Lava: `{colors.error}` ### Example Component Prompts - "Create a primary button in the Minecraft style: background `{colors.primary}` (grass green), text `{colors.ink}` (white) in `Minecraft Seven` pixel font 16px with `1px` letter-spacing, `{rounded.none}` corners, `12px 24px` padding, and a hard `4px 4px 0 {colors.shadow-soft}` drop shadow. On hover, shift background to `{colors.primary-dark}` and increase shadow offset to `6px 6px 0 #000000`. On active, collapse shadow to 0 and shift the element 4px down." - "Design a game-edition card: full-bleed biome screenshot as background, 0px border-radius, `4px 4px 0 {colors.shadow-soft}` shadow. Bottom overlay: `{colors.surface}` at 90% opacity, `{typography.display}` Minecraft Seven font in `{colors.ink}` for edition name, `{typography.heading-sub}` Noto Sans for pricing, and a grass-green primary button below." - "Build a news article card: `{colors.surface}` background, `{rounded.none}` corners, `1px solid {colors.border}` outline. Thumbnail image full-width top. Below: category badge (`{colors.primary-container}` fill, `{colors.primary}` text, `{rounded.pill}` radius, `{typography.caption}` font, `4px 10px` padding). Title in `{typography.heading-sub}` Noto Sans Bold `{colors.ink}`. Two-line excerpt in `{typography.body}` `{colors.ink-muted}`. Hover: shadow increases to `4px 4px 0 {colors.shadow-soft}`." - "Create a navigation bar on `{colors.background}`: Minecraft block logo left-aligned at 32px. Nav links center: `{typography.nav-link}` Noto Sans `{colors.ink}`, default no underline, hover shifts text to `{colors.primary}`. Right: 'Get Minecraft' primary green button in pixel font. Entire nav sticky, 64px height on desktop, 56px on mobile." - "Design an edition badge stamp: `{colors.accent-sand}` background, `{colors.ink-dark}` text in Noto Sans 12px weight 700 uppercase, `{rounded.none}` corners, `4px 10px` padding. Position as an absolute overlay top-left of an edition card. No drop shadow — let the card's shadow carry the elevation." ### Iteration Guide 1. Start with `{colors.background}` (cave charcoal) as the full canvas. Set `color: {colors.ink}` globally for white-on-dark text. 2. Introduce `{colors.primary}` (grass green) on exactly one element per view: the primary CTA. Every other use dilutes the grass-block signal. 3. Set all display text and button labels in `Minecraft Seven` with `letter-spacing: 1–2px` to maintain pixel-cell legibility. Drop to Noto Sans for any body copy or input text. 4. Apply `4px 4px 0 {colors.shadow-soft}` to every interactive element at rest. Increase offset to 6px on hover. Collapse to 0 on active. Never add a blur radius. 5. Enforce `{rounded.none}` on buttons, cards, inputs, and modals. Reserve `{rounded.pill}` for small read-only tag labels only. 6. Earth-palette hierarchy: charcoal (stone) → green (grass) → brown (dirt) → gold (sand) → red (lava). Assign UI roles top-to-bottom in order of visual priority. 7. Snap every spacing value to the 8px grid. If you find yourself typing `13px`, round to `16px`. If you type `6px`, round to `8px`. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Minecraft. Brand names and trademarks belong to their respective owners.