applying-conference-branding

name	applying-conference-branding
description	Establishes conference visual identity with custom fonts, color palettes, and Tailwind CSS v4 design tokens. Covers self-hosted font setup, @theme inline configuration, and typography hierarchy. Use when applying brand styling to a conference display.

Applying Conference Branding

Design Token System

Tailwind CSS v4 uses @theme inline in CSS instead of tailwind.config.js:

@theme inline {
  --color-navy: #000011;          /* Background */
  --color-teal: #00c0b5;          /* Primary accent */
  --color-teal-dim: #01968f;      /* Muted accent */
  --color-teal-glow: rgba(0, 192, 181, 0.15);
  --color-cyan: rgb(230, 248, 246); /* Primary text */

  /* Text hierarchy via opacity variants */
  --color-cyan-60: rgba(230, 248, 246, 0.7);   /* Secondary */
  : (, , , );   
  : (, , , );  

  
  : ;
  : (, , , );

  
  : ;    
  : ;    
  : ;    
  : ;    

  
  : , , monospace;
  : , , , monospace;
}