More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Design System Starter: Logos, WCAG Palette + Tailwind Tokens

    1

    Brand kit + design system in one: 17 SVG logo files, a WCAG-checked palette, Tailwind/CSS/DTCG tokens and print-ready guidelines from a one-paragraph brief.

    $12

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Design System Starter: Logos, WCAG Palette + Tailwind Tokens

    Design System Starter: Logos, WCAG Palette + Tailwind Tokens

    Example session with this skill installed

    Create a brand kit for Crumb & Co, an artisan sourdough bakery in Cape Town. We bake naturally leavened loaves with stone-milled South African flour, run a small café counter in Woodstock and a stall at the Saturday market, and supply a few cafés wholesale. Our customers are locals who care about real bread. We want to feel warm, honest and crafted, with a bit of playfulness. We like earthy, crusty colours but no beige overload, and please no wheat-stalk logo.

    • Read your context and instructions
    • Compiled the design system starter
    • Generated the UI component

    Crumb & Co brand kit

    The idea. Before a sourdough loaf goes into the oven, the baker makes one decisive cut so it can open and rise. The identity grows from that gesture: a crust-coloured boule with a single flour-white score, a soft serif whose italic ampersand supplies the wink, and earthy colours set on plenty of flour-white space instead of beige-on-beige. No wheat anywhere.

    Logo

    Symbol, "The Score": a Crust disc with one score drawn from two large-radius arcs, so it reads as a cut rather than a moon and stays crisp at favicon size.

    Wordmark: Fraunces SemiBold, tightened slightly, in warm ink; the italic Fraunces ampersand in Crust is the one playful detail.

    Monogram, "C, with a crumb": a round-capped geometric C holding a single honey crumb, on Fynbos green, drawn as shapes so it works as an app icon or sticker without any font installed.

    Primary logo = horizontal lockup. Also: stacked lockup, reversed versions for dark backgrounds, one-colour versions of every mark (the score and the C become true cut-outs), an adaptive favicon and a circle-safe Instagram avatar.

    Palette

    RoleNameHexUseText on it
    PrimaryCrust#A0461Elogo, buttons, packaging stampswhite, 6.19:1 (AA)
    SecondaryFynbos#3E5641footer, menu boards, wholesale docsFlour 50, 7.46:1 (AAA)
    AccentHoney#E3A33B"fresh today" badges, pricesdark ink, 7.47:1 (AAA)
    NeutralFlour 50 / 900#F9F6F2 / #33302Bbackground / body text12.19:1 (AAA)

    Typography. Fraunces (headings), Work Sans (body and UI), DM Mono (prices, order numbers). 16 px base, 1.25 Major Third scale: 12 / 13 / 16 / 20 / 25 / 31 / 39 / 49 / 61 / 76 px, line heights on a 4 px grid.

    Voice. Recommended tagline:

    "Worth the wait." Alternatives: "Slow bread, honestly made." / "Come for the crust."
    Instagram bio (128/150): Naturally leavened sourdough, slow-proved in Woodstock, Cape Town. Loaves out at 7am. Saturdays at the market. Wholesale: DM us.

    Validated (check_kit.py: READY, 8 of 8)

    • 17 logo SVGs lint-clean (well-formed, viewBox, no raster/scripts/external refs, font fallbacks, nothing clipped)
    • 10/10 intended colour pairings pass WCAG 2.x; body text 12.19:1 (AAA); tightest: captions 4.98:1
    • Tokens in 4 formats; guidelines with all 7 sections; 4 bios within platform limits

    Files

    brand/
