# Viture · Design system migration spec

> Source: https://www.viture.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Viture's design system is a sleek, high-end hardware store for spatial computing, translating the precision of premium XR hardware into a digital interface. Its identity is built on a foundation of innovation and bold performance, mirrored in a tech-forward, high-contrast aesthetic.

**One-liner:** Premium XR glasses showcased with bold typography and a high-contrast, tech-forward dark aesthetic.
**Keywords:** innovative · premium · high-performance · futuristic · bold
**Analogy:** A sleek, high-end hardware store for spatial computing.

## 2. Color

The palette is a study in high-contrast drama, dominated by a deep black canvas that pushes content forward. A functional blue accent is reserved for primary interactive elements, creating a clear path for user engagement.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0C0C0C` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.5)` | secondary text |
| `--muted` | `#757575` | placeholder |
| `--line` | `rgba(255,255,255,0.1)` | divider |

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

The principle is unwavering: dark mode is the default state, ensuring white text and vibrant accents always command attention.

## 3. Typography

Typography serves as the system's bold voice, employing a geometric sans-serif category at a massive scale for headlines. Tight letter spacing on display type reinforces the futuristic, hardware-inspired character.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 90px | 1.0 | 750 | -1px | Hero headlines |
| h2 | 48px | 1.2 | 650 | 0 | Section headers |
| body | 16px | 1.5 | 400 | 0 | General text |
| caption | 14px | 1.5 | 400 | 0 | Supporting text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a strict 4px base grid, establishing a consistent rhythm that structures all vertical and horizontal relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 4px base units, with generous padding in hero sections and cards.

## 5. Surfaces

Surfaces are defined by subtle depth and precision borders. Luminous outer shadows and stark, semi-transparent rules create the impression of elevated panels floating within the dark interface.

- **Radius:** sm 4px · md 12px · lg 24px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton begins with full-width, immersive hero sections designed to showcase products against a vast, dark backdrop. This transitions into centered content blocks and card grids, organized with generous vertical breathing room.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, purposeful transitions over flashy effects. Interactions use a consistent 0.3s cubic-bezier curve, providing immediate and refined feedback on hover and click states.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.77, 0, 0.175, 1)`
- **Patterns:**
  - Smooth transitions on hover states for buttons and links.
  - Gradual background-size transitions for visual effects.
  - Subtle opacity changes for interactive elements.

- **Hover:** Subtle color shifts or opacity changes on buttons and links.
- **Click:** Immediate visual feedback, often through color change or slight scale transform.
- **Transition:** Smooth 0.3s transitions using cubic-bezier(0.77, 0, 0.175, 1) for most interactive elements.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is confident and tech-forward, matching the system's visual boldness. Headlines are short, punchy, and superlative-driven, while calls to action remain direct and imperative.

- **Tone:** Confident, bold, and tech-forward.
- **Headline style:** Short, punchy, superlative-driven statements (e.g., 'Biggest. Brightest. Smartest.').
- **CTA style:** Direct and action-oriented (e.g., 'Order Now', 'Claim 10% OFF Now').
- **Avoid:** Avoid overly casual or playful language. / Avoid complex technical jargon without context. / Avoid weak or passive calls to action.

### Don'ts
- ❌ 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.

The system deliberately avoids light themes, muted palettes, and complex multi-column layouts that would dilute its focused, high-performance narrative.

## System Prompt (paste into AI tool)

```
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.
```