Brand Guide — Bono AI

Visual identity system for Bono AI.

Logo

The Bono AI lockup pairs the animated orb with the Bono wordmark. Available as orb-only, orb + text, horizontal, stacked, and text-only variants in light and dark.

Orb Mark

The orb is the primary Bono identity mark. The character is used on a contextual basis. Lockups available as orb-only, orb + text, horizontal, stacked, and text-only.

Typography

Google Sans Flex is the primary brand typeface. Bold weight for headings, regular weight for body text. Additional app content fonts include Inter, Roboto, Merriweather, Poppins, Source Serif 4, and Georgia.

Colors

Semantic design tokens defined as HSL CSS variables. Each token adapts between light and dark modes. Key colors: Background (#FCFCFC / #09090B), Foreground (#0A0A0F / #FAFAFA), Primary (#18181B / #FAFAFA). Brand gradient: #8F0AC6 to #CD5451. Bono AI gradient: #9C43FE to #4CC2E9 to #101499.

Orb Element

A WebGL animated orb used as the signature background element across auth, landing, and content pages. Available in dark (hue: 0, bg: #09090b) and light (hue: 20, bg: #ffffff) variants.