# Metavrse Design System

> High-contrast cinematic advisory aesthetic pairing classical serif typography with electric cyan accents against a deep obsidian void.

**Source:** https://metavrse.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Metavrse utilizes a "monochrome plus one" strategy, where a deep obsidian canvas (#060608) provides the foundation for high-authority Cormorant Garamond headings. The system's primary energy is derived from a singular, high-vibrancy accent color, "Accent Cyan" (#00d4e8), used for primary CTAs and critical text emphasis. Layouts are spacious with significant vertical breathing room (112px section padding) and a total absence of rounded corners on structural elements, favoring a sharp, architectural "glass" aesthetic.

## Signature DNA
1. **The Cyan Spark:** Use of #00d4e8 as a high-contrast "glow" against dark backgrounds, reserved strictly for primary actions and italicized display emphasis.
2. **Classical Authority:** Pairing the tech-forward DM Sans with the elegant Cormorant Garamond serif (often at weight 300-400) to signal "Boutique Advisory" rather than "SaaS Product."
3. **Obsidian Depth:** A foundation of #060608 (Darker) that avoids pure black, allowing for subtle "glass" borders (#ffffff at low opacity) to define sections.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--darker` | `#060608` | Primary page background and button text | 11 | 1.0 | Computed style |
| `--white` | `#ededed` | Primary body text | 32 | 1.0 | `--white` |
| `--off-white` | `#a8a8ab` | Secondary body text and metadata | 43 | 1.0 | `--off-white` |
| `--glass` | `#ffffff` | Surface overlays and borders | 22 | 1.0 | `--glass` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--accent` | `#00d4e8` | Primary CTA background, emphasized display text | 18 | 1.0 | `--accent` |
| `--accent-glow` | `#00d4e8` | Text shadows and glow effects | 18 | 1.0 | `--accent-glow` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Cormorant Garamond | 300, 400, 500 | Display, Headings | Cormorant Garamond | Google Fonts |
| DM Sans | 400, 500, 600 | Body, UI, Navigation | DM Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 80px | 88px | -0.8px | 400 | Hero H1 | `h1` |
| `display-lg` | 45px | 51.52px | normal | 400 | Section H2 | `h2` |
| `stat-value` | 45px | 44.8px | normal | 300 | Numerical data | `div.stat-num` |
| `heading-md` | 38px | 46.08px | normal | 400 | Secondary H2 | `h2` |
| `heading-sm` | 22px | 29.12px | normal | 500 | Component titles | `h3` |
| `body-lg` | 16px | 28.224px | normal | 600 | Bold body emphasis | `strong` |
| `body-md` | 16px | 28.224px | normal | 400 | Standard prose | `p` |
| `nav-link` | 16px | normal | normal | 400 | Global navigation | `nav#navbar` |
| `caption-bold` | 12px | normal | 2.16px | 600 | Primary CTA text | `a.btn` |
| `label-xs` | 10px | normal | 3.36px | 600 | Section labels | `span.label` |

### Principles
1. **Italicized Accent:** Display headings use Cormorant Garamond Italics specifically for words colored with `--accent` (#00d4e8).
2. **Wide Tracking for UI:** Small labels (10px-12px) use aggressive letter-spacing (1.44px to 3.36px) to maintain legibility on dark surfaces.
3. **Serif for Numbers:** All statistical or numerical data is rendered in Cormorant Garamond to maintain the advisory aesthetic.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `--space-xs` | 6px | 13 |
| `--space-sm` | 12px | 4 |
| `--space-md` | 24px | 8 |
| `--space-lg` | 48px | 7 |
| `--space-xl` | 112px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Section containers, cards | 85 occurrences |
| `radius-sm` | 2px | Primary CTA buttons | `a.btn` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces | No shadows captured in evidence |
| Glass | 1px border #ffffff | Section dividers | `--glass-border` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** https://metavrse.com
**Spec:** Background: `#00d4e8` | Text: `#060608` | Radius: `2px` | Padding: `14.4px 44px` | Typography: `DM Sans 12px/600`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Global Nav
**Role:** Site-wide navigation
**Pages observed:** https://metavrse.com
**Spec:** Background: Transparent | Text: `#ededed` | Typography: `DM Sans 16px/400` | Height: ~80px

### Tier 2: Patterns

#### Stat Block
**Role:** Highlighting key metrics
**Pages observed:** https://metavrse.com
**Spec:** Value: `Cormorant Garamond 45px/300` | Label: `DM Sans 11px/500` | Label Spacing: `1.088px`

#### Section Label
**Role:** Category indicator above headings
**Pages observed:** https://metavrse.com
**Spec:** Text: `#00d4e8` | Typography: `DM Sans 10px/600` | Letter Spacing: `3.36px` | Transform: Uppercase

### Tier 3: Surface-specific

#### Dark Section
**Role:** Primary content container
**Pages observed:** https://metavrse.com
**Spec:** Background: `#060608` | Padding: `112px 48px` | Text: `#ededed`

#### Tag Cloud
**Role:** Technology focus areas
**Pages observed:** https://metavrse.com
**Spec:** Background: `rgba(255,255,255,0.1)` | Border: `1px solid #ffffff` | Text: `#a8a8ab` | Typography: `DM Sans 10px/400`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 112px |
| Section Padding (Horizontal) | 48px |

## Imagery & decoration
- **Cinematic Backgrounds:** Uses high-speed, motion-blurred abstract tech imagery in the background of the hero.
- **Glass Borders:** 1px white borders with low opacity are used to separate UI elements without adding visual weight.
- **Avoidance:** No illustrations, no rounded cards, no drop shadows.

## Do's
- Use **Cormorant Garamond** for all headings to maintain authority.
- Apply `#00d4e8` only to primary CTAs or single emphasized words in a heading.
- Maintain **112px vertical spacing** between major content sections.
- Ensure all small caps labels have at least **2px letter-spacing**.
- Use `#060608` as the canvas color for all "Glass" components.

## Don'ts
- **Wrong:** Using a different saturated color (e.g., #0000FF) for buttons. **Right:** Always use `#00d4e8`. **Reason:** The brand relies on a single-accent monochrome system.
- **Wrong:** Applying `border-radius: 8px` to cards. **Right:** Use `0px`. **Reason:** The brand aesthetic is sharp and architectural.
- **Wrong:** Using Cormorant Garamond for long-form body text. **Right:** Use `DM Sans`. **Reason:** Legibility and hierarchy.

## Similar brands
- **Relume** (High-contrast dark mode, sharp edges)
- **Framework** (Technical, typography-driven)
- **Linear** (Dark mode, glass surfaces, precision UI)

## Quick start

```css
/* CSS Variables */
:root {
  --darker: #060608;
  --white: #ededed;
  --off-white: #a8a8ab;
  --accent: #00d4e8;
  --glass-border: rgba(255, 255, 255, 0.1);
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the initial crawl.
- Mobile-specific navigation menu (hamburger) behavior was not fully documented.
- Form input styles and validation states are missing from the source evidence.