Loading...
Loading...
IdeaForge brand identity - colors, typography, and visual guidelines. Use when styling UI components, creating marketing materials, or ensuring brand consistency.
npx skill4agent add holo00/ideaforge brand-guidelines| Name | Hex | RGB | Usage |
|---|---|---|---|
| Mint | | rgb(52, 211, 153) | Primary brand color, CTAs, logo |
| Mint Dark | | rgb(16, 185, 129) | Hover states, gradients |
| Coral | | rgb(255, 107, 107) | Text accents, highlights, alerts |
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Dark Base | | rgb(15, 20, 25) | Primary dark background |
| Dark Surface | | rgb(28, 33, 40) | Cards, elevated surfaces |
| Dark Elevated | | rgb(38, 44, 54) | Hover states, borders |
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Text Primary | | rgb(240, 246, 252) | Primary text on dark |
| Text Secondary | | rgb(139, 148, 158) | Secondary text, labels |
| Text Muted | | rgb(110, 118, 129) | Disabled, placeholder |
| Name | Hex | Usage |
|---|---|---|
| Success | | Positive actions, success states |
| Warning | | Warnings, caution |
| Error | | Errors, destructive actions |
| Info | | Information, tips |
| Type | Style |
|---|---|
| Primary | Background: gradient |
| Secondary | Background: transparent, Border: |
| Ghost | Background: transparent, Text: |
| Danger | Background: |
/* 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;| 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 |
// 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"// 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| 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 |
| Token | Value | Usage |
|---|---|---|
| sm | 4px | Buttons, inputs |
| md | 8px | Cards, containers |
| lg | 12px | Modals, large cards |
| xl | 16px | Hero sections |
| full | 9999px | Pills, avatars |
/* 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);// 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"className="bg-gray-900/95 backdrop-blur border-b border-gray-800"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"#34D399