Brand guide

sm — dense headers / admin

md — default page header

lg — home hero

• Always render the logo through <SiteLogo /> — never a raw <img>. It ships responsive WebP + PNG sources for retina screens.
• Use size="lg" once per page at most (hero). Every other header uses md; tight toolbars use sm.
• Pass priority on the logo that appears above the fold; leave it off everywhere else so it lazy-loads.
• Keep at least 16px of clear space around it. Never recolor, stretch, crop, add outlines, or place it on a busy photo.
• The hard black drop shadow is part of the mark — don't remove it.

• Only use these tokens (defined in src/styles.css). Never hardcode hex colors or Tailwind palette colors in components.
• One loud background per page, black ink for text and borders. Two loud colors fighting on the same surface = pick one.
• Text on any loud background is near-black (#0a0a0a) for contrast, never gray.

Archivo Black — headings

Space Grotesk — body, buttons and labels

• Headings: font-display, UPPERCASE, tight leading (leading-[0.95]), one h1 per page.
• Body: font-body, 15–17px, relaxed leading. Small print is text-[11px] font-bold uppercase tracking-widest at ~70% opacity.
• Never introduce a third typeface. No serif, no Inter, no Poppins.

• Panels use card-brutal / card-brutal-lg; buttons use btn-brutal btn-brutal-press. Borders 3–4px solid ink, offset hard shadow, never soft blur.
• Radii come from --radius (rounded-2xl / full pills). No square corners.
• Motion is punchy and short: animate-pop, animate-shake, animate-wobble. Nothing longer than ~500ms except idle drift.

• Anti-affirmations: funny, blunt, self-aware. Never earnest self-help.
• Profanity is opt-in and controlled by the spice slider — respect the setting.
• Button labels are short and snarky. Legal pages stay plain and readable.