WEB DESIGN GUIDE
Dark-first, cinematic, typographically bold. The web presence mirrors the video/motion identity.
DESIGN PHILOSOPHY
Dark-first
#151525 is the default background. Light themes are not part of the brand.
Bold type
League Gothic uppercase headlines. Brachial for hero moments.
Cinematic depth
Layered backgrounds with subtle textures — dot grids, grain, edge glows.
Purposeful motion
Spring-physics animations communicate state change, not decoration.
Generous spacing
Sections breathe. Dense layouts feel off-brand.
EASING & DURATION
EASING CURVES
Primary
cubic-bezier(0.33, 0, 0.2, 1)
Most transitions
Enter
cubic-bezier(0, 0, 0.2, 1)
Elements appearing
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
Playful interactions
DURATION SCALE
Instant
Fast
Normal
Slow
Deliberate
SHADOWS
sm
md
lg
Prefer border (rgba(255,255,255,0.1)) over shadows for cards. Shadows for modals and floating elements.
INTERACTIVE STATES
HOVER
Buttons: Lighten bg or shift to accent
Links: Yellow underline appears
Cards: Border brightens, translateY(-2px)
FOCUS
ACTIVE
Buttons: scale(0.98), darken bg
Duration: 100ms
DISABLED