# VNL Fan Hub - Design System

## Brand Overview

The Volleyball Nations League (VNL) brand combines athletic energy with premium digital experiences. The design language emphasizes bold typography, dramatic gradients, and dynamic visual elements that capture the excitement of international volleyball competition.

---

## Color System

### Primary Colors

```css
--vnl-purple-dark: #1a0d2e;
--vnl-purple-deep: #2d1b4e;
--vnl-purple-vibrant: #6b2d9e;
--vnl-blue-electric: #3d5af1;
--vnl-blue-bright: #2196f3;
```

### Accent Colors

```css
--vnl-orange-primary: #ff5722;
--vnl-orange-bright: #ff6b3d;
--vnl-red-accent: #e53935;
```

### Neutral Colors

```css
--vnl-black: #000000;
--vnl-gray-dark: #1a1a2e;
--vnl-gray-medium: #2a2a3e;
--vnl-gray-light: #4a4a5e;
--vnl-white: #ffffff;
--vnl-cream: #f5f5f0;
```

### Gradient Definitions

**Primary Gradient (Hero/Featured)**
```css
background: linear-gradient(135deg, #2d1b4e 0%, #1a0d2e 50%, #0a1428 100%);
```

**Purple-to-Blue Gradient**
```css
background: linear-gradient(90deg, #6b2d9e 0%, #3d5af1 100%);
```

**Accent Gradient (CTAs)**
```css
background: linear-gradient(135deg, #ff5722 0%, #ff6b3d 100%);
```

**Wave Pattern Overlay**
- Use radiating curved lines pattern as seen in calendar sync banner
- Opacity: 15-20%
- Color: Lighter purple or blue overlaid on dark purple gradient

---

## Typography

### Font Families

**Primary Font Stack:**
```css
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
```

**Display Font (Headlines):**
```css
font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
```

### Type Scale

```css
--text-xs: 0.75rem;      /* 12px - Labels, captions */
--text-sm: 0.875rem;     /* 14px - Body small, metadata */
--text-base: 1rem;       /* 16px - Body text */
--text-lg: 1.125rem;     /* 18px - Subheadings */
--text-xl: 1.5rem;       /* 24px - Section titles */
--text-2xl: 2rem;        /* 32px - Page titles */
--text-3xl: 2.5rem;      /* 40px - Display text */
--text-4xl: 3.5rem;      /* 56px - Hero headlines */
```

### Typography Styles

**Hero Headline**
```css
font-size: var(--text-4xl);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 1.1;
```

**Section Header**
```css
font-size: var(--text-xl);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--vnl-orange-primary);
```

**Body Text**
```css
font-size: var(--text-base);
font-weight: 400;
line-height: 1.6;
color: var(--vnl-gray-light);
```

**Label/Tag**
```css
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 12px;
background: var(--vnl-orange-primary);
color: var(--vnl-white);
border-radius: 4px;
```

---

## Layout & Spacing

### Spacing Scale

```css
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.5rem;    /* 24px */
--space-6: 2rem;      /* 32px */
--space-8: 3rem;      /* 48px */
--space-10: 4rem;     /* 64px */
--space-12: 6rem;     /* 96px */
```

### Border Radius

```css
--radius-sm: 8px;     /* Small cards, buttons */
--radius-md: 12px;    /* Standard cards */
--radius-lg: 16px;    /* Large cards, modals */
--radius-xl: 24px;    /* Hero sections */
```

### Container Widths

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
```

---

## Component Styles

### Cards

**Standard Card**
```css
background: var(--vnl-gray-dark);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-5);
transition: transform 0.2s, box-shadow 0.2s;

&:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
```

**Featured Card (Match/Game)**
```css
background: linear-gradient(135deg, #2d1b4e 0%, #1a1a2e 100%);
border-radius: var(--radius-lg);
border: 2px solid rgba(109, 45, 158, 0.3);
padding: var(--space-6);
position: relative;
overflow: hidden;

/* Optional wave pattern overlay */
&::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('wave-pattern.svg');
  opacity: 0.1;
  pointer-events: none;
}
```

**Sponsor Card**
```css
background: var(--vnl-white);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
```

### Buttons

**Primary Button**
```css
background: linear-gradient(135deg, #ff5722 0%, #ff6b3d 100%);
color: var(--vnl-white);
font-weight: 700;
font-size: var(--text-base);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 14px 32px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;

&:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
}

&:active {
  transform: translateY(0);
}
```

**Secondary Button (Outline)**
```css
background: transparent;
color: var(--vnl-white);
font-weight: 700;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 12px 24px;
border-radius: 24px;
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;

&:hover {
  border-color: var(--vnl-white);
  background: rgba(255, 255, 255, 0.1);
}
```

**Icon Button**
```css
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;

&:hover {
  background: rgba(255, 255, 255, 0.2);
}
```

### Badges & Tags

**Event Badge**
```css
background: var(--vnl-orange-primary);
color: var(--vnl-white);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 12px;
border-radius: 4px;
display: inline-block;
```

**Date Badge**
```css
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
```

### Match Display Component

**Match Card Structure**
```css
.match-card {
  background: linear-gradient(135deg, #1a4d2e 0%, #0d2818 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.team-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.team-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vnl-white);
  padding: var(--space-2);
}

.vs-divider {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--vnl-white);
  text-transform: uppercase;
}

