CURATED · OPEN · FREE

Viture

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

HardwarePremiumBold TypographyDark ModeProduct

Viture screenshot

↓ Download design system (32 MB)Open in OpenDesign

Visit: https://www.viture.com

📦 Browse pack contents →

01

Identity DNA

innovativepremiumhigh-performancefuturisticbold

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

02

Color

#FFFFFFInk

rgba(255,255,255,0.5)Ink soft

#0C0C0CBG

#757575Muted

rgba(255,255,255,0.1)Line

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

03

Typography

geometric-sans

display90px · 750
h248px · 650
body16px · 400
caption14px · 400

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.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

05

Surfaces

sm · 4px

md · 12px

lg · 24px

pill · 999px

1px solid rgba(255,255,255,0.1)

0 0 100px rgba(255,255,255,0.1) · 0 8px 32px rgba(0,0,0,0.4)

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.77, 0, 0.175, 1)easing

Smooth transitions on hover states for buttons and links. · Gradual background-size transitions for visual effects. · Subtle opacity changes for interactive elements.

Subtle color shifts or opacity changes on buttons and links. · Immediate visual feedback, often through color change or slight scale transform.

08

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.

09

Voice & Don'ts

Tone Confident, bold, and tech-forward.
Headlines Short, punchy, superlative-driven statements (e.g., 'Biggest. Brightest. Smartest.').
CTAs Direct and action-oriented (e.g., 'Order Now', 'Claim 10% OFF Now').

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.
Avoid: Avoid overly casual or playful language.
Avoid: Avoid complex technical jargon without context.
Avoid: Avoid weak or passive calls to action.

10

Inside the pack — real screenshots

Viture — 桌面首屏（hero） — 桌面首屏（hero）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko