VRPorn.com - #1 VR Porn Site in The World

Design Specification — VRPorn.com - #1 VR Porn Site in The World

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#222632), a vivid accent (#0A9AFF). All type is set in Inter. Detected font weights: 400, 600, 700. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://cdn.vrporn.com/seo-folder/settings/vrp-halloween-2.svg · https://cdn.vrporn.com/seo-folder/settings/vrp-halloween-hover-2.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• linear-gradient(75deg,#222632,#2d323d,#222632)
• radial-gradient(50% 50%,#2c394e 0,#440e5c82 49%,#1c189200 100%)
• radial-gradient(50% 50%,#430e67 0,#415a0600 100%)
• linear-gradient(90deg,#ff890a,#7c0aff)
• linear-gradient(90deg,#580aff,#773af8 51.04%,#e317e8)
• linear-gradient(90deg,#1a73e8,#1a73e8 33.3%,#0a9aff 66.6%,#dd0aff)
• linear-gradient(90deg,#0a9aff,#dd0aff)

Typography

Primary typeface: Inter — stack: Inter

Font stacks (most used first)

• Inter
• monospace
• inherit
• Inter,sans-serif
• swiper-icons

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

• inset 0 0 0 2rem #585858e5
• inset 0 0 0 2rem #006ab4e5

Animation & Motion

Transitions

• all .3s
• transform .2s ease-in-out
• opacity 1s ease-in
• opacity .7s
• color .15s
• all .2s ease-in-out
• opacity .5s ease-in-out
• all .5s ease-in-out
• transform .25s ease-in-out
• opacity .3s
• background-color .25s,opacity .25s
• background-color .25s

Keyframes

@keyframes app-animation-skeleton { 0%{transform:translate(0)}50%{transform:translate(50%)}to{transform:translate(0)} }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}to{transform:rotate(1turn)} }

Animations

• 4s linear infinite app-animation-skeleton

CTA labels found on page

• Agree
• Disagree
• Log In
• Join Now
• Minimize menu
• View more

Source Design Tokens (CSS custom properties)

:root {
  --size: focus-within .ui-card-effect-cover__with-hover,.ui-card-effect__with-hover--size:hover .ui-card-effect-cover__with-hover;
  --layout-gap: 12rem;
  --layout-padding: 12rem;
  --bottom-nav-height: 66rem;
  --header-bar-height: 34rem;
  --header-height: 48rem;
  --menu-size: 336rem;
  --header-padding: 8rem;
  --top: calc(var(--header-height) + var(--layout-padding) + 8rem);
  --h: 413rem;
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --link: hover;
  --nav-size: 44rem;
  --prev: after;
}

Do's and Don'ts

Do

• Do reserve the accent #0A9AFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 600, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #1A73E8;
  --color-accent: #0A9AFF;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #222632;
  --color-secondary: #222632;
  --color-text-secondary: #9B9A9A;
  --color-border: #363636;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: Inter;
  --font-size-display: 192px;
  --font-size-headline-lg: 32px;
  --font-size-body-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 100%;
  --space-xs: 5.6px;
  --space-sm: 10.72px;
  --space-xl: 64px;
  --tracking-label: .28rem;
}