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

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

09

Voice & Don'ts

10

Inside the pack — real screenshots

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