.match-date {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}
```

### Navigation Items

**Social Media Buttons**
```css
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--vnl-white);
font-weight: 600;
transition: background 0.2s, border-color 0.2s;

&:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
```

---

## Interactive Elements

### Hover States

- **Cards**: Lift 2px upward, add shadow
- **Buttons**: Lift 2px upward, enhance glow
- **Links**: Increase opacity, shift color slightly brighter

### Active States

- **Buttons**: Return to resting position
- **Cards**: Scale down 98%

### Focus States

```css
outline: 2px solid var(--vnl-blue-electric);
outline-offset: 2px;
```

---

## Section Patterns

### Hero Section

```css
background: linear-gradient(135deg, #2d1b4e 0%, #1a0d2e 50%, #0a1428 100%);
padding: var(--space-12) var(--space-6);
position: relative;
overflow: hidden;

/* Wave pattern overlay */
&::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('wave-pattern.svg');
  opacity: 0.15;
  pointer-events: none;
}
```

### Content Sections

```css
background: var(--vnl-black);
padding: var(--space-8) var(--space-6);
```

### Section Headers

**Pattern for "NAGRADNE IGRE", "ŽELIŠ VEČ?", etc.**
```css
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--vnl-orange-primary);
margin-bottom: var(--space-4);
```

---

## Iconography

### Icon Style
- Line-based icons preferred
- Stroke width: 2px
- Size range: 20px - 32px
- Color: White or brand accent colors

### Common Icons Needed
- Arrow right (navigation)
- Social media logos (Instagram, TikTok, Facebook, YouTube, X/Twitter)
- Shopping bag (merch)
- Ticket
- Calendar
- Location pin

---

## Imagery Guidelines

### Team Logos
- Circular containers
- White background
- Padding around logo
- Drop shadow for depth

### Hero/Banner Images
- Dark overlay (40-60% opacity) over photos
- Gradient overlay from purple to transparent
- High contrast, dynamic action shots

### Sponsor Logos
- White or light background cards
- Center-aligned
- Maintain aspect ratio
- Adequate padding

---

## Accessibility

### Contrast Ratios
- Body text on dark background: Minimum 4.5:1
- Large text (18px+): Minimum 3:1
- Interactive elements: Minimum 3:1

### Focus Indicators
All interactive elements must have visible focus states for keyboard navigation.

### Color Independence
Never rely solely on color to convey information. Use icons, labels, or patterns.

---

## Animation Guidelines

### Timing Functions
```css
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
```

### Duration
- Micro-interactions: 150-200ms
- Standard transitions: 250-300ms
- Page transitions: 400-500ms

### Principles
- Smooth, natural motion
- Consistent timing across similar elements
- Purposeful animation (not decorative)

---

## Responsive Breakpoints

```css
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
```

### Mobile-First Approach
Design for mobile first, then enhance for larger screens.

---

## Brand Voice in Design

### Visual Tone
- **Bold**: Strong typography, high contrast
- **Dynamic**: Gradients, motion, energy
- **Premium**: Clean layouts, generous spacing
- **International**: Inclusive, multilingual support

### Emotional Target
- Excitement and anticipation
- Pride and community
- Competitive spirit
- Global connection

---

## Special Effects

### Glow Effect (for CTAs)
```css
box-shadow: 0 0 20px rgba(255, 87, 34, 0.3);
```

### Card Depth
```css
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
```

### Overlay Pattern
Use subtle geometric patterns (waves, lines) at low opacity to add visual interest to large color blocks.

---

## Usage Examples

### Fan Hub Homepage Layout

1. **Header**: Team logo + "DOBRODOŠLI, NAVIJAČI! FAN HUB"
2. **Match Display**: Featured upcoming match card
3. **Interactive Games Section**: "NAGRADNE IGRE" with game cards
4. **Sponsor Section**: "SPONZOR VEČERA" with sponsor logo card
5. **Engagement Section**: "ŽELIŠ VEČ?" with merch and ticket promotions
6. **Social Section**: "SLEDI NAM" with social media buttons
7. **Footer**: Links and legal info

---

## Design Principles

1. **Hierarchy**: Use size, color, and spacing to create clear visual hierarchy
2. **Consistency**: Maintain consistent spacing, typography, and color usage
3. **Contrast**: Leverage dark backgrounds with bright accent colors
4. **Whitespace**: Use generous spacing to prevent claustrophobia
5. **Focus**: Guide user attention with strategic use of color and size
6. **Energy**: Inject movement through gradients, hover states, and visual rhythm

---

## File Naming Conventions

### Components
- Use kebab-case: `match-card.css`, `cta-button.css`
- Prefix variants: `button-primary.css`, `button-secondary.css`

### Assets
- Images: `hero-banner-home.jpg`, `team-logo-celje.png`
- Icons: `icon-arrow-right.svg`, `icon-social-instagram.svg`
- Patterns: `pattern-waves-purple.svg`

---

*Last Updated: April 2026*
*Version: 1.0*