Brainforge Knowledge

brand-style-guide

5 min read

Brainforge Brand Style Guide

This document defines the visual brand standards for all Brainforge presentations, marketing materials, and external-facing assets. Use this guide when creating slides, documents, or any visual materials that represent Brainforge.

Typography

Primary Font: Helvetica Neue

Font File Location:

  • standards/HelveticaNeue.ttc
  • Copy to project: public/fonts/HelveticaNeue.ttc (for web projects)

CSS Implementation:

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue.ttc') format('truetype-collection');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Usage Guidelines:

  • Use Helvetica Neue for all presentation slides
  • Use Helvetica Neue for marketing materials and external documents
  • For code and technical documentation, use monospace fonts (e.g., ‘Courier New’, ‘Monaco’)
  • For web applications, Helvetica Neue should be the primary body font

Font Weights:

  • Regular (400): Body text, paragraphs
  • Medium (500): Subheadings, emphasis
  • Bold (700): Headings, titles, callouts

Colors

Primary Brand Colors

Brainforge Green (Primary):

  • Hex: #579D6B
  • RGB: rgb(87, 157, 107)
  • Usage: Primary CTAs, accents, highlights, active states

Dark Green Background:

  • Hex: #23312B
  • RGB: rgb(35, 49, 43)
  • Usage: Slide backgrounds, dark theme backgrounds

Cream/Beige Accent (Secondary):

  • Hex: #EAE6D8
  • RGB: rgb(234, 230, 216)
  • Usage: Secondary accents, subtle highlights

White (Text on Dark):

  • Hex: #ffffff
  • RGB: rgb(255, 255, 255)
  • Usage: Primary text on dark backgrounds

Light Gray (Secondary Text):

  • Hex: #d1d5db
  • RGB: rgb(209, 213, 219)
  • Usage: Secondary text, body text on dark backgrounds

Medium Gray (Tertiary Text):

  • Hex: #9ca3af
  • RGB: rgb(156, 163, 175)
  • Usage: Metadata, dates, less important information

Dark Gray (Borders/Subtle Elements):

  • Hex: #374151
  • RGB: rgb(55, 65, 81)
  • Usage: Borders, dividers, subtle UI elements

Color Palette Reference

Color NameHexUsage
Brainforge Green#579D6BPrimary brand color, CTAs
Dark Green Background#23312BBackgrounds
Cream/Beige Accent#EAE6D8Secondary accents
Dark Green Text#344D42Text on light backgrounds
White#ffffffPrimary text
Light Gray#d1d5dbSecondary text
Medium Gray#9ca3afTertiary text
Dark Gray#374151Borders, dividers

Logo Files

Location: brainforge-platform/public/logo.png

Usage Guidelines:

  • Use logo on all external-facing materials
  • Maintain clear space: minimum 20% of logo height on all sides
  • Do not stretch, distort, or modify the logo
  • Use white logo on dark backgrounds, dark logo on light backgrounds

Logo Placement:

  • Presentations: Top-right corner (default)
  • Documents: Top-left or top-right
  • Web: Header navigation area

Icons

Icon Library

Location: standards/assets/icons/

The Brainforge icon library contains 100+ outline-style icons in brand green, organized by category.

Icon Categories:

  • Business (business/): Charts, money, scales, calculators, briefcases
  • Technology (technology/): Gears, code brackets, cloud, servers, rockets
  • Collaboration (collaboration/): Handshake, speech bubbles, team icons
  • Productivity (productivity/): Clocks, calendars, checklists, search

Usage in Markdown:

![Chart icon](./assets/icons/business/chart-bar.svg)

Icon Colors:

  • Primary: #579D6B (vibrant green accent)
  • Outline: #244926 (dark green)
  • Highlight: #3FA93A (accent green)

Naming Convention: Icons use kebab-case (e.g., chart-bar.svg, handshake.svg)

For detailed usage guidelines, see assets/icons/README.md.

Presentation Guidelines

Slide Templates

