---
name: Viture
description: "This site is an excellent example of a premium hardware product page, using bold typography and a sophisticated dark mode to convey innovation and quality."
version: alpha

colors:
  background: "#0C0C0C"
  primary: "#FFFFFF"
  secondary: "rgba(255,255,255,0.5)"
  neutral: "#757575"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 90px
    lineHeight: 1.0
    fontWeight: 750
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.2
    fontWeight: 650
    letterSpacing: "0"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 12px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium XR glasses showcased with bold typography and a high-contrast, tech-forward dark aesthetic.

*A sleek, high-end hardware store for spatial computing.*

## Colors

High-contrast, dark-mode dominant palette with a primary blue accent for interactive elements.

- **Background (`#0C0C0C`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.5)`)** — uses `ink-soft` token
- **Muted (`#757575`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use tight letter spacing for large display type to enhance the bold, futuristic look.
- Maintain high contrast between text and background, primarily white on dark.

## Layout

Full-width hero sections transitioning into centered content blocks with generous vertical spacing.

*Rhythm:* Consistent use of 4px base units, with generous padding in hero sections and cards.

## Elevation & Depth

- 0 0 100px rgba(255,255,255,0.1)
- 0 8px 32px rgba(0,0,0,0.4)
- Borders: 1px solid rgba(255,255,255,0.1)

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Primary: Solid blue, rounded pill. Secondary: Dark gray, rounded pill with border.
- **card:** Rounded corners (24px), soft background colors, centered content, clear hierarchy between product image and text.
- **chip:** Small, pill-shaped badges for product tags (e.g., 'The New Flagship in 2026').
- **input:** Full-width, rounded pill shape, light background, placeholder text, email icon inside.
- **hero:** Immersive, dark background with large, centered typography, prominent product imagery, and clear call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use a light theme as primary — the screenshot shows a dominant dark mode (#0C0C0C background).
- Don't use soft, rounded sans-serif fonts for headlines — the screenshot shows a bold, geometric sans-serif.
- Don't use a muted color palette — the screenshot features high-contrast white text on dark backgrounds and vibrant blue accents.
- Don't use small, centered buttons — the screenshot shows large, prominent, pill-shaped buttons.
- Don't use complex, multi-column layouts for product displays — the screenshot shows clear, card-based horizontal layouts.
- Don't use decorative elements without purpose — the screenshot focuses on clean typography and high-quality product imagery.

---

## System Prompt (paste into AI agent)

```
This site is a premium hardware product page for XR glasses, utilizing a bold, high-contrast dark mode aesthetic. Key colors are deep black (#0C0C0C) and white (#FFFFFF), with a primary interactive blue. The typography is a bold, geometric sans-serif category, used at a massive scale for headlines. Critical design constraints: maintain strict dark mode dominance, use generous padding and rounded corners (especially pill shapes for buttons), and ensure all text has high contrast. Avoid light backgrounds, complex layouts, or weak typography.
```