Branding · English

Design system generator — read a site, get tokens, export PDF & Markdown

Paste a URL or drop a screenshot. Krymp reads the colours, fonts, sizes, spacing, corners and shadows and builds a complete, editable design system.

Visa på svenska (Swedish) →

Open the design system tool
Lokalt i din webbläsareFilen lämnar aldrig enhetenInget konto · ingen e‑post0 kr · inga annonser

Note: The tool UI is in Swedish, but the flow is three buttons: read, adjust, download.

A design system is only useful when everyone can see it. This tool reads an existing site or screenshot and writes the result down for you: every colour gets a job, every text size a place in a scale, and every corner and shadow a name.

The PDF is the version you share with colleagues and clients. The Markdown file is the version you paste into a code project or an AI assistant, and the CSS file drops straight into a stylesheet.

Private. Files are processed in your browser. Nothing is uploaded.

Free, unlimited. No account, no watermark, no daily caps.

How it works

  1. 1Point at a source. Paste a website URL, drop a screenshot, or upload a PDF.
  2. 2Review the tokens. Colours with roles, type scale, spacing, radii and shadows are filled in for you.
  3. 3Adjust what's off. Change any value and watch the live preview update in light and dark mode.
  4. 4Download. Get a polished PDF, an AI-ready Markdown file, CSS variables, or all of it in one zip.

FAQ

What does the design system generator read from a website?
It fetches the page and its stylesheets and reads brand colours, heading and body fonts, font sizes, corner radii, box shadows and spacing values, then turns them into a token set with roles.
Is anything uploaded?
Images and PDFs are read locally in your browser. Only a website URL is sent to our server so the page can be fetched — the files never leave your device.
What is in the Markdown file?
Tables for colour tokens, the type scale, spacing, radii, shadows and borders, a contrast report, plain-language rules, and a CSS custom-property block. It's written to be pasted straight into an AI tool or a repo.
Does it check accessibility?
Yes. The most important foreground/background pairs are scored against WCAG AA (4.5:1) and flagged when contrast is too low.
Is it free?
Yes, free and without an account.

Related