================================================================================ BRAINGRID BRAND REFERENCE ================================================================================ Version: 1.0 Last Updated: December 19, 2024 Download JSON: https://www.braingrid.ai/brand.json ================================================================================ COLORS ================================================================================ PRIMARY COLORS ───────────────────────────────────────────────────────────────────────────────── Name Hex CSS Variable Tailwind Class ───────────────────────────────────────────────────────────────────────────────── Lime #C2E476 --color-brand-lime bg-brand-lime Jungle #10312D --color-brand-jungle bg-brand-jungle Cream #F3F1E8 --color-brand-cream bg-brand-cream Usage: Core brand identity - Lime for accents, Jungle for backgrounds, Cream for text SECONDARY COLORS ───────────────────────────────────────────────────────────────────────────────── Name Hex CSS Variable Tailwind Class ───────────────────────────────────────────────────────────────────────────────── Lime Mid #B4D864 --color-brand-lime-mid bg-brand-lime-mid Lime Dark #AACF57 --color-brand-lime-dark bg-brand-lime-dark Jungle Dark #0B211F --color-brand-jungle-dark bg-brand-jungle-dark Jungle Light #3D5752 --color-brand-jungle-light bg-brand-jungle-light Offwhite #FCFCFB --color-brand-offwhite bg-brand-offwhite Purple #795BC2 --color-brand-purple bg-brand-purple Purple Dark #473392 --color-brand-purple-dark bg-brand-purple-dark Black #121212 --color-brand-black bg-brand-black Usage: Gradients, accent variants, backgrounds, and utility colors ================================================================================ GRADIENTS ================================================================================ PRIMARY LIME GRADIENT ───────────────────────────────────────────────────────────────────────────────── Name: Lime Gradient CSS: linear-gradient(to bottom, #C2E476 0%, #B4D864 59.306%, #AACF57 100%) Tailwind Classes: bg-gradient-to-b from-brand-lime via-brand-lime-mid via-[59.306%] to-brand-lime-dark Utility Class: gradient-lime Usage: Primary CTA buttons, hero elements, accent backgrounds Direction: Always vertical (top to bottom) ================================================================================ TYPOGRAPHY ================================================================================ HEADLINE FONT ───────────────────────────────────────────────────────────────────────────────── Font Family: Futura PT Cond Fallback: sans-serif CSS Variable: --font-headline Tailwind Class: font-futura Weights Available: - 400 (normal) - 500 (medium) - 700 (bold) - 800 (extrabold) Usage: Headlines, section titles, hero text Style: Always UPPERCASE for headlines BODY FONT ───────────────────────────────────────────────────────────────────────────────── Font Family: Uncut Sans Fallback: Inter, system-ui, -apple-system, sans-serif CSS Variable: --font-body Tailwind Class: font-sans Weights Available: - 400 (normal) - 500 (medium) - 600 (semibold) - 700 (bold) Usage: Body text, paragraphs, UI elements ================================================================================ HEADING STYLES ================================================================================ H1 - HERO HEADLINES ───────────────────────────────────────────────────────────────────────────────── Utility Class: heading-h1 Font: Futura PT Cond Weight: 800 (extrabold) Transform: UPPERCASE Letter Spacing: -0.025em Line Height: 1.08 Responsive Sizes: Mobile (default): 48px (3rem) Tablet (md): 60px (3.75rem) Desktop (lg): 72px (4.5rem) Tailwind Classes: font-futura text-5xl font-extrabold uppercase tracking-tight leading-[1.08] md:text-6xl lg:text-7xl H2 - SECTION HEADINGS ───────────────────────────────────────────────────────────────────────────────── Utility Class: heading-h2 Font: Futura PT Cond Weight: 800 (extrabold) Transform: UPPERCASE Letter Spacing: -0.025em Line Height: 1.1 Responsive Sizes: Mobile (default): 30px (1.875rem) Tablet (md): 36px (2.25rem) Desktop (lg): 48px (3rem) Tailwind Classes: font-futura text-3xl font-extrabold uppercase tracking-tight leading-[1.1] md:text-4xl lg:text-5xl H3 - SUBSECTION HEADINGS ───────────────────────────────────────────────────────────────────────────────── Utility Class: heading-h3 Font: Futura PT Cond Weight: 800 (extrabold) Transform: UPPERCASE Line Height: 1.2 Responsive Sizes: Mobile (default): 24px (1.5rem) Tablet (md): 30px (1.875rem) Tailwind Classes: font-futura text-2xl font-extrabold uppercase leading-[1.2] md:text-3xl H4 - FEATURE TITLES ───────────────────────────────────────────────────────────────────────────────── Utility Class: heading-h4 Font: Uncut Sans (body font) Weight: 600 (semibold) Transform: none (sentence case) Line Height: 1.3 Responsive Sizes: Mobile (default): 20px (1.25rem) Tablet (md): 24px (1.5rem) Tailwind Classes: font-sans text-xl font-semibold leading-[1.3] md:text-2xl ================================================================================ LOGOS ================================================================================ PRIMARY LOGO ───────────────────────────────────────────────────────────────────────────────── Lime on Jungle (for dark backgrounds): SVG: https://www.braingrid.ai/brand/full-logo-lime-on-jungle.svg PNG: https://www.braingrid.ai/logos/full-logo-lime-on-jungle.png Jungle on Lime (for light backgrounds): SVG: https://www.braingrid.ai/brand/full-logo-jungle-on-lime.svg PNG: https://www.braingrid.ai/logos/full-logo-jungle-on-lime.png White on Transparent: SVG: https://www.braingrid.ai/brand/logo-white-on-transparent.svg PNG: https://www.braingrid.ai/logos/logo-white-on-transparent.png Lime on Transparent: SVG: https://www.braingrid.ai/brand/logo-lime-on-transparent.svg SYMBOL / ICON ───────────────────────────────────────────────────────────────────────────────── Lime on Jungle (for dark backgrounds): SVG: https://www.braingrid.ai/brand/symbol-lime-on-jungle.svg Jungle on Lime (for light backgrounds): SVG: https://www.braingrid.ai/brand/symbol-jungle-on-lime.svg Cream on Jungle: SVG: https://www.braingrid.ai/brand/symbol-cream-on-jungle.svg Jungle on Transparent: SVG: https://www.braingrid.ai/brand/symbol-jungle-on-transparent.svg Symbol 800px: PNG: https://www.braingrid.ai/logos/braingrid-symbol-800.png ================================================================================ GUIDELINES ================================================================================ DO'S ───────────────────────────────────────────────────────────────────────────────── ✓ Use the lime gradient for primary CTAs and key highlights ✓ Maintain strong contrast between lime text and jungle backgrounds ✓ Use Futura PT Cond in UPPERCASE for headlines ✓ Use Uncut Sans for body text and UI elements ✓ Apply the gradient consistently from top to bottom ✓ Use cream (#F3F1E8) for primary text on dark backgrounds ✓ Maintain adequate whitespace around logo elements DON'TS ───────────────────────────────────────────────────────────────────────────────── ✗ Don't use lime on light backgrounds without sufficient contrast ✗ Don't stretch or distort the logo ✗ Don't use lowercase for headlines in Futura ✗ Don't mix brand colors in non-approved combinations ✗ Don't apply gradients horizontally (always vertical) ✗ Don't use the logo smaller than 24px height ✗ Don't place logo on busy backgrounds without a container ================================================================================ QUICK REFERENCE ================================================================================ CSS VARIABLES (copy-paste ready) ───────────────────────────────────────────────────────────────────────────────── /* Colors */ --color-brand-lime: #C2E476; --color-brand-lime-mid: #B4D864; --color-brand-lime-dark: #AACF57; --color-brand-jungle: #10312D; --color-brand-jungle-dark: #0B211F; --color-brand-jungle-light: #3D5752; --color-brand-cream: #F3F1E8; --color-brand-offwhite: #FCFCFB; --color-brand-purple: #795BC2; --color-brand-purple-dark: #473392; --color-brand-black: #121212; /* Gradient Colors */ --color-gradient-lime: #C2E476; --color-gradient-lime-mid: #B4D864; --color-gradient-lime-dark: #AACF57; /* Typography */ --font-headline: 'Futura PT Cond', sans-serif; --font-body: 'Uncut Sans', Inter, system-ui, -apple-system, sans-serif; ================================================================================ For the complete machine-readable version with all data: https://www.braingrid.ai/brand.json For brand assets and visual guidelines: https://www.braingrid.ai/brand ================================================================================ (c) 2026 BrainGrid. All rights reserved. ================================================================================