LAB37 · brand portal

BIONIC

Brand guidelines, color tokens, typography, voice and assets. Edit in Notion; changes appear here within five minutes.

#BDFF37
#BDFF3766
#BDFF3733
#EFECEA
#000000
#0A0A0A
#141414
#1E1E1E
#2A2A2A
#ff4444
#FFFFFF

Brand Kit

Colors

TokenHexUse
--primary#BDFF37Lime accent, CTAs, highlights
--lime-dim#BDFF3766Subtle accents (40% alpha)
--lime-glow#BDFF3733Glow shadows (20% alpha)
--foreground#EFECEACream text on dark
--background#000000Pure black canvas
--surface-1#0A0A0ACard surfaces
--surface-2#141414Accent surfaces
--surface-3#1E1E1EMuted/secondary surfaces
--surface-4#2A2A2ABorders, inputs
--destructive#ff4444Errors

Typography

  • Headings: Trade Gothic LT Std Heading (--font-tg-heading) — UPPERCASE, weight 700, color #FFFFFF
  • Body: Trade Gothic LT Std (--font-tg-body) — color #EFECEA
  • Loaded via next/font/local in bionic-web/src/lib/fonts.ts

Visual treatments

  • Lime glow shadows on focal elements (text-glow, shadow-glow utility classes)
  • Glass-bubble chat surfaces (backdrop blur 10px, gradient borders)
  • Ken Burns hero (slow 24s zoom, respects prefers-reduced-motion)
  • Selection: lime on black

Voice & Tone

Smart, science-backed, no fitness-bro. Bionic is the studio for people who do not want to go to the gym. EMS does the work, member just lies there. Confident but not arrogant. Specific numbers (20 minutes, 2 sessions, etc.) beat vague claims.

Anti-examples

  • No transformation before/afters
  • No clinical/medical tone
  • No discount stack ads
  • No "real Z" / "X, not Y" agency-slogan format
  • No fitness-bro phrasing

Reference

  • Live: https://bionicems.se
  • Globals CSS: bionic-web/src/app/globals.css

Assets

Drive folders + studio photo library + ad creative archive.


Quick Reference

  • Booking system: Mana (see [[Mana]] hub)
  • No confirmation emails by design
  • Stockholm only for now