Computer Love Brand Styling
Overview
To access Computer Love's official brand identity and style resources, use this skill.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Computer Love brand, visual formatting, visual design, AI engineering, agentic coding
Brand Guidelines
Colors
Background Colors (Dark Theme):
- Deep:
#0c0c10 - Primary dark background
- Surface:
#141418 - Card and section backgrounds
- Elevated:
#1c1c22 - Elevated surfaces and hover states
- Card:
#222228 - Card backgrounds
Accent Colors:
- Primary (Coral):
#e85a42 - Primary accent, CTAs, highlights
- Secondary (Gold):
#f0c060 - Secondary accent, credentials, stats
- Tertiary (Teal):
#4bc0a0 - Success states, feature icons
- Cool (Teal):
#4bb8b0 - Alternative teal accent
Text Colors:
- Primary:
#f0f0f2 - Main text on dark backgrounds
- Secondary:
#9898a8 - Supporting text, descriptions
- Muted:
#606070 - Subtle text, labels
Semantic Colors:
- Success:
#4bc0a0 - Positive states, checkmarks
- Warning:
#f0c060 - Warnings, attention
- Error:
#e85a42 - Errors, required indicators
Typography
- Headings/Display: Syne (with system sans-serif fallback)
- Body/Monospace: Space Mono (with system monospace fallback)
- Note: Fonts should be pre-installed in your environment for best results
Features
Smart Font Application
- Applies Syne font to headings and display text (24pt and larger)
- Applies Space Mono font to body text and code
- Automatically falls back to system fonts if custom fonts unavailable
- Preserves readability across all systems
Text Styling
- Headings (24pt+): Syne font, bold weight
- Body text: Space Mono font
- Smart color selection based on background
- Preserves text hierarchy and formatting
Shape and Accent Colors
- Non-text shapes use accent colors
- Cycles through coral, gold, and teal accents
- Maintains visual interest while staying on-brand
Technical Details
Font Management
- Uses system-installed Syne and Space Mono fonts when available
- Provides automatic fallback to system sans-serif (headings) and monospace (body)
- No font installation required - works with existing system fonts
- For best results, pre-install Syne and Space 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
CSS Variables Reference
--bg-deep: #0c0c10;
--bg-surface: #141418;
--bg-elevated: #1c1c22;
--bg-card: #222228;
--accent-primary: #e85a42;
--accent-secondary: #f0c060;
--accent-tertiary: #4bc0a0;
--text-primary: #f0f0f2;
--text-secondary: #9898a8;
--text-muted: #606070;
--font-display: 'Syne', sans-serif;
--font-mono: 'Space Mono', monospace;
1---2name: brand-guidelines-computerlove3description: Applies Computer Love's official brand colors and typography to any sort of artifact that may benefit from having Computer Love's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.4---56# Computer Love Brand Styling78## Overview910To access Computer Love's official brand identity and style resources, use this skill.1112**Keywords**: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Computer Love brand, visual formatting, visual design, AI engineering, agentic coding1314## Brand Guidelines1516### Colors1718**Background Colors (Dark Theme):**1920- Deep: `#0c0c10` - Primary dark background21- Surface: `#141418` - Card and section backgrounds22- Elevated: `#1c1c22` - Elevated surfaces and hover states23- Card: `#222228` - Card backgrounds2425**Accent Colors:**2627- Primary (Coral): `#e85a42` - Primary accent, CTAs, highlights28- Secondary (Gold): `#f0c060` - Secondary accent, credentials, stats29- Tertiary (Teal): `#4bc0a0` - Success states, feature icons30- Cool (Teal): `#4bb8b0` - Alternative teal accent3132**Text Colors:**3334- Primary: `#f0f0f2` - Main text on dark backgrounds35- Secondary: `#9898a8` - Supporting text, descriptions36- Muted: `#606070` - Subtle text, labels3738**Semantic Colors:**3940- Success: `#4bc0a0` - Positive states, checkmarks41- Warning: `#f0c060` - Warnings, attention42- Error: `#e85a42` - Errors, required indicators4344### Typography4546- **Headings/Display**: Syne (with system sans-serif fallback)47- **Body/Monospace**: Space Mono (with system monospace fallback)48- **Note**: Fonts should be pre-installed in your environment for best results4950## Features5152### Smart Font Application5354- Applies Syne font to headings and display text (24pt and larger)55- Applies Space Mono font to body text and code56- Automatically falls back to system fonts if custom fonts unavailable57- Preserves readability across all systems5859### Text Styling6061- Headings (24pt+): Syne font, bold weight62- Body text: Space Mono font63- Smart color selection based on background64- Preserves text hierarchy and formatting6566### Shape and Accent Colors6768- Non-text shapes use accent colors69- Cycles through coral, gold, and teal accents70- Maintains visual interest while staying on-brand7172## Technical Details7374### Font Management7576- Uses system-installed Syne and Space Mono fonts when available77- Provides automatic fallback to system sans-serif (headings) and monospace (body)78- No font installation required - works with existing system fonts79- For best results, pre-install Syne and Space Mono fonts in your environment8081### Color Application8283- Uses RGB color values for precise brand matching84- Applied via python-pptx's RGBColor class85- Maintains color fidelity across different systems8687### CSS Variables Reference8889```css90--bg-deep: #0c0c10;91--bg-surface: #141418;92--bg-elevated: #1c1c22;93--bg-card: #222228;94--accent-primary: #e85a42;95--accent-secondary: #f0c060;96--accent-tertiary: #4bc0a0;97--text-primary: #f0f0f2;98--text-secondary: #9898a8;99--text-muted: #606070;100--font-display: 'Syne', sans-serif;101--font-mono: 'Space Mono', monospace;102```
computerlovetech