import { BrainBloxWordmark, BrainBloxIcon } from '@/lib/BrainBloxLogo'
// Navbar
<BrainBloxIcon size={40} />
<BrainBloxWordmark size={32} variant="color" />
// On dark bg
<BrainBloxWordmark size={48} variant="white" />
import { brainBloxMetadata } from '@/lib/metadata'
export const metadata = brainBloxMetadata
<div className="bg-bb-night text-bb-ore font-display">
BrainBlox
</div>
<button className="bg-bb-grass text-bb-limeLight rounded-bb-pill">
Play Now
</button>
Always use Rubik Iso for the wordmark.
Keep the 4-block row above the wordmark when space allows.
Use SVG whenever possible.
Minimum logo width: 120px
Never stretch or skew the logo.
Never use a different font for the wordmark.
Never place the color logo on a busy or clashing background.
Never recolor individual letters.
Build · Solve · Explore (primary)Learn Math. Build Worlds.Math Adventures for Kids
Place SVGs in /public/assets/brainblox/svg/
PNGs in /public/assets/brainblox/png/
WebPs in /public/assets/brainblox/webp/
Icons in /public/