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
1---2name: brand-guidelines3description: 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...4---5# Brand Guidelines67## Overview8Universal brand styling system for digital and print assets. Brand-specific rules are stored in references.910**Keywords**: branding, visual identity, styling, brand colors, typography, corporate identity, design standards, visual formatting1112## Usage131. Identify which brand applies to the task142. Load brand-specific reference from `references/brands/[brand-name].md`153. Apply colors, typography, and rules from that reference164. Fall back to generic defaults if no brand reference exists1718## Available Brand References19- `references/brands/molychile.md` — Chilean industrial distributor (UNI-T, CSB, URREA, Energizer)2021## Generic Defaults (when no brand specified)2223### Colors24| Role | Hex | Use |25|------|-----|-----|26| Primary | `#1a1a1a` | Headers, primary text |27| Secondary | `#4a4a4a` | Body text |28| Accent | `#0066cc` | Links, CTAs, highlights |29| Background | `#ffffff` | Page background |30| Surface | `#f5f5f5` | Cards, sections |31| Border | `#e0e0e0` | Dividers, outlines |3233### Typography34| Element | Font | Weight | Size |35|---------|------|--------|------|36| H1 | System sans-serif | 700 | 32px |37| H2 | System sans-serif | 600 | 24px |38| H3 | System sans-serif | 600 | 18px |39| Body | System sans-serif | 400 | 16px |40| Small | System sans-serif | 400 | 14px |4142## Application Contexts4344### Documents (docx, pdf)45- Cover page: Primary color header bar46- Headers: Primary color, heading font47- Body: Secondary color, body font48- Accents: Accent color for highlights, links4950### Presentations (pptx)51- Title slides: Primary background, white text52- Content slides: White background, primary headers53- Accent elements: Accent color for charts, callouts5455### Web / HTML56- Use CSS variables for theming57- Ensure WCAG AA contrast compliance58- Apply responsive typography scale5960### Ecommerce Listings61- Product titles: Primary color, heading font62- Descriptions: Secondary color, body font63- Price: Accent color, bold64- Badges/CTAs: Accent background, white text6566## Technical Patterns6768### CSS Variables Template69```css
j0KZ