├── guidelines.html   (prints to A4 PDF)
├── brand.json · README.md · voice.md
├── logo/    17 SVGs: wordmark · monogram · symbol · 2 lockups (+ -reversed, -mono) · favicon · avatar
├── color/   palette.md · contrast.md · contrast.json
└── tokens/  tokens.css · tailwind.theme.css · tailwind.config.js · tokens.json · fonts.html

    Next steps

    1. Open guidelines.html > Print > Save as PDF (A4, background graphics on).
    2. Install Fraunces, Work Sans, DM Mono (free). For printers, outline the wordmark: python3 scripts/outline_text.py brand/logo --font-dir <your fonts>.
    3. Choose the tagline; fill the [placeholders] in the boilerplate.
    4. Run a trademark search before printing bags or signage.

    Assumptions: South African English; handle @crumbandco; fictional sample person on the business card; harmonised default semantic colours.

    guidelines.html

    TSX · React component

    Generated

    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

    Most "brand kit" prompts give you advice. This skill hands over the finished folder, and checks it before you see it.

    Describe a business in a paragraph. Your agent runs a designer's process (strategy, palette, contrast check, type, logo concepts, lint, tokens, guidelines, voice) and delivers a brand/ folder you can use the same day, with a validation report that says READY.

    What you get

    • 17 logo files (SVG): wordmark, monogram and symbol, horizontal and stacked lockups, a reversed version of each for dark backgrounds, a one-color version of each (overlaps become real cut-outs), an adaptive favicon (switches colors in dark mode) and a circle-safe social avatar.
    • Color palette with perceptually even 50-950 scales (OKLCH) and a WCAG 2.x contrast matrix: every pairing your brand will actually use is checked (AA/AAA, normal/large text, UI), and failures come with the nearest passing fix.
    • Typography: a Google Fonts pairing (27 curated pairings by personality), a modular type scale with line heights on a 4 px grid.
    • Design tokens in four formats: CSS custom properties (with dark mode), Tailwind v4 @theme, Tailwind v3 theme.extend, and W3C DTCG tokens.json for Figma/Tokens Studio/Style Dictionary.
    • guidelines.html: one polished page (prints to an A4 PDF) with cover, positioning, personality, logo concepts, clear space, minimum sizes, do/don't examples, swatches with contrast badges, 60-30-10, approved pairings, type specimens, voice, and mock-ups of a business card, social post, website header and UI states.
    • Voice sheet: 4-6 tagline options, we-are/we-are-not, do/don't with examples, vocabulary, social bios checked against platform limits, boilerplate.

    Why it beats prompting a chatbot

    The usual problemWhat this skill does
    SVG wordmarks get clipped or float, because the model guesses text widthstypeset_logo.py uses measured metrics for 52 Google Fonts families; artboards hug the letters (verified within ~1% in Chrome)
    Dark-mode and one-color logos are improvised or missingbuild_logo_set.py derives them automatically, element by element, with contrast checks
    "Accessible colors" is a claimcontrast_matrix.py computes real WCAG ratios, never rounds up, and proposes the nearest fix
    Random tintsOKLCH scales where steps 600-950 are guaranteed to carry body text (tested on 2,520 base colors)
    Logos look like clip-arta construction reference (grid, primitives, optical corrections), a cliche list per industry, and a "misread test" learned from real runs
    Nobody checks the resultsvg_lint.py + check_kit.py validate all 28 files before hand-over

    What's inside the skill

    • SKILL.md: an 11-step expert workflow with commands, quality bar and a hand-over template
    • 9 Python scripts (standard library only): palette_scale, contrast_matrix, typeset_logo, build_logo_set, svg_lint, export_tokens, build_guidelines, check_kit, outline_text (optional: converts wordmarks to vector outlines using fonts you download)
    • References: logo construction (with worked examples), 27 font pairings, palette rules (anti-"AI look"), voice guide, brand.json schema
    • Guidelines template + stylesheet, a brand.json starter, and a complete worked example you can rebuild in seconds

    Who it's for

    Founders and small businesses who need a coherent identity this week; freelancers and agencies who want a fast, consistent first round to present; web developers who need tokens and logo files that drop straight into a codebase; designers who want the boring parts (scales, contrast checks, variants, token exports) done correctly.

    Requirements

    An agent that can run code, with Python 3.8+ (no pip installs, no API keys, no network). Works in chat-only agents in a guided mode with reduced validation. Open guidelines.html in a browser to see the real typefaces.

    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 8 days ago

    • Passed all security checks, Safe to install

    Requires

    Python

    Listed8 days ago

    What's inside

    Frequently Asked Questions