brand-guidelines – Design & UI skill for AI agents
Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Install the brand-guidelines skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/brand-guidelines-bf810.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /brand-guidelines – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/brand-guidelines-bf810.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $brand-guidelines – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/brand-guidelines-bf810.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /brand-guidelines – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/brand-guidelines-bf810.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /brand-guidelines – then describe the task you want done.
SKILL.md content
OpenAI Brand Styling
Overview
Apply OpenAI's brand identity and style resources with this skill.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, OpenAI brand, Codex, visual formatting, visual design
Brand Guidelines
Colors
Main Colors:
- Charcoal:
#0E0F12- Primary text and dark backgrounds - Slate:
#202123- Surface backgrounds - Mist:
#F5F7FA- Light backgrounds and text on dark - Steel:
#9EA1AA- Secondary elements and dividers
Accent Colors:
- OpenAI Green:
#10A37F- Primary accent - Azure:
#2B8FFF- Secondary accent - Graphite:
#40434A- Neutral accent for icons or strokes
Typography
- Headings: Inter, Semibold/Bold (with Arial fallback)
- Body Text: Inter, Regular (with Arial fallback)
- Code/Monospace: IBM Plex Mono (with Menlo/monospace fallback)
- Note: Fonts should be pre-installed in your environment for best results
Features
Smart Font Application
- Applies Inter Semibold/Bold to headings (24pt and larger)
- Applies Inter Regular to body text
- Applies IBM Plex Mono for code snippets or inline code
- Automatically falls back to Arial/Menlo if custom fonts unavailable
- Preserves readability across all systems
Text Styling
- Headings (24pt+): Inter Semibold/Bold
- Body text: Inter Regular
- Smart color selection based on background (Charcoal or Mist as appropriate)
- Preserves text hierarchy and formatting
Shape and Accent Colors
- Non-text shapes use accent colors
- Cycle accent usage: OpenAI Green → Azure → Graphite
- Maintains visual interest while staying on-brand
Technical Details
Font Management
- Uses system-installed Inter and IBM Plex Mono fonts when available
- Provides automatic fallback to Arial (headings/body) and Menlo/monospace (code)
- No font installation required - works with existing system fonts
- For best results, pre-install Inter and IBM Plex Mono fonts in your environment
Color Application
- Uses RGB color values for precise brand matching
- Applied via python-pptx's RGBColor class
- Maintains color fidelity across different systems
Related skills
- chatgpt-apps – Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine…
- baoyu-comic – Knowledge comic creator supporting multiple art styles and tones. Creates original…
- canvas-design – Create beautiful visual art in .png and .pdf documents using design philosophy. You…
- image-generator – Generate or edit images from text and local files, image URLs, or data URLs through…
- adversarial-ux-test – Roleplay a hostile user to find and triage UX pain points.
- brand-guidelines – Applies Anthropic's official brand colors and typography to any sort of artifact that…
- baoyu-compress-image – Compresses images to WebP (default) or PNG with automatic tool selection. Use when user…
- ai-presenter-video – Make a verified AI presenter video from script + image.