Add string-brand agent skill documenting colors, fonts, and logo usage

[ghostleek]

Packages this repo's brand guide as a Claude Code skill at .claude/skills/string-brand/, so coding agents building anything with String's identity use the real values instead of eyedropping a PNG or guessing.

Why

Today the brand lives in JPEG boards, vector files, and a README that lists two font names. An agent asked to "build a landing page for String" has no way to get the palette right. This turns the guide into something machine-readable.

What was extracted vs. added

Read directly from the assets — palette, logo pairings, and fonts:

• Four core colors from the fill values in 1. Vector Masters/Svg.svg and 4. Svg Separate Files/*.svg: #75F8CC green, #33373B dark, #C0F4FB sky, #FFFFFF. #C0F4FB appeared only in the master SVG and as the background of boards 9–10, so it wasn't documented in text anywhere before this.
• The six approved logo-on-background pairings, recovered from the twelve JPEG boards (odd = mark, even = logotype).
• The exact font files present: Montserrat in 9 weights with italics, Space Grotesk in 5 weights with no italics.

Added as convention, and labeled as such — tint/shade ramps, the type scale, semantic light/dark recipes, chart palettes, and the Space Grotesk-display / Montserrat-body split. The source guide names both typefaces without assigning roles, so the skill states its reasoning and notes that a project already committed to the opposite split should stay consistent with itself.

The accessibility finding

Three of the four core colors are light, so #75F8CC and #C0F4FB are fill colors rather than text colors — 1.31:1 and 1.19:1 against white. The ramps supply AA-passing alternatives in the same hue family so "make the links green" doesn't produce something unreadable.

Green-on-white for the logo is on boards 1–2, so the skill documents it as approved while flagging that at 1.31:1 it should be large and decorative only, with *_dark for favicons, headers, and print.

Contents

SKILL.md                    palette, type, logo pairings — the everyday reference
references/colors.md        ramps, contrast matrix, themes, chart palettes
references/logo.md          file inventory, sizing, favicons, misuse
references/typography.md    type scale, weights, @font-face, loading
assets/tokens.css           CSS custom properties, light + dark themes
assets/tokens.json          same values as data, for Tailwind/token pipelines
scripts/contrast.py         WCAG checker, on-brand substitutes, and --audit

Review fixes (commit 2)

Copilot found four issues, all legitimate. The serious one: the frontmatter description was an unquoted YAML scalar containing hex codes, and a bare # starts a comment — so the description truncated at 67 of 914 characters, discarding the entire "when to use this" half that drives triggering. Now a folded block scalar; confirmed intact in the live skills listing. Also split tokens.css heading line-heights to match the published per-level scale, separated Vector Masters/Svg.svg (a 1280×1024 guide board, not a logo asset) from the logo masters, and added the missing button role to tokens.json.

Output evals found a defect in this skill (commit 3)

Six subagent runs — landing page, dashboard theme, logo placement, each built with the skill and again with repo access but .claude/ off-limits — then every rendered text node measured for computed contrast in a real browser.

The dashboard built with the skill had more contrast failures than the one without, because it faithfully used the status colors this skill prescribed. All four were too light for their paired tint backgrounds:

	As published	On its tint
error	#D64545 on #FDECEC	3.83:1
warning	#C77A16 on #FDF3E3	3.07:1
success	#2E9E6B on #E8F6EF	3.03:1
info	#3A7CA5 on #E9F2F8	4.02:1

Three also failed on plain white. An earlier version of this description claimed those values were contrast-checked; they were not. Replaced with darkened values clearing 4.5:1 against their tint, #FFFFFF, and ink-50, plus dark-theme variants that were missing entirely — which is why the dashboard agent invented its own.

Also documented that the ramps' "On white" column means #FFFFFF exactly: green-800 measures 4.76 on white but 4.44 on ink-50 and 3.99 on ink-100, so green link text on a card quietly drops below AA.

The durable fix is contrast.py --audit, which re-derives every pairing the skill documents — semantic themes, status colors, and the stated logo ratios — and exits non-zero on drift:

$ python3 .claude/skills/string-brand/scripts/contrast.py --audit
    PASS  light: accent text on page          4.76:1  (needs 4.5)
    PASS  status success on tint              4.56:1  (needs 4.5)
    PASS  logo green on #33373B   stated  9.17  actual  9.17
  All documented pairings verified.

Verified it fails correctly by re-injecting the original #2E9E6B, a green-on-white accent, and a falsified logo ratio — all three caught, exit 1. These ratios are hand-written prose; without a check they will drift again.

What the evals did and didn't show

On the scripted checks the margin was narrow — 17/18 with the skill vs 16/18 baseline. That's honest: an agent with repo access reads the SVGs and finds the core colors on its own. The skill's measurable edge was in the derived values, where the baseline invented its own neutrals and a nine-step green ramp (#0BDA95, #25F4AE, #47F6BB, …) instead of using the documented one.

A separate attempt at trigger-word optimization was abandoned: its detector scores a query as "not triggered" unless the skill is the literal first tool call, so realistic agentic prompts ("set up app/page.tsx") register as misses regardless of description quality. Not run rather than run and misreported.

[Copilot]

Pull request overview

Packages the existing String brand guide into a Claude Code skill under .claude/skills/string-brand/, adding machine-readable references (docs + tokens) and a small WCAG contrast utility so coding agents can apply the exact palette, typography, and logo-usage rules without guessing.

Changes:

• Adds a string-brand skill with a short quick reference (SKILL.md) plus deeper references for colors, typography, and logo usage.
• Introduces exportable design tokens (assets/tokens.css / assets/tokens.json) and a standard-library-only contrast checker (scripts/contrast.py).
• Updates the repo README.md with quick reference and instructions for using/copying the skill.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
README.md	Documents the new agent skill and provides a quick-reference summary + usage instructions.
.claude/skills/string-brand/SKILL.md	Skill entrypoint and quick-reference guidance for palette/type/logo pairing rules.
.claude/skills/string-brand/references/colors.md	Detailed color ramps, contrast matrix, semantic recipes, and derivation notes.
.claude/skills/string-brand/references/logo.md	Logo asset inventory, pairing guidance, sizing, embedding, and misuse guidance.
.claude/skills/string-brand/references/typography.md	Typeface inventory, roles, type scale, and loading guidance.
.claude/skills/string-brand/assets/tokens.css	CSS custom properties for palette/typography + light/dark semantic theme tokens.
.claude/skills/string-brand/assets/tokens.json	JSON representation of the tokens for tooling/pipelines.
.claude/skills/string-brand/scripts/contrast.py	CLI utility to compute WCAG contrast ratios and suggest on-brand substitutes.

Suppressed comments (1)

.claude/skills/string-brand/assets/tokens.css:138

• The optional base styles apply the same heading line-height to h1–h4 (--string-leading-heading), which doesn’t match the per-level values in the type scale. If you keep these base styles, consider wiring h1–h4 to per-level leading variables so copying tokens.css yields the documented scale.

h1, h2, h3, h4 {
  font-family: var(--string-font-display);
  line-height: var(--string-leading-heading);
  letter-spacing: var(--string-tracking-display);
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.