mcpField
S
Slingshot brand kit

Slingshot brand kit

Local
slingshot.fyiMedia & Design0Updated 3w ago
RepositoryVisit website

About Slingshot brand kit

Slingshot brand kit provides brand guides, design tokens, and a color checker for teams and agents applying Slingshot's brand. Its rules include their rationale, and tokens are maintained in one source and generated as CSS.

Key features

  1. 01Browse five brand guides
  2. 02Print design tokens as CSS
  3. 03Check files for off-brand colors
  4. 04Use guides with agents or people

Use cases

  1. 01Look up brand rules for a design task
  2. 02Apply brand tokens in CSS
  3. 03Check CSS files for non-brand colors

MCP support

The `slingshot-brand-mcp` server exposes the brand guides, tokens, and color checker to MCP clients through the `brand_guide`, `brand_tokens`, and `check_colors` tools.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "fyi-slingshot-brand-kit": {
      "command": "npx",
      "args": [
        "-y",
        "@slingshot-fyi/brand-kit"
      ]
    }
  }
}
Run commandnpx -y @slingshot-fyi/brand-kit

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@slingshot-fyi/brand-kit0.1.0

Tools

3

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
topicenumNovoice | layout | typography | color | mark

Details

From the project README

Slingshot brand kit

Slingshot's own brand, built as an agentic brand system: the same parts the company builds for others, used on itself first. It is the brand behind slingshot.fyi.

PartWhat it is
Kitbrand/: a router (readme.md) and five guides (voice, layout, typography, colour, mark). Every rule carries its reason, so a person or an agent can apply it to a case nobody wrote down.
Tokensbrand/tokens.json holds every value once; dist/tokens.css is generated from it.
CLIslingshot-brand prints the guides and tokens, and checks files for colours that are not brand tokens.
MCPslingshot-brand-mcp gives any MCP client (Claude Code, Claude Desktop, Cursor) the guides, the tokens and the colour check while it works.

Use it

npx -p @slingshot-fyi/brand-kit slingshot-brand guide            # which guide to read for the task
npx -p @slingshot-fyi/brand-kit slingshot-brand guide voice      # one guide
npx -p @slingshot-fyi/brand-kit slingshot-brand tokens           # tokens as CSS custom properties
npx -p @slingshot-fyi/brand-kit slingshot-brand check src/*.css  # exits 1 if any colour is off-brand

In a clone of this repository, run npm install once and the same commands work as npx slingshot-brand ….

Add the MCP server to Claude Code:

claude mcp add slingshot-brand -- npx -y @slingshot-fyi/brand-kit

It exposes three tools: brand_guide, brand_tokens and check_colors.

How it is tested

npm test checks that every rule has a reason, that the generated CSS covers every token, that the colour check names brand colours and flags the rest, and starts the MCP server to call each tool over stdio.

The kit itself is tested the way Slingshot tests every kit: hand it to a fresh agent with no other context, ask it to make something new, and treat every guess it makes as a missing rule.

Fonts

The statement face, Exposure, is licensed separately and is not in this repository. Geist and Geist Mono are under the SIL Open Font License.

Licence

The code is MIT (see LICENSE). The Slingshot name, mark and copy belong to Slingshot.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.