stole.si Scan a site

developers

Exports.

Every scan comes with four files built from the same measurements. Download them from any report, or fetch them with the API. The samples on this page are real files from stripe.com.

FileWhat it isUse it with
DESIGN.mdThe design system in plain Markdown, with rules for AI agentsClaude Code, Cursor, Codex, Copilot
tokens.jsonDesign tokens in the standard Design Tokens formatStyle Dictionary, Terrazzo
tokens.cssA :root block of CSS variablesAny stylesheet
tailwind.config.jsA Tailwind themeTailwind v3 and v4

DESIGN.md

A description of the whole design system, written for AI coding agents. It opens with a one-line summary and rules for the agent: use the tokens, don’t invent new values, keep text readable. Then it lists the colors and what each one is for, the fonts and type scale, spacing, corner radius, shadows, layout widths, components such as buttons, inputs, cards and links, the tech stack, and the site’s own CSS variables.

Put it in your project and tell your agent:

Read DESIGN.md and build the pricing page with those tokens. Don't invent new colors.

Download the stripe.com sample

tokens.json

The tokens in the Design Tokens Format Module 2025.10, the format design tools are standardizing on. Colors are sRGB values with a hex fallback, sizes have a separate number and unit, and each text style is a typography token that points to its font family. Groups: color, font, typography, spacing, radius, shadow, breakpoint and size. The measured button, input and card styles are under $extensions["si.stole"].

"accent": {
  "$type": "color",
  "$value": {
    "colorSpace": "srgb",
    "components": [0.3255, 0.2275, 0.9922],
    "hex": "#533afd"
  },
  "$description": "Primary buttons, links and highlights"
}

Each file is tested to build with Style Dictionary and to pass Terrazzo’s strict format check, so you can turn it into code for any platform. Download the stripe.com sample

tokens.css

The same values as CSS variables in one :root block, ready to paste into any stylesheet: --color-* for colors, --font-* for font stacks, --text-* with matching --leading-*, --tracking-* and --weight-* for the type scale, then --space-*, --radius-* and --shadow-*.

.button {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: var(--weight-base) var(--text-base)/var(--leading-base) var(--font-body);
}

Every file has the color roles background, surface, text, muted, accent and on-accent when the page has them. Scale steps depend on the site, so check the file for the exact names. Download the stripe.com sample

tailwind.config.js

A Tailwind CSS v3 config that extends the theme with the site’s colors, font family, font sizes, spacing, border radius, shadows, screens and container width. Classes like bg-accent, text-accent-foreground and text-muted work right away.

In Tailwind v4, load it from your CSS:

@import "tailwindcss";
@config "./tailwind.config.js";

Both versions are tested to compile with the right values. Download the stripe.com sample

Get them for any site

WhereAddress
A reportThe download buttons on https://www.stole.si/s/stripe.com
Direct linkhttps://www.stole.si/export/tokens.json/stripe.com
APIhttps://www.stole.si/api/v1/export/tokens.json?url=stripe.com
MCPThe MCP server hands design tokens straight to your AI app

What the numbers are