cardd.cc

Overview

cardd.cc generates clean, customizable SVG badges for your README, documentation, or any web page. built for the open web. free forever.

Available Badges

Static badge

Any label|value pair you define

cardd.cc/badge/*

npm version

Latest version from the npm registry

cardd.cc/npm/v/:pkg

npm downloads

Weekly downloads from npm

cardd.cc/npm/d/:pkg

npm bundle size

Minified + gzipped size from Bundlephobia

cardd.cc/npm/size/:pkg

npm type definitions

Whether the package includes type definitions

cardd.cc/npm/types/:pkg

GitHub stars

Star count from the GitHub API

cardd.cc/gh/stars/:owner/:repo

GitHub issues

Open issue count from the GitHub API

cardd.cc/gh/issues/:owner/:repo

GitHub last commit

Time since last commit from the GitHub API

cardd.cc/gh/last-commit/:owner/:repo

Tangled Spindle Status

CI status for a tangled spindle service

cardd.cc/tg/spindle/status/:repoDid

OpenStatus status

Live status from an OpenStatus status page

cardd.cc/openstatus/status/:slug

See the API Reference for full details on each route, response codes, and error behavior.

Customization

All routes that return badges accept the following query parameters. Any combination of params can be used together.

Background color

?bg={hex} — Six- or three-character hex color without the #. Named CSS colors (e.g. red, dodgerblue) are also supported. Defaults to 2d2d2e.

?bg=2ea44f

?bg=red

Text color

?color={hex} — Six- or three-character hex without the #, or a named CSS color. Defaults to fff.

?color=000

Border radius

?radius={px} — Integer pixel value for corner rounding. Use 0 for sharp corners. Defaults to 4.

?radius=0

?radius=12

Border

?border={width}+{style}+{color} — A plus-delimited border shorthand. Width is an integer in pixels, style is any valid CSS border-style (solid, dashed, dotted), and color is a hex value. Defaults to no border.

?border=2+solid+f00

?border=1+dashed+888

Border color (shortcut)

?borderColor={hex} — Sets only the border color without enabling a border. Combine with ?border=2 for quick width+color combinations. Defaults to 2d2d2e.

?border=2&borderColor=f00

Font

?font={name} — Any font available on Google Fonts. Fonts are loaded on-demand and cached for 30 days. Defaults to Datatype (a bundled pixel-style monospace). Popular options include Inter, Fira+Code, Roboto, and JetBrains+Mono.

?font=Inter

?font=JetBrains+Mono

Theme

?theme=light|dark|auto — Switch between dark and light presets.auto renders both themes and uses prefers-color-scheme CSS inside the SVG to toggle at runtime. Explicit ?bg or?color are ignored with auto. Defaults to dark.

?theme=light

?theme=auto

Size

?size=base|large — Render a larger version of the badge.large scales the badge 1.2x while preserving the aspect ratio. Defaults to base.

?size=large

Reference table

Param	Format	Default	Example
`bg`	hex \| named color	`2d2d2e`	`bg=2ea44f`
`color`	hex \| named color	`fff`	`color=000`
`radius`	integer (px)	`4`	`radius=0`
`border`	`width+style+color`	none	`border=2+solid+f00`
`borderColor`	hex	`2d2d2e`	`borderColor=f00`
`font`	Google Fonts name	`Datatype`	`font=Inter`
`theme`	`light` \| `dark` \| `auto`	`dark`	`theme=light`
`size`	`base` \| `large`	`base`	`size=large`