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)