How this site was built
A short teardown of the design decisions behind the MINT site — written so anyone can learn from it, and so the client knows exactly what they got.
The read
MINT is a late-night hookah lounge in Lakeland — pitch-black room, green light, DJs on the weekend. The site's job is to feel like standing inside the room at 11PM. So the design language is literal: darkness, neon, and smoke.
The wordmark
MINT's logo replaces the 't' with a hookah and floats a mint leaf over the word. Rather than pasting a low-res image, the wordmark is rebuilt live: real type for 'min', an SVG hookah as the 't', an SVG leaf above — so it scales razor-sharp from the nav to the 12rem hero and inherits the neon glow.
Smoke
Two canvas layers drift pre-rendered soft-gradient puffs upward with a sine-wave sway — one behind the hero, one behind the closing CTA. Stamping a cached sprite instead of drawing gradients per-frame keeps it cheap; the layer is capped at 20 puffs and disabled entirely under prefers-reduced-motion.
Neon
The hero wordmark flickers on like a real neon sign (a one-shot keyframe animation), then settles into a slow 4.5s glow-breathing loop. Glow is pure text-shadow — no filters, no repaint storms.
Typography & color
Unbounded (light weights) gives the display type a wide, club-flyer geometry; Figtree keeps body copy warm and legible. Palette: near-black green #060906, mint #46C25A, neon #5DF07A, and a desaturated 'fog' #9FB3A4 for secondary text — sampled from the brand's green and their room lighting.
Content honesty
The weekly lineup (Lowkey Mondays, Wine That Back Thursdays, Friday DJs, Too Turnt Saturdays), hours, address, phone and 21+ policy all come from MINT's real flyers and public profiles. The page points to @mintlakeland for current events instead of inventing them.
Conversion logic
A lounge sells two actions: reserve a table and pull up. The phone number is the primary CTA in the nav, hero and closer; directions and Instagram are the secondaries. No forms — nobody fills out a form to go smoke hookah.
Stack
Next.js 16 (App Router), Tailwind v4 design tokens, Motion for scroll reveals, hand-rolled canvas particles, next/font, deployed on Vercel.
Designed & built by Blue Hippo Cyber — websites and automation for working businesses.