---
name: "VYYB"
description: "High-contrast dark-mode AI sound intelligence system featuring deep night backdrops, warm cream contrast sections, multi-hue spectral gradients, bold uppercase Montserrat headings, and pill-shaped controls."
version: "1.0"
colors:
  primary: "#0a0b14"
  primary-strong: "#05050b"
  on-primary: "#ffffff"
  ink: "#0a0b14"
  ink-strong: "#2b2f42"
  body: "#5f6478"
  canvas: "#ffffff"
  surface-soft: "#fbf7f2"
  surface-muted: "rgba(255, 255, 255, 0.04)"
  hairline: "#0a0b141f"
  hairline-soft: "rgba(255, 255, 255, 0.14)"
  overlay: "rgba(5, 6, 12, 0.82)"
  success: "rgb(61, 220, 132)"
  warning: "#ffb020"
  destructive: "rgb(217, 48, 37)"
  accent-cyan: "#22c3ff"
  accent-blue: "#1e7bff"
  accent-violet: "#8a3dff"
  accent-purple: "#b43cff"
  accent-magenta: "#e03cd8"
  accent-pink: "#ff3d7f"
  accent-orange: "#ff5a1f"
  accent-amber: "#ff9a1f"
typography:
  heading-xl:
    fontFamily: "Montserrat, system-ui, sans-serif"
    fontSize: "60px"
    fontWeight: "800"
    lineHeight: "1.06"
    letterSpacing: "-0.02em"
  heading-lg:
    fontFamily: "Montserrat, system-ui, sans-serif"
    fontSize: "48px"
    fontWeight: "800"
    lineHeight: "1.00"
    letterSpacing: "normal"
  heading-md:
    fontFamily: "Montserrat, system-ui, sans-serif"
    fontSize: "23px"
    fontWeight: "700"
    lineHeight: "1.25"
    letterSpacing: "normal"
  eyebrow:
    fontFamily: "Montserrat, system-ui, sans-serif"
    fontSize: "12px"
    fontWeight: "600"
    lineHeight: "1.30"
    letterSpacing: "0.26em"
    textTransform: "uppercase"
  body-lg:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "21px"
    fontWeight: "400"
    lineHeight: "1.55"
    letterSpacing: "normal"
  body-md:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "1.60"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.60"
    letterSpacing: "normal"
  button:
    fontFamily: "Montserrat, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "1.00"
    letterSpacing: "0.08em"
rounded:
  pill: "999px"
  card-lg: "24px"
  card: "22px"
  input: "14px"
  sm: "8px"
spacing:
  section-lg: "170px"
  section: "150px"
  container: "1360px"
  grid-gap: "32px"
  card-padding: "36px"
  gutter: "80px"
  element: "16px"
  xs: "8px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.pill}"
    padding: "0px 34px"
    height: "58px"
    font: "{typography.button}"
  ghost-button:
    background: "transparent"
    color: "{colors.on-primary}"
    border: "1px solid rgba(255, 255, 255, 0.42)"
    borderRadius: "{rounded.pill}"
    padding: "0px 34px"
    height: "58px"
  light-button:
    background: "{colors.on-primary}"
    color: "{colors.primary}"
    borderRadius: "{rounded.pill}"
    padding: "0px 34px"
    height: "58px"
  header-nav:
    height: "92px"
    padding: "0px 80px"
    gap: "32px"
    background: "transparent"
    color: "{colors.ink}"
  feature-card:
    background: "rgba(255, 255, 255, 0.04)"
    borderRadius: "{rounded.card}"
    padding: "36px"
    boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset"
  form-input:
    background: "{colors.canvas}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.input}"
    padding: "14px 16px"
    height: "52px"
  live-status-badge:
    color: "{colors.success}"
    font: "{typography.eyebrow}"
    gap: "8px"
  footer:
    background: "#07080f"
    color: "rgba(255, 255, 255, 0.72)"
    padding: "110px 0px 36px"
source: "https://www.vyybai.com/sonic"
captured: "2026-10-16T08:20:59.348Z"
---

# DESIGN.md: VYYB

## Source

- URL: https://www.vyybai.com/sonic
- Captured: 2026-10-16T08:20:59.348Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of VYYB](./screenshot.png)

## Design Summary

VYYB SONIC employs a high-contrast dark-mode physical-experience theme built on deep night canvas (#05050b) and warm cream section contrast (#fbf7f2). Vibrant chromatic soundwave gradients (ranging from orange #ff9a1f to cyan #22c3ff) highlight AI sound intelligence, paired with Montserrat headlines and Inter body typography.

## Visual Language

- Alternate section background states between dark night stage (#05050b) and warm cream surfaces (#fbf7f2) to create narrative rhythm.
- Use multi-color linear spectral gradients across eyebrows, key phrase text accents, and wave SVG vector paths.
- Enclose content cards in subtly rounded containers with thin 1px inset borders rather than drop shadows.
- Pair geometric uppercase Montserrat headers with human-scale Inter paragraph copy.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed transparent header with 92px height and 80px side gutters that transitions background on scroll.
- Two-column split sections with copy on the left and imagery/media mockups on the right.
- Horizontal auto-scrolling venue carousel showcase for physical space callouts.
- Numbered 4-step linear flow with connecting gradient lines.

## Components

- All primary CTAs must use full pill radius (999px) with explicit 58px tap height.
- Form input controls feature soft 14px corners, light 1px border outlines, and distinct focused blue glow states.
- Status indicators pair pulsating green dots with uppercase tracking label text.
- Light secondary buttons invert to dark text on full white background fills.

## Content Style

- Direct, concise benefit statements framed around sensory space transformation.
- Uppercase tracking eyebrow tags prefixing primary section headlines.
- BPM counters and time-of-day contextual labels to reinforce real-time AI adaptability.
- Action-oriented call-to-action buttons ending with directional right arrows.

## Agent Build Instructions

- Define custom CSS custom properties for gradients: --grad-brand and --grad.
- Set font families for display elements as 'Montserrat', system-ui, sans-serif and body as 'Inter', system-ui, sans-serif.
- Apply box-sizing border-box and border-radius tokens on container cards.
- Ensure layout max-width is constrained to 1360px in center-aligned wrapped layouts.

## Evidence And Confidence

- Observed: Canvas switches between night black (#05050b), sleek dark (#07080f), and warm light cream (#fbf7f2).
- Observed: Computed styles show headings using Montserrat with font sizes up to 60px and weight 800.
- Observed: Main action CTAs consistently apply 999px rounded border-radius with 58px height.
- Observed: CSS variables establish multi-stop gradients across spectral sound spectrums.
- Inferred: Input focus states apply blue box-shadow glow based on focused input stylesheet selectors.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.vyybai.com/sonic

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.