Visual Brand Kit: Palette, Fonts, Logo Rules
A one-page brand kit: role-based hex palette with contrast-checked pairings, licensed font pairing, logo rules, and a rollout order.
Before & after
Same prompt, same agent — the only difference is the skill.
That's a smart move. Having a consistent look is important for recognition. Usually you start with colors and fonts, then think about imagery style and overall feel. What's your industry or niche? And do you have any brands you admire visually? That might help me suggest a direction. Also, are you working with a designer or building this yourself?
YOUR VISUAL BRAND KIT: COLOR PALETTE (hex codes): Primary: #1A5C7A (deep teal) — use on buttons, headers, calls-to-action Secondary: #F0A202 (warm gold) — use for accents, highlights, hover states Neutral 1: #2B2B2B (charcoal) — body text Neutral 2: #F5F5F5 (off-white) — backgrounds Accent: #E74C3C (coral red) — alerts, important warnings only WHY THESE: Teal + gold = approachable, professional, stands out Charcoal is easier on eyes than pure black Off-white reduces screen fatigue Red reserved for 'stop' signals FONT PAIRINGS: Headlines (H1, H2): Inter Bold, 20-32px, tracking +0.5 Body text: Inter Regular, 14-16px, line-height 1.5 Small text (captions): Inter Regular, 12px Why: Clean, modern, readable on all screens LOGO USAGE: Full logo: Use on white backgrounds, 200px minimum width Mark only: Use on colored backgrounds, 64px minimum Don't: Never stretch, rotate, or change colors Clear space: 20px around logo (empty space) PHOTOGRAPHY STYLE: Use: Real people (not stock photos), authentic moments, natural lighting Don't: Overly posed, heavily filtered, cliche handshake images Color treatment: Apply subtle teal tint (+10% opacity) to warm up photos Examples: Candid team shots, customers in their workspace, product in action ICONOGRAPHY: Style: Minimalist line icons (not filled) Stroke width: 1.5px Size: 24px for UI, 48px for large illustrations Color: Charcoal (#2B2B2B) or teal (#1A5C7A), never multiple colors BUTTONS & CTA: Background: Teal primary color Text: White, all-caps, 14px bold Padding: 12px horizontal, 8px vertical Border radius: 4px (subtle, not rounded) Hover state: Darker teal (#0F3D52), slight lift effect DO's: ✓ Use the teal/gold together (they pop) ✓ Keep layouts clean (whitespace is your friend) ✓ Real photos > stock photos ✓ Consistent button styles across all pages ✓ Apply teal tint to photography DON'Ts: ✗ Don't mix this palette with bright neons ✗ Don't use more than 3 fonts ✗ Don't stack logos — always full logo with clear space ✗ Don't use red except for errors ✗ Don't over-process photos with filters ONE-PAGE REFERENCE: Print this or bookmark it. Share it with anyone creating content or design for you.
About this skill
Your posts, website, and newsletter all look like they come from different brands. The color you call your brand color is unreadable as text, and you aren't sure the fonts you picked are licensed for your website. This skill builds a visual system you can actually apply in Canva or Figma. Every color has a job, every text-on-background pairing is checked for contrast, and every font comes with its weights, sizes, and source.
What it does
- Builds a role-based palette (ink, paper, primary, accent, line) with exact hex values and limits on how much of a layout each color covers
- Calculates contrast ratios for every text and background pairing and labels each one PASS, LARGE ONLY, or FAIL. It also adds a text-safe shade when your brand color fails as text
- Pairs fonts by contrast or superfamily and checks weights, license, and fallback stacks, with a type scale for both web and social graphics
- Sets logo rules: versions, clear space, minimum sizes, approved backgrounds, and a check that your icon still reads in a circular avatar crop
- Writes do's and don'ts specific enough to test, like "no Mustard text on Paper (1.8:1)" instead of "use colors carefully"
- Audits an existing kit or your recent posts and ranks what is breaking consistency
What you get
A one-page brand reference covering color, pairings, type, logo, imagery, and layout constants. It ends with the 3 surfaces to update first so your brand looks consistent as fast as possible.
Best for
Solo creators, small businesses, and early-stage teams who already know how they sound and now need a clear visual spec they or a freelance designer can follow.
SKILL.md preview
---
name: visual-brand-kit
description: Builds a one-page visual brand kit with a role-based color palette (exact hex values and calculated contrast pairings), a licensed font pairing with a type scale, logo usage rules, imagery and layout direction, testable do's and don'ts, and a rollout order. Use when the user says "define my brand colors and fonts", "make me a brand style guide", "my posts all look different", "what font goes with my logo", "I need a one-page brand sheet for my designer", "my brand color is unreadable on white", "nothing I publish looks like the same brand", or "audit my brand kit".
---
# Visual Brand Kit: Palette, Fonts, Logo Rules
… (sign up to view the full skill)More creator skills
View all Creator skills →Brand Launch Asset Inventory and Gap Audit
A launch checklist of brand assets in build order, each with a pass/fail spec, plus a strict audit of the assets you already have.
Visual Direction Moodboard: Decide One Look
Turns saved inspiration into one recommended visual direction with a board plan, search terms, palette, and a gear feasibility check.
YouTube Channel Art and Thumbnail Template System
Avatar, banner, and thumbnail system for YouTube with exact sizes, device safe zones, a pixel-zoned template, and pre-upload checks.
Founder Origin Story Writer
Turns real founder details into an About page, a 3-sentence pitch, and a timed spoken version, without invented anecdotes or claims.