Brainforge Theme:

  • Background: Dark green (#23312B)
  • Text: White (#ffffff) for headers, light gray (#d1d5db) for body
  • Accents: Brainforge green (#579D6B) for highlights
  • Footer: “BRAINFORGE: AN INSIGHTS COMPANY” (bottom-right)

Slide Components:

  • Use Brainforge slide layouts from brainforge-platform/apps/slides/components/decks/layouts/brainforge/
  • Maintain consistent spacing and typography
  • Use Helvetica Neue font throughout

Slide Layouts Available:

  • BFTitleLayout: Title slide with Brainforge branding
  • BFBulletListLayout: Header with bulleted/numbered list
  • BFTwoColumnBoxLayout: Two-column comparison layout
  • BFThreeColumnListLayout: Three-column list layout
  • BFHeaderWithContentLayout: Header with text/image/placeholder content

Presentation Best Practices

  1. Consistency: Use Brainforge theme for all internal and external presentations
  2. Typography: Always use Helvetica Neue, maintain consistent font sizes
  3. Colors: Stick to brand color palette, use green for emphasis
  4. Spacing: Maintain consistent padding and margins
  5. Footer: Include “BRAINFORGE: AN INSIGHTS COMPANY” on all slides

Document Standards

External Documents (SOWs, Proposals, etc.)

Typography:

  • Headers: Helvetica Neue Bold
  • Body: Helvetica Neue Regular
  • Code/Technical: Monospace font

Colors:

  • Use brand colors sparingly for headers and accents
  • Maintain professional appearance
  • Ensure high contrast for readability

Formatting:

  • Follow standards/STYLE-GUIDE.md for writing standards
  • Use consistent heading hierarchy
  • Include Brainforge branding (logo or footer text)

Web Applications

Brand Implementation

Font Stack:

font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Color Variables:

:root {
  --brainforge-green: #579D6B;
  --brainforge-dark-green: #23312B;
  --brainforge-cream-accent: #EAE6D8;
  --brainforge-dark-green-text: #344D42;
  --brainforge-white: #ffffff;
  --brainforge-light-gray: #d1d5db;
  --brainforge-medium-gray: #9ca3af;
  --brainforge-dark-gray: #374151;
}

Component Styling:

  • Primary buttons: Brainforge green background, white text
  • Secondary buttons: Transparent with green border
  • Links: Brainforge green, underline on hover
  • Headers: White or dark green depending on background

Asset Locations

Fonts

  • Helvetica Neue: standards/HelveticaNeue.ttc
  • Copy to web projects: public/fonts/HelveticaNeue.ttc

Logos

  • Logo: brainforge-platform/public/logo.png

Slide Templates

  • Components: brainforge-platform/apps/slides/components/decks/layouts/brainforge/
  • Examples: brainforge-platform/apps/slides/app/(public)/decks/

Brand Assets

  • Sales Materials: brainforge-platform/Brainforge Sales Materials/
  • Marketing Assets: knowledge/sales/marketing-assets/

Icons

  • Icon Library: standards/assets/icons/
  • Icon Documentation: standards/assets/icons/README.md

Usage Examples

Creating a New Presentation

  1. Use the slide builder at /decks/builder or create a new deck file
  2. Import Brainforge layouts: @/components/decks/layouts/brainforge
  3. Use SlideContainer wrapper with Brainforge theme
  4. Follow slide structure from existing decks (e.g., operating-jan-2026)

Creating Marketing Materials

  1. Use Helvetica Neue font
  2. Apply brand color palette
  3. Include Brainforge logo with proper clear space
  4. Follow document standards from STYLE-GUIDE.md

Web Development

  1. Copy Helvetica Neue font to public/fonts/
  2. Configure @font-face in CSS
  3. Use brand color variables
  4. Apply consistent spacing and typography

Brand Voice

For writing standards and brand voice guidelines, see:

  • Writing Style Guide: standards/STYLE-GUIDE.md
  • AI Usage Guidelines: standards/03-knowledge/ai-usage-guidelines.md

Questions or Updates

If you have questions about brand standards or want to propose updates, discuss with the team. This guide should evolve as Brainforge’s brand matures.

For technical implementation questions, reference:

  • Slide builder: brainforge-platform/apps/slides/app/(public)/decks/builder/
  • Layout components: brainforge-platform/apps/slides/components/decks/layouts/brainforge/
  • Example decks: brainforge-platform/apps/slides/app/(public)/decks/

Last Updated: January 2026
Maintained By: Brainforge Team

Graph View