AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Check the WCAG contrast ratio between a foreground and background color, with AA/AAA pass/fail for normal and large text.
Background color (hex, rgb(), or hsl()).
Foreground color (hex, rgb(), or hsl()).
Check the WCAG contrast ratio between a foreground and background color, with AA/AAA pass/fail for normal and large text.
| Argument | Type | Description |
|---|---|---|
| bg* | string | Background color (hex, rgb(), or hsl()). |
| fg* | string | Foreground color (hex, rgb(), or hsl()). |
{
"type": "object",
"required": [
"fg",
"bg"
],
"properties": {
"bg": {
"type": "string",
"description": "Background color (hex, rgb(), or hsl())."
},
"fg": {
"type": "string",
"description": "Foreground color (hex, rgb(), or hsl())."
}
}
}Convert code between text formats (e.g. JSON↔YAML, CSS↔SCSS). Pure text transformation: the source is parsed and re-serialized, never executed and never stored. Use list_code_converters for valid from/to ids and per-converter options. Rate limit: 30 calls/min per IP.
| Argument | Type | Description |
|---|---|---|
| to* | string | Target format id. |
| code* | string | Source code to convert. |
| from* | string | Source format id (see list_code_converters). |
| options | object | Per-converter options (see optionsSchema in list_code_converters). |
{
"type": "object",
"required": [
"code",
"from",
"to"
],
"properties": {
"to": {
"type": "string",
"description": "Target format id."
},
"code": {
"type": "string",
"description": "Source code to convert."
},
"from": {
"type": "string",
"description": "Source format id (see list_code_converters)."
},
"options": {
"type": "object",
"description": "Per-converter options (see optionsSchema in list_code_converters)."
}
}
}Detect the language/format of a code snippet. Static analysis only — the snippet is never executed and never stored.
| Argument | Type | Description |
|---|---|---|
| code* | string | Snippet to inspect. Max 200,000 chars. |
{
"type": "object",
"required": [
"code"
],
"properties": {
"code": {
"type": "string",
"description": "Snippet to inspect. Max 200,000 chars."
}
}
}Extract a dominant-color palette from an image. Send either a public image_url or image_base64 (base64/data-URI, e.g. a local screenshot). The image is processed in memory and never stored. Each color comes back with its hex, rgb, hsl, share of the image, and the closest human color name — a named palette in one call. Rate limit: 10 calls/min per IP.
| Argument | Type | Description |
|---|---|---|
| mode | string | Palette mode: "balanced" (default), "vibrant", or "muted". |
| count | integer | How many colors to return (2–16, default 8). |
| image_url | string | Public URL of the image to pull the palette from. Provide either this or image_base64. |
| image_base64 | string | Base64-encoded image (raw base64 or a data:image/...;base64 URI), max 10 MB decoded — use this to send a local file/screenshot without hosting it. Provide either this or image_url. |
{
"type": "object",
"properties": {
"mode": {
"type": "string",
"description": "Palette mode: \"balanced\" (default), \"vibrant\", or \"muted\"."
},
"count": {
"type": "integer",
"description": "How many colors to return (2–16, default 8)."
},
"image_url": {
"type": "string",
"description": "Public URL of the image to pull the palette from. Provide either this or image_base64."
},
"image_base64": {
"type": "string",
"description": "Base64-encoded image (raw base64 or a data:image/...;base64 URI), max 10 MB decoded — use this to send a local file/screenshot without hosting it. Provide either this or image_url."
}
}
}Calculate a fluid CSS clamp() expression for responsive sizing between two viewport widths. Pure calculation — returns a CSS snippet, writes and stores nothing.
| Argument | Type | Description |
|---|---|---|
| root | number | Root font-size in px for rem conversion (default 16). |
| unit | string | Output unit (default rem). |
| max_fs* | number | Maximum size in px. |
| max_vw | number | Viewport width at max_fs (default 1440). |
| min_fs* | number | Minimum size in px. |
| min_vw | number | Viewport width at min_fs (default 320). |
{
"type": "object",
"required": [
"min_fs",
"max_fs"
],
"properties": {
"root": {
"type": "number",
"description": "Root font-size in px for rem conversion (default 16)."
},
"unit": {
"enum": [
"px",
"rem",
"both"
],
"type": "string",
"description": "Output unit (default rem)."
},
"max_fs": {
"type": "number",
"description": "Maximum size in px."
},
"max_vw": {
"type": "number",
"description": "Viewport width at max_fs (default 1440)."
},
"min_fs": {
"type": "number",
"description": "Minimum size in px."
},
"min_vw": {
"type": "number",
"description": "Viewport width at min_fs (default 320)."
}
}
}Generate tints and shades for a base color (lighter/darker steps) with hex values.
| Argument | Type | Description |
|---|---|---|
| hex* | string | Base color in hex, rgb(), or hsl(). |
| step | string | Step percentage (default 10). |
| limit | integer | Cap on tints/shades (default fills to ~100%). |
{
"type": "object",
"required": [
"hex"
],
"properties": {
"hex": {
"type": "string",
"description": "Base color in hex, rgb(), or hsl()."
},
"step": {
"enum": [
"5",
"10",
"20",
"25"
],
"type": "string",
"description": "Step percentage (default 10)."
},
"limit": {
"type": "integer",
"maximum": 20,
"minimum": 1,
"description": "Cap on tints/shades (default fills to ~100%)."
}
}
}Get full metadata for one font family by slug: styles, weights, axes, license, subsets and download/CSS URLs.
| Argument | Type | Description |
|---|---|---|
| slug* | string | Family slug, e.g. 'inter', 'playfair-display'. |
{
"type": "object",
"required": [
"slug"
],
"properties": {
"slug": {
"type": "string",
"description": "Family slug, e.g. 'inter', 'playfair-display'."
}
}
}Return the direct ZIP download URL for a font family (all styles + a ready fonts.css). Does NOT download — hand the URL to the user or fetch it separately.
| Argument | Type | Description |
|---|---|---|
| slug* | string | Family slug, e.g. 'inter'. |
{
"type": "object",
"required": [
"slug"
],
"properties": {
"slug": {
"type": "string",
"description": "Family slug, e.g. 'inter'."
}
}
}List every font file (weight/italic/format + direct woff2/ttf URL) for a family — handy for building custom @font-face rules.
| Argument | Type | Description |
|---|---|---|
| slug* | string | Family slug, e.g. 'inter'. |
{
"type": "object",
"required": [
"slug"
],
"properties": {
"slug": {
"type": "string",
"description": "Family slug, e.g. 'inter'."
}
}
}Generate ready-to-use @font-face CSS for a family spec (Google-Fonts-compatible), e.g. "inter:wght@400,700" or a variable range "inter:[email protected]". Returns CSS text.
| Argument | Type | Description |
|---|---|---|
| family* | string | Family spec, e.g. "inter:wght@400,700" or "inter:[email protected]". |
| display | string | font-display value (default swap). |
{
"type": "object",
"required": [
"family"
],
"properties": {
"family": {
"type": "string",
"description": "Family spec, e.g. \"inter:wght@400,700\" or \"inter:[email protected]\"."
},
"display": {
"enum": [
"swap",
"auto",
"block",
"fallback",
"optional"
],
"type": "string",
"description": "font-display value (default swap)."
}
}
}Get one color palette by id: its colors (hex), name/derived title, mood, harmony, temperature and tags.
| Argument | Type | Description |
|---|---|---|
| id* | integer | Palette id. |
{
"type": "object",
"required": [
"id"
],
"properties": {
"id": {
"type": "integer",
"description": "Palette id."
}
}
}Get one SCSS mixin by id: full source, parameters and usage example.
| Argument | Type | Description |
|---|---|---|
| id* | string | Mixin id (kebab-case), e.g. 'centerer', 'media-breakpoint-up'. |
{
"type": "object",
"required": [
"id"
],
"properties": {
"id": {
"type": "string",
"description": "Mixin id (kebab-case), e.g. 'centerer', 'media-breakpoint-up'."
}
}
}List available code converters with their from/to ids and per-converter option schemas.
No arguments.
{
"type": "object",
"properties": {}
}List the SCSS mixin catalog (id, title, short description), optionally filtered by group or search.
| Argument | Type | Description |
|---|---|---|
| group | string | e.g. Bootstrap, Project, Pattern, Placeholder. |
| fields | string | Detail level (default summary). |
| search | string | Fuzzy substring across id/title/short/desc. |
{
"type": "object",
"properties": {
"group": {
"type": "string",
"description": "e.g. Bootstrap, Project, Pattern, Placeholder."
},
"fields": {
"enum": [
"summary",
"full"
],
"type": "string",
"description": "Detail level (default summary)."
},
"search": {
"type": "string",
"description": "Fuzzy substring across id/title/short/desc."
}
}
}List the available SVG optimization presets and what each one does.
No arguments.
{
"type": "object",
"properties": {}
}Minify or beautify JS, CSS, HTML, SVG, JSON or XML text. Set type=auto to sniff the language. The code is only parsed and re-printed — never executed and never stored. Rate limit: 30 calls/min per IP.
| Argument | Type | Description |
|---|---|---|
| code* | string | Source code to transform. |
| mode | string | Default minify. |
| type* | string | Source language, or 'auto' to sniff. |
| keep_license | boolean | Preserve /*! ... */ license comments when minifying. |
{
"type": "object",
"required": [
"code",
"type"
],
"properties": {
"code": {
"type": "string",
"description": "Source code to transform."
},
"mode": {
"enum": [
"minify",
"beautify"
],
"type": "string",
"description": "Default minify."
},
"type": {
"enum": [
"js",
"css",
"html",
"svg",
"json",
"xml",
"auto"
],
"type": "string",
"description": "Source language, or 'auto' to sniff."
},
"keep_license": {
"type": "boolean",
"description": "Preserve /*! ... */ license comments when minifying."
}
}
}Get the closest human-readable name for one or more colors. Pass a single hex or several comma-separated (e.g. "#3b82f6,#000,#ff7f50"); returns each input with its nearest color name, the reference hex, an exact-match flag and the perceptual distance.
| Argument | Type | Description |
|---|---|---|
| hex* | string | A hex color, or several comma-separated (e.g. "#3b82f6,#000,#ff7f50"). Up to 100 at once. |
{
"type": "object",
"required": [
"hex"
],
"properties": {
"hex": {
"type": "string",
"description": "A hex color, or several comma-separated (e.g. \"#3b82f6,#000,#ff7f50\"). Up to 100 at once."
}
}
}Optimize/clean SVG markup (SVGO). Pure markup transformation — nothing is executed or stored. Returns minified SVG plus before/after sizes. Rate limit: 30 calls/min per IP.
| Argument | Type | Description |
|---|---|---|
| svg* | string | SVG source. Max 500,000 chars. |
| preset | string | Optimization preset (default balanced). |
{
"type": "object",
"required": [
"svg"
],
"properties": {
"svg": {
"type": "string",
"description": "SVG source. Max 500,000 chars."
},
"preset": {
"enum": [
"safe",
"balanced",
"aggressive"
],
"type": "string",
"description": "Optimization preset (default balanced)."
}
}
}Identify which font is used in an image. Powered by our OWN CNN embedding model, trained on the jinero font catalog — it matches fonts by visual shape/style, so it needs NO OCR and NO text (works for Latin and Cyrillic). Send a tight crop of one line of text as either image_url (public URL) or image_base64 (base64/data-URI, e.g. a local screenshot). The image is processed in memory and deleted immediately — never stored. Returns the most visually similar font families with scores. Typically 0.3-1.7 s (an OCR-assisted rerank of top candidates engages when retrieval is uncertain). Rate limit: 5 calls/min per IP (model inference is compute-heavy).
| Argument | Type | Description |
|---|---|---|
| top_k | integer | Number of font matches to return (3–20, default 8). |
| image_url | string | Public URL of an image — a tight crop of one line of text. Provide either this or image_base64. Recognition is by visual shape (no OCR/text needed); Latin & Cyrillic supported. |
| image_base64 | string | Base64-encoded image (raw base64 or a data:image/...;base64 URI), max 8 MB decoded — use this to send a local file/screenshot without hosting it. Provide either this or image_url. |
{
"type": "object",
"properties": {
"top_k": {
"type": "integer",
"maximum": 20,
"minimum": 3,
"description": "Number of font matches to return (3–20, default 8)."
},
"image_url": {
"type": "string",
"description": "Public URL of an image — a tight crop of one line of text. Provide either this or image_base64. Recognition is by visual shape (no OCR/text needed); Latin & Cyrillic supported."
},
"image_base64": {
"type": "string",
"description": "Base64-encoded image (raw base64 or a data:image/...;base64 URI), max 8 MB decoded — use this to send a local file/screenshot without hosting it. Provide either this or image_url."
}
}
}Search the free font catalog by name, category, style tags, language coverage, variable/monospace flags and style count. Returns a paginated list of families.
| Argument | Type | Description |
|---|---|---|
| name | string | Fuzzy name match. |
| page | integer | Page number. |
| sort | string | Sort direction. |
| langs | string | Comma-separated language codes, e.g. 'latin,cyrillic' — ALL must be supported. |
| order | string | Sort field, default 'likes'. |
| style | string | Comma-separated style tags, e.g. 'handwriting,condensed' — ALL must match. One of: handwriting, script, display, slab, rounded, condensed, expanded, stencil, pixel, blackletter, outline, retro. |
| category | string | Comma-separated categories, e.g. 'serif,sans'. |
| per_page | integer | Results per page (default 24). |
| variable | boolean | Only variable fonts. |
Search the color-palette catalog by name, tone, temperature, mood, harmony, exact color count and tags. Returns a paginated list.
| Argument | Type | Description |
|---|---|---|
| mood | string | e.g. pastel, muted, earthy, vibrant, monochrome. |
| name | string | Fuzzy name match. |
| page | integer | Page number. |
| tags | array | Tag slugs — ALL must match (AND). |
| tone | string | Overall tone. |
| order | string | Sort order (default newest). |
| harmony | string | e.g. analogous, complementary, triadic, monochromatic, split-complementary, tetradic. |
| per_page | integer | Results per page (default 24). |
| color_count | integer | Exact number of colors. |
| temperature | string |
Encode an SVG (or fetched image) as a CSS-ready data: URI. Provide either raw svg or a url. Rate limit: 30 calls/min per IP.
| Argument | Type | Description |
|---|---|---|
| svg | string | Raw SVG markup. Mutually exclusive with url. |
| url | string | Public image URL the server will fetch. |
| quotes | string | Quote style for the data URI (default double). |
| encoding | string | Defaults: utf8 for SVG, base64 for raster. |
{
"type": "object",
"properties": {
"svg": {
"type": "string",
"description": "Raw SVG markup. Mutually exclusive with url."
},
"url": {
"type": "string",
"description": "Public image URL the server will fetch."
},
"quotes": {
"enum": [
"single",
"double"
],
"type": "string",
"description": "Quote style for the data URI (default double)."
},
"encoding": {
"enum": [
"utf8",
"base64"
],
"type": "string",
"description": "Defaults: utf8 for SVG, base64 for raster."
}
}
}| monospace | boolean | Only monospace fonts. |
| styles_max | integer | Maximum number of styles. |
| styles_min | integer | Minimum number of styles. |
{
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Fuzzy name match."
},
"page": {
"type": "integer",
"minimum": 1,
"description": "Page number."
},
"sort": {
"enum": [
"asc",
"desc"
],
"type": "string",
"description": "Sort direction."
},
"langs": {
"type": "string",
"description": "Comma-separated language codes, e.g. 'latin,cyrillic' — ALL must be supported."
},
"order": {
"enum": [
"likes",
"downloads",
"views",
"name",
"created_at"
],
"type": "string",
"description": "Sort field, default 'likes'."
},
"style": {
"type": "string",
"description": "Comma-separated style tags, e.g. 'handwriting,condensed' — ALL must match. One of: handwriting, script, display, slab, rounded, condensed, expanded, stencil, pixel, blackletter, outline, retro."
},
"category": {
"type": "string",
"description": "Comma-separated categories, e.g. 'serif,sans'."
},
"per_page": {
"type": "integer",
"maximum": 100,
"minimum": 1,
"description": "Results per page (default 24)."
},
"variable": {
"type": "boolean",
"description": "Only variable fonts."
},
"monospace": {
"type": "boolean",
"description": "Only monospace fonts."
},
"styles_max": {
"type": "integer",
"description": "Maximum number of styles."
},
"styles_min": {
"type": "integer",
"description": "Minimum number of styles."
}
}
}| Color temperature. |
{
"type": "object",
"properties": {
"mood": {
"type": "string",
"description": "e.g. pastel, muted, earthy, vibrant, monochrome."
},
"name": {
"type": "string",
"description": "Fuzzy name match."
},
"page": {
"type": "integer",
"minimum": 1,
"description": "Page number."
},
"tags": {
"type": "array",
"description": "Tag slugs — ALL must match (AND)."
},
"tone": {
"enum": [
"light",
"dark",
"mixed"
],
"type": "string",
"description": "Overall tone."
},
"order": {
"enum": [
"newest",
"popular",
"name"
],
"type": "string",
"description": "Sort order (default newest)."
},
"harmony": {
"type": "string",
"description": "e.g. analogous, complementary, triadic, monochromatic, split-complementary, tetradic."
},
"per_page": {
"type": "integer",
"maximum": 100,
"minimum": 1,
"description": "Results per page (default 24)."
},
"color_count": {
"type": "integer",
"maximum": 10,
"minimum": 2,
"description": "Exact number of colors."
},
"temperature": {
"enum": [
"warm",
"cool",
"neutral"
],
"type": "string",
"description": "Color temperature."
}
}
}