# Vyro Design System

> High-contrast monochrome canvas punctuated by electric blue accents and oversized Manrope display type.

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

## TL;DR
Vyro utilizes a "Dark Mode by default" aesthetic, transitioning between deep ink surfaces (#000000, #121317) and a light grey foundation (#f7f7f7). The system is anchored by **Manrope** and **Satoshi**, using massive display scales (up to 150px) to create a sense of technical scale. Brand "voltage" is delivered through a single high-saturation blue (#0000ee) used for text links and glowing elevation effects. Geometry is characterized by extreme corner radii, often exceeding 30px for panels and reaching full pill shapes (999px) for interactive elements.

## Signature DNA
1. **Oversized Typography** (Manrope at 100px+ with tight or normal tracking used to anchor hero sections on vyro.ai and vyro.ai/about).
2. **Glow Elevation** (The use of specific blue shadows like `rgb(0, 69, 246) 0px 0px 41px 0px` to lift product cards off dark backgrounds).
3. **Hyper-Rounded Panels** (Consistent use of 30px to 100px border-radius for section containers and feature cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary background, text | 263 | 0.8 | Computed Style |
| `{color.canvas}` | `#f7f7f7` | Light section background | 124 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Primary text on dark, surfaces | 105 | 0.8 | Computed Style |
| `{color.dark-grey}` | `#121317` | Secondary dark surface | 53 | 0.8 | Computed Style |
| `{color.mid-grey}` | `#444444` | Muted body text | 16 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#0000ee` | Text links, primary actions | 66 | 0.8 | Computed Style |
| `{color.accent-glow}` | `#0045f6` | Shadow/Glow color | 3 | 0.8 | Rendered Shadow |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Manrope | 200, 300, 400, 500, 600, 700 | Display, Headings | Manrope (Google Fonts) | SIL OFL |
| Satoshi | 500, 700 | Headings, UI | Inter | Proprietary |
| Inter | 400, 500, 600 | Body, UI | Inter | SIL OFL |
| Oooh Baby | 400 | Decorative Display | Oooh Baby | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-hero}` | 150px | 135px | normal | 400 | Hero Display | `p.framer-text` |
| `{type.display-xl}` | 102px | 102px | normal | 700 | Main H1 | `h1.framer-text` |
| `{type.display-lg}` | 100px | 120px | -5px | 600 | Section Header | `p.framer-text` |
| `{type.display-md}` | 88px | 79.2px | normal | 700 | Feature Header | `p.framer-text` |
| `{type.heading-lg}` | 36px | 43.2px | normal | 500 | Sub-section | `p.framer-text` |
| `{type.heading-md}` | 32px | 41.6px | normal | 700 | Card Title | `h4.framer-text` |
| `{type.body-lg}` | 18px | 28.8px | normal | 500 | Lead Paragraph | `p.framer-text` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Standard Body | `p.framer-text` |

### Principles
1. **Display weight contrast:** Pair 700 weight Satoshi with 300 weight Manrope for hierarchical tension.
2. **Negative tracking on display:** Large Manrope sizes (100px+) often utilize -5px tracking to maintain density.
3. **Tight line height:** Display type frequently uses line-height equal to or less than the font size (e.g., 102/102).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 24px | 21 |
| `{space.sm}` | 28px | 10 |
| `{space.md}` | 37px | 12 |
| `{space.lg}` | 68px | 9 |
| `{space.xl}` | 140px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 8px | Controls, small cards | 4 occurrences |
| `{radius.md}` | 12px | UI elements | 11 occurrences |
| `{radius.lg}` | 30px | Feature cards | 18 occurrences |
| `{radius.xl}` | 50px | Large containers | 25 occurrences |
| `{radius.pill}` | 999px | Buttons, badges | 2 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.glow}` | `rgb(0, 69, 246) 0px 0px 41px 0px` | Product feature focus | vyro.ai |
| `{elev.soft}` | `rgba(0, 0, 0, 0.1) 0px 0px 28px 22px` | Light mode depth | vyro.ai/about |
| `{elev.outline}`| `rgba(255, 255, 255, 0.15) 0px 0px 0px 1.5px` | Dark mode card border | vyro.ai |

## Components

### Tier 1: Foundational

#### Primary Link
**Role:** Navigation and inline actions.
**Pages observed:** vyro.ai, vyro.ai/about
**Spec:** Background: transparent / Text: #0000ee / Radius: 50px / Font: 12px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Showcasing product categories or features.
**Pages observed:** vyro.ai, vyro.ai/about
**Spec:** Background: #f7f7f7 / Text: #0000ee / Radius: 30px / Padding: 0px
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-impact dark background sections.
**Pages observed:** vyro.ai, vyro.ai/about
**Spec:** Background: #050505 / Padding: 68px 24px / Radius: 0px
**States observed:** Default: captured

#### Action Pill
**Role:** Primary CTA buttons.
**Pages observed:** vyro.ai, vyro.ai/about
**Spec:** Background: transparent / Border: 1px solid #0000ee / Radius: 8px / Padding: 0px 24px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 68px - 140px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, reduced display type size. |
| Desktop | 1440px | Multi-column layouts (3-up feature grids). |

## Imagery & decoration
- **Generative Art:** High-fidelity, colorful AI-generated imagery used as focal points.
- **Glow Effects:** Radial gradients in blue and purple behind cards to simulate depth.
- **Iconography:** Thin-stroke white icons on dark backgrounds.

## Do's
- Use **Manrope** for all primary display headings at sizes > 60px.
- Apply **#0000ee** exclusively for interactive text and primary brand signals.
- Use **30px radius** for standard content cards.
- Maintain high contrast between **#000000** and **#ffffff**.
- Use **-5px letter spacing** for Manrope display weights at 100px.

## Don'ts
- **Wrong:** Using #0000ee as a background fill for large sections.
  **Right:** Use #0000ee for text and thin borders only.
  **Reason:** Brand uses blue as a high-frequency signal, not a foundational surface.
- **Wrong:** Using sharp corners (0px) for interactive UI elements.
  **Right:** Use at least 8px or pill shapes.
  **Reason:** Vyro's identity is built on hyper-rounded geometry.
- **Wrong:** Mixing Satoshi and Manrope in the same text block without weight differentiation.
  **Right:** Use Satoshi 700 for labels and Manrope 400 for prose.
  **Reason:** To maintain the established hierarchical tension.

## Quick start

```css
:root {
  --vyro-black: #000000;
  --vyro-canvas: #f7f7f7;
  --vyro-primary: #0000ee;
  --vyro-dark-grey: #121317;
  --vyro-radius-lg: 30px;
  --vyro-glow: 0px 0px 41px 0px rgb(0, 69, 246);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Specific mobile-only typography tokens were not fully mapped beyond visual observation.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://vyro.ai | 1440px | 2026-06-06 |
| About | https://vyro.ai/about | 1440px | 2026-06-06 |
| Mobile Home | https://vyro.ai | 390px | 2026-06-06 |