brand-guidelines
Applies brand colors, typography, and visual identity to artifacts, documents, presentations, and web content. Use when brand consistency, visual formatting, or company design standards apply. Chec...
When & Why to Use This Skill
The Brand Guidelines skill automates the application of corporate visual identity across digital and print assets. It ensures brand consistency by programmatically applying specific color palettes, typography, and design rules to documents, presentations, and web content. By centralizing brand assets and providing fallback defaults, it streamlines the creative workflow and maintains professional design standards across all company outputs.
Use Cases
- Corporate Document Formatting: Automatically apply brand-specific headers, fonts, and color schemes to DOCX or PDF reports to ensure professional alignment with company standards.
- Presentation Deck Styling: Transform raw slide content into branded presentations with specific title slide backgrounds, primary headers, and accent colors for charts and callouts.
- Web and UI Theming: Generate CSS variables and theme configurations that comply with WCAG AA contrast standards for web development and digital products.
- Ecommerce Product Listings: Standardize the visual presentation of product titles, prices, and badges across online storefronts using brand-approved styles to increase trust and recognition.
| name | brand-guidelines |
|---|---|
| description | "Applies brand colors, typography, and visual identity to artifacts, documents, presentations, and web content. Use when brand consistency, visual formatting, or company design standards apply. Chec..." |
Brand Guidelines
Overview
Universal brand styling system for digital and print assets. Brand-specific rules are stored in references.
Keywords: branding, visual identity, styling, brand colors, typography, corporate identity, design standards, visual formatting
Usage
- Identify which brand applies to the task
- Load brand-specific reference from
references/brands/[brand-name].md - Apply colors, typography, and rules from that reference
- Fall back to generic defaults if no brand reference exists
Available Brand References
references/brands/molychile.md— Chilean industrial distributor (UNI-T, CSB, URREA, Energizer)
Generic Defaults (when no brand specified)
Colors
| Role | Hex | Use |
|---|---|---|
| Primary | #1a1a1a |
Headers, primary text |
| Secondary | #4a4a4a |
Body text |
| Accent | #0066cc |
Links, CTAs, highlights |
| Background | #ffffff |
Page background |
| Surface | #f5f5f5 |
Cards, sections |
| Border | #e0e0e0 |
Dividers, outlines |
Typography
| Element | Font | Weight | Size |
|---|---|---|---|
| H1 | System sans-serif | 700 | 32px |
| H2 | System sans-serif | 600 | 24px |
| H3 | System sans-serif | 600 | 18px |
| Body | System sans-serif | 400 | 16px |
| Small | System sans-serif | 400 | 14px |
Application Contexts
Documents (docx, pdf)
- Cover page: Primary color header bar
- Headers: Primary color, heading font
- Body: Secondary color, body font
- Accents: Accent color for highlights, links
Presentations (pptx)
- Title slides: Primary background, white text
- Content slides: White background, primary headers
- Accent elements: Accent color for charts, callouts
Web / HTML
- Use CSS variables for theming
- Ensure WCAG AA contrast compliance
- Apply responsive typography scale
Ecommerce Listings
- Product titles: Primary color, heading font
- Descriptions: Secondary color, body font
- Price: Accent color, bold
- Badges/CTAs: Accent background, white text
Technical Patterns
CSS Variables Template