Brand Guidelines Styling
Overview
This skill provides access to brand identity and style resources for creating consistent, professional visual artifacts.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, visual formatting, visual design
Brand Color Palette
Primary Colors
When creating artifacts for professional presentation, use these colors:
- Dark Background:
#1a1b26or#1e1e2e(based on Nord/dark themes) - Light Background:
#eceff4or#d8dee9(based on Nord light themes) - Text (Dark):
#d8dee9or#eceff4 - Text (Light):
#2e3440or#434c5e - Accent Blue:
#81a1c1or#88c0d0 - Accent Green:
#a3be8cor#8fbcbb - Accent Purple:
#b48eador#d08770 - Accent Yellow:
#ebcb8bor#bf616a
Functional Colors
- Success Green: Used for success states and positive indicators
- Error Red: Used for error states and destructive actions
- Warning Yellow: Used for warnings and caution indicators
- Info Blue: Used for informational elements and neutral highlights
Typography
Font Selection
- Headings/Code: JetBrains Mono, Fira Code, or any modern monospace font
- Body Text: System sans-serif (Inter, San Francisco, or equivalent)
Font Application Rules
- Apply monospace fonts to code blocks, headings (24pt and larger), and technical content
- Apply system sans-serif fonts to body text and general paragraphs
- Automatically fall back to system defaults if custom fonts unavailable
- Preserve readability across all systems
Text Styling
- Code blocks and headings (14pt+): Monospace font
- Body text: System sans-serif font
- Smart color selection based on background (dark/light)
- Preserve text hierarchy and formatting
Shape and Accent Colors
- Non-text shapes use accent colors from palette
- Cycle through blue, green, purple, and yellow accents
- Maintain visual interest while staying on-brand
- Support both dark and light modes
Usage Guidelines
When to Use
- Creating presentation slides, reports, or documents
- Designing visual assets or graphics
- Applying consistent styling across multiple artifacts
- Creating branded materials
Best Practices
- Use monospace fonts for code and technical content
- Apply accent colors sparingly for maximum impact
- Ensure sufficient contrast between text and background
- Consider dark/light mode when choosing colors
- Test color combinations in both light and dark contexts
Implementing in Documents
PowerPoint (python-pptx)
from pptx.util import Inches, Pt
from pptx.dml.color import RGBColor
# Brand colors
DARK_BG = RGBColor(0x1a, 0x1b, 0x26)
LIGHT_TEXT = RGBColor(0xd8, 0xde, 0xe9)
ACCENT_BLUE = RGBColor(0x81, 0xa1, 0xc1)
ACCENT_GREEN = RGBColor(0xa3, 0xbe, 0x8c)
# Apply to shapes
from pptx import Presentation
prs = Presentation()
slide = prs.slides.add_slide(prs.slide_layouts[6]) # Blank layout
# Set background
background = slide.background
fill = background.fill
fill.solid()
fill.fore_color.rgb = DARK_BG
PDF (reportlab)
from reportlab.lib.colors import HexColor
# Brand colors
DARK_BG = HexColor('#1a1b26')
LIGHT_TEXT = HexColor('#d8dee9')
ACCENT_BLUE = HexColor('#81a1c1')
HTML/CSS
:root {
--bg-dark: #1a1b26;
--text-light: #d8dee9;
--accent-blue: #81a1c1;
--accent-green: #a3be8c;
--accent-purple: #b48ead;
--accent-yellow: #ebcb8b;
}
Font Management
- Uses system-installed JetBrains Mono or Fira Code when available
- Provides automatic fallback to system monospace fonts
- No font installation required — works with existing system fonts
- For best results, install JetBrains Mono or Fira Code in your environment
Cline Workflow Notes
- Install location: Copy this skill directory to
.cline/skills/brand-guidelines/(project-level) or~/.cline/skills/brand-guidelines/(global) - Activation: Cline will suggest this skill when you need consistent branding on documents or visual assets
- Progressive loading: Metadata is always available; detailed color and typography guidance loads on demand via
use_skill