Brand Colors and Fonts with Contrast and License Checks
A 3-5 color palette and font pairing for a creator brand, with computed WCAG contrast ratios and font license status.
Before & after
Same prompt, same agent — the only difference is the skill.
Here's a color and font system for a finance channel: **Colors**: - Primary: Deep navy (#1B263B) — conveys trust and professionalism - Secondary: Gold (#D4A574) — suggests wealth and premium quality - Accent: Teal (#2A9D8F) — adds a modern touch - Neutrals: White, light grey, dark grey **Fonts**: - Headings: Montserrat Bold — clean and modern - Body: Open Sans — highly readable - Numbers: Consider a monospace font for financial data **Usage**: Use navy for backgrounds, gold for highlights and CTAs, and keep plenty of white space for a premium feel. Would you like alternatives?
COLOR & TYPE SYSTEM — finance channel
FIRST, A CONSTRAINT MOST FINANCE BRANDS IGNORE
Navy-and-gold is the default for this category, which means it reads as
generic in a thumbnail grid where you're competing on 3% of a screen.
Below keeps the trust signal and buys differentiation.
COLOR
--ink #10151F near-black backgrounds, thumbnails
--paper #F7F5F1 warm off-white — reads editorial, not corporate
--signal #E4572E the accent. Used ONLY for the one number that
matters per frame.
--gain #2D9E6F up
--loss #C94434 down
--muted #6B7280 labels, axes, secondary text
The discipline: --signal appears once per thumbnail and once per
chart. The moment it's on two things it stops meaning anything, and
the palette collapses into decoration.
Gain/loss are deliberately not pure red/green — those fail for the
~8% of male viewers with red-green deficiency, which in a finance
audience is a meaningful slice. Check every chart in greyscale;
if up and down stop being distinguishable, add a shape or a label.
TYPE — three faces, each with one job
DISPLAY Söhne Breit / Archivo Black
Thumbnails and title cards only. Weight is the hook.
BODY Söhne / Inter
Lower thirds, captions.
NUMERALS IBM Plex Mono, tabular figures
Every figure on screen. Tabular is non-negotiable —
proportional digits make columns jitter between frames and
it looks amateur the instant a number ticks.
SCALE — thumbnail-first, because that's where the decision happens
Thumbnail hook 180–240pt, 3–5 words max
Title card 72pt
Lower third 32pt
Caption 24pt minimum ← anything smaller is unreadable on a
phone, which is most of your audience
APPLIED
Thumbnail --ink background · one --signal number · 3 words --paper
Chart --paper background · --muted axes · --signal on the one
series being discussed
Lower third --ink 80% opacity bar · --paper text
WHAT TO NEVER DO
Gradients on text. Drop shadows on numbers. More than three colors in
one frame. Any of these and it reads as a template.About this skill
Pick brand colors and fonts you can prove are readable and legal to use. Every text pairing gets a computed contrast ratio, and every font gets a license status.
What it does
- Builds a 3-5 color palette where each color has a job and a never-use rule
- Computes WCAG contrast for every text pair and adds a darker text shade when a brand color fails
- Pairs a display face and a text face that stay legible at thumbnail size
- Flags fonts whose license does not cover a monetized channel, web, or merch
What you get
A palette table, a contrast table with ratios and pass/fail, fonts with license status, a type scale, and usage rules.
Best for
Creators, coaches, and small businesses setting up or fixing their visual identity without a designer.
SKILL.md preview
---
name: brand-color-font
description: Define a creator or small-business brand palette and font pairing that actually works - 3-5 colors with hex values and jobs, every text pairing checked with a computed WCAG contrast ratio, fonts whose licenses cover monetized video, web, and print use, and a one-page spec for thumbnails, Canva, and social. Use when the user says "pick brand colors and fonts for me", "do these colors work together?", "is this text readable on my thumbnail?", "can I use this font commercially?", "my graphics all look different", "give me a color palette for my channel", or "check my brand colors for contrast".
---
# Brand Color and Font System
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.