CircleTel brand guidelines for AI image generation. Ensures logo usage, colors, and typography are consistent across all generated assets.
Ensures all AI-generated images follow CircleTel brand guidelines. This skill automatically injects brand context into image generation prompts and provides logo/asset references.
This skill automatically activates when you:
Keywords: brand, logo, image, generate image, design, colors, typography, marketing image, social post, hero image, product image, circletel style
CircleTel has 8 logo variants located in .design/logos/:
| File | Colors | Background | Use Case |
|---|
LOGO-01.png | Orange + Gray | White/Trans | Primary - Website, documents, formal |
LOGO-02.png | Orange only | White/Trans | Single-color printing, embroidery |
LOGO-03.png | Gray only | White/Trans | Neutral contexts, B&W documents |
LOGO-04.png | Black only | White/Trans | High contrast, legal docs, stamps |
LOGO-05.png | White only | Transparent | Dark backgrounds - knocked out |
LOGO-06.png | White | Orange bg | Social avatars, app icons, favicons |
LOGO-07.png | Orange + Gray | White (small) | Email signatures, small placements |
LOGO-08.png | Orange + Gray | White (large) | High-res print, banners, billboards |
IF background is dark/black → Use LOGO-05 (white knocked out)
IF social media avatar/icon → Use LOGO-06 (white on orange square)
IF print/large format → Use LOGO-08 (high-res)
IF email/small placement → Use LOGO-07 (optimized small)
IF single-color required → Use LOGO-02 (orange) or LOGO-03 (gray)
IF formal/primary use → Use LOGO-01 (orange + gray, professional)
The CircleTel logo consists of:
Clear space: Maintain padding equal to the height of "TEL" around the logo Minimum size: 32px height for digital, 10mm for print
| Name | Hex | Tailwind | Usage |
|---|---|---|---|
| CircleTel Orange | #F5831F | circleTel-orange | Primary brand, CTAs, highlights |
| Dark Neutral | #1F2937 | circleTel-darkNeutral | Text, headings, dark UI |
| Light Neutral | #E6E9EF | circleTel-lightNeutral | Backgrounds, cards |
| Name | Hex | Usage |
|---|---|---|
| Orange Light | #FEF3E8 | Hover states, light backgrounds |
| Orange Dark | #D96F1A | Pressed states, shadows |
| Gray | #6B7280 | Secondary text, borders |
| Success Green | #10B981 | Success states, confirmations |
| Error Red | #EF4444 | Errors, warnings |
| Info Blue | #3B82F6 | Information, links |
Primary actions → Orange (#F5831F)
Text (body) → Dark Neutral (#1F2937)
Backgrounds → Light Neutral (#E6E9EF) or white
Accents → Orange gradient or solid
Selected states → Dark Blue (#1E4B85) - for package cards
Shadows → Color-matched (orange shadow for orange elements)
font-family: Arial, Helvetica, sans-serif;
| Weight | Class | Usage |
|---|---|---|
| 600 | font-semibold | Subheadings, labels |
| 700 | font-bold | Headings, CTAs |
| 800 | font-extrabold | Hero text, major headlines |
| Element | Size | Weight | Color |
|---|---|---|---|
| Hero headline | 48-64px | 800 | Dark Neutral |
| Section heading | 32-40px | 700 | Dark Neutral |
| Subheading | 20-24px | 600 | Dark Neutral |
| Body | 16px | 400 | Dark Neutral |
| Caption | 14px | 400 | Gray |
| Price | 24-32px | 700 | Orange |
When generating ANY image for CircleTel, ALWAYS include this brand context:
brand_context: |
CircleTel Brand Guidelines:
- Primary color: Vibrant orange (#F5831F)
- Secondary color: Dark charcoal (#1F2937)
- Background: Clean white or light gray (#E6E9EF)
- Style: Modern, professional, South African market
- Mood: Trustworthy, innovative, approachable
- Typography: Clean sans-serif (Arial style)
- Avoid: Overly busy designs, neon colors, clip art style