Style Guide - Retro Computer Dresden #

This document outlines the design system, colors, typography, and component styles used throughout the Retro Computer Dresden website.

🎨 Color Palette #

Primary Colors #

--accent-color: #E74E52        /* Red - Primary accent */
--secondary-color: #30B2A1     /* Teal - Secondary accent */
--primary-color: #ED9055       /* Orange - Primary brand color */

Background Colors #

--background-color: #181818    /* Dark background */
--accent-background-color: #111     /* Very dark accent background */

Text Colors #

--text-color: #eee            /* Light text */

Additional Colors #

Pixelforscher Landing Palette #

The Pixelforscher area uses a dedicated neon-meets-midnight palette to distinguish the program from the general club branding
while staying in a retro-futuristic mood.

--pixelforscher-ink: #050b1a;          /* Deep backdrop for hero gradients */
--pixelforscher-panel: #0f1b32;        /* Section background */
--pixelforscher-card: #16254a;         /* Cards and info modules */
--pixelforscher-glow: #5de0ff;         /* Primary accent/callouts */
--pixelforscher-highlight: #7c5dff;    /* Secondary accent for borders/shadows */
--pixelforscher-border: rgba(93, 224, 255, 0.3); /* Soft luminous borders */
--pixelforscher-muted: rgba(255, 255, 255, 0.7);  /* Text tone for descriptions */

Usage guidelines:

🔤 Typography #

Font Families #

Primary Font: Inter UI #

Accent Font: Press Start 2P #

Typography Scale #

Headings #

h1 {
  font-size: 2em;
  font-family: var(--font-family-accent);
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  font-family: var(--font-family-accent);
  margin: 0.5em 0;
}

Body Text #

body, p, ul, ol {
  font-size: 1rem;
  line-height: 1.6;
  font-family: var(--font-family);
}

Large Screen Typography (1200px+) #

h1 { font-family: var(--font-family-accent); }
h2 { 
  line-height: 4rem;
  font-family: var(--font-family-accent);
}
body, p, ul, ol {
  font-size: 1.2rem;
  line-height: 1.6;
}

🎯 Component Styles #

Buttons #

Primary Button (.btn) #

.btn {
  border-radius: 0;                    /* No rounded corners */
  border: 2px solid var(--accent-color);
  background: var(--primary-color);
  color: #181818;
  box-shadow: 3px 3px 0 var(--accent-color);
  padding: .5rem .9rem;
  font-family: "Press Start 2P", monospace;
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn:hover {
  background: var(--secondary-color);
  color: #000;
}

Event Hero Buttons #

.event-hero__cta, .event-hero__ghost {
  border-radius: 0;
  border: 2px solid var(--accent-color);
  background: var(--accent-background-color);
  color: var(--text-color);
  font-family: 'Press Start 2P', monospace;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  box-shadow: 3px 3px 0 var(--primary-color);
}

.event-hero__cta:hover, .event-hero__ghost:hover {
  background: var(--secondary-color);
  color: #000;
  box-shadow: 3px 3px 0 var(--accent-color);
}

Cards & Containers #

Event Hero Card #

.event-hero {
  border-radius: 0;
  border: 2px solid var(--primary-color);
  box-shadow: 4px 4px 0 var(--accent-color);
  margin: 16px 0;
  color: #fff;
  overflow: hidden;
}

Subscription Box #

.subscription-box {
  background: var(--accent-background-color);
  border: 2px solid var(--primary-color);
  box-shadow: 4px 4px 0 var(--accent-color);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.subscription-box:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--accent-color);
}

Header Navigation #

header nav {
  background: hsla(0,0%,100%,0.9);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5em;
  z-index: 1000;
}

Mobile Menu #

#hamitems a {
  font-family: var(--font-family-accent);
  font-size: 1.2rem;
  color: var(--text-color);
  text-align: center;
  padding: 0.5rem;
}

🎨 Visual Effects #

Retro Scanline Effect #

header::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.2;
}

Pixelated Elements #

ul li::before {
  background: var(--primary-color);
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 var(--accent-color);
}

Box Shadows #

📱 Responsive Design #

Breakpoints #

Container Widths #

section {
  width: 100%;
}

@media (min-width: 768px) {
  section { width: 100%; }
}

@media (min-width: 1200px) {
  section { width: 100%; }
}

🎯 Design Principles #

Retro/Arcade Aesthetic #

Accessibility #

Performance #

🛠️ CSS Custom Properties #

Available Variables #

:root {
  --accent-color: #E74E52;
  --secondary-color: #30B2A1;
  --primary-color: #ED9055;
  --background-color: #181818;
  --accent-background-color: #111;
  --text-color: #eee;
  --font-family-accent: 'Press Start 2P', monospace;
  --font-family: Inter UI, sans-serif;
  --nav-h: 56px; /* Desktop */
  --main-width: calc(100vw - 3em);
}

Usage Guidelines #

📋 Component Checklist #

When creating new components, ensure they follow:

🎨 Color Usage Guidelines #

Accent Color (#E74E52) #

Secondary Color (#30B2A1) #

Primary Color (#ED9055) #

Background Colors #