Skills / Pick fonts and colors
Pick fonts and colors
Settle the fonts and colors for a real project. Free sources, tested in context, choices written down. Use when they say "what font should I use", "pick colors for my site", or keep changing fonts without settling.
Use this skill. Nothing to install.
Don't have an agent? · Raw file: skills/pick-fonts-and-colors.md
Watch the first two minutes
This is how a session goes, including the end of the endless browsing. Click through it.
Scripted example of a real session.
I can never tell what goes together
You don't have to, at least at the start. The skill carries a small set of mappings that do most of the work: the feel-word you give it points at a font category, and it says the mapping out loud so you pick it up. From there, rules narrow the field fast: two fonts maximum, the body font has to read well in a full paragraph at 16px, nothing decorative in body text ever, four color values total. What's left is a choice among three prepared pairings on your own content, each with a one-line trade-off. That choice is yours, and defensible means you can say why in one sentence, with no design school required.
What you end up with
Choices you can defend, rendered on your artifact and written where you will find them again. Here is the written record for the hiking blog.
- Each choice carries its why. One sentence per decision is the skill's bar for defensible, and it is what stops the tenth font change.
- Contrast is checked and stated. The checker gets shown during the session so you can rerun it alone on any future pair.
- The record is executable. The same four values exist as custom properties in the CSS, so the site and the document can't drift apart.
Questions people actually ask
Is this free?
The skill is free, no account, no catch. The fonts are too: Google Fonts covers nearly every case, and Fontsource if you want the files in a repo. The agent you paste the skill into may or may not be free; Gemini has the widest free tier.
Can I use a fancy decorative font?
In headings, sometimes: only if the project genuinely calls for one. Never in body text; that rule has no exceptions in the skill. The body font must have a normal, unremarkable lowercase that reads well in a full paragraph at 16px, and it gets tested exactly that way.
How many colors do I get?
Four values total: background, text, one accent, and optionally a gray for secondary text. The skill stops there deliberately, because every extra color is another decision you will face again on every future page.
What if I want to change everything next month?
You can, and the write-down is what makes that healthy: with the current choices and their reasons on record, a change is a deliberate revision of one file instead of another round of drift. If you find yourself wanting usage rules around the choices, brand-kit is the next skill.
Do I need to understand color theory?
No. The session uses two checkable ideas: contrast, verified with a checker you see run and can rerun alone, and provenance, meaning the accent comes from something true like a team color or your own photo. Both are testable without any theory.
Where to go from here
Turn choices into rules:
Somewhere for the palette to live:
Curious? Read the full skill — the exact instructions your agent gets
--- name: pick-fonts-and-colors category: design description: Settle the fonts and colors for a real project. Free sources, tested in context, choices written down. Use when they say "what font should I use", "pick colors for my site", or keep changing fonts without settling. --- # pick-fonts-and-colors Help someone commit to fonts and colors for a real project. The enemy is endless browsing: the session ends with two fonts and three or four hex values chosen, tested on their actual artifact, and written down. Defensible means they can say why in one sentence, not that a design school would approve. ## Anchor on the project Ask what the project is, who sees it, and one word for how it should feel. That word does most of the work: "technical" points at a mono or grotesque sans, "friendly" at a rounded sans or humanist serif, "serious" at a plain sans with a real serif for headings. Say the mapping out loud so they learn it. ## Fonts Free sources only: Google Fonts covers nearly every case (Fontsource if they want files in a repo). Rules that narrow fast: - Two fonts maximum: one for headings, one for body. One font in two weights is also a valid answer and often the best one. - Body font must have a normal, unremarkable lowercase — read a full paragraph in it at 16px, not the specimen headline. - Nothing decorative for body text, ever; decorative display fonts only if the project genuinely calls for one, and only in headings. Propose three pairings that fit their word, each rendered as a side-by-side sheet with a real headline and a real paragraph from their project. One-line trade-off per pairing. They pick; you push back once at most if the body font fails the paragraph test. ## Colors Build the palette in this order, on their real content: 1. Background and text first: near-white and near-black, or the reverse. Check contrast (WCAG AA, 4.5:1 for body text) and show them the checker so they can rerun it alone. 2. One accent for links and actions. Pull it from something true — a team color, the logo, a photo they own — rather than a trend. 3. Optionally one gray for secondary text. Stop at four values total. Every extra color is a decision tax on all future work. Test the full set on the artifact, not on swatches: swatches lie, context does not. Try the accent at real size on a real button. ## Write it down Record the decisions where they will be found again: - In the repo: a short block in the README or a `brand.md` stub — font names, weights, hex values, and the one-sentence why. - If the project has CSS: the same values as custom properties, applied so the artifact now uses them everywhere. ## Done - The artifact renders in the chosen set and the exact values are committed - Body text and actions pass the recorded contrast check at their real sizes - The person can state the reason for each choice and where the values live If they later want usage rules around these choices, brand-kit is the next skill.