Date Nite Game Nite — Website Theming Guidelines

This document outlines the design tokens, CSS variables, component specifications, and styling patterns derived from the official brand color system.

1. CSS Design Tokens

Add these variables to your :root stylesheet:

:root {
  /* Brand Colors */
  --color-primary-purple: #6A00E6;
  --color-secondary-purple: #8A2BE2;
  --color-accent-lavender: #B794F6;

  /* Surfaces & Backgrounds */
  --color-bg-black: #07040B;
  --color-surface: #1A1424;
  --color-surface-hover: #261D35;

  /* Typography / Text Colors */
  --color-text-primary: #F5F3FF;
  --color-text-muted: #ADA4C7;

  /* Gradients */
  --gradient-brand: linear-gradient(90deg, #6A00E6 0%, #8A2BE2 100%);
  --gradient-glow: radial-gradient(circle at center, rgba(138, 43, 226, 0.15) 0%, transparent 70%);

  /* Borders & Shadows */
  --border-subtle: 1px solid rgba(183, 148, 246, 0.15);
  --border-accent: 1px solid #8A2BE2;
  --shadow-glow: 0 0 20px rgba(106, 0, 230, 0.35);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
}

2. Component Specifications

2.1 Buttons

Primary Button

Background: #6A00E6 or var(--gradient-brand)
Text Color: #F5F3FF
Border: None
Border Radius: 12px (or pill: 9999px)
Hover State: background: #8A2BE2; box-shadow: 0 0 24px rgba(138, 43, 226, 0.45);
Example Usage: "Join the VIP Waitlist →"

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: var(--color-primary-purple);
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background-color: var(--color-secondary-purple);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
  transform: translateY(-1px);
}

Secondary Button

Background: Transparent (transparent)
Border: 1.5px solid #8A2BE2
Text Color: #F5F3FF
Hover State: background: rgba(138, 43, 226, 0.12); border-color: #B794F6;
Example Usage: "Learn More →"

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: transparent;
  color: var(--color-text-primary);
  font-weight: 500;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-secondary-purple);
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-secondary:hover {
  background-color: rgba(138, 43, 226, 0.12);
  border-color: var(--color-accent-lavender);
}

2.2 Cards & Surface Containers

Background: #1A1424
Border: 1px solid rgba(183, 148, 246, 0.15)
Border Radius: 16px
Hover: Border transitions to rgba(183, 148, 246, 0.35) with a soft ambient purple shadow.

.card {
  background-color: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

2.3 Form Fields & Inputs

Field Background: #1A1424
Border: 1px solid rgba(183, 148, 246, 0.25)
Text: #F5F3FF
Placeholder: #ADA4C7
Focus: outline: none; border-color: #8A2BE2; box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.25);

3. Typography & Text Hierarchy

Element	Color	Font / Treatment
Headlines (H1, H2)	`#F5F3FF`	Dramatic Serif Display / Bold modern styling
Accent Text / Highlights	`#8A2BE2` or `#B794F6`	Script / Italic / Brush accent (e.g., "Together")
Subtitles / Navigation	`#ADA4C7`	Sans-serif, tracking `0.05em`
Section Eyebrows / Badges	`#B794F6`	Uppercase, wide tracking `0.15em`, font size `0.75rem - 0.85rem`
Body Paragraphs	`#ADA4C7` / `#F5F3FF`	High contrast, line height `1.6`

4. UI Accents & Dividers

Horizontal divider lines should use gradient strokes or subtle glowing accents:

.brand-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #8A2BE2 50%, transparent);
  border: none;
  margin: 2rem 0;
}