---
version: alpha
name: Marblex
description: Web3 gaming energy — a near-black cobalt canvas with an electric MARBLEX blue accent, bold condensed display type, glowing gradient CTAs, and pill chrome. "Fun Comes First" rendered as a dark, high-contrast, neon-edged gaming token system.
data_quality: low

colors:
  # Canvas + ink
  background: "#06080f"
  surface: "#0e1320"
  surface-soft: "#161c2c"
  surface-raised: "#1d2536"
  ink: "#ffffff"
  ink-secondary: "#aab2c5"
  ink-muted: "#6c7689"

  # Brand accent — MARBLEX electric blue
  primary: "#2f6bff"
  primary-bright: "#4d86ff"
  primary-deep: "#1b46c9"
  accent-cyan: "#37d4ff"
  accent-violet: "#7b5cff"

  # Gradient stops (CTA / hero glow)
  gradient-from: "#2f6bff"
  gradient-to: "#37d4ff"

  # Borders / lines (opaque over canvas)
  border: "#1f2738"
  border-bright: "#2c3650"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#06080f"

  # Status
  success: "#34d399"
  warning: "#fbbf24"

typography:
  display-hero:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.8px
  section-heading:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.2px
  mono-label:
    fontFamily: "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-bright}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-bright}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-bright}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-bright}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-raised:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-bright}"
  card-stat:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-bright}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"
  pill-tab:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
---

# Marblex Design System

## Overview

Marblex (MARBLEX / MBX) is Netmarble's blockchain gaming ecosystem, and its site reads exactly like that pedigree promises — a console game's title screen translated to the web. The canvas is a near-black cobalt (`{colors.background}`), almost the color of deep space, against which an electric MARBLEX blue (`{colors.primary}`) does all the heavy lifting. This is a dark-first, high-contrast system where energy comes from a single saturated accent and its glow, not from a busy palette. The brand tagline "Fun Comes First" sets the tone: bold, kinetic, unmistakably a gaming property.

Typography carries the gaming attitude. Display and heading text uses a tall, condensed grotesque (mapped here to Oswald) at heavy weights — the kind of compressed, athletic lettering you'd see stamped across an esports jersey or a token ticker. Body copy switches to a clean neutral sans (Inter) for legibility against the dark canvas, and technical labels (token amounts, contract addresses, chain names) lean on a monospace voice. The contrast between condensed display and humble body sans is the typographic signature.

Depth is built by stacking progressively lighter slate surfaces (`{colors.surface}` → `{colors.surface-raised}`) over the black canvas, each separated by hairline borders that brighten on interactive elements. Primary actions are pill-shaped and filled with the brand blue, often carrying a gradient wash from blue to cyan (`{colors.gradient-from}` → `{colors.gradient-to}`) and a soft outer glow — the closest the system gets to neon. Everything else stays restrained so those CTAs and accent moments pop.

**Key Characteristics:**
- Near-black cobalt canvas (`{colors.background}`) — a dark-first gaming aesthetic
- A single electric blue brand accent (`{colors.primary}`) plus cyan/violet support tones
- Condensed heavy display type (Oswald) paired with neutral body sans (Inter)
- Pill-shaped primary CTAs with blue→cyan gradient and glow
- Layered slate surfaces for depth, hairline borders that brighten on interaction
- Monospace voice for token/chain/contract technical labels
- High-contrast white ink on dark, with muted slate-blue secondary text

## Colors

### Canvas & Surfaces
- **Background** (`{colors.background}`): Near-black cobalt page canvas.
- **Surface** (`{colors.surface}`): Default card and panel surface.
- **Surface Soft** (`{colors.surface-soft}`): Subtle tinted panels, tabs, badges.
- **Surface Raised** (`{colors.surface-raised}`): Elevated cards, secondary buttons.

### Ink
- **Ink** (`{colors.ink}`): Primary white text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted slate-blue body and descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary labels, disabled text.

### Brand Accent
- **Primary** (`{colors.primary}`): MARBLEX electric blue — CTAs, links, active states.
- **Primary Bright** (`{colors.primary-bright}`): Hover and emphasis blue.
- **Primary Deep** (`{colors.primary-deep}`): Pressed states, deep gradient stop.
- **Accent Cyan** (`{colors.accent-cyan}`): Gradient highlight, glow edge.
- **Accent Violet** (`{colors.accent-violet}`): Secondary accent for NFT/loot contexts.

### Gradient
- **Gradient From / To** (`{colors.gradient-from}` → `{colors.gradient-to}`): Blue→cyan wash on hero CTAs and glow.

### Borders
- **Border** (`{colors.border}`): Hairline separators on default surfaces.
- **Border Bright** (`{colors.border-bright}`): Brighter border on interactive/raised elements.

### Status
- **Success** (`{colors.success}`) / **Warning** (`{colors.warning}`): Token/status feedback.

## Typography

### Font Family
- **Display**: `Oswald` — tall condensed grotesque for hero, headings, buttons, eyebrows.
- **Body**: `Inter` — neutral sans for reading copy.
- **Mono**: `Roboto Mono` — token amounts, chain names, contract labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px condensed hero — title-screen impact |
| `display` | Large section / stat numbers |
| `section-heading` | Feature section titles |
| `card-title` | Card and tile headings |
| `eyebrow` | Tracked uppercase kicker labels |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, tabs (condensed, tracked) |
| `caption` | Metadata, badges |
| `mono-label` | Token amounts, chain/contract labels |

