More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsbrand identity token kit
1-3 hex colours in, full brand token kit out: OKLCH scales, WCAG-checked light/dark themes, Tailwind, DTCG tokens, guide.
$10
brand identity token kit
Example session with this skill installed
Make a brand kit for "Harbor & Pine Coffee": green #1F6F5C, rust #C8553D, mustard #F2B134, friendly feel. I need Tailwind and CSS variables, and it must pass accessibility.
- Read your context and instructions
- Compiled the brand identity token
- Generated the UI component
Answer: Kit built. 52 contrast pairs checked in light and dark mode, 0 failures.
Scales: primary keeps #1F6F5C at step 700, secondary #C8553D at 500, accent #F2B134 at 300, plus neutrals tinted toward the primary
- Semantic: success #007C78, warning #916100, danger #B33E38, info #0071B4
Contrast: body text 13.15:1 (AAA), muted text 4.89:1 (AA), white on primary 5.04:1 (AA). Dark mode body text 17.81:1
Colour vision: --cvd-safe moved the success hue 150 to 190, so danger vs success under deuteranopia went from ΔE_ok 0.018 (indistinguishable) to 0.106. Danger vs warning stays close for deuteranopes (0.030), so pair them with an icon or label
- Type: Nunito / Nunito Sans, 1.25 ratio, 16px base (xs 10.24px to 5xl 61.04px)
Old site audit: 16 unique colours merged to 9 and mapped to tokens. #999999 on white is 2.85:1 (fails), and the nearest passing colour is #757575 (4.61:1)
Deliverables: tokens.json, tokens.css, theme.css, tailwind.config.js, brand-guide.html, contrast-report.md, 3 social SVGs.
Next steps: import tokens.json into Tokens Studio, replace the old greys with neutral-* tokens, open the guide and print it to PDF.
(Real run on the bundled sample brief.)
tokens.css
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Turn a logo colour into a design system that passes contrast checks in light and dark mode.
Give the brand name, 1-3 colours and a mood. The skill builds perceptually even OKLCH 50-950 scales that keep your exact input colours, plus neutral and semantic (success/warning/danger/info) scales and light and dark role tokens. A WCAG 2.2 contrast table covers every text/background pair, and a colour-vision check (Machado 2009 simulation for protanopia, deuteranopia and tritanopia) catches danger/success pairs that look alike. --cvd-safe nudges the success hue automatically.
Outputs:
tokens.json(W3C Design Tokens format for Figma Tokens Studio / Style Dictionary)tokens.csswith dark mode- Tailwind v4
@themeand a v3tailwind.config.js - printable
brand-guide.html contrast-report.md- social SVG templates (1080 post, 1500x500 banner, 1200x630 OG)
It also includes a stylesheet audit that merges near-duplicate colours from an inherited CSS file and maps each one to the nearest token, and a contrast check that suggests the nearest passing colour.
What's included
SKILL.md, scripts/brandkit.py, scripts/colorlib.py (OKLab/OKLCH, WCAG, CVD simulation), sample brief and messy CSS, sample output kit, references (WCAG 2.2, CSS Color 4, W3C DTCG, Tailwind docs, Björn Ottosson's OKLab, Machado et al. 2009), tests.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 1 day ago
- Passed all security checks, Safe to install