IdeaForge Brand Guidelines

Brand Identity

Name: IdeaForge Tagline: AI-Powered Idea Generation Personality: Innovative, Inspiring, Data-Driven, Professional

Target Audience: Startup founders seeking AI-assisted business idea generation and evaluation.

Colors

Primary Palette

Name Hex RGB Usage

Mint #34D399

rgb(52, 211, 153) Primary brand color, CTAs, logo

Mint Dark #10B981

rgb(16, 185, 129) Hover states, gradients

Coral #FF6B6B

rgb(255, 107, 107) Text accents, highlights, alerts

Background Colors

Name Hex RGB Usage

Dark Base #0f1419

rgb(15, 20, 25) Primary dark background

Dark Surface #1c2128

rgb(28, 33, 40) Cards, elevated surfaces

Dark Elevated #262c36

rgb(38, 44, 54) Hover states, borders

Text Colors

Name Hex RGB Usage

Text Primary #f0f6fc

rgb(240, 246, 252) Primary text on dark

Text Secondary #8b949e

rgb(139, 148, 158) Secondary text, labels

Text Muted #6e7681

rgb(110, 118, 129) Disabled, placeholder

Semantic Colors

Name Hex Usage

Success #34D399

Positive actions, success states

Warning #FBBF24

Warnings, caution

Error #EF4444

Errors, destructive actions

Info #67E8F9

Information, tips

Button Colors

Type Style

Primary Background: gradient #34D399 → #10B981 , Text: #0f1419

Secondary Background: transparent, Border: rgba(255,255,255,0.3) , Text: #f0f6fc

Ghost Background: transparent, Text: #34D399

Danger Background: #EF4444 , Text: #ffffff

Typography

Font Stack

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

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

/* Code/Data */ font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

Type Scale

Element Size Weight Line Height

H1 2.5rem (40px) 700 1.2

H2 2rem (32px) 600 1.25

H3 1.5rem (24px) 600 1.3

H4 1.25rem (20px) 600 1.4

Body 1rem (16px) 400 1.6

Small 0.875rem (14px) 400 1.5

Caption 0.75rem (12px) 500 1.4

Tailwind CSS Classes

Common Patterns

// Primary Button className="bg-gradient-to-r from-emerald-400 to-emerald-500 text-gray-900 font-semibold px-6 py-3 rounded-lg hover:from-emerald-300 hover:to-emerald-400 transition-all"

// Secondary Button className="border border-white/30 text-gray-100 px-6 py-3 rounded-lg hover:bg-white/5 transition-all"

// Card className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/50"

// Text Accent className="text-red-400" // For coral accent on text

// Stats/Numbers className="text-emerald-400 font-bold text-2xl"

// Background className="bg-gradient-to-br from-gray-900 to-gray-800"

Dark Mode (Default)

IdeaForge uses dark mode as the primary theme. All components should be designed dark-first.

// Standard background layers bg-[#0f1419] // Base bg-[#1c2128] // Surface bg-[#262c36] // Elevated

// Or using Tailwind bg-gray-900 // Base bg-gray-800 // Surface bg-gray-700 // Elevated

Spacing

Base unit: 4px

Token Value Usage

xs 4px Tight spacing

sm 8px Between related elements

md 16px Default padding

lg 24px Section padding

xl 32px Major sections

2xl 48px Page sections

Border Radius

Token Value Usage

sm 4px Buttons, inputs

md 8px Cards, containers

lg 12px Modals, large cards

xl 16px Hero sections

full 9999px Pills, avatars

Shadows

/* Subtle */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

/* Card */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

/* Elevated */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

/* Glow (for primary elements) */ box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);

Component Examples

Score Badge

// High score (80-100) className="bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded text-sm font-medium"

// Medium score (50-79) className="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded text-sm font-medium"

// Low score (0-49) className="bg-red-500/20 text-red-400 px-2 py-1 rounded text-sm font-medium"

Navigation

className="bg-gray-900/95 backdrop-blur border-b border-gray-800"

Input Fields

className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 placeholder-gray-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"

Logo Usage

• Primary color: Mint #34D399

• Can be displayed on dark backgrounds only

• Minimum clear space: height of logo on all sides

• Do not distort, rotate, or add effects

Voice & Tone

• Professional but approachable - Not stiff, not casual

• Action-oriented - "Generate ideas", "Start exploring"

• Confident - Emphasize AI capabilities without overpromising

• Concise - Data-dense UI means minimal text

Anti-Patterns

Avoid:

• Light/white backgrounds as primary

• Generic blue (#007bff) as primary color

• Gradients using coral/red (reserve for text accents only)

• Low contrast text combinations

• Excessive animations

• Purple gradients (overused in AI products)