### Principles
- **Condensed announces, neutral reads**: Oswald compresses headlines and buttons; Inter handles all running copy.
- **Tracked uppercase eyebrows**: Kicker labels use +2px letter-spacing for that esports/HUD feel.
- **Mono for the chain**: Technical web3 data (amounts, addresses) always renders monospace.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; large jumps (`{spacing.3xl}`–`{spacing.4xl}`) create the cinematic full-bleed section breathing room typical of gaming sites.

### Grid & Container
- Max content width ~1200px, centered.
- Hero: full-bleed dark section, often with a background key art / glow, single-column centered headline + gradient CTA.
- Feature sections: 2–3 column card grids (PLAY / LOOT / NFT pillars).

### Whitespace Philosophy
- **Cinematic dark space**: Generous vertical padding lets the dark canvas and glow effects breathe.
- **Accent restraint**: Color is concentrated in CTAs and highlights so the blue reads as energy, not noise.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (0) | Background canvas, no border | Page background |
| Surface (1) | `{colors.surface}` + `{colors.border}` hairline | Default cards |
| Raised (2) | `{colors.surface-raised}` + `{colors.border-bright}` | Elevated cards, secondary buttons |
| Glow (3) | Brand-blue fill + soft blue/cyan outer glow | Primary CTAs, hero accents |
| Focus | 2px `{colors.primary}` ring | Keyboard focus |

**Depth Philosophy**: Depth is built by layering progressively lighter slate surfaces over the black canvas and separating them with hairline borders. The only "shadow" that matters is the soft colored glow under primary CTAs — a neon halo that ties the system back to its gaming roots.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Inline chips, small controls |
| `md` | 10px | Inputs, small cards |
| `lg` | 16px | Cards, panels |
| `xl` | 24px | Large feature tiles |
| `pill` | 9999px | Buttons, badges, tabs |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Brand-blue pill, white condensed label, blue→cyan gradient + glow on hero CTAs.
- **`button-secondary`** — Raised slate surface, bright border, white label.
- **`button-ghost`** — Transparent over canvas with bright border outline.

### Pills & Badges
- **`badge`** — Soft slate pill, brand-blue text — chain/status tags.
- **`pill-tab`** — Slate pill tab, muted text, brand-blue when active.

### Cards
- **`card`** — Surface fill, hairline border, 16px radius.
- **`card-raised`** — Elevated surface with brighter border for featured tiles.
- **`card-stat`** — Large condensed display number over a label (token metrics, TVL, player counts).

### Inputs
- **`input`** — Surface fill, bright border; focus switches border to brand blue.

### Navigation
- **`nav-bar`** — Dark sticky header, condensed nav labels, brand-blue pill CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas near-black cobalt (`{colors.background}`) — dark-first is the identity
- Use condensed Oswald for display, headings, and buttons; Inter for body
- Concentrate the brand blue in CTAs, links, and accent moments
- Use blue→cyan gradient + soft glow on hero primary actions
- Render token amounts, chain names, and contract addresses in monospace
- Build depth with layered slate surfaces and hairline borders

### Don't
- Don't put body copy in the condensed display font — it hurts legibility
- Don't introduce a light/white page background — the system is dark-first
- Don't scatter the accent blue everywhere; restraint is what makes it pop
- Don't use heavy drop shadows — the only glow is the colored CTA halo
- Don't mix warm decorative colors into the chrome

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs, reduced hero size |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1200px | Full 3-pillar layout |
| Large | >1200px | Centered, generous side margins |

### Collapsing Strategy
- Hero: 64px display scales down, maintains condensed proportions
- Navigation: horizontal labels → hamburger menu, brand-blue CTA persists
- Feature pillars: 3-column → 2 → single column
- Stat cards: grid → stacked

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: near-black cobalt `{colors.background}`
- Primary CTA: MARBLEX blue `{colors.primary}` (white text)
- Heading text: white `{colors.ink}`
- Body text: muted slate `{colors.ink-secondary}`
- Card surface: `{colors.surface}` with `{colors.border}` hairline
- Accent glow: blue→cyan `{colors.gradient-from}` → `{colors.gradient-to}`

### Example Component Prompts
- "Hero on near-black cobalt `{colors.background}`. Headline 64px Oswald weight 700, letter-spacing -1.5px, white. Lead 18px Inter, `{colors.ink-secondary}`. Pill CTA filled `{colors.primary}`, white condensed label, blue→cyan gradient and soft glow."
- "Stat card: `{colors.surface}` fill, `{colors.border}` hairline, 16px radius, big 44px Oswald number in white over a 14px Inter label in `{colors.ink-secondary}`."
- "Badge: `{colors.surface-soft}` pill, `{colors.primary-bright}` text, 12px Inter, 9999px radius."

### Iteration Guide
1. Stay dark-first — canvas is near-black cobalt, never light
2. Oswald (condensed) announces; Inter reads; Roboto Mono for chain/token data
3. Concentrate the blue in CTAs and accents — restraint makes it electric
4. Hero CTA = blue→cyan gradient + soft colored glow; everything else stays flat
5. Build depth with layered slate surfaces + hairline borders, not heavy shadows

---

## 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 Marblex. Brand names and trademarks belong to their respective owners.