119 lines
4.6 KiB
Markdown
119 lines
4.6 KiB
Markdown
---
|
|
name: brand-guidelines
|
|
description: Applies Datapath's official brand colors and typography to any sort of artifact that may benefit from having Datapath's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
|
|
license: Internal Use Only
|
|
---
|
|
|
|
# Datapath Brand Styling
|
|
|
|
## Overview
|
|
|
|
To access Datapath's official brand identity and style resources, use this skill.
|
|
|
|
**Keywords**: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Datapath brand, visual formatting, visual design
|
|
|
|
## Brand Guidelines
|
|
|
|
### Colors
|
|
|
|
**Primary Colors:**
|
|
|
|
- Neon Mint: `#46B976` (Pantone 7479C) — Primary brand color; C70 M0 Y73 K0
|
|
- Gray Blue: `#435364` (Pantone 2168C) — Secondary; C77 M61 Y44 K25
|
|
- Gray: `#333333` (Pantone XXX) — Body text and dark backgrounds; C69 M63 Y62 K58
|
|
- White — Light backgrounds and text on dark
|
|
|
|
**Neon Mint Tints (when variation is needed):**
|
|
- 80% tint of Neon Mint
|
|
- 60% tint of Neon Mint
|
|
|
|
**Service Category Colors:**
|
|
|
|
- Security: `#05CE7C` + `#435364`
|
|
- Mobility: `#05CE7C` + `#E8C651` (gold) + `#303A65`
|
|
- Cloud: `#05CE7C` + `#1F5F7D` + `#4DECCC` (light teal)
|
|
- IT Management: `#05CE7C` + `#1B75BB` + `#20284C`
|
|
|
|
### Typography
|
|
|
|
- **Font Family**: Proxima Soft (7 weights available)
|
|
- **Primary weights**: Bold and Light
|
|
- **Section Headers**: All caps, bold, tracked (letter-spaced), in Neon Mint (`#46B976`)
|
|
- **Headers**: Light weight, roughly twice the size of body copy; White, Gray, or Gray Blue
|
|
- **Body Text**: Light weight, approximately half the size of headers; White, Gray, or Gray Blue
|
|
- **Link Style**: Same size as section headers, with mouseover arrow effect
|
|
|
|
### Logo Usage
|
|
|
|
- **Stacked logo**: Preferred version — emphasizes the iconic "D" element
|
|
- **Horizontal logo**: For websites or space-limited situations; icon height never smaller than 1/8 inch
|
|
- **Clear space**: Padding around the logo equals the wordmark's letter height
|
|
- **On dark/photo backgrounds**: Keep icon in Neon Mint; change wordmark to White
|
|
- **Icon-only usage**: Only when the audience is already familiar with the Datapath brand
|
|
|
|
### Iconography
|
|
|
|
- Icons contained in circles
|
|
- Simple, no fills; 1.5pt stroke weight (Illustrator)
|
|
- Consistent line weight throughout
|
|
- Rounded corners; sharp endcaps
|
|
- Icons support copy — not standalone except in textural applications
|
|
|
|
### Photography & Treatment
|
|
|
|
- Apply gradient map effects using brand colors
|
|
- Separate subjects from backgrounds before applying gradient maps
|
|
- Use images with clearly defined subjects
|
|
- Photos framed with angled edges matching the logo icon's angle
|
|
|
|
### The 5 Line Ribbon
|
|
|
|
- Five parallel lines that interact with people/subjects as a visual metaphor for Datapath's services
|
|
- Lines enter from one side and exit the opposite; turns are simple and sharp
|
|
- Can be used with imagery or sans imagery (best on white or dark backgrounds)
|
|
- Used texturally to frame content or as a background element
|
|
|
|
## Brand Voice & Tone
|
|
|
|
**Voice Attributes:**
|
|
- **Confident**: Strong, direct, positive — not arrogant or brash
|
|
- **Smart**: Experienced, sharp, decisive — not bossy or controlling
|
|
- **Genuine**: Authentic, open, helpful — not exclusive or distant
|
|
- **Approachable**: Sharp, helpful — not cold, slick, or reserved
|
|
|
|
**Messaging Rules:**
|
|
- "Datapath" is always title case, one word (except in logo or headers)
|
|
- Messages are simple, action-oriented, and straightforward
|
|
- External communications: clear, engaging, direct — avoid complexity or confusion
|
|
- Internal communications: straightforward and respectful
|
|
|
|
## Brand Platform
|
|
|
|
**Vision**: To be the most trusted IT solutions provider, improving lives with innovative solutions.
|
|
|
|
**Mission**: To be a world-class managed service provider.
|
|
|
|
**Brand Attributes**: Innovative, Trustworthy, Quality-Driven, Effortless, Approachable, Personal, Visionary
|
|
|
|
**5 Core Values** (represented by the 5 lines in the logo):
|
|
1. Do the Right Thing & Do The Thing Right
|
|
2. People Matter Most
|
|
3. Ninjas and Unicorns
|
|
4. Ideas Bring Value
|
|
5. Commit to Give
|
|
|
|
## Technical Details
|
|
|
|
### Color Application
|
|
|
|
- Uses hex values for precise brand matching
|
|
- Neon Mint (`#46B976`) is the primary differentiator — intentionally stands out from industry-standard blues and grays
|
|
- Blues and grays provide contrast for the green; green icon should always be preserved
|
|
- Applied via RGBColor class in python-pptx or equivalent CSS/hex values in web contexts
|
|
|
|
### Font Management
|
|
|
|
- Proxima Soft is the brand typeface; use bold and light weights primarily
|
|
- Maintain typographic hierarchy with proper weights for headers vs. body
|
|
- Fall back to system sans-serif if Proxima Soft is unavailable
|