Branding

BANGER STYLE GUIDE

Single source of truth for the look & feel. If a UI is drifting, fix it here first.

banger.boxminiappFarcasterX

Brand voice

We are
  • • playful, competitive, and internet-native
  • • simple to understand at a glance
  • • obsessed with the "early scout" fantasy
We are not
  • • corporate / sterile
  • • overly technical on the surface
  • • price-action / "wen moon" spam

Colors

Use these exact hexes.
Primary Orange
#FF8717
Primary brand / CTAs
Primary Dark
#E06B00
Hover / depth
Deep Orange
#CC5500
Gradients / emphasis
Cream
#FCFAC2
Background panels
Black
#000000
Text / UI chrome
White
#FFFFFF
Cards
Brown
#8B5E34
Optional accent
Peach
#FFB366
Optional accent
Mint
#7DD3C0
Optional accent
CSS tokens
:root {
  --color-primary: #FF8717;
  --color-primary-dark: #E06B00;
  --color-secondary: #FCFAC2;
}
Gradients
/* Primary */
background: linear-gradient(180deg, #FF8717 0%, #E06B00 100%);

/* Darker */
background: linear-gradient(180deg, #E06B00 0%, #CC5500 100%);

Typography

Headlines
BANGERS
Use for: nav logo, section titles, big numbers, CTA headlines.
Body
Bricolage Grotesque
Use for: paragraphs, UI labels, helper text.
Tailwind helpers
/* Landing */
.font-bangers { font-family: 'Bangers', cursive !important; }

/* Frontend should match primary orange */
text-banger-orange = #FF8717
bg-banger-orange = #FF8717

UI primitives

Buttons
Pills
HOTSPR S4NEW
Cards
Example card
Cream background, strong borders, fat radius.

Product constants

Token address
0x2B00f1bbdd58eb84f5bef0a5567f5b62b5f04e0b
Canonical links
  • • Landing: https://www.banger.box
  • • Miniapp: https://miniapp.banger.box
  • • Farcaster: https://warpcast.com/~/channel/betonbangers
  • • X: https://twitter.com/betonbangers