---
name: Virtual Plus Ex
description: "A bold example of using extreme minimalism and typography to create an immersive, controlled interactive experience."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "rgba(255,255,255,0.4)"
  tertiary: "#FF5C00"
  neutral: "rgba(255,255,255,0.4)"
  line: "rgba(255,255,255,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-1.2px"
  subheading:
    fontFamily: monospaced
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: monospaced
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "0px"
  label:
    fontFamily: monospaced
    fontSize: 10px
    lineHeight: 1
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 10px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 24px
  2xl: 30px
  3xl: 32px

---

## Overview

A stark, high-contrast interactive experience that prioritizes bold typography and simple, controlled navigation.

*A minimalist interactive gallery or showroom with a focus on user control and bold typography.*

## Colors

Strict high-contrast monochrome with a single vibrant accent for emphasis.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.4)`)** — uses `ink-soft` token
- **Accent (`#FF5C00`)** — uses `accent` token
- **Muted (`rgba(255,255,255,0.4)`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** monospaced
- **Mono:** monospaced

- All text is uppercase.
- Headings use a tight negative letter-spacing.
- Body text is consistently monospaced for a technical feel.

## Layout

Centered vertical stack for the initial mode selection, transitioning to a full-screen scroll-based layout.

*Rhythm:* Generous padding around interactive elements, typically 25-36px.

## Elevation & Depth

- Borders: 2px solid white for buttons, subtle 1px lines for decorative elements.

## Shapes

- `sm`: 0px
- `md`: 10px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Large, rectangular outlined buttons with rounded corners, all-caps text, and generous internal padding.
- **card:** Not visible in the provided screenshots, but implied as the main content containers.
- **chip:** Not visible.
- **input:** Not visible.
- **hero:** Full-screen black canvas with large, centered typography and minimal decorative line elements.

## Do's and Don'ts

**Don't:**
- Don't use serif or handwritten fonts — screenshot shows only grotesque-sans and monospaced type.
- Don't add background images or gradients — screenshot shows a solid black background.
- Don't use low contrast text — screenshot shows high-contrast white on black.
- Don't use complex shadows or depth effects — screenshot shows flat, border-only components.
- Don't use multiple accent colors — screenshot shows only one accent color (orange).
- Don't use lowercase text for UI elements — screenshot shows all text is uppercase.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, experimental interactive showroom site. It uses a stark black and white palette with a single vibrant orange accent for key instructions. The typography is bold, all-caps, and uses a grotesque-sans for headings and a monospaced font for body text, creating a technical, direct tone. Key interactions are controlled via large, outlined buttons and scrolling. Critical design rules: use only the specified font categories, maintain high contrast, avoid decorative elements, keep layouts centered and spacious, and use uppercase text consistently. Never add shadows, gradients, or multiple accent colors. The interaction model is simple, focusing on scroll and click.
```