brand guide and assets for String
What is included:
Montserrat Space Grotesk
.claude/skills/string-brand/ packages this guide as a Claude Code skill,
so coding agents apply the brand correctly without being told the hex codes every time.
It covers the palette, the typefaces, and which logo file goes on which background.
Quick reference
| String Green | #75F8CC |
| String Dark | #33373B |
| String Sky | #C0F4FB |
| Display type | Space Grotesk |
| Body type | Montserrat |
Note that #75F8CC and #C0F4FB are fill colors, not text colors — both sit near 1.2:1
against white. Body text is #33373B on light and #FFFFFF or #75F8CC on dark.
Using it
Working inside this repo, Claude Code picks the skill up automatically. To use it elsewhere:
# for one project
cp -r path/to/string-brand-guide/.claude/skills/string-brand your-project/.claude/skills/
# or for every project on your machine
cp -r path/to/string-brand-guide/.claude/skills/string-brand ~/.claude/skills/What's inside
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 the same values as data, for Tailwind/token pipelines
scripts/contrast.py WCAG checker for any pair, plus on-brand substitutes
python3 .claude/skills/string-brand/scripts/contrast.py --matrix
python3 .claude/skills/string-brand/scripts/contrast.py --find '#75F8CC' --on '#FFFFFF'
python3 .claude/skills/string-brand/scripts/contrast.py --audit # re-verify the docsThe palette values, logo pairings, and font list come straight from the assets in this repo. The tint/shade ramps, type scale, and the Space Grotesk / Montserrat display-body split are conventions the skill adds on top, and it flags them as such where they appear.