---
title: "MekaVerse design system"
variant: extended
source: https://themekaverse.com/
captured_at: 2026-10-12
theme: dark
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/themekaverse-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MekaVerse · Design System

> A dark interface for a vivid mecha world

**Theme:** dark · **Industry:** gaming · **Source:** https://themekaverse.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

MekaVerse pairs a restrained dark interface with expansive, colorful world imagery. Sparse navigation and large, underlined headings let the artwork carry the experience.

## North star

Keep interface chrome quiet and let full-bleed MekaVerse scenes, framed by crisp white type, dominate the page.

## Overview

The page uses a near-black canvas (#151416) and black supporting bands to frame immersive, full-bleed fantasy game artwork. The measured interface palette stays deliberately quiet: white carries navigation and prominent headings, while gray tones appear in surfaces and fine outlines. The map and citadel imagery introduce greens, blue water, and vivid architectural color; these are media colors, not a separate interface accent system. Roobert provides the large, clean uppercase display voice, with underline strokes giving the hero title extra definition. GT America Mono Regular lends navigation and small supporting text a technical, collectible-world feel. Layout keeps controls near the top edge and places oversized left-aligned campaign titles over the imagery. Generous separation between media-led blocks and the spacious measured section rhythm make each scene feel like a destination rather than a conventional content card.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Void Black | `#000000` | `--color-void-black` | surface | Black section and footer bands; also used for the filled Discord CTA with white text. |
| Meka Charcoal | `#151416` | `--color-meka-charcoal` | brand | Measured page canvas and dark navigation or section background behind the immersive media. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary navigation, hero lettering, and high-contrast button text. |
| Alloy Gray | `#b8bab9` | `--color-alloy-gray` | surface | Measured light-gray section surface; secondary to the dark canvas and scene artwork. |
| Pale Steel | `#e2e2e2` | `--color-pale-steel` | semantic | Fine outlines on navigation, footer, and wallet button elements. |
| Graphite Edge | `#2d2c2e` | `--color-graphite-edge` | neutral | Subtle borders around the outlined wallet control against the dark interface. |
| Smoked Slate | `#383739` | `--color-smoked-slate` | surface | Quiet section detail and divider-like borders; not a prominent accent. |

### Semantic aliases

`--color-canvas` → `#151416` (Meka Charcoal) · `--color-surface` → `#000000` (Void Black) · `--color-surface-2` → `#b8bab9` (Alloy Gray) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#000000` (Void Black) · `--color-border` → `#e2e2e2` (Pale Steel)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#151416` | 18.36:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#b8bab9` | 1.95:1 | fail |
| `#000000` | `#151416` | 1.14:1 | fail |
| `#000000` | `#b8bab9` | 10.76:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America Mono Regular | `--font-mono` | webfont | 400 | Navigation, body copy, captions, and code-like utility text. | Space Mono |
| Roobert | `--font-display` | webfont | 400 | Display headings, page titles, and prominent action labels. | Inter |

- **GT America Mono Regular:** Regular weight; compact, technical text treatment with measured small-size roles.
- **Roobert:** Regular weight; display headlines use uppercase, while other heading roles remain in natural case.

### Type scale — Custom (ratio ≈ 2.582, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | 0 | uppercase | Roobert | Oversized uppercase campaign title over the hero artwork. |
| h1 | 30px | 400 | 1 | 0 | — | Roobert | Section or page heading, including destination names. |
| body | 12px | 400 | 1 | 0 | — | GT America Mono Regular | Compact supporting copy and interface text. |
| caption | 10px | 400 | 1.3 | -0.02em | — | GT America Mono Regular | Small secondary labels and image-related details. |
| nav | 12px | 400 | 1 | 0 | — | GT America Mono Regular | Top navigation links and wallet controls. |
| code | 12px | 400 | 1 | 0 | — | GT America Mono Regular | Technical or utility-style metadata where present. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 7, 15, 16, 17, 20, 25, 30, 35, 40, 85, 118, 125, 142 px.
- Section rhythm 142px · element gap 20px · card padding — · max content width 1300px.

The measured page uses a spacious rhythm, a 1300px maximum content width, and full-bleed media that can extend beyond text bounds. The first viewport places a slim navigation row over the scene, then anchors the campaign heading to the left. Large image-led blocks follow in sequence, with section titles overlaid rather than boxed into cards. Keep controls aligned and restrained, preserve open space around text, and avoid dense multi-column content grids.

## Shape & elevation

- Radius: button `4px` · nav `10px` · link `2px` · xs `2px` · sm `4px` · md `9px` · lg `10px` · xl `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface reads as mostly flat, with no measured shadows. Separate controls and sections through thin outlines, subtle dark bands, and contrast rather than raised cards. Overlay navigation and headings directly on imagery, using the scene itself as the visual depth layer.

## Imagery

Large, cinematic game-world scenes dominate the page: the first view shows a detailed map with water, terrain, and a citadel, followed by a colorful architectural environment. The screenshot suggests rendered or illustrated 3D environments presented as wide, edge-to-edge media. Keep image color and detail inside the artwork; do not turn those scene hues into interface accents.

## Components

### Overlay navigation

Compact white links and wallet controls sit along the top of the scene, with understated hairline borders and no opaque card treatment.

### Campaign title

Large Roobert heading in uppercase, aligned left over the artwork; use prominent underline strokes to divide and emphasize title lines.

### Explore link

Small dark-gray action surface with white text, placed immediately beneath the hero heading.

### Connect Wallet

Outlined compact control with a 4px measured radius and a thin dark border; measured variants include white or black text.

### Discord CTA

Black filled button with white text and a 2px measured radius, contrasting against lighter surrounding imagery.

### Scene section

Full-bleed destination artwork with a short overlaid heading, minimal supporting controls, and no prominent card frame.

### Measured component styles

- **Primary button** (“Join our Discord”): background #000000 · text #ffffff · border 1px solid #000000 · radius 2px · padding 0px 20px · 400 25.6px Roobert
- **Secondary button** (“Connect Wallet”): transparent background · text #ffffff · border 1px solid #2d2c2e · radius 4px · padding 0px 20px · 400 25.6px Roobert
- **Link** (“Explore”): background #333333 · text #ffffff · radius 2px · padding 0px 20px · 400 25.6px Roobert
- **Navigation item** (“Home 1 Gallery 2 Shop 3 ($) (0) Connect ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 25.6px Roobert

## Do

- Use #151416 as the primary interface canvas.
- Let full-bleed world artwork dominate each campaign block.
- Keep navigation small, restrained, and legible over imagery.
- Set display headings in Roobert with uppercase treatment.
- Use GT America Mono Regular for compact utility text.
- Reserve white for high-contrast text and controls.
- Separate content with dark bands and fine borders.

## Don't

- Do not add bright interface accents absent from the measured palette.
- Do not put the hero artwork inside a rounded card.
- Do not compete with scene colors using decorative UI.
- Do not make navigation or utility text oversized.
- Do not apply shadows to create unmeasured elevation.
- Do not crowd the page with dense grids or excess copy.

## Agent prompt

Build a new MekaVerse-style page with a near-black #151416 canvas and quiet #000000 section bands. Use Signal White (#ffffff) for navigation and strong headings, with Pale Steel (#e2e2e2) or Graphite Edge (#2d2c2e) only for subtle outlines. Keep any #b8bab9 and #383739 surfaces secondary. Lead with expansive, cinematic mecha-world artwork; its greens and vivid colors belong to the media, not UI accents. Overlay compact GT America Mono Regular-style navigation at the top and a left-aligned, uppercase Roobert-style title on the scene. Use restrained actions, generous separation between media blocks, fine borders, and flat surfaces without shadows. Keep the interface sparse so the artwork remains the main event.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed map and citadel artwork with top-overlay navigation and a large left-aligned campaign title. | Explore destination link, Wallet connection control, Top-level navigation | Cinematic scene background, White uppercase heading, Fine navigation outlines, Minimal dark CTA |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/themekaverse-com