Brand Guidelines
Visual identity, logos, colors, typography, and brand assets for BrainGrid.
Logos & Symbols
Download logos in SVG format. Always maintain clear space around the logo equal to the height of the "B" in BrainGrid.
Our Logos
Primary Logo (Jungle)
Use on light backgrounds
Logo on Jungle
Lime logo on jungle dark background
Logo on Lime
Jungle logo on lime background
White Logo
For dark overlays and images
Our Symbols
The BrainGrid symbol can be used independently for favicons, app icons, and social media avatars.
Our Name
Refer to us as BrainGrid. Not “BrainGrid AI” or “Brain Grid”.
Color Palette
Click any color to copy its hex value. Primary colors form the core brand identity.
Primary Colors
Secondary Colors
Gradient System
The primary lime gradient is used for buttons, tags, and surface elements.
Primary Lime Gradient
CSS
Vertical gradient for buttons, CTAs, and decorative elements
Usage Examples
Primary Button
Overline Tags
Tailwind class:
bg-gradient-to-b from-brand-lime via-brand-lime-mid via-[59.306%] to-brand-lime-darkTypography
Our type system uses condensed headlines for impact and clean sans-serif for readability.
Headline Font
Futura PT Cond Extra Bold
Used for H1, H2, H3 headlines. Bold, condensed, uppercase.
Body Font
Uncut Sans Variable
Used for body text, UI elements, and secondary content.
Heading Scale
Hero Headlines
font-futura text-5xl font-extrabold uppercase tracking-tight leading-[1.08] md:text-6xl lg:text-7xlSection Headings
font-futura text-3xl font-extrabold uppercase tracking-tight leading-[1.1] md:text-4xl lg:text-5xlSubsection Titles
font-futura text-2xl font-extrabold uppercase leading-[1.2] md:text-3xlCard Headings
font-sans text-xl font-semibold leading-[1.3] md:text-2xlUsage Guidelines
Follow these guidelines to maintain brand consistency across all applications.
Do
- Use lime logo on dark (jungle/black) backgrounds
- Use jungle logo on light (cream/lime) backgrounds
- Maintain minimum clear space around logos
- Use the lime gradient for primary CTAs
- Apply uppercase to headline font only
- Ensure sufficient contrast for accessibility
Don't
- Place lime logo on lime background
- Stretch, rotate, or distort the logo
- Use non-brand colors for the logo
- Add effects like drop shadows or glows
- Use headline font for body text
- Mix old orange brand with new lime brand
Minimum Sizes
Ensure legibility by respecting minimum size requirements.
Digital (Web/App)
120px
minimum width
1 inch
minimum width
Social Avatar
48×48px
symbol only
For AI and Developers
Brand definitions in LLM-friendly, machine-readable formats. Use the JSON for design systems, AI agents, and automated pipelines. The TXT file provides a quick reference for LLMs and copy-pasting CSS variables.
LLM-friendly, machine-readable tokens for design systems, AI agents, and automated pipelines
LLM-friendly, human-readable quick reference with copy-paste CSS variables
