Design System

Global Theming via CSS Variables

Slide mode encourages a "Theme-first" design philosophy. By editing theme.css, you alter the visual aesthetic of the entire presentation at once.

theme.css

:root {
  --color-bg: #FAF7F2;
  --color-text: #2D2A26;
  --color-primary: #D4632A;
  --color-accent: #C4963A;
  --color-surface: #F0EBE3;
  
  --font-sans: 'Inter', sans-serif;
}

Prompting Tip #1

"Change the entire theme to a Cyberpunk aesthetic. Use dark grays for the background, and neon pink and cyan for accents."

Prompting Tip #2

"Increase the global border radius for all cards to make the deck feel more playful and rounded."