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)
1---2name: brand-guidelines3description: IdeaForge brand identity - colors, typography, and visual guidelines. Use when styling UI components, creating marketing materials, or ensuring brand consistency.4---5
6# IdeaForge Brand Guidelines
7
8## Brand Identity
9
10**Name**: IdeaForge
11**Tagline**: AI-Powered Idea Generation
12**Personality**: Innovative, Inspiring, Data-Driven, Professional
13
14**Target Audience**: Startup founders seeking AI-assisted business idea generation and evaluation.
15
16## Colors
17
18### Primary Palette
19
20| Name | Hex | RGB | Usage |
21|------|-----|-----|-------|
22| **Mint** | `#34D399` | rgb(52, 211, 153) | Primary brand color, CTAs, logo |
23| **Mint Dark** | `#10B981` | rgb(16, 185, 129) | Hover states, gradients |
24| **Coral** | `#FF6B6B` | rgb(255, 107, 107) | Text accents, highlights, alerts |
25
26### Background Colors
27
28| Name | Hex | RGB | Usage |
29|------|-----|-----|-------|
30| **Dark Base** | `#0f1419` | rgb(15, 20, 25) | Primary dark background |
31| **Dark Surface** | `#1c2128` | rgb(28, 33, 40) | Cards, elevated surfaces |
32| **Dark Elevated** | `#262c36` | rgb(38, 44, 54) | Hover states, borders |
33
34### Text Colors
35
36| Name | Hex | RGB | Usage |
37|------|-----|-----|-------|
38| **Text Primary** | `#f0f6fc` | rgb(240, 246, 252) | Primary text on dark |
39| **Text Secondary** | `#8b949e` | rgb(139, 148, 158) | Secondary text, labels |
40| **Text Muted** | `#6e7681` | rgb(110, 118, 129) | Disabled, placeholder |
41
42### Semantic Colors
43
44| Name | Hex | Usage |
45|------|-----|-------|
46| **Success** | `#34D399` | Positive actions, success states |
47| **Warning** | `#FBBF24` | Warnings, caution |
48| **Error** | `#EF4444` | Errors, destructive actions |
49| **Info** | `#67E8F9` | Information, tips |
50
51### Button Colors
52
53| Type | Style |
54|------|-------|
55| **Primary** | Background: gradient `#34D399` → `#10B981`, Text: `#0f1419` |
56| **Secondary** | Background: transparent, Border: `rgba(255,255,255,0.3)`, Text: `#f0f6fc` |
57| **Ghost** | Background: transparent, Text: `#34D399` |
58| **Danger** | Background: `#EF4444`, Text: `#ffffff` |
59
60## Typography
61
62### Font Stack
63
64```css
65/* Headings */
66font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
67
68/* Body */
69font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
70
71/* Code/Data */
72font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
73```
74
75### Type Scale
76
77| Element | Size | Weight | Line Height |
78|---------|------|--------|-------------|
79| H1 | 2.5rem (40px) | 700 | 1.2 |
80| H2 | 2rem (32px) | 600 | 1.25 |
81| H3 | 1.5rem (24px) | 600 | 1.3 |
82| H4 | 1.25rem (20px) | 600 | 1.4 |
83| Body | 1rem (16px) | 400 | 1.6 |
84| Small | 0.875rem (14px) | 400 | 1.5 |
85| Caption | 0.75rem (12px) | 500 | 1.4 |
86
87## Tailwind CSS Classes
88
89### Common Patterns
90
91```tsx
92// Primary Button
93className="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"
94
95// Secondary Button
96className="border border-white/30 text-gray-100 px-6 py-3 rounded-lg hover:bg-white/5 transition-all"
97
98// Card
99className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/50"
100
101// Text Accent
102className="text-red-400" // For coral accent on text
103
104// Stats/Numbers
105className="text-emerald-400 font-bold text-2xl"
106
107// Background
108className="bg-gradient-to-br from-gray-900 to-gray-800"
109```
110
111### Dark Mode (Default)
112
113IdeaForge uses dark mode as the primary theme. All components should be designed dark-first.
114
115```tsx
116// Standard background layers
117bg-[#0f1419] // Base
118bg-[#1c2128] // Surface
119bg-[#262c36] // Elevated
120
121// Or using Tailwind
122bg-gray-900 // Base
123bg-gray-800 // Surface
124bg-gray-700 // Elevated
125```
126
127## Spacing
128
129Base unit: 4px
130
131| Token | Value | Usage |
132|-------|-------|-------|
133| xs | 4px | Tight spacing |
134| sm | 8px | Between related elements |
135| md | 16px | Default padding |
136| lg | 24px | Section padding |
137| xl | 32px | Major sections |
138| 2xl | 48px | Page sections |
139
140## Border Radius
141
142| Token | Value | Usage |
143|-------|-------|-------|
144| sm | 4px | Buttons, inputs |
145| md | 8px | Cards, containers |
146| lg | 12px | Modals, large cards |
147| xl | 16px | Hero sections |
148| full | 9999px | Pills, avatars |
149
150## Shadows
151
152```css
153/* Subtle */
154box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
155
156/* Card */
157box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
158
159/* Elevated */
160box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
161
162/* Glow (for primary elements) */
163box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
164```
165
166## Component Examples
167
168### Score Badge
169
170```tsx
171// High score (80-100)
172className="bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded text-sm font-medium"
173
174// Medium score (50-79)
175className="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded text-sm font-medium"
176
177// Low score (0-49)
178className="bg-red-500/20 text-red-400 px-2 py-1 rounded text-sm font-medium"
179```
180
181### Navigation
182
183```tsx
184className="bg-gray-900/95 backdrop-blur border-b border-gray-800"
185```
186
187### Input Fields
188
189```tsx
190className="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"
191```
192
193## Logo Usage
194
195- Primary color: Mint `#34D399`
196- Can be displayed on dark backgrounds only
197- Minimum clear space: height of logo on all sides
198- Do not distort, rotate, or add effects
199
200## Voice & Tone
201
202- **Professional but approachable** - Not stiff, not casual
203- **Action-oriented** - "Generate ideas", "Start exploring"
204- **Confident** - Emphasize AI capabilities without overpromising
205- **Concise** - Data-dense UI means minimal text
206
207## Anti-Patterns
208
209Avoid:
210- Light/white backgrounds as primary
211- Generic blue (#007bff) as primary color
212- Gradients using coral/red (reserve for text accents only)
213- Low contrast text combinations
214- Excessive animations
215- Purple gradients (overused in AI products)
majiayu000