# Brand Guidelines Computerlove

> 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.

- Skill: `computerlovetech/brand-guidelines-computerlove` (Agent Skill)
- Install (CLI): `npx skillmds@latest add computerlovetech/brand-guidelines-computerlove`
- Raw SKILL.md: https://api.skillmd.com/api/skills/computerlovetech/brand-guidelines-computerlove/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: computerlovetech (https://skillmd.com/u/computerlovetech)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/computerlovetech/brand-guidelines-computerlove

---


# 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

```css
--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;
```