manu14357 OpenAI Brand Styling
Use This Skill When
- Applying OpenAI's brand identity to presentations or artifacts
- Ensuring visual consistency with Codex/OpenAI design standards
- Selecting colors or typography that match OpenAI branding
- Styling UI components or documents with corporate identity
- Creating branded materials that need professional visual identity
When NOT to Use
- Non-OpenAI projects or different brand guidelines
- When brand compliance is not required
- For generic design without specific brand standards
- When custom color schemes are explicitly requested
Context: Brand Implementation
Undeveloped: No brand standards applied; generic styling only.
Target: OpenAI colors, typography, and design standards consistently applied to all visual elements.
Optimized: Brand guidelines automatically enforced across all artifacts with smart fallbacks and accessibility considerations.
Core Principle
Strong visual branding creates trust and recognition. OpenAI's palette and typography should be applied consistently to maintain a professional, cohesive identity across all materials.
Instructions
Step 1: Understand OpenAI Brand Palette
Main Colors:
- Charcoal
#0E0F12- Primary text, dark backgrounds - Slate
#202123- Surface backgrounds - Mist
#F5F7FA- Light backgrounds, text on dark - Steel
#9EA1AA- Secondary elements, dividers
Accent Colors:
- OpenAI Green
#10A37F- Primary accent - Azure
#2B8FFF- Secondary accent - Graphite
#40434A- Neutral accent for icons/strokes
Step 2: Apply Typography Standards
Font Stack (with fallbacks):
- Headings (24pt+): Inter Semibold/Bold → Arial
- Body Text: Inter Regular → Arial
- Code/Monospace: IBM Plex Mono → Menlo/monospace
Rules:
- Headings: 24pt or larger
- Body text: Regular weight
- Code snippets: Always monospace
- Automatic fallback if fonts unavailable
Step 3: Select Colors by Context
| Element | Color | Use Case |
|---|---|---|
| Primary Text | Charcoal | Dark backgrounds, main content |
| Background | Slate or Mist | Based on contrast needs |
| Accent (Primary) | OpenAI Green | Call-to-action, highlights |
| Accent (Secondary) | Azure | Secondary actions, links |
| Dividers/Icons | Steel or Graphite | Subtle separation, neutral icons |
Step 4: Apply Smart Color Selection
For Text:
- On dark backgrounds → Use Mist
- On light backgrounds → Use Charcoal
- High contrast: Charcoal/Mist pairing
For Non-Text Elements:
- Cycle accents: Green → Azure → Graphite
- Maintains visual interest without clashing
- Use Graphite for icons needing neutral treatment
Implementation Checklist
When applying OpenAI branding:
- ✓ All text elements use Inter or Arial fallback
- ✓ Headings are 24pt+, Semibold/Bold weight
- ✓ Body text uses Regular weight
- ✓ Color selection matches context (text vs. shapes)
- ✓ Dark backgrounds pair with Mist text
- ✓ Light backgrounds pair with Charcoal text
- ✓ Accent colors cycle without repetition
- ✓ Fallback fonts applied if custom fonts unavailable
Output
Provide the user with:
Branded Design Specification:
- Color palette codes (Charcoal, Slate, Mist, Steel, Green, Azure, Graphite)
- Typography rules applied (font names, sizes, weights)
- Layout notes (spacing, contrast, hierarchy)
- Fallback options for fonts
Sample Implementation:
- Example showing Charcoal text on Mist background
- Example showing OpenAI Green accent on Slate background
- Color-coded element list for reference
Brand Compliance Checklist:
- All headings use Inter Semibold/Bold (24pt+)
- All body text uses Inter Regular
- Text-on-background contrast approved
- Accent colors applied (Green → Azure → Graphite cycle)
- Fallback fonts configured
- Design matches OpenAI visual standards