# Winreality Design System

> High-contrast athletic utility: heavy Poppins headlines and stark obsidian surfaces anchored by a high-voltage electric blue.

**Source:** https://winreality.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Winreality utilizes a "monochrome-plus" system where a deep obsidian foundation (#18181e) and pure white canvas (#ffffff) are punctuated by a singular primary blue (#5572ff). The typography is dominated by Poppins, ranging from ultra-heavy 900 weight display headers to clean 400 weight body text. Layouts favor high-density information cards with generous 20px to 40px corner radii, creating a "pro-tool" aesthetic that balances technical VR precision with athletic energy. Components are characterized by pill-shaped CTAs and dark-mode surface elevations (#32323f) that distinguish premium tiers from standard content.

## Signature DNA
1. **The Heavy Display** (Poppins at 800-900 weight with tight -2.56px tracking, seen on Homepage and Pricing heroes).
2. **Obsidian Elevation** (Layering #18181e, #212129, and #32323f surfaces to create depth without traditional drop shadows, prevalent on the Pricing page).
3. **The Electric Accent** (Strategic use of #5572ff for text links and #00f7ff for high-priority captions against dark backgrounds).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.obsidian}` | `#18181e` | Primary text, borders, dark surfaces | 230 | 1 | `--text-text-primary` |
| `{colors.white}` | `#ffffff` | Page canvas, primary button text | 190 | 1 | `--surface-surface-cream` |
| `{colors.black}` | `#000000` | CTA backgrounds, footer surface | 20 | 1 | `--wp--preset--color--black` |
| `{colors.charcoal}` | `#212129` | Secondary dark surface | 4 | 0.6 | Computed Style |
| `{colors.slate-light}` | `#f2f4f5` | Subtle section backgrounds, borders | 11 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#5572ff` | Primary brand blue, text links | 8 | 0.6 | Computed Style |
| `{colors.cyan}` | `#00f7ff` | High-contrast captions on dark | 4 | 1 | `--text-caption-primary` |
| `{colors.muted-text}` | `#6e7086` | Secondary body, inactive labels | 8 | 1 | `--text-caption-secondary` |
| `{colors.cream}` | `#fff4e8` | Decorative text / highlight | 45 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 300, 400, 600, 700, 800, 900 | Heading, Display, UI | Poppins (Google Fonts) | OFL |
| At Aero | 700 | Body / Brand labels | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 52px | 52px | -1.3px | 600 | Hero Headlines | `b:nth-of-type(1)` |
| `{type.display-heavy}` | 48px | 43.2px | -2.56px | 900 | Section Headers | `h2.elementor-heading-title` |
| `{type.display-light}` | 48px | 45.3px | -1.28px | 300 | Sub-hero text | `h2.elementor-heading-title` |
| `{type.heading-lg}` | 36px | 39.6px | normal | 700 | Subsection titles | `h2.elementor-heading-title` |
| `{type.heading-sm}` | 24px | 24px | 1.92px | 700 | Category labels | `div.elementor-heading-title` |
| `{type.button}` | 20px | 20px | normal | 600 | Primary CTA text | `a.elementor-button` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Default prose | `div.elementor-element` |
| `{type.body-bold}` | 18px | 20.7px | normal | 700 | Emphasized UI text | `div.body-base-bold` |
| `{type.caption}` | 12px | 16px | normal | 400 | Legal/Small print | `div.#wrn156.#fmvoxr` |

### Principles
1. **Extreme Weight Contrast:** Headlines jump from 300 (light) to 900 (black) within the same section to establish hierarchy.
2. **Tight Display Tracking:** As Poppins increases in size and weight, letter-spacing is aggressively reduced (up to -2.56px) to maintain athletic "impact."
3. **Uppercase Utility:** Small category labels (24px) utilize wide tracking (1.92px) and all-caps for a technical, "HUD" feel.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 5 |
| `{space.sm}` | 16px | 53 |
| `{space.md}` | 24px | 79 |
| `{space.lg}` | 32px | 12 |
| `{space.xl}` | 64px | 9 |
| `{space.section}` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp containers, footer | 356 occurrences |
| `{radius.sm}` | 4px | Form inputs | `{radii.input}` |
| `{radius.md}` | 8px | Standard UI controls | `{radii.control}` |
| `{radius.lg}` | 20px | Feature cards | `{radii.card}` |
| `{radius.xl}` | 40px | Large surface panels | `{radii.panel}` |
| `{radius.pill}` | 9999px | CTA Buttons | `{radii.pill}` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | Default page sections | `Surface` component |
| Subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px` | UI elements on white | `shadows[1]` |
| Deep | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | Floating modals/popups | `shadows[0]` |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** Homepage, Pricing
**Spec:** Background `#000000` / Text `#ffffff` / Radius `9999px` / Typography `{type.button}`
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Form entry
**Pages observed:** Pricing
**Spec:** Background `#ffffff` / Border `2px #b0b0c0` / Radius `4px` / Font Size `12px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` / Text `#18181e` / Radius `20px` / Padding `40px`
**States observed:** Default | Hover: Not captured

#### Tier Card (Premium)
**Role:** Pricing highlight
**Pages observed:** Pricing
**Spec:** Background `#32323f` / Text `#ffffff` / Radius `8px` / Padding `24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section Panel
**Role:** High-contrast content band
**Pages observed:** Homepage, Pricing
**Spec:** Background `#18181e` / Text `#ffffff` / Radius `0px` / Padding `64px 56px`
**States observed:** Default

#### Product Add-on Row
**Role:** Selection list in checkout
**Pages observed:** Pricing
**Spec:** Background `#f2f4f5` / Border `0px` / Radius `10px` / Padding `16px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 100px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Headlines scale to ~32px; horizontal card grids stack vertically; padding reduces to 16px. |

## Imagery & decoration
- **VR Hardware Photography:** High-key product shots of Meta Quest headsets with blue lighting accents.
- **Athletic Action:** Desaturated, high-contrast photography of baseball players in motion.
- **Graphic Overlays:** Use of 50% off "price tags" and HUD-style UI overlays on top of photography.

## Do's
- Use Poppins 900 for primary section headers.
- Apply `{radius.lg}` (20px) to all white content cards.
- Use `#5572ff` for interactive text links and secondary accents.
- Maintain high contrast by placing white text on `#18181e` backgrounds.
- Use all-caps with wide tracking for category labels.

## Don'ts
- **Wrong:** Using `#5572ff` as a background for large text blocks. **Right:** Use it for links/accents. **Reason:** Contrast ratio is 4.0:1, failing AA for small text.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to Poppins/At Aero.
- **Wrong:** Using sub-brand colors (e.g., specific product oranges) as the global primary blue.
- Do not use drop shadows on dark-mode cards; use surface color shifts (`#32323f`) instead.

## Similar brands
- Nike (Type-heavy, high-contrast athletic)
- Meta (Hardware-focused VR aesthetics)
- Strava (Performance data visualization)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #5572ff;
  --color-obsidian: #18181e;
  --color-white: #ffffff;
  --font-main: 'Poppins', sans-serif;
  --radius-card: 20px;
  --radius-pill: 9999px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #5572ff;
  --color-obsidian: #18181e;
  --font-poppins: 'Poppins';
  --radius-lg: 20px;
}
```

## Agent prompt examples
- "Generate a pricing card using a #32323f background, Poppins 700 weight headers in white, and a pill-shaped button with a #ffffff background."
- "Create a hero section with a Poppins 900 headline, -2.56px letter spacing, and a primary blue #5572ff text link."

## Known gaps
- Hover and Active states for primary buttons were not captured in the static evidence.
- Mobile-specific navigation menu transitions were not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://winreality.com | 1440px | 2026-06-06 |
| Pricing | https://winreality.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://winreality.com | 390px | 2026-06-06 |