Basalt
Design system MCP server — query tokens, components, icons, and WCAG contrast data from Git-backed design systems.
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true"
:root { --tab-size-preference: 4; } pre, code { tab-size: var(--tab-size-preference); }
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-0f570a01cbe448fb.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-f638bd26ec06210f.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-c9ae636e7affabfe.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-c94ab8d1f22049a8.css" />
<meta name="hovercard-subject-tag" content="repository:1173958229" data-turbo-transient>
<meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I">
<meta name="user-login" content="">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Basalt design system — DTCG 2025.10 tokens, MCP server, brand assets - design-system/MCP.md at main · basalt-run/design-system">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<meta property="fb:app_id" content="1401488693436528">
<meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/basalt-run/design-system/blob/main/MCP.md" />
<meta name="twitter:image" content="https://opengraph.githubassets.com/245a68c3fedcc03ce20d530d86a4d905a5bdaf96535b17f17aeb1e9c247018ca/basalt-run/design-system" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="design-system/MCP.md at main · basalt-run/design-system" /><meta name="twitter:description" content="Basalt design system — DTCG 2025.10 tokens, MCP server, brand assets - basalt-run/design-system" />
<meta name="hostname" content="github.com">
<meta name="expected-hostname" content="github.com">
<meta name="turbo-cache-control" content="no-cache" data-turbo-transient>
<meta data-hydrostats="publish">
<meta name="turbo-body-classes" content="logged-out env-production page-responsive">
<div class="position-relative header-wrapper js-header-wrapper ">
<a href="#start-of-content" data-skip-target-assigned="false" class="px-2 tmp-py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a>
<span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full">
<span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span>
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.a5bd4b647950246b.module.css" />
<react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"
/* Override primer focus outline color for marketing header dropdown links for better contrast */ [data-color-mode="light"] .HeaderMenu-dropdown-link:focus-visible, [data-color-mode="light"] .HeaderMenu-trailing-link a:focus-visible { outline-color: var(--color-accent-fg); }
Navigation Menu
Toggle navigation <a class="tmp-mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav"
href="/"
aria-label="Homepage"
data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}">
<svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github">
<path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943"></path>
<div class="d-flex flex-1 flex-order-2 text-right d-lg-none gap-2 flex-justify-end">
<a
href="/login?return_to=https%3A%2F%2Fgithub.com%2Fbasalt-run%2Fdesign-system%2Fblob%2Fmain%2FMCP.md"
class="HeaderMenu-link HeaderMenu-button d-inline-flex f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav"
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/basalt-run/design-system/blob/main/MCP.md","user_id":null}}" data-hydro-click-hmac="323fd96dc98011fe368a4014bf4bb19b70d24ebdf528e768d7eb07991bc1b12a"
data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}"
>
Sign in
</a>
<div class="AppHeader-appearanceSettings">
<react-partial-anchor>
<button data-target="react-partial-anchor.anchor" id="icon-button-10c6fcfd-d127-40b9-b1fb-cd6b6f79b895" aria-labelledby="tooltip-47334dfa-3084-4f74-9bba-a420b6d3c510" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>
<template data-target="react-partial-anchor.template">
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.a5bd4b647950246b.module.css" />
<react-partial partial-name="appearance-settings" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"
</template>
</react-partial-anchor>
</div>
</div>
<div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0">
<div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0">
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.a5bd4b647950246b.module.css" />
<react-partial partial-name="marketing-navigation" data-ssr="true" data-attempted-ssr="true" data-react-profiling="false"
- Platform
- Resources
- Open Source
- Pricing
<div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center tmp-mt-3 tmp-mt-lg-0 text-lg-left tmp-ml-lg-3">
<input type="hidden" name="type" class="js-site-search-type-field">
Search code, repositories, users, issues, pull requests...
<div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container"
style="border-radius: 12px;"
data-target="qbsearch-input.queryBuilderContainer"
hidden
>
<!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get">
Search
Clear
</span>
</div>
<template id="search-icon">
<div class="position-relative">
<ul
role="listbox"
class="ActionListWrap QueryBuilder-ListWrap"
aria-label="Suggestions"
data-action="
combobox-commit:query-builder#comboboxCommit
mousedown:query-builder#resultsMousedown
"
data-target="query-builder.resultsList"
data-persist-list=false
id="query-builder-test-results"
tabindex="-1"
></ul>
</div>
<div class="FormControl-inlineValidation" id="validation-16777447-856a-45ce-8f7e-be83c2226e08" hidden="hidden">
<span class="FormControl-inlineValidation--visual">
<svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
<path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
</div>
Provide feedback
</div>
<div class="Overlay-actionWrap">
<button data-close-dialog-id="feedback-dialog" aria-label="Close" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted Cancel
Submit feedback
<custom-scopes data-target="qbsearch-input.customScopesManager">
Saved searches
Use saved searches to filter your results more quickly
<div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm">
<!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="xN8hQo26wSnpLzUid5q2EZfBQhEzRTCPj4jN3WI9yhP+ZI/fP9gpUdNoH1iqGnkipb6pTqX81O4DM9i2EIQbcw==" />
<div data-target="custom-scopes.customScopesModalDialogFlash"></div>
<input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField">
<div class="form-group">
<label for="custom_scope_name">Name</label>
<auto-check src="/search/custom_scopes/check_name" required>
<input
type="text"
name="custom_scope_name"
id="custom_scope_name"
data-target="custom-scopes.customScopesNameField"
class="form-control"
autocomplete="off"
placeholder="github-ruby"
required
maxlength="50">
<input type="hidden" data-csrf="true" value="lLXjBqBLItvNCl8zueBuXbldEq/+qNt81U7elj0wyXEYIHlqvRiFzguJP1O/WqhElx7jqqYGU31CXG4bkP6vqA==" />
</auto-check>
</div>
<div class="form-group">
<label for="custom_scope_query">Query</label>
<input
type="text"
name="custom_scope_query"
id="custom_scope_query"
data-target="custom-scopes.customScopesQueryField"
class="form-control"
autocomplete="off"
placeholder="(repo:mona/a OR repo:mona/b) AND lang:python"
required
maxlength="500">
</div>
<p class="text-small color-fg-muted">
To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>.
</p>
<div data-target="custom-scopes.manageCustomScopesForm">
<div data-target="custom-scopes.list"></div>
</div>
Cancel
Create saved search
<div class="position-relative HeaderMenu-link-wrap d-lg-inline-block">
<a
href="/login?return_to=https%3A%2F%2Fgithub.com%2Fbasalt-run%2Fdesign-system%2Fblob%2Fmain%2FMCP.md"
class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded px-2 py-1"
style="margin-left: 12px;"
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/basalt-run/design-system/blob/main/MCP.md","user_id":null}}" data-hydro-click-hmac="323fd96dc98011fe368a4014bf4bb19b70d24ebdf528e768d7eb07991bc1b12a"
data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}"
>
Sign in
</a>
</div>
<a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&source=header-repo&source_repo=basalt-run%2Fdesign-system"
class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1"
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/basalt-run/design-system/blob/main/MCP.md","user_id":null}}" data-hydro-click-hmac="323fd96dc98011fe368a4014bf4bb19b70d24ebdf528e768d7eb07991bc1b12a"
data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/blob/show;ref_cta:Sign up;ref_loc:header logged out"}"
>
Sign up
</a>
<div class="AppHeader-appearanceSettings">
<react-partial-anchor>
<button data-target="react-partial-anchor.anchor" id="icon-button-f5b4072b-1c2f-4234-8e82-94389430d474" aria-labelledby="tooltip-e5dbd87e-d58b-48a2-a85a-a9f1ebeb5727" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>
<template data-target="react-partial-anchor.template">
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.a5bd4b647950246b.module.css" />
<react-partial partial-name="appearance-settings" data-ssr="false" data-attempted-ssr="false" data-react-profiling="false"
</template>
</react-partial-anchor>
<button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Resetting focus</button>
</div>
</div>
</div>
<div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
<button id="icon-button-c19855a5-99a7-4116-972c-e513858d7493" aria-labelledby="tooltip-03613b66-58bc-4bea-b29f-6a977d21cae1" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
<div id="js-flash-container" class="flash-container" data-turbo-replace>
<div class="d-flex flex-nowrap flex-justify-end tmp-mb-3 tmp-px-3 tmp-px-lg-5" style="gap: 1rem;">
<div class="flex-auto min-width-0 width-fit">
<span class="author flex-self-stretch" itemprop="author">
<a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/basalt-run/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/basalt-run">
basalt-run
<span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span>
</div>
<div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;">
<ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">
</div>
</div>
<div id="responsive-meta-container" data-turbo-replace>
<nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 tmp-px-3 px-md-4 tmp-px-md-4 px-lg-5 tmp-px-lg-5">
-
Code<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> -
Issues 0<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> -
Pull requests 0<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> -
Actions<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> -
Projects<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> -
Security and quality 0<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> -
Insights<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
Additional navigation options
<div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list>
<react-app app-name="code-view" initial-path="/basalt-run/design-system/blob/main/MCP.md" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" data-data-router-enabled="true" data-react-profiling="false"
BlameMore file actions
82 lines (60 loc) · 2.65 KB
main
File metadata and controls
- Preview
- Code
- Blame
82 lines (60 loc) · 2.65 KB
Connect your AI coding tools to your design system. Basalt serves your design tokens, component specs, icons, and accessibility data via MCP so AI tools generate on-brand code — not hardcoded values.
Works with Claude Design, Claude Code, Cursor, Windsurf, and any MCP-compatible client.
Sign up at basalt.run (free) and go to Settings → API Keys → Generate new key.
Cursor — add to ~/.cursor/mcp.json or Settings → MCP:
{
"mcpServers": {
"basalt": {
"url": "https://basalt.run/api/mcp",
"headers": {
"Authorization": "Bearer bsk_your_key_here"
}
}
}
}Claude Code:
claude mcp add --transport http basalt https://basalt.run/api/mcp \
--header "Authorization: Bearer bsk_your_key_here"Claude Desktop — add to claude_desktop_config.json:
{
"mcpServers": {
"basalt": {
"url": "https://basalt.run/api/mcp",
"headers": {
"Authorization": "Bearer bsk_your_key_here"
}
}
}
}Windsurf — Settings → MCP Servers, same config as Cursor.
| Tool | Description |
|---|---|
get_token | Get a resolved token value by path (e.g. color.action.default) |
list_tokens | List all tokens in a project |
search_tokens | Search tokens by name or value |
get_component | Get full component spec — usage, variants, a11y notes, code |
list_components | List all registered components with metadata |
get_icon | Get an SVG icon by name |
list_icons | List all available icons |
get_theme | Get light/dark theme tokens |
check_contrast | Check WCAG AA/AAA contrast between two colors |
AI coding tools hallucinate design values. They hardcode #3B82F6 instead of using var(--color-action-default). They guess at component APIs instead of using your real props.
Basalt gives AI tools a structured, queryable source of truth for your design system. Tokens are stored in Git as DTCG 2025.10 JSON, edited visually in Basalt's web editor, and served via MCP.
Claude Design reads your codebase during onboarding to apply your brand. Basalt is where your brand is defined — tokens, components, documentation, all in Git. Edit in Basalt, commit to your repo, and Claude Design picks it up automatically.
- Website: basalt.run
- Token format: DTCG 2025.10 (W3C standard)
- SDK: @modelcontextprotocol/sdk (Node.js)
</main>
<footer class="footer tmp-pt-7 tmp-pb-6 f6 color-fg-muted color-border-subtle p-responsive" role="contentinfo" >
Footer
<nav aria-label="Footer">
<h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3>
<ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading">
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to community","label":"text:community"}" href="https://github.community/" data-view-component="true" class="Link--secondary Link">Community</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a>
</li>
<li class="mx-2">
<a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a>
</li>
<li class="mx-2" >
</ul>
</nav>
<ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999"
data-locale="en"
data-initial-cookie-consent-allowed=""
data-cookie-consent-required="false"
></ghcc-consent>
You can’t perform that action at this time.
<template id="site-details-dialog">
<div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;">
<template id="snippet-clipboard-copy-button">
</div>
<div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div>
<div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div>
Related Servers
Scout Monitoring MCP
sponsorPut performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
sponsorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
GhostMCP
Injectable MCP server for AI-driven reverse engineering inside processes
BlueMouse
The "Prefrontal Cortex" for LLMs. A local, data-driven logic gate that interviews AI to prevent hallucinations.
XcodeProj MCP Server
An MCP server for manipulating Xcode project files (.xcodeproj) using Swift. Requires Docker and macOS.
Omilia MCP Tools
A set of tools for managing miniapps, orchestrator apps, and dialog logs on the Omilia Cloud Platform (OCP).
Perf MCP
Fact-check and fix AI outputs — hallucination detection, schema validation, and auto-repair.
Enhanced AutoGen MCP Server
Integrates with Microsoft's AutoGen framework to enable sophisticated multi-agent conversations via the Model Context Protocol.
Bitrise
Manage apps, builds, and artifacts on Bitrise, a Continuous Integration and Delivery (CI/CD) platform.
AvaloniaUI
Tools, resources, and guidance for building cross-platform applications with AvaloniaUI.
MetaTrader 4
Integrate with the MetaTrader 4 trading platform to access trading functions and data via an HTTP bridge and Expert Advisor.
Nextflow Developer Tools
An MCP server for Nextflow development and testing, which requires a local clone of the Nextflow Git repository.