# Brand Guidelines

> Apply OpenAI's brand colors, typography, and visual identity standards to artifacts. Ensure design consistency with OpenAI branding for presentations, documents, and UI components.

- **Type:** Skill
- **Install:** `agentstack add skill-manu14357-zskills-brand-guidelines`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [manu14357](https://agentstack.voostack.com/s/manu14357)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [manu14357](https://github.com/manu14357)
- **Source:** https://github.com/manu14357/zskills/tree/main/skills/brand-guidelines
- **Website:** https://zskills.vercel.app

## Install

```sh
agentstack add skill-manu14357-zskills-brand-guidelines
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [manu14357](https://github.com/manu14357)
- **Source:** [manu14357/zskills](https://github.com/manu14357/zskills)
- **License:** MIT
- **Homepage:** https://zskills.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-manu14357-zskills-brand-guidelines
- Seller: https://agentstack.voostack.com/s/manu14